From 0cecec1424c277e446b5cc335c8c61e0a496d881 Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Sat, 29 Jun 2024 03:37:38 +0400 Subject: [PATCH] Add new sections and update navigation in components --- .../sections/misc/Authentication.astro | 16 ++ .../sections/misc/ContactSection.astro | 118 +++++++++ src/components/sections/misc/FAQ.astro | 79 +++++++ .../navbar&footer/FooterSection.astro | 117 +++++++++ .../sections/navbar&footer/Navbar.astro | 214 +++++++++++++++++ .../navbar&footer/NavbarMegaMenu.astro | 223 ++++++++++++++++++ src/data_files/mega_link.ts | 54 +++++ 7 files changed, 821 insertions(+) create mode 100644 src/components/sections/misc/Authentication.astro create mode 100644 src/components/sections/misc/ContactSection.astro create mode 100644 src/components/sections/misc/FAQ.astro create mode 100644 src/components/sections/navbar&footer/FooterSection.astro create mode 100644 src/components/sections/navbar&footer/Navbar.astro create mode 100644 src/components/sections/navbar&footer/NavbarMegaMenu.astro create mode 100644 src/data_files/mega_link.ts diff --git a/src/components/sections/misc/Authentication.astro b/src/components/sections/misc/Authentication.astro new file mode 100644 index 0000000..319c472 --- /dev/null +++ b/src/components/sections/misc/Authentication.astro @@ -0,0 +1,16 @@ +--- +// Import the necessary components from their respective component files +import LoginModal from "@components/ui/forms/LoginModal.astro"; +import RegisterModal from "@components/ui/forms/RegisterModal.astro"; +import RecoverModal from "@components/ui/forms/RecoverModal.astro"; +import LoginBtn from "@components/ui/buttons/LoginBtn.astro"; +--- + + + + + + + + + diff --git a/src/components/sections/misc/ContactSection.astro b/src/components/sections/misc/ContactSection.astro new file mode 100644 index 0000000..80d42df --- /dev/null +++ b/src/components/sections/misc/ContactSection.astro @@ -0,0 +1,118 @@ +--- +// Import the necessary dependencies. +import AuthBtn from "@components/ui/buttons/AuthBtn.astro"; +import ContactIconBlock from "@components/ui/blocks/ContactIconBlock.astro"; +import TextInput from "@components/ui/forms/input/TextInput.astro"; +import EmailContactInput from "@components/ui/forms/input/EmailContactInput.astro"; +import PhoneInput from "@components/ui/forms/input/PhoneInput.astro"; +import TextAreaInput from "@components/ui/forms/input/TextAreaInput.astro"; +import Icon from "@components/ui/icons/Icon.astro"; + +// Define the variables that will be used in this component +const title: string = "Contact us"; +const subTitle: string = + "Have questions or want to discuss a project? Reach out, and let's craft the perfect solution with our tools and services."; +const formTitle: string = "Fill in the form below"; +const formSubTitle: string = "We'll get back to you in 1-2 business days."; +--- + + +
+
+
+

+ {title} +

+

+ {subTitle} +

+
+ +
+
+

+ {formTitle} +

+ + +
+
+
+ + +
+ + + +
+ +
+ +
+ +
+

+ {formSubTitle} +

+
+
+
+ + +
+ + + + + + + + + + + +
+
+
+
diff --git a/src/components/sections/misc/FAQ.astro b/src/components/sections/misc/FAQ.astro new file mode 100644 index 0000000..fb8dd3c --- /dev/null +++ b/src/components/sections/misc/FAQ.astro @@ -0,0 +1,79 @@ +--- +// Import the necessary AccordionItem component and JSON data +import AccordionItem from "@components/ui/blocks/AccordionItem.astro"; + +// Define props from Astro +const { title, faqs } = Astro.props; + +// Define TypeScript interface for props +interface Faq { + question: string; + answer: string; +} + +interface FaqGroup { + subTitle?: string; + faqs: Faq[]; +} + +interface Props { + title: string; + faqs: FaqGroup; +} +// Define a helper function to generate ids dynamically. +const makeId = (base: any, index: any) => `${base}${index + 1}`; +--- + + +
+
+
+
+

+ +

