diff --git a/src/components/ContactSection.astro b/src/components/ContactSection.astro index 3662a87..4fa192c 100644 --- a/src/components/ContactSection.astro +++ b/src/components/ContactSection.astro @@ -85,10 +85,10 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days."; + + ` ---
@@ -30,32 +44,20 @@ interface Props {

{content}

{ - address ? ( + isAddressVisible ? (

{addressContent}

) : null } { - link ? ( + isLinkVisible ? ( {linkTitle} - {arrow ? ( - - - - ) : null} + {isArrowVisible ? + + : null} ) : null } diff --git a/src/components/ui/blocks/IconBlock.astro b/src/components/ui/blocks/IconBlock.astro index ea8f14a..76a81f6 100644 --- a/src/components/ui/blocks/IconBlock.astro +++ b/src/components/ui/blocks/IconBlock.astro @@ -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"; ---

+ class={headingClasses}> {heading}

-

- {content} +

{content}

diff --git a/src/components/ui/blocks/LeftSection.astro b/src/components/ui/blocks/LeftSection.astro index 91b862f..76b2402 100644 --- a/src/components/ui/blocks/LeftSection.astro +++ b/src/components/ui/blocks/LeftSection.astro @@ -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}

- {btn ? : null} + {btnExists ? : null}
diff --git a/src/components/ui/blocks/MainSection.astro b/src/components/ui/blocks/MainSection.astro index b971e1e..f372aef 100644 --- a/src/components/ui/blocks/MainSection.astro +++ b/src/components/ui/blocks/MainSection.astro @@ -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}

{ - btn ? ( + btnExists ? (
diff --git a/src/components/ui/blocks/RightSection.astro b/src/components/ui/blocks/RightSection.astro index 0a957fa..db6a8e1 100644 --- a/src/components/ui/blocks/RightSection.astro +++ b/src/components/ui/blocks/RightSection.astro @@ -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}

- {btn ? : null} + {btnExists ? : null} { single ? ( diff --git a/src/components/ui/blocks/TabContent.astro b/src/components/ui/blocks/TabContent.astro index 4c285a3..5a60382 100644 --- a/src/components/ui/blocks/TabContent.astro +++ b/src/components/ui/blocks/TabContent.astro @@ -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:
{alt} diff --git a/src/components/ui/blocks/TabNav.astro b/src/components/ui/blocks/TabNav.astro index a1d8906..c1f49e6 100644 --- a/src/components/ui/blocks/TabNav.astro +++ b/src/components/ui/blocks/TabNav.astro @@ -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: + type="submit" + class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${fontSizeClasses} ${disabledClasses} ${ringClasses}`} +>{title} \ No newline at end of file diff --git a/src/components/ui/buttons/GithubBtn.astro b/src/components/ui/buttons/GithubBtn.astro index f0498ae..cc87cdb 100644 --- a/src/components/ui/buttons/GithubBtn.astro +++ b/src/components/ui/buttons/GithubBtn.astro @@ -5,15 +5,14 @@ interface Props { title?: string; url?: string; } ---- - - - + `; +--- + + + {title} diff --git a/src/components/ui/buttons/GoogleBtn.astro b/src/components/ui/buttons/GoogleBtn.astro index de18994..9178338 100644 --- a/src/components/ui/buttons/GoogleBtn.astro +++ b/src/components/ui/buttons/GoogleBtn.astro @@ -4,13 +4,13 @@ const { title } = Astro.props; interface Props { title: string; } ---- - diff --git a/src/components/ui/buttons/LoginBtn.astro b/src/components/ui/buttons/LoginBtn.astro index 7d36c92..1501993 100644 --- a/src/components/ui/buttons/LoginBtn.astro +++ b/src/components/ui/buttons/LoginBtn.astro @@ -4,26 +4,33 @@ const { title = "Log in" } = Astro.props; interface Props { title?: string; } ---- - + \ No newline at end of file diff --git a/src/components/ui/buttons/PrimaryCTA.astro b/src/components/ui/buttons/PrimaryCTA.astro index 7a34b9c..8b885ee 100644 --- a/src/components/ui/buttons/PrimaryCTA.astro +++ b/src/components/ui/buttons/PrimaryCTA.astro @@ -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 = ` + + `; --- - {title} - {noArrow ? null : ( - ) } - + {title} + {noArrow ? null : + + } + \ No newline at end of file diff --git a/src/components/ui/buttons/SecondaryCTA.astro b/src/components/ui/buttons/SecondaryCTA.astro index 52abccb..660ca10 100644 --- a/src/components/ui/buttons/SecondaryCTA.astro +++ b/src/components/ui/buttons/SecondaryCTA.astro @@ -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"; --- - {title} - + {title} + \ No newline at end of file diff --git a/src/components/ui/forms/LoginModal.astro b/src/components/ui/forms/LoginModal.astro index 1f7fd95..0390c5f 100644 --- a/src/components/ui/forms/LoginModal.astro +++ b/src/components/ui/forms/LoginModal.astro @@ -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" +}; ---