jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor codebase

Browse source 
All changes aim to clean up the codebase and eliminate unused or unnecessary code.
This commit is contained in:
Emil Gulamov 2024-02-15 00:17:43 +04:00
parent 2272b189de
commit 5881b7798b
21 changed files with 238 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/ContactSection.astro
View file

@ -85,10 +85,10 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
<ContactIconBlock
heading="Knowledgebase"
content="Browse through all of our knowledgebase articles."
link={true}
isLinkVisible={true}
linkTitle="Visit guides & tutorials"
linkURL="#"
arrow={true}
isArrowVisible={true}
><svg
class="mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400"
fill="none"
@ -107,10 +107,10 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
<ContactIconBlock
heading="FAQ"
content="Explore our FAQ for quick, clear answers to common queries."
link={true}
isLinkVisible={true}
linkTitle="Visit FAQ"
linkURL="#"
arrow={true}
isArrowVisible={true}
><svg
class="mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400"
fill="none"
@ -129,7 +129,7 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
<ContactIconBlock
heading="Visit our office"
content="UK ScrewFast"
address={true}
isAddressVisible={true}
addressContent="72 Union Terrace, E10 4PE London"
><svg
class="mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400"
@ -153,7 +153,7 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
<ContactIconBlock
heading="Contact us by email"
content="Prefer the written word? Drop us an email at"
link={true}
isLinkVisible={true}
linkTitle="support@screwfast.uk"
linkURL="#"
><svg

13
src/components/ui/blocks/AccordionItem.astro
View file