+ +
+
+ +
+
+ { + faqs.faqs.map((question, i) => { + // Generate ids dynamically for each FAQ accordion item. + let id = makeId( + "hs-basic-with-title-and-arrow-stretched-heading-", + i + ); + let collapseId = makeId( + "hs-basic-with-title-and-arrow-stretched-collapse", + i + ); + + return ( + + ); + }) + } +
+
+
+
+ + + \ No newline at end of file diff --git a/src/components/sections/navbar&footer/FooterSection.astro b/src/components/sections/navbar&footer/FooterSection.astro new file mode 100644 index 0000000..9923e18 --- /dev/null +++ b/src/components/sections/navbar&footer/FooterSection.astro @@ -0,0 +1,117 @@ +--- +// Import the necessary dependencies +import FooterSocialLink from "@components/ui/links/FooterSocialLink.astro"; +import EmailFooterInput from "@components/ui/forms/input/EmailFooterInput.astro"; +import enStrings from "@utils/navigation.ts"; +import frStrings from "@utils/fr/navigation.ts"; +import Icon from "@components/ui/icons/Icon.astro"; +import BrandLogo from "@components/BrandLogo.astro"; +import { SITE } from "@data/constants"; + +// Select the correct translation based on the page's lang prop: +const strings = Astro.currentLocale === "fr" ? frStrings : enStrings; + +// Define the variables that will be used in this component +const sectionThreeTitle: string = Astro.currentLocale === "fr" ? "Rester à jour" : "Stay up to date"; +const sectionThreeContent: string = Astro.currentLocale === "fr" ? "Restez informé des derniers outils et des offres exclusives." : + "Stay updated with the latest tools and exclusive deals."; +const crafted: string = Astro.currentLocale === "fr" ? "Fabriqué par" : "Crafted by"; +--- + +
+
+
+
+ + +
+ + { + strings.footerLinks.map((section) => ( +
+

+ {section.section} +

+
    + {section.links.map((link, index) => ( +
  • + + {link.name} + + {section.section === "Company" && index === 2 ? ( + + We're hiring! + + ) : null} +
    • + ))} +
+
+ )) + } + +
+

+ {sectionThreeTitle} +

+ +
+ +

+ {sectionThreeContent} +

+ +
+
+ +
+
+

+ © {SITE.title}. {crafted} + sobstvennoAI. +

+
+ + +
+ + + + + + + + + + + + + +
+
+ + +
+
diff --git a/src/components/sections/navbar&footer/Navbar.astro b/src/components/sections/navbar&footer/Navbar.astro new file mode 100644 index 0000000..edae607 --- /dev/null +++ b/src/components/sections/navbar&footer/Navbar.astro @@ -0,0 +1,214 @@ +--- +//Import relevant dependencies +import ThemeIcon from "@components/ThemeIcon.astro"; +import NavLink from "@components/ui/links/NavLink.astro"; +import Authentication from "../misc/Authentication.astro"; +import enStrings from "@utils/navigation.ts"; +import frStrings from "@utils/fr/navigation.ts"; +import BrandLogo from "@components/BrandLogo.astro"; +import LanguagePicker from "@components/ui/LanguagePicker.astro"; + +// Select the correct translation based on the page's lang prop: +const strings = Astro.currentLocale === "fr" ? frStrings : enStrings; +const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/"; +--- + + +
+ + +
+ + + + + + diff --git a/src/components/sections/navbar&footer/NavbarMegaMenu.astro b/src/components/sections/navbar&footer/NavbarMegaMenu.astro new file mode 100644 index 0000000..9ae614e --- /dev/null +++ b/src/components/sections/navbar&footer/NavbarMegaMenu.astro @@ -0,0 +1,223 @@ +--- +//Import relevant dependencies +import ThemeIcon from "@components/ThemeIcon.astro"; +import NavLink from "@components/ui/links/NavLink.astro"; +import MegaMenuLink from "@components/ui/links/MegaMenuLink.astro"; +import Authentication from "../misc/Authentication.astro"; +import enStrings from "@utils/navigation.ts"; +import frStrings from "@utils/fr/navigation.ts"; +import BrandLogo from "@components/BrandLogo.astro"; +import LanguagePicker from "@components/ui/LanguagePicker.astro"; + +// Select the correct translation based on the page's lang prop: +const strings = Astro.currentLocale === "fr" ? frStrings : enStrings; +const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/"; +--- + + +
+ + +
+ + + + + + + diff --git a/src/data_files/mega_link.ts b/src/data_files/mega_link.ts new file mode 100644 index 0000000..f25aba2 --- /dev/null +++ b/src/data_files/mega_link.ts @@ -0,0 +1,54 @@ +// Define data structures for services and success stories +export const servicesData = [ + { + title: "Explore Advice and Explanations", + description: + "Dive deep into helpful guides and explanations for all of ScrewFast's features", + icon: "guides", + url: "#", + }, + { + title: "Discover Integrations", + description: + "Supercharge Your Workflow. Seamless integrations with all your favorite tools", + icon: "puzzle", + url: "#", + }, + { + title: "Expert Services", + description: "Go beyond tools with ScrewFast's expert services", + icon: "rocket", + url: "#", + }, + { + title: "Cutting-Edge Tools", + description: + "Build Smarter, Faster. Experience next-level efficiency with ScrewFast's cutting-edge construction tools", + icon: "hammer", + url: "#", + }, + { + title: "Simple Plans", + description: + "Boost your efficiency with ScrewFast's straightforward, value-driven plans", + icon: "sparks", + url: "#", + }, + { + title: "Community Forum", + description: "Learn, share, and connect with other ScrewFast users", + icon: "community", + url: "#", + }, +]; + +export const successStoriesData = [ + { + image: + "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=1376&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80", + alt: "Image Description", + description: + "See how ScrewFast has empowered businesses of all sizes to achieve outstanding results.", + learnMoreUrl: "#", + }, +];