Merge version_5 into main

Merge version_5 into main

src/app/blog/page.tsx

@@ -5,52 +5,52 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 
 // New imports based on requirements
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
+            defaultButtonVariant="elastic-effect"
-            defaultTextAnimation="reveal-blur"
+            defaultTextAnimation="entrance-slide"
-            borderRadius="rounded"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
+            sizing="mediumLarge"
-            background="aurora"
+            background="fluid"
-            cardStyle="inset"
+            cardStyle="soft-shadow"
-            primaryButtonStyle="primary-glow"
+            primaryButtonStyle="gradient"
-            secondaryButtonStyle="radial-glow"
+            secondaryButtonStyle="glass"
-            headingFontWeight="light"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="nav" data-section="nav">
-                    <NavbarStyleApple
+                    <NavbarStyleFullscreen
-                        brandName="Hookah Haven"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Home", id: "/" },
+                            {name: "Home", id: "/"},
-                            { name: "Products", id: "/#products" },
+                            {name: "About", id: "/#about"},
-                            { name: "About", id: "/#about" },
+                            {name: "Products", id: "/#products"},
-                            { name: "Features", id: "/#features" },
+                            {name: "Blog", id: "/blog"},
-                            { name: "Testimonials", id: "/#testimonials" },
+                            {name: "Contact", id: "/#contact"}
-                            { name: "FAQ", id: "/#faq" },
-                            { name: "Contact", id: "/#contact" },
                         ]}
