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 FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
-            defaultTextAnimation="reveal-blur"
-            borderRadius="rounded"
+            defaultButtonVariant="elastic-effect"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
-            background="aurora"
-            cardStyle="inset"
-            primaryButtonStyle="primary-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="light"
+            sizing="mediumLarge"
+            background="fluid"
+            cardStyle="soft-shadow"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="nav" data-section="nav">
-                    <NavbarStyleApple
-                        brandName="Hookah Haven"
+                    <NavbarStyleFullscreen
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Products", id: "/#products" },
-                            { name: "About", id: "/#about" },
-                            { name: "Features", id: "/#features" },
-                            { name: "Testimonials", id: "/#testimonials" },
-                            { name: "FAQ", id: "/#faq" },
-                            { name: "Contact", id: "/#contact" },
+                            {name: "Home", id: "/"},
+                            {name: "About", id: "/#about"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Blog", id: "/blog"},
+                            {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"
-                                description="Insights and updates from our team"
+                                title="Latest Insights & Updates"
+                                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
-                            logoText="Hookah Haven"
+                        <FooterLogoEmphasis
+                            logoText="MyCo"
                             columns={[
-                                {
-                                    title: "Shop",                                    items: [
-                                        { label: "Hookahs", href: "/#products" },
-                                        { label: "Tobacco", href: "/#products" },
-                                        { label: "Charcoal", href: "/#products" },
-                                        { label: "Accessories", href: "/#products" },
-                                    ],
-                                },
-                                {
-                                    title: "Company",                                    items: [
-                                        { label: "About Us", href: "/#about" },
-                                        { label: "FAQ", href: "/#faq" },
-                                        { label: "Contact", href: "/#contact" },
-                                    ],
-                                },
+                                {items: [
+                                    {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/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({
-  variable: "--font-archivo",  subsets: ["latin"],
+const dmSans = DM_Sans({
+  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"},
-  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"],
+    type: "website"
   },
+  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 HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Boxes, CheckCircle, Headphones } from 'lucide-react';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Sparkles, Quote, CheckCircle, Mail } from 'lucide-react';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="rounded"
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
       contentWidth="medium"
-      sizing="large"
-      background="aurora"
-      cardStyle="inset"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="radial-glow"
-      headingFontWeight="light"
+      sizing="mediumLarge"
+      background="fluid"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <main>
         <div id="nav" data-section="nav">
-          <NavbarStyleApple 
-            brandName="Hookah Haven"
+          <NavbarStyleFullscreen
+            brandName="MyCo"
             navItems={[
-              {name: "Products", id: "products"},
-              {name: "About", id: "about"},
-              {name: "Features", id: "features"},
-              {name: "Testimonials", id: "testimonials"},
-              {name: "FAQ", id: "faq"},
-              {name: "Contact", id: "contact"}
+              {name: "Home", id: "/"},
+              {name: "About", id: "/#about"},
+              {name: "Products", id: "/#products"},
+              {name: "Blog", id: "/blog"},
+              {name: "Contact", id: "/#contact"}
             ]}
+            bottomLeftText="Innovation Hub"
+            bottomRightText="info@myco.com"
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroBillboardScroll 
-            background={{ variant: "radial-gradient" }}
-            title="Experience the Finest Hookah"
-            description="Discover a premium selection of tobacco, hookahs, and accessories for an unparalleled smoking experience."
-            tag="Your Ultimate Hookah Destination"
+          <HeroBillboardRotatedCarousel
+            title="Innovate. Create. Elevate Your Business."
+            description="Experience cutting-edge solutions designed to transform your operations and drive unparalleled success."
+            background={{ variant: "sparkles-gradient" }}
+            tag="Next Gen Solutions"
+            tagIcon={Sparkles}
             buttons={[
-              {text: "Shop Now", href: "#products"},
-              {text: "Learn More", href: "#about"}
+              { text: "Discover More", href: "/#products" },
+              { 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"
-            imageAlt="Elegant hookah set with smoke"
-            tagAnimation="blur-reveal"
-            buttonAnimation="blur-reveal"
+            carouselItems={[
+              { id: '1', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+1', imageAlt: 'Product showcase 1' },
+              { id: '2', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+2', imageAlt: 'Product showcase 2' },
+              { 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 
-            title="Our Passion for Hookah"
-            description={[
-              "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."
-            ]}
+          <TestimonialAboutCard
+            tag="Our Philosophy"
+            tagIcon={Quote}
+            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 
-            title="Featured Products"
-            description="Explore our curated collection of premium hookahs, exquisite tobacco, and essential accessories."
+          <ProductCardThree
+            title="Our Featured Offerings"
+            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: "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: "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: "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: "1", name: "AI Assistant Pro", price: "$199.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+A" },
+              { id: "2", name: "Smart Home Hub", price: "$249.00", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+B" },
+              { id: "3", name: "Cloud Storage Plus", price: "$49.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+C" },
+              { 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={false}
+            useInvertedBackground={true}
             textboxLayout="default"
           />
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardTwentySix 
-            title="Why Choose Hookah Haven?"
-            description="We offer an unparalleled selection, quality assurance, and dedicated customer support to enhance your hookah journey."
-            features={[
-              {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},
-              {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},
-              {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}
+          <FeatureCardTwentyOne
+            title="Unlock Limitless Possibilities"
+            description="Our platform brings powerful features designed to streamline your operations."
+            accordionItems={[
+              { id: "1", title: "Intuitive Interface", content: "Navigate our platform with ease thanks to our user-friendly design." },
+              { id: "2", title: "Robust Security", content: "Your data is protected with industry-leading security protocols." },
+              { id: "3", title: "Scalable Infrastructure", content: "Grow your business without limits on our adaptable cloud infrastructure." }
             ]}
-            textboxLayout="default"
-            useInvertedBackground={true}
+            imageSrc="https://via.placeholder.com/800x600.png?text=Feature+Overview"
+            imageAlt="Feature showcase"
+            mediaAnimation="slide-up"
+            useInvertedBackground={false}
+            mediaPosition="left"
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardFive 
-            title="What Our Customers Say"
-            description="Hear from satisfied enthusiasts who've experienced the Hookah Haven difference."
+          <TestimonialCardTwelve
             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: "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: "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: "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: '1', name: 'Emily White', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+1' },
+              { id: '2', name: 'David Lee', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+2' },
+              { id: '3', name: 'Sophia Miller', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+3' },
+              { id: '4', name: 'James Brown', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+4' }
             ]}
-            textboxLayout="default"
-            useInvertedBackground={false}
-          />
-        </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" }}
+            cardTitle="Trusted by industry leaders and satisfied customers worldwide."
+            cardTag="Join our growing community"
+            cardAnimation="blur-reveal"
             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 
-            logoText="Hookah Haven"
+          <FooterLogoEmphasis
+            logoText="MyCo"
             columns={[
-              {title: "Shop", items: [
-                {label: "Hookahs", href: "#products"},
-                {label: "Tobacco", href: "#products"},
-                {label: "Charcoal", href: "#products"},
-                {label: "Accessories", href: "#products"}
+              {items: [
+                {label: "Products", href: "/#products"},
+                {label: "Features", href: "/#features"}
               ]},
-              {title: "Company", items: [
-                {label: "About Us", href: "#about"},
-                {label: "FAQ", href: "#faq"},
-                {label: "Contact", href: "#contact"}
+              {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>
       </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 FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+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"
-                defaultTextAnimation="reveal-blur"
-                borderRadius="rounded"
+                defaultButtonVariant="elastic-effect"
+                defaultTextAnimation="entrance-slide"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
-                background="aurora"
-                cardStyle="inset"
-                primaryButtonStyle="primary-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="light"
+                sizing="mediumLarge"
+                background="fluid"
+                cardStyle="soft-shadow"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="glass"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
-                            brandName="Hookah Haven"
+                        <NavbarStyleFullscreen
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {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
-                            logoText="Hookah Haven"
+                        <FooterLogoEmphasis
+                            logoText="MyCo"
                             columns={[
-                                { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                {items: [
+                                    {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"
-                defaultTextAnimation="reveal-blur"
-                borderRadius="rounded"
+                defaultButtonVariant="elastic-effect"
+                defaultTextAnimation="entrance-slide"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
-                background="aurora"
-                cardStyle="inset"
-                primaryButtonStyle="primary-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="light"
+                sizing="mediumLarge"
+                background="fluid"
+                cardStyle="soft-shadow"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="glass"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
-                            brandName="Hookah Haven"
+                        <NavbarStyleFullscreen
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {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
-                            logoText="Hookah Haven"
+                        <FooterLogoEmphasis
+                            logoText="MyCo"
                             columns={[
-                                { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                {items: [
+                                    {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"
-            defaultTextAnimation="reveal-blur"
-            borderRadius="rounded"
+            defaultButtonVariant="elastic-effect"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
-            background="aurora"
-            cardStyle="inset"
-            primaryButtonStyle="primary-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="light"
+            sizing="mediumLarge"
+            background="fluid"
+            cardStyle="soft-shadow"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                    <NavbarStyleApple
-                        brandName="Hookah Haven"
+                    <NavbarStyleFullscreen
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
+                            {name: "Home", id: "/"},
+                            {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: "Buy Now", onClick: handleBuyNow },
+                            { text: "Add to Cart", onClick: handleAddToCart },
+                            { 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
-                        logoText="Hookah Haven"
+                    <FooterLogoEmphasis
+                        logoText="MyCo"
                         columns={[
-                            { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
-                            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                            {items: [
+                                {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 FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+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"
-                defaultTextAnimation="reveal-blur"
-                borderRadius="rounded"
+                defaultButtonVariant="elastic-effect"
+                defaultTextAnimation="entrance-slide"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
-                background="aurora"
-                cardStyle="inset"
-                primaryButtonStyle="primary-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="light"
+                sizing="mediumLarge"
+                background="fluid"
+                cardStyle="soft-shadow"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="glass"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
-                            brandName="Hookah Haven"
+                        <NavbarStyleFullscreen
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {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
-                            logoText="Hookah Haven"
+                        <FooterLogoEmphasis
+                            logoText="MyCo"
                             columns={[
-                                { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                {items: [
+                                    {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"
-            defaultTextAnimation="reveal-blur"
-            borderRadius="rounded"
+            defaultButtonVariant="elastic-effect"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
-            background="aurora"
-            cardStyle="inset"
-            primaryButtonStyle="primary-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="light"
+            sizing="mediumLarge"
+            background="fluid"
+            cardStyle="soft-shadow"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                    <NavbarStyleApple
-                        brandName="Hookah Haven"
+                    <NavbarStyleFullscreen
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
+                            {name: "Home", id: "/"},
+                            {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
-                        logoText="Hookah Haven"
+                    <FooterLogoEmphasis
+                        logoText="MyCo"
                         columns={[
-                            { title: "Shop", items: [{ label: "Hookahs", href: "#products" }, { label: "Tobacco", href: "#products" }, { label: "Charcoal", href: "#products" }, { label: "Accessories", href: "#products" }] },
-                            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                            {items: [
+                                {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;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1c1c1c;;
+  /* --background: #f5faff;;
+  --card: #f1f8ff;;
+  --foreground: #001122;;
+  --primary-cta: #15479c;;
   --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;; */
+  --accent: #a8cce8;;
+  --background-accent: #7ba3cf;; */
 
-  --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1c1c1c;;
-  --primary-cta-text: #f5f5f5;;
+  --background: #f5faff;;
+  --card: #f1f8ff;;
+  --foreground: #001122;;
+  --primary-cta: #15479c;;
+  --primary-cta-text: #0a0a0a;;
   --secondary-cta: #ffffff;;
-  --secondary-cta-text: #1c1c1c;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;;
+  --secondary-cta-text: #ffffffe6;;
+  --accent: #a8cce8;;
+  --background-accent: #7ba3cf;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);