@ -11,10 +11,19 @@ interface Props {
const ACCORDION_CLASS_DEFAULT = "hs-accordion pb-3 active";
const ACCORDION_CLASS_COLLAPSED = "hs-accordion pt-6 pb-3";
const ACCORDION_CONTENT_CLASS = "hs-accordion-content w-full overflow-hidden transition-[height] duration-300";
function getAccordionClass(first: boolean) {
function getAccordionClass(first: boolean = false) {
return first ? ACCORDION_CLASS_DEFAULT : ACCORDION_CLASS_COLLAPSED;
}
const SVG_PARAMS = { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" };
const SVG_PARAMS = {
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
};
---
<div

48
src/components/ui/blocks/ContactIconBlock.astro
View file

@ -2,24 +2,38 @@
const {
heading,
content,
address,
isAddressVisible,
addressContent,
link,
isLinkVisible,
linkTitle,
linkURL,
arrow,
isArrowVisible,
} = Astro.props;
interface Props {
heading?: string;
content?: string;
address?: boolean;
isAddressVisible?: boolean;
addressContent?: string;
link?: boolean;
isLinkVisible?: boolean;
linkTitle?: string;
linkURL?: string;
arrow?: boolean;
isArrowVisible?: boolean;
}
const arrowSVG: string = `<svg
class="h-4 w-4 flex-shrink-0 transition ease-in-out group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
/>
</svg>`
---
<div class="flex gap-x-7 py-6">
@ -30,32 +44,20 @@ interface Props {
</h3>
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">{content}</p>
{
address ? (
isAddressVisible ? (
<p class="mt-1 text-sm italic text-neutral-500">{addressContent}</p>
) : null
}
{
link ? (
isLinkVisible ? (
<a
class="group mt-2 inline-flex items-center gap-x-2 rounded-lg text-sm font-medium text-zinc-600 outline-none ring-zinc-500 transition duration-300 hover:text-zinc-800 focus-visible:ring dark:text-zinc-400 dark:ring-zinc-200 dark:hover:text-zinc-200 dark:focus:outline-none dark:focus:ring-1 "
href={linkURL}
>
{linkTitle}
{arrow ? (
<svg
class="h-4 w-4 flex-shrink-0 transition ease-in-out group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
/>
</svg>
) : null}
{isArrowVisible ?
<Fragment set:html={arrowSVG} />
: null}
</a>
) : null
}

9
src/components/ui/blocks/IconBlock.astro
View file

@ -5,18 +5,19 @@ interface Props {
heading?: string;
content?: string;
}
const headingClasses = "text-balance text-lg font-bold text-gray-800 dark:text-neutral-200";
const contentClasses = "mt-1 text-pretty text-neutral-700 dark:text-neutral-300";
---
<div class="flex gap-x-5">
<slot />
<div class="grow">
<h3
class="text-balance text-lg font-bold text-gray-800 dark:text-neutral-200"
>
class={headingClasses}>
{heading}
</h3>
<p class="mt-1 text-pretty text-neutral-700 dark:text-neutral-300">
{content}
<p class={contentClasses}>{content}
</p>
</div>
</div>

6
src/components/ui/blocks/LeftSection.astro
View file

@ -2,13 +2,13 @@
import { Image } from "astro:assets";
import PrimaryCTA from "../buttons/PrimaryCTA.astro";
const { title, subTitle, btn, btnTitle, btnURL, img, imgAlt } =
const { title, subTitle, btnExists, btnTitle, btnURL, img, imgAlt } =
Astro.props;
interface Props {
title: string;
subTitle: string;
btn?: boolean;
btnExists?: boolean;
btnTitle?: string;
btnURL?: string;
img: any;
@ -37,6 +37,6 @@ interface Props {
>
{subTitle}
</p>
{btn ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null}
{btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null}
</div>
</section>

6
src/components/ui/blocks/MainSection.astro
View file

@ -1,12 +1,12 @@
---
import PrimaryCTA from "../buttons/PrimaryCTA.astro";
const { title, subTitle, btn, btnTitle, btnURL } = Astro.props;
const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
interface Props {
title: string;
subTitle: string;
btn?: boolean;
btnExists?: boolean;
btnTitle?: string;
btnURL?: string;
}
@ -27,7 +27,7 @@ interface Props {
{subTitle}
</p>
{
btn ? (
btnExists ? (
<div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
<PrimaryCTA title={btnTitle} url={btnURL} />
</div>

6
src/components/ui/blocks/RightSection.astro
View file

@ -5,7 +5,7 @@ import PrimaryCTA from "../buttons/PrimaryCTA.astro";
const {
title,
subTitle,
btn,
btnExists,
btnTitle,
btnURL,
single,
@ -18,7 +18,7 @@ const {
interface Props {
title: string;
subTitle: string;
btn?: boolean;
btnExists?: boolean;
btnTitle?: string;
btnURL?: string;
single?: boolean;
@ -43,7 +43,7 @@ interface Props {
>
{subTitle}
</p>
{btn ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null}
{btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null}
</div>
{
single ? (

8
src/components/ui/blocks/TabContent.astro
View file

@ -12,6 +12,10 @@ interface Props {
second?: boolean;
}
const firstClass = first ? "" : "hidden";
const secondClass = second ? "shadow-xl aspect-[5/4] bg-neutral-300 dark:bg-neutral-600 object-cover p-3 lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]" :
"shadow-xl aspect-[3/2] object-cover lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]";
/*
first: This prop should be set to true for the initial TabContent component in your list to ensure that it's visible when the page first loads. All subsequent TabContent components should omit this prop or set it to false.
@ -27,13 +31,13 @@ Example:
<div
id={id}
role="tabpanel"
class={`${first ? "" : "hidden"}`}
class={firstClass}
aria-labelledby={aria}
>
<Image
src={src}
alt={alt}
class={`${second ? "shadow-xl aspect-[5/4] bg-neutral-300 dark:bg-neutral-600 object-cover p-3 lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]" : "shadow-xl aspect-[3/2] object-cover lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]"}`}
class={secondClass}
draggable={"false"}
format={"avif"}
/>

3
src/components/ui/blocks/TabNav.astro
View file

@ -9,6 +9,7 @@ interface Props {
content?: string;
first?: boolean;
}
const BUTTON_CLASS = "dark:hover:bg-neutral-700 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:hs-tab-active:bg-neutral-700/60 md:p-5"
/*
first: This prop should be set to true for the initial TabNav component in your list to ensure that it's visible when the page first loads. All subsequent TabNav components should omit this prop or set it to false.
@ -22,7 +23,7 @@ Example:
<button
type="button"
class={`${first ? "active dark:hover:bg-neutral-700 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:hs-tab-active:bg-neutral-700/60 md:p-5" : "dark:hover:bg-neutral-700 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:hs-tab-active:bg-neutral-700/60 md:p-5"}`}
class={`${first ? "active " : ""}${BUTTON_CLASS}`}
id={id}
data-hs-tab={dataTab}
aria-controls={aria}

16
src/components/ui/buttons/AuthBtn.astro
View file

@ -4,10 +4,16 @@ const { title } = Astro.props;
interface Props {
title: string;
}
---
const baseClasses = "inline-flex w-full items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-700 focus-visible:ring outline-none transition duration-300";
const borderClasses = "border border-transparent";
const bgColorClasses = "bg-yellow-400 dark:focus:outline-none";
const hoverClasses = "hover:bg-yellow-500";
const fontSizeClasses = "2xl:text-base";
const disabledClasses = "disabled:pointer-events-none disabled:opacity-50";
const ringClasses = "ring-zinc-500 dark:ring-zinc-200";
---
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-x-2 rounded-lg border border-transparent bg-yellow-400 px-4 py-3 text-sm font-bold text-neutral-700 hover:bg-yellow-500 disabled:pointer-events-none disabled:opacity-50 dark:focus:outline-none 2xl:text-base focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200 transition duration-300"
>{title}</button
>
type="submit"
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${fontSizeClasses} ${disabledClasses} ${ringClasses}`}
>{title}</button>

26
src/components/ui/buttons/GithubBtn.astro
View file

@ -5,15 +5,14 @@ interface Props {
title?: string;
url?: string;
}
---
<a
class="group inline-flex items-center justify-center gap-x-3 rounded-full border border-transparent bg-yellow-400 px-4 py-3 text-center text-sm font-medium text-neutral-700 outline-none ring-zinc-500 transition duration-300 hover:shadow-2xl hover:shadow-yellow-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none 2xl:text-base"
href={url}
target="_blank"
rel="noopener noreferrer"
>
<svg
const baseClasses = "group inline-flex items-center justify-center gap-x-3 rounded-full px-4 py-3 text-center text-sm font-medium text-neutral-700 ring-zinc-500 focus-visible:ring transition duration-300 outline-none";
const borderClasses = "border border-transparent";
const bgColorClasses = "bg-yellow-400 dark:focus:outline-none";
const hoverClasses = "hover:shadow-2xl hover:shadow-yellow-500"
const fontSizeClasses = "2xl:text-base";
const ringClasses = "dark:ring-zinc-200";
const githubSVG = `<svg
class="w-4.5 h-4.5 tarnsition flex-shrink-0 text-neutral-700 duration-300 group-hover:-translate-y-1"
xmlns="http://www.w3.org/2000/svg"
width="16"
@ -24,6 +23,15 @@ interface Props {
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
</svg>`;
---
<a
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${fontSizeClasses} ${ringClasses}`}
href={url}
target="_blank"
rel="noopener noreferrer"
>
<Fragment set:html={githubSVG} />
{title}
</a>

21
src/components/ui/buttons/GoogleBtn.astro
View file

@ -4,13 +4,13 @@ const { title } = Astro.props;
interface Props {
title: string;
}
---
<button
type="button"
class="inline-flex w-full items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm font-medium text-neutral-600 shadow-sm transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-900 focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200"
>
<svg
const baseClasses = "inline-flex w-full items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm dark:text-neutral-400 font-medium text-neutral-600 shadow-sm transition duration-300 focus-visible:ring outline-none";
const borderClasses = "border border-neutral-200 dark:border-neutral-700";
const bgColorClasses = "bg-neutral-50 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-900";
const disableClasses = "disabled:pointer-events-none disabled:opacity-50";
const ringClasses = "ring-zinc-500 dark:ring-zinc-200";
const googleSVG = `<svg
class="h-auto w-4"
width="46"
height="47"
@ -29,6 +29,13 @@ interface Props {
<path
d="M23.4694 9.07688C27.8699 9.07688 30.8622 10.9863 32.5344 12.5725L39.1645 6.11C35.0867 2.32063 29.8061 0 23.4694 0C14.287 0 6.36607 5.2875 2.49362 12.9544L10.0918 18.8588C11.9987 13.1894 17.25 9.07688 23.4694 9.07688Z"
fill="#EB4335"></path>
</svg>
</svg>`;
---
<button
type="button"
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${disableClasses} ${ringClasses}`}
>
<Fragment set:html={googleSVG} />
{title}
</button>

43
src/components/ui/buttons/LoginBtn.astro
View file

@ -4,26 +4,33 @@ const { title = "Log in" } = Astro.props;
interface Props {
title?: string;
}
---
<button
type="button"
class="flex items-center gap-x-2 text-base md:text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none md:my-6 md:border-s md:border-neutral-300 md:ps-6 2xl:text-base"
data-hs-overlay="#hs-toggle-between-modals-login-modal"
>
<svg
class="h-4 w-4 flex-shrink-0"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
const baseClasses = "flex items-center gap-x-2 text-base md:text-sm font-medium text-neutral-600 ring-zinc-500 transition duration-300 outline-none";
const hoverClasses = "hover:text-[#fa5a15] dark:hover:text-[#fb713b]";
const darkClasses = "dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:focus:outline-none";
const mdClasses = "md:my-6 md:border-s md:border-neutral-300 md:ps-6";
const txtSizeClasses = "2xl:text-base";
const userSVG = `<svg
class="h-4 w-4 flex-shrink-0"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</svg>`;
---
<button
type="button"
class={`${baseClasses} ${hoverClasses} ${darkClasses} ${mdClasses} ${txtSizeClasses}`}
data-hs-overlay="#hs-toggle-between-modals-login-modal"
>
<Fragment set:html={userSVG} />
{title}
</button>
</button>

49
src/components/ui/buttons/PrimaryCTA.astro
View file

@ -2,27 +2,38 @@
const { title, url, noArrow } = Astro.props;
interface Props {
title?: string;
url?: string;
noArrow?: boolean;
title?: string;
url?: string;
noArrow?: boolean;
}
const baseClasses = "group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-semibold text-neutral-50 ring-zinc-500 transition duration-300 outline-none";
const borderClasses = "border border-transparent";
const bgColorClasses = "bg-[#fa5a15] hover:bg-[#e14d0b] active:bg-[#e14d0b] dark:focus:outline-none";
const disableClasses = "disabled:pointer-events-none disabled:opacity-50";
const fontSizeClasses = "2xl:text-base";
const ringClasses = "dark:ring-zinc-200";
const arrowSVG = `<svg
class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6"></path>
</svg>`;
---
<a
class="group inline-flex items-center justify-center gap-x-2 rounded-lg border border-transparent bg-[#fa5a15] px-4 py-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring active:bg-[#e14d0b] disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none 2xl:text-base"
href={url}
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses}`}
href={url}
>
{title}
{noArrow ? null : (
<svg
class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
>) }
</a>
{title}
{noArrow ? null :
<Fragment set:html={arrowSVG} />
}
</a>

22
src/components/ui/buttons/SecondaryCTA.astro
View file

@ -2,14 +2,24 @@
const { title, url } = Astro.props;
interface Props {
title?: string;
url?: string;
title?: string;
url?: string;
}
const baseClasses = "inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-center text-sm font-medium text-neutral-600 shadow-sm outline-none ring-zinc-500 transition duration-300";
const borderClasses = "border border-neutral-200";
const bgColorClasses = "bg-neutral-300";
const hoverClasses = "hover:bg-neutral-400/50 hover:text-neutral-600 active:text-neutral-700";
const disableClasses = "disabled:pointer-events-none disabled:opacity-50";
const fontSizeClasses = "2xl:text-base";
const ringClasses = "ring-zinc-500";
const darkClasses = "dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none";
---
<a
class="inline-flex items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-300 px-4 py-3 text-center text-sm font-medium text-neutral-600 shadow-sm outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-400/50 hover:text-neutral-600 focus-visible:ring active:text-neutral-700 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none 2xl:text-base"
href={url}
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses} ${darkClasses}`}
href={url}
>
{title}
</a>
{title}
</a>

36
src/components/ui/forms/LoginModal.astro
View file

@ -1,30 +1,24 @@
---
// Import the necessary dependencies from individual component files
import GoogleBtn from "../buttons/GoogleBtn.astro";
import AuthBtn from "../buttons/AuthBtn.astro";
import EmailInput from "./input/EmailInput.astro";
import PasswordInput from "./input/PasswordInput.astro";
import Checkbox from "./input/Checkbox.astro";
import AuthBtn from "../buttons/AuthBtn.astro";
import GoogleBtn from "../buttons/GoogleBtn.astro";
// Variables for customization of the LoginModal Component
// Modal identifier
const id = "hs-toggle-between-modals-login-modal";
// Main heading
const title: string = "Sign in";
// Sub-heading text
const subTitle: string = "Don't have an account yet?";
// Text for registration button
const registerBtn: string = "Sign up here";
// Target link for registration button
const registerBtnDataHS: string = "#hs-toggle-between-modals-register-modal";
// Modal identifier, Main heading, Sub-heading text, Text for registration button, Target link for registration button
const config = {
id: "hs-toggle-between-modals-login-modal",
title: "Sign in",
subTitle: "Don't have an account yet?",
registerBtn: "Sign up here",
registerBtnDataHS: "#hs-toggle-between-modals-register-modal"
};
---
<div
id={id}
id={config.id}
class="hs-overlay absolute start-0 top-0 z-50 hidden h-full w-full hs-overlay-backdrop-open:bg-neutral-900/90"
>
<div
@ -39,15 +33,15 @@ const registerBtnDataHS: string = "#hs-toggle-between-modals-register-modal";
<h1
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
>
{title}
{config.title}
</h1>
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
{subTitle}
{config.subTitle}
<button
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
data-hs-overlay={registerBtnDataHS}
data-hs-overlay={config.registerBtnDataHS}
>
{registerBtn}
{config.registerBtn}
</button>
</p>
</div>

35
src/components/ui/forms/RecoverModal.astro
View file

@ -1,26 +1,27 @@
---
// Import the necessary dependencies from individual component files
import AuthBtn from "../buttons/AuthBtn.astro";
import EmailInput from "./input/EmailInput.astro";
import AuthBtn from "../buttons/AuthBtn.astro";
// Variables to customize the RecoverModal Component
// Config object for customization of the RecoverModal Component
const config = {
// Modal identifier
id: "hs-toggle-between-modals-recover-modal",
// Modal identifier
const id = "hs-toggle-between-modals-recover-modal";
// Main heading
title: "Forgot password?",
// Main heading
const title: string = "Forgot password?";
// Sub-heading text
subTitle: "Remember your password?",
// Sub-heading text
const subTitle: string = "Remember your password?";
// Text and target link for the login button
const loginBtn: string = "Sign in here";
const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
// Text and target link for the login button
loginBtn: "Sign in here",
loginBtnDataHS: "#hs-toggle-between-modals-login-modal"
};
---
<div
id={id}
id={config.id}
class="hs-overlay absolute start-0 top-0 z-50 hidden h-full w-full hs-overlay-backdrop-open:bg-neutral-900/90"
>
<div
@ -35,15 +36,15 @@ const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
<h1
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
>
{title}
{config.title}
</h1>
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
{subTitle}
{config.subTitle}
<button
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
data-hs-overlay={loginBtnDataHS}
data-hs-overlay={config.loginBtnDataHS}
>
{loginBtn}
{config.loginBtn}
</button>
</p>
</div>

36
src/components/ui/forms/RegisterModal.astro
View file

@ -1,29 +1,29 @@
---
// Import the necessary dependencies from individual component files
import GoogleBtn from "../buttons/GoogleBtn.astro";
import AuthBtn from "../buttons/AuthBtn.astro";
import EmailInput from "./input/EmailInput.astro";
import PasswordInput from "./input/PasswordInput.astro";
import Checkbox from "./input/Checkbox.astro";
import GoogleBtn from "../buttons/GoogleBtn.astro";
import AuthBtn from "../buttons/AuthBtn.astro";
// Variables to customize the RegisterModal Component
const config = {
// Modal identifier
id: "hs-toggle-between-modals-register-modal",
// Modal identifier
const id = "hs-toggle-between-modals-register-modal";
// Main title
title: "Sign up",
// Main title
const title: string = "Sign up";
// Subtitle text
subTitle: "Already have an account?",
// Subtitle text
const subTitle: string = "Already have an account?";
// Text and target link for the login button
const loginBtn: string = "Sign in here";
const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
// Text and target link for the login button
loginBtn: "Sign in here",
loginBtnDataHS: "#hs-toggle-between-modals-login-modal"
};
---
<div
id={id}
id={config.id}
class="hs-overlay absolute start-0 top-0 z-50 hidden h-full w-full hs-overlay-backdrop-open:bg-neutral-900/90"
>
<div
@ -38,15 +38,15 @@ const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
<h1
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
>
{title}
{config.title}
</h1>
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
{subTitle}
{config.subTitle}
<button
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
data-hs-overlay={loginBtnDataHS}
data-hs-overlay={config.loginBtnDataHS}
>
{loginBtn}
{config.loginBtn}
</button>
</p>
</div>

13
src/components/ui/links/FooterSocialLink.astro
View file

@ -1,16 +1,15 @@
---
const { url } = Astro.props;
interface Props {
url: string;
}
const linkClass = "inline-flex h-10 w-10 items-center justify-center gap-x-2 rounded-lg border border-transparent text-sm font-bold text-neutral-700 outline-none ring-zinc-500 hover:bg-neutral-500/10 focus:outline-none focus:ring-1 focus:ring-zinc-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:hover:bg-neutral-50/10 dark:focus:outline-none"
---
<a
class="inline-flex h-10 w-10 items-center justify-center gap-x-2 rounded-lg border border-transparent text-sm font-bold text-neutral-700 outline-none ring-zinc-500 hover:bg-neutral-500/10 focus:outline-none focus:ring-1 focus:ring-zinc-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:hover:bg-neutral-50/10 dark:focus:outline-none"
href={url}
target="_blank"
rel="noopener noreferrer"
class={linkClass}
href={url}
target="_blank"
rel="noopener noreferrer"
>
<slot />
</a>
</a>

1
src/components/ui/links/NavLink.astro
View file

@ -16,6 +16,7 @@ If URL is '/' (home page), assign ID as 'home'
<a
id={url === "/" ? "home" : url.split("/")[1]}
href={url}
data-astro-prefetch
class="rounded-lg text-base font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-500 dark:focus:outline-none md:py-3 md:text-sm 2xl:text-base"
>
{name}

6
src/pages/services.astro
View file

@ -20,7 +20,7 @@ import underConstruction from "../images/under-construction.avif";
<MainSection
title="Uniting Expertise with Your Vision"
subTitle="At ScrewFast, we take pride in providing comprehensive solutions and exceptional service in the hardware and construction industry. Our experienced team is dedicated to supporting your project from inception to completion with a range of specialized services."
btn={true}
btnExists={true}
btnTitle="Schedule a Consultation"
btnURL="#"
/>
@ -36,7 +36,7 @@ import underConstruction from "../images/under-construction.avif";
<LeftSection
title="Transforming Designs into Reality"
subTitle="Our skilled craftsmen bring precision and excellence to every construction project. From minor installations to substantial structural work, ScrewFast offers reliable construction services to turn your plans into tangible outcomes. We ensure the highest standards of safety and workmanship, utilizing top-quality tools and materials from our extensive inventory."
btn={true}
btnExists={true}
btnTitle="Learn More"
btnURL="#"
img={beforeAfter}
@ -59,7 +59,7 @@ import underConstruction from "../images/under-construction.avif";
<RightSection
title="Crafting Bespoke Strategies for Unique Challenges"
subTitle="For our larger enterprise clients, ScrewFast offers custom solutions designed to meet specific industry challenges. By understanding your unique needs, we engineer tailored strategies aimed at optimizing your operations, enhancing efficiency, and driving your business forward."
btn={true}
btnExists={true}
btnTitle="Read more"
btnURL="#"
imgOne={progressBuilding}