+                        bottomLeftText="Innovation Hub"
+                        bottomRightText="info@myco.com"
                     />
                 </div>
 
                     {isLoading ? (
                         <div className="w-content-width mx-auto py-20 text-center">
-                            <p className="text-foreground">Loading posts...</p>
+                            <p className="text-foreground">Loading blog posts...</p>
                         </div>
                     ) : (
                         <div id="blog" data-section="blog">
-                            <BlogCardTwo
+                            <BlogCardThree
                                 blogs={posts}
-                                title="Latest Articles"
+                                title="Latest Insights & Updates"
-                                description="Insights and updates from our team"
+                                description="Stay informed with our articles and news."
                                 textboxLayout="default"
                                 useInvertedBackground={false}
                                 animationType="slide-up"
@@ -59,26 +59,20 @@ export default function BlogPage() {
                     )}
 
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
+                        <FooterLogoEmphasis
-                            logoText="Hookah Haven"
+                            logoText="MyCo"
                             columns={[
-                                {
+                                {items: [
-                                    title: "Shop",                                    items: [
+                                    {label: "Products", href: "/#products"},
-                                        { label: "Hookahs", href: "/#products" },
+                                    {label: "Features", href: "/#features"}
-                                        { label: "Tobacco", href: "/#products" },
+                                ]},
-                                        { label: "Charcoal", href: "/#products" },
+                                {items: [
-                                        { label: "Accessories", href: "/#products" },
+                                    {label: "About Us", href: "/#about"},
-                                    ],
+                                    {label: "Blog", href: "/blog"},
-                                },
+                                    {label: "Shop", href: "/shop"},
-                                {
+                                    {label: "Contact", href: "/#contact"}
-                                    title: "Company",                                    items: [
+                                ]}
-                                        { label: "About Us", href: "/#about" },
-                                        { label: "FAQ", href: "/#faq" },
-                                        { label: "Contact", href: "/#contact" },
-                                    ],
-                                },
                             ]}
-                            copyrightText="© 2024 Hookah Haven. All rights reserved."
                         />
                     </div>
             </ReactLenis>

src/app/layout.tsx

@@ -1,24 +1,31 @@
 import type { Metadata } from "next";
-import { Archivo } from "next/font/google";
+import { DM_Sans } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
-const archivo = Archivo({
+const dmSans = DM_Sans({
-  variable: "--font-archivo",  subsets: ["latin"],
+  variable: "--font-dm-sans",  subsets: ["latin"],
+});
+
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Hookah Haven | Premium Hookahs, Tobacco & Accessories",  description: "Discover the finest selection of hookahs, premium tobacco blends, and essential accessories at Hookah Haven. Elevate your smoking experience today.",  keywords: ["hookah", "shisha", "tobacco", "charcoal", "hookah accessories", "premium hookah", "online hookah store"],
+  title: "My Awesome Website | Innovative Solutions & Services",  description: "Discover innovative solutions and services tailored for your needs. Explore our products, features, and client testimonials.",  keywords: ["website", "solutions", "services", "innovative", "products", "features"],
   openGraph: {
-    title: "Hookah Haven | Premium Hookahs, Tobacco & Accessories",    description: "Discover the finest selection of hookahs, premium tobacco blends, and essential accessories at Hookah Haven. Elevate your smoking experience today.",    url: "/",    siteName: "Hookah Haven",    images: [
+    title: "My Awesome Website | Innovative Solutions & Services",    description: "Discover innovative solutions and services tailored for your needs. Explore our products, features, and client testimonials.",    url: "/",    siteName: "My Awesome Website",    images: [
       {
-        url: "https://img.b2bpic.net/free-photo/group-handsome-retro-welldressed-man-gangsters-spend-time-club-smoking-hookah-multiethnic-male-bachelor-mafia-party-restaurant_627829-12017.jpg",        alt: "Elegant hookah set with smoke"},
+        url: "https://via.placeholder.com/1200x630.png?text=My+Awesome+Website",        alt: "My Awesome Website Banner"
+      }
     ],
-    type: "website"},
+    type: "website"
-  twitter: {
-    card: "summary_large_image",    title: "Hookah Haven | Premium Hookahs, Tobacco & Accessories",    description: "Discover the finest selection of hookahs, premium tobacco blends, and essential accessories at Hookah Haven. Elevate your smoking experience today.",    images: ["https://img.b2bpic.net/free-photo/group-handsome-retro-welldressed-man-gangsters-spend-time-club-smoking-hookah-multiethnic-male-bachelor-mafia-party-restaurant_627829-12017.jpg"],
   },
+  twitter: {
+    card: "summary_large_image",    title: "My Awesome Website | Innovative Solutions & Services",    description: "Discover innovative solutions and services tailored for your needs. Explore our products, features, and client testimonials.",    images: ["https://via.placeholder.com/1200x630.png?text=My+Awesome+Website"]
+  }
 };
 
 export default function RootLayout({
@@ -30,7 +37,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${archivo.variable} antialiased`}
+          className={`${dmSans.variable} ${inter.variable} antialiased`}
         >
           <Tag />
           {children}

src/app/page.tsx

@@ -1,170 +1,186 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqBase from '@/components/sections/faq/FaqBase';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Boxes, CheckCircle, Headphones } from 'lucide-react';
+import { Sparkles, Quote, CheckCircle, Mail } from 'lucide-react';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="reveal-blur"
+      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
+      borderRadius="pill"
       contentWidth="medium"
-      sizing="large"
+      sizing="mediumLarge"
-      background="aurora"
+      background="fluid"
-      cardStyle="inset"
+      cardStyle="soft-shadow"
-      primaryButtonStyle="primary-glow"
+      primaryButtonStyle="gradient"
-      secondaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
-      headingFontWeight="light"
+      headingFontWeight="bold"
     >
       <main>
         <div id="nav" data-section="nav">
-          <NavbarStyleApple 
+          <NavbarStyleFullscreen
-            brandName="Hookah Haven"
+            brandName="MyCo"
             navItems={[
-              {name: "Products", id: "products"},
+              {name: "Home", id: "/"},
-              {name: "About", id: "about"},
+              {name: "About", id: "/#about"},
-              {name: "Features", id: "features"},
+              {name: "Products", id: "/#products"},
-              {name: "Testimonials", id: "testimonials"},
+              {name: "Blog", id: "/blog"},
-              {name: "FAQ", id: "faq"},
+              {name: "Contact", id: "/#contact"}
-              {name: "Contact", id: "contact"}
             ]}
+            bottomLeftText="Innovation Hub"
+            bottomRightText="info@myco.com"
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroBillboardScroll 
+          <HeroBillboardRotatedCarousel
-            background={{ variant: "radial-gradient" }}
+            title="Innovate. Create. Elevate Your Business."
-            title="Experience the Finest Hookah"
+            description="Experience cutting-edge solutions designed to transform your operations and drive unparalleled success."
-            description="Discover a premium selection of tobacco, hookahs, and accessories for an unparalleled smoking experience."
+            background={{ variant: "sparkles-gradient" }}
-            tag="Your Ultimate Hookah Destination"
+            tag="Next Gen Solutions"
+            tagIcon={Sparkles}
             buttons={[
-              {text: "Shop Now", href: "#products"},
+              { text: "Discover More", href: "/#products" },
-              {text: "Learn More", href: "#about"}
+              { text: "Get Started", href: "/#contact" }
             ]}
-            imageSrc="https://img.b2bpic.net/free-photo/group-handsome-retro-welldressed-man-gangsters-spend-time-club-smoking-hookah-multiethnic-male-bachelor-mafia-party-restaurant_627829-12017.jpg"
+            carouselItems={[
-            imageAlt="Elegant hookah set with smoke"
+              { id: '1', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+1', imageAlt: 'Product showcase 1' },
-            tagAnimation="blur-reveal"
+              { id: '2', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+2', imageAlt: 'Product showcase 2' },
-            buttonAnimation="blur-reveal"
+              { id: '3', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+3', imageAlt: 'Product showcase 3' },
+              { id: '4', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+4', imageAlt: 'Product showcase 4' },
+              { id: '5', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+5', imageAlt: 'Product showcase 5' },
+              { id: '6', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+6', imageAlt: 'Product showcase 6' }
+            ]}
+            autoPlay={true}
+            autoPlayInterval={4000}
           />
         </div>
 
         <div id="about" data-section="about">
-          <TextSplitAbout 
+          <TestimonialAboutCard
-            title="Our Passion for Hookah"
+            tag="Our Philosophy"
-            description={[
+            tagIcon={Quote}
-              "At Hookah Haven, we are dedicated to providing enthusiasts with the highest quality products. From rare tobacco blends to exquisite hookahs and essential accessories, we meticulously curate our collection to ensure every puff is a pleasure.",              "We believe in enhancing your moments of relaxation and social connection with superior shisha. Our commitment to excellence guarantees an experience like no other."
+            title="We believe in empowering futures through technology and innovation."
-            ]}
+            description="MyCo Team"
+            subdescription="Visionaries in Tech"
+            icon={Sparkles}
+            imageSrc="https://via.placeholder.com/800x600.png?text=Our+Vision"
+            mediaAnimation="slide-up"
             useInvertedBackground={false}
-            showBorder={true}
-            buttons={[{ text: "Our Story", href: "#about" }]}
           />
         </div>
 
         <div id="products" data-section="products">
-          <ProductCardOne 
+          <ProductCardThree
-            title="Featured Products"
+            title="Our Featured Offerings"
-            description="Explore our curated collection of premium hookahs, exquisite tobacco, and essential accessories."
+            description="Explore our innovative products, crafted to enhance your productivity and lifestyle."
             products={[
-              {id: "1", name: "Luxurious Glass Hookah", price: "$249.99", imageSrc: "https://img.b2bpic.net/free-photo/meduza-hookah-with-cockatails-side-view_140725-9140.jpg", imageAlt: "Luxurious glass hookah pipe"},
+              { id: "1", name: "AI Assistant Pro", price: "$199.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+A" },
-              {id: "2", name: "Exotic Tobacco Blends", price: "$19.99", imageSrc: "https://img.b2bpic.net/free-photo/fresh-shisha-woman-hands_140725-1338.jpg", imageAlt: "Colorful packs of exotic tobacco blends"},
+              { id: "2", name: "Smart Home Hub", price: "$249.00", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+B" },
-              {id: "3", name: "Natural Coconut Charcoal", price: "$12.99", imageSrc: "https://img.b2bpic.net/free-photo/close-up-hookah-vaping_23-2149297183.jpg", imageAlt: "Pile of natural coconut charcoal"},
+              { id: "3", name: "Cloud Storage Plus", price: "$49.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+C" },
-              {id: "4", name: "Premium Hookah Hose", price: "$34.99", imageSrc: "https://img.b2bpic.net/free-photo/hookah-still-life-composition_23-2149213330.jpg", imageAlt: "Premium hookah hose"}
+              { id: "4", name: "Eco-Friendly Charger", price: "$29.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+D" }
             ]}
+            gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
-            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={true}
-            useInvertedBackground={false}
             textboxLayout="default"
           />
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardTwentySix 
+          <FeatureCardTwentyOne
-            title="Why Choose Hookah Haven?"
+            title="Unlock Limitless Possibilities"
-            description="We offer an unparalleled selection, quality assurance, and dedicated customer support to enhance your hookah journey."
+            description="Our platform brings powerful features designed to streamline your operations."
-            features={[
+            accordionItems={[
-              {title: "Unrivaled Quality", description: "Only the finest materials and ingredients make it into our selection, guaranteeing a superior experience.", imageSrc: "https://img.b2bpic.net/free-photo/suitmaker-tailor-cutting-fabric_482257-78193.jpg", imageAlt: "Close up of a well-crafted hookah component", buttonIcon: CheckCircle},
+              { id: "1", title: "Intuitive Interface", content: "Navigate our platform with ease thanks to our user-friendly design." },
-              {title: "Extensive Selection", description: "From classic designs to modern innovations, find the perfect hookah and tobacco to suit your taste.", imageSrc: "https://img.b2bpic.net/free-photo/supermarket-banner-with-various-items_23-2149501012.jpg", imageAlt: "Diverse range of hookah pipes and tobacco boxes", buttonIcon: Boxes},
+              { id: "2", title: "Robust Security", content: "Your data is protected with industry-leading security protocols." },
-              {title: "Expert Customer Support", description: "Our knowledgeable team is here to assist you with any questions or recommendations.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-call-center-manager-providing-guidance-intern-addressing-questions_482257-125804.jpg", imageAlt: "Customer service representative helping a client", buttonIcon: Headphones}
+              { id: "3", title: "Scalable Infrastructure", content: "Grow your business without limits on our adaptable cloud infrastructure." }
             ]}
-            textboxLayout="default"
+            imageSrc="https://via.placeholder.com/800x600.png?text=Feature+Overview"
-            useInvertedBackground={true}
+            imageAlt="Feature showcase"
+            mediaAnimation="slide-up"
+            useInvertedBackground={false}
+            mediaPosition="left"
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardFive 
+          <TestimonialCardTwelve
-            title="What Our Customers Say"
-            description="Hear from satisfied enthusiasts who've experienced the Hookah Haven difference."
             testimonials={[
-              {id: "1", name: "Omar Al-Hassan, Connoisseur", date: "Date: 15 May 2024", title: "Simply the best!", quote: "Hookah Haven delivers on quality and variety. My go-to for all my shisha needs.", tag: "Premium Experience", avatarSrc: "https://img.b2bpic.net/free-photo/man-relaxing-by-vaping-from-hookah-bar_23-2149191823.jpg", imageSrc: "https://img.b2bpic.net/free-photo/man-relaxing-by-vaping-from-hookah-bar_23-2149191823.jpg", imageAlt: "Happy customer enjoying hookah"},
+              { id: '1', name: 'Emily White', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+1' },
-              {id: "2", name: "Layla Khan, Lounge Owner", date: "Date: 20 April 2024", title: "Boosted my business", quote: "Their bulk charcoal and tobacco options are fantastic. My customers love the quality!", tag: "Business Partner", avatarSrc: "https://img.b2bpic.net/free-photo/stylish-beard-arabian-man-glasses-military-jacket-smoking-hookah-street-bar-arab-model-having-rest-taking-selfie-phone_627829-2773.jpg", imageSrc: "https://img.b2bpic.net/free-photo/stylish-beard-arabian-man-glasses-military-jacket-smoking-hookah-street-bar-arab-model-having-rest-taking-selfie-phone_627829-2773.jpg", imageAlt: "Lounge owner smiling"},
+              { id: '2', name: 'David Lee', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+2' },
-              {id: "3", name: "Ahmed Malik, Social Smoker", date: "Date: 10 March 2024", title: "Great selection and service", quote: "Found my new favorite blend here. The staff was incredibly helpful and friendly.", tag: "New Favorite", avatarSrc: "https://img.b2bpic.net/free-photo/girl-vaping_1303-5744.jpg", imageSrc: "https://img.b2bpic.net/free-photo/girl-vaping_1303-5744.jpg", imageAlt: "Person enjoying a hookah session"},
+              { id: '3', name: 'Sophia Miller', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+3' },
-              {id: "4", name: "Sara Jafari, Enthusiast", date: "Date: 02 February 2024", title: "Unbeatable quality!", quote: "The hookahs are stunning and perform flawlessly. Definitely worth every penny.", tag: "High-Quality Gear", avatarSrc: "https://img.b2bpic.net/free-photo/people-enjoying-night-out-together_23-2149173623.jpg", imageSrc: "https://img.b2bpic.net/free-photo/people-enjoying-night-out-together_23-2149173623.jpg", imageAlt: "Woman admiring a hookah"}
+              { id: '4', name: 'James Brown', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+4' }
             ]}
-            textboxLayout="default"
+            cardTitle="Trusted by industry leaders and satisfied customers worldwide."
-            useInvertedBackground={false}
+            cardTag="Join our growing community"
-          />
+            cardAnimation="blur-reveal"
-        </div>
-
-        <div id="faq" data-section="faq">
-          <FaqSplitText 
-            sideTitle="Frequently Asked Questions"
-            faqs={[
-              {id: "1", title: "What kind of tobacco do you offer?", content: "We offer a wide range of premium shisha tobacco, including traditional, modern, and exotic blends from top brands worldwide."},
-              {id: "2", title: "Do you ship internationally?", content: "Currently, we only ship within [Your Country/Region]. Please check our shipping policy for more details."},
-              {id: "3", title: "How do I care for my new hookah?", content: "Each hookah comes with care instructions. Generally, it's best to clean all components after each use with warm water and a brush."},
-              {id: "4", title: "What is your return policy?", content: "We accept returns within 30 days of purchase for unused and unopened items. See our full return policy for details."}
-            ]}
-            textPosition="left"
-            faqsAnimation="slide-up"
-            useInvertedBackground={false}
-            animationType="smooth"
-          />
-        </div>
-
-        <div id="contact" data-section="contact">
-          <ContactText 
-            text="Ready to elevate your hookah experience? Get in touch with our team for personalized recommendations or any inquiries."
-            buttons={[
-              {text: "Contact Us", href: "/contact"},
-              {text: "Shop All Products", href: "#products"}
-            ]}
-            animationType="reveal-blur"
-            background={{ variant: "radial-gradient" }}
             useInvertedBackground={true}
           />
         </div>
 
+        <div id="faq" data-section="faq">
+          <FaqBase
+            title="Common Questions, Clear Answers"
+            description="Browse our FAQ to quickly find solutions and understand our services better."
+            faqs={[
+              { id: "1", title: "What is your onboarding process?", content: "Our onboarding is streamlined, guided by a dedicated success manager." },
+              { id: "2", title: "Do you offer custom solutions?", content: "Yes, we tailor our solutions to fit your unique business requirements." },
+              { id: "3", title: "How is customer support handled?", content: "We provide 24/7 support through multiple channels for your convenience." },
+              { id: "4", title: "What are your security measures?", content: "We implement robust security protocols and regular audits to protect your data." }
+            ]}
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqsAnimation="slide-up"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            tag="Connect With Us"
+            title="Let's Build Something Amazing Together"
+            description="Reach out to our team to discuss your next big idea or sign up for our newsletter."
+            tagIcon={Mail}
+            background={{ variant: "radial-gradient" }}
+            useInvertedBackground={true}
+            imageSrc="https://via.placeholder.com/800x600.png?text=Contact+Us"
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            inputPlaceholder="Your email address"
+            buttonText="Subscribe"
+            termsText="By subscribing, you agree to our privacy policy."
+            onSubmit={(email) => console.log("Subscribed with: ", email)}
+          />
+        </div>
+
         <div id="footer" data-section="footer">
-          <FooterBaseCard 
+          <FooterLogoEmphasis
-            logoText="Hookah Haven"
+            logoText="MyCo"
             columns={[
-              {title: "Shop", items: [
+              {items: [
-                {label: "Hookahs", href: "#products"},
+                {label: "Products", href: "/#products"},
-                {label: "Tobacco", href: "#products"},
+                {label: "Features", href: "/#features"}
-                {label: "Charcoal", href: "#products"},
-                {label: "Accessories", href: "#products"}
               ]},
-              {title: "Company", items: [
+              {items: [
-                {label: "About Us", href: "#about"},
+                {label: "About Us", href: "/#about"},
-                {label: "FAQ", href: "#faq"},
+                {label: "Blog", href: "/blog"},
-                {label: "Contact", href: "#contact"}
+                {label: "Shop", href: "/shop"},
+                {label: "Contact", href: "/#contact"}
               ]}
             ]}
-            copyrightText="© 2024 Hookah Haven. All rights reserved."
           />
         </div>
       </main>
     </ThemeProvider>
   );
-}
+}

src/app/shop/[id]/page.tsx

@@ -4,8 +4,8 @@ import { Suspense, use, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductDetail } from "@/hooks/useProductDetail";
@@ -77,26 +77,30 @@ function ProductPageContent({ params }: ProductPageProps) {
     if (isLoading) {
         return (
             <ThemeProvider
-                defaultButtonVariant="hover-magnetic"
+                defaultButtonVariant="elastic-effect"
-                defaultTextAnimation="reveal-blur"
+                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
+                sizing="mediumLarge"
-                background="aurora"
+                background="fluid"
-                cardStyle="inset"
+                cardStyle="soft-shadow"
-                primaryButtonStyle="primary-glow"
+                primaryButtonStyle="gradient"
-                secondaryButtonStyle="radial-glow"
+                secondaryButtonStyle="glass"
-                headingFontWeight="light"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
+                        <NavbarStyleFullscreen
-                            brandName="Hookah Haven"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Home", id: "/" },
+                                {name: "Home", id: "/"},
-                                { name: "Shop", id: "/shop" }
+                                {name: "About", id: "/#about"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Blog", id: "/blog"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            bottomLeftText="Innovation Hub"
+                            bottomRightText="info@myco.com"
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -105,13 +109,20 @@ function ProductPageContent({ params }: ProductPageProps) {
                         </div>
                     </main>
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
+                        <FooterLogoEmphasis
-                            logoText="Hookah Haven"
+                            logoText="MyCo"
                             columns={[
-                                { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
+                                {items: [
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                    {label: "Products", href: "/#products"},
+                                    {label: "Features", href: "/#features"}
+                                ]},
+                                {items: [
+                                    {label: "About Us", href: "/#about"},
+                                    {label: "Blog", href: "/blog"},
+                                    {label: "Shop", href: "/shop"},
+                                    {label: "Contact", href: "/#contact"}
+                                ]}
                             ]}
-                            copyrightText="© 2024 Hookah Haven. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -122,26 +133,30 @@ function ProductPageContent({ params }: ProductPageProps) {
     if (!product) {
         return (
             <ThemeProvider
-                defaultButtonVariant="hover-magnetic"
+                defaultButtonVariant="elastic-effect"
-                defaultTextAnimation="reveal-blur"
+                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
+                sizing="mediumLarge"
-                background="aurora"
+                background="fluid"
-                cardStyle="inset"
+                cardStyle="soft-shadow"
-                primaryButtonStyle="primary-glow"
+                primaryButtonStyle="gradient"
-                secondaryButtonStyle="radial-glow"
+                secondaryButtonStyle="glass"
-                headingFontWeight="light"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
+                        <NavbarStyleFullscreen
-                            brandName="Hookah Haven"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Home", id: "/" },
+                                {name: "Home", id: "/"},
-                                { name: "Shop", id: "/shop" }
+                                {name: "About", id: "/#about"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Blog", id: "/blog"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            bottomLeftText="Innovation Hub"
+                            bottomRightText="info@myco.com"
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -156,13 +171,20 @@ function ProductPageContent({ params }: ProductPageProps) {
                         </div>
                     </main>
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
+                        <FooterLogoEmphasis
-                            logoText="Hookah Haven"
+                            logoText="MyCo"
                             columns={[
-                                { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
+                                {items: [
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                    {label: "Products", href: "/#products"},
+                                    {label: "Features", href: "/#features"}
+                                ]},
+                                {items: [
+                                    {label: "About Us", href: "/#about"},
+                                    {label: "Blog", href: "/blog"},
+                                    {label: "Shop", href: "/shop"},
+                                    {label: "Contact", href: "/#contact"}
+                                ]}
                             ]}
-                            copyrightText="© 2024 Hookah Haven. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -172,26 +194,30 @@ function ProductPageContent({ params }: ProductPageProps) {
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
+            defaultButtonVariant="elastic-effect"
-            defaultTextAnimation="reveal-blur"
+            defaultTextAnimation="entrance-slide"
-            borderRadius="rounded"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
+            sizing="mediumLarge"
-            background="aurora"
+            background="fluid"
-            cardStyle="inset"
+            cardStyle="soft-shadow"
-            primaryButtonStyle="primary-glow"
+            primaryButtonStyle="gradient"
-            secondaryButtonStyle="radial-glow"
+            secondaryButtonStyle="glass"
-            headingFontWeight="light"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                    <NavbarStyleApple
+                    <NavbarStyleFullscreen
-                        brandName="Hookah Haven"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Home", id: "/" },
+                            {name: "Home", id: "/"},
-                            { name: "Shop", id: "/shop" }
+                            {name: "About", id: "/#about"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Blog", id: "/blog"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        bottomLeftText="Innovation Hub"
+                        bottomRightText="info@myco.com"
                     />
                 </div>
                 <div id="product-detail-card" data-section="product-detail-card">
@@ -210,8 +236,8 @@ function ProductPageContent({ params }: ProductPageProps) {
                         inventoryQuantity={meta.inventoryQuantity}
                         sku={meta.sku}
                         buttons={[
-                            { text: "Add To Cart", onClick: handleAddToCart },
+                            { text: "Add to Cart", onClick: handleAddToCart },
-                            { text: "Buy Now", onClick: handleBuyNow },
+                            { text: "Buy Now", onClick: handleBuyNow }
                         ]}
                     />
                 </div>
@@ -225,19 +251,26 @@ function ProductPageContent({ params }: ProductPageProps) {
                         total={`$${cartTotal}`}
                         buttons={[
                             {
-                                text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
+                                text: isCheckoutLoading ? "Processing..." : "Checkout",                                onClick: handleCheckout,
                             },
                         ]}
                     />
                 </div>
                 <div id="footer" data-section="footer">
-                    <FooterBaseCard
+                    <FooterLogoEmphasis
-                        logoText="Hookah Haven"
+                        logoText="MyCo"
                         columns={[
-                            { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
+                            {items: [
-                            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                {label: "Products", href: "/#products"},
+                                {label: "Features", href: "/#features"}
+                                ]},
+                            {items: [
+                                {label: "About Us", href: "/#about"},
+                                {label: "Blog", href: "/blog"},
+                                {label: "Shop", href: "/shop"},
+                                {label: "Contact", href: "/#contact"}
+                            ]}
                         ]}
-                        copyrightText="© 2024 Hookah Haven. All rights reserved."
                     />
                 </div>
             </ReactLenis>

src/app/shop/page.tsx

@@ -3,8 +3,8 @@
 import { Suspense, useCallback } from "react";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
@@ -44,39 +44,50 @@ function ShopPageContent() {
     if (isLoading) {
         return (
             <ThemeProvider
-                defaultButtonVariant="hover-magnetic"
+                defaultButtonVariant="elastic-effect"
-                defaultTextAnimation="reveal-blur"
+                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
+                sizing="mediumLarge"
-                background="aurora"
+                background="fluid"
-                cardStyle="inset"
+                cardStyle="soft-shadow"
-                primaryButtonStyle="primary-glow"
+                primaryButtonStyle="gradient"
-                secondaryButtonStyle="radial-glow"
+                secondaryButtonStyle="glass"
-                headingFontWeight="light"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
+                        <NavbarStyleFullscreen
-                            brandName="Hookah Haven"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Home", id: "/" },
+                                {name: "Home", id: "/"},
-                                { name: "Shop", id: "/shop" }
+                                {name: "About", id: "/#about"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Blog", id: "/blog"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            bottomLeftText="Innovation Hub"
+                            bottomRightText="info@myco.com"
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <p className="text-foreground">Loading products...</p>
                     </main>
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
+                        <FooterLogoEmphasis
-                            logoText="Hookah Haven"
+                            logoText="MyCo"
                             columns={[
-                                { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
+                                {items: [
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                    {label: "Products", href: "/#products"},
+                                    {label: "Features", href: "/#features"}
+                                ]},
+                                {items: [
+                                    {label: "About Us", href: "/#about"},
+                                    {label: "Blog", href: "/blog"},
+                                    {label: "Shop", href: "/shop"},
+                                    {label: "Contact", href: "/#contact"}
+                                ]}
                             ]}
-                            copyrightText="© 2024 Hookah Haven. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -86,26 +97,30 @@ function ShopPageContent() {
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
+            defaultButtonVariant="elastic-effect"
-            defaultTextAnimation="reveal-blur"
+            defaultTextAnimation="entrance-slide"
-            borderRadius="rounded"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
+            sizing="mediumLarge"
-            background="aurora"
+            background="fluid"
-            cardStyle="inset"
+            cardStyle="soft-shadow"
-            primaryButtonStyle="primary-glow"
+            primaryButtonStyle="gradient"
-            secondaryButtonStyle="radial-glow"
+            secondaryButtonStyle="glass"
-            headingFontWeight="light"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                    <NavbarStyleApple
+                    <NavbarStyleFullscreen
-                        brandName="Hookah Haven"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Home", id: "/" },
+                            {name: "Home", id: "/"},
-                            { name: "Shop", id: "/shop" }
+                            {name: "About", id: "/#about"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Blog", id: "/blog"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        bottomLeftText="Innovation Hub"
+                        bottomRightText="info@myco.com"
                     />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">
@@ -129,19 +144,26 @@ function ShopPageContent() {
                         total={`$${cartTotal}`}
                         buttons={[
                             {
-                                text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
+                                text: isCheckoutLoading ? "Processing..." : "Checkout",                                onClick: handleCheckout,
                             },
                         ]}
                     />
                 </div>
                 <div id="footer" data-section="footer">
-                    <FooterBaseCard
+                    <FooterLogoEmphasis
-                        logoText="Hookah Haven"
+                        logoText="MyCo"
                         columns={[
-                            { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
+                            {items: [
-                            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                {label: "Products", href: "/#products"},
+                                {label: "Features", href: "/#features"}
+                            ]},
+                            {items: [
+                                {label: "About Us", href: "/#about"},
+                                {label: "Blog", href: "/blog"},
+                                {label: "Shop", href: "/shop"},
+                                {label: "Contact", href: "/#contact"}
+                            ]}
                         ]}
-                        copyrightText="© 2024 Hookah Haven. All rights reserved."
                     />
                 </div>
             </ReactLenis>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-archivo), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-archivo), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f5f5;;
+  /* --background: #f5faff;;
-  --card: #ffffff;;
+  --card: #f1f8ff;;
-  --foreground: #1c1c1c;;
+  --foreground: #001122;;
-  --primary-cta: #1c1c1c;;
+  --primary-cta: #15479c;;
   --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
+  --accent: #a8cce8;;
-  --background-accent: #b3a8e8;; */
+  --background-accent: #7ba3cf;; */
 
-  --background: #f5f5f5;;
+  --background: #f5faff;;
-  --card: #ffffff;;
+  --card: #f1f8ff;;
-  --foreground: #1c1c1c;;
+  --foreground: #001122;;
-  --primary-cta: #1c1c1c;;
+  --primary-cta: #15479c;;
-  --primary-cta-text: #f5f5f5;;
+  --primary-cta-text: #0a0a0a;;
   --secondary-cta: #ffffff;;
-  --secondary-cta-text: #1c1c1c;;
+  --secondary-cta-text: #ffffffe6;;
-  --accent: #6139e6;;
+  --accent: #a8cce8;;
-  --background-accent: #b3a8e8;;
+  --background-accent: #7ba3cf;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);