Update src/app/shop/page.tsx

Merge version_3 into main

src/app/blog/page.tsx

@@ -7,50 +7,50 @@ 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 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"
+                        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: "Features", id: "/#features"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Testimonials", id: "/#testimonials"},
+                            {name: "FAQ", id: "/#faq"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
                     />
                 </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"
@@ -60,25 +60,24 @@ export default function BlogPage() {
 
                     <div id="footer" data-section="footer">
                         <FooterBaseCard
-                            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" },
-                                    ],
+                                    title: "Solutions",                                    items: [
+                                        { label: "Products", href: "/#products" },
+                                        { label: "Features", href: "/#features" }
+                                    ]
                                 },
                                 {
                                     title: "Company",                                    items: [
                                         { label: "About Us", href: "/#about" },
+                                        { label: "Blog", href: "/blog" },
                                         { label: "FAQ", href: "/#faq" },
-                                        { label: "Contact", href: "/#contact" },
-                                    ],
-                                },
+                                        { label: "Contact", href: "/#contact" }
+                                    ]
+                                }
                             ]}
-                            copyrightText="© 2024 Hookah Haven. All rights reserved."
+                            copyrightText="© 2024 MyCo. 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

@@ -2,38 +2,39 @@
 
 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 HeroLogo from '@/components/sections/hero/HeroLogo';
+import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Boxes, CheckCircle, Headphones } from 'lucide-react';
+import { Phone } 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"
+            brandName="MyCo"
             navItems={[
-              {name: "Products", id: "products"},
+              {name: "Home", id: "/"},
               {name: "About", id: "about"},
               {name: "Features", id: "features"},
+              {name: "Products", id: "products"},
               {name: "Testimonials", id: "testimonials"},
               {name: "FAQ", id: "faq"},
               {name: "Contact", id: "contact"}
@@ -42,129 +43,141 @@ export default function LandingPage() {
         </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"
+          <HeroLogo
+            logoText="MyCo"
+            description="Innovative solutions for a brighter future."
             buttons={[
-              {text: "Shop Now", href: "#products"},
-              {text: "Learn More", href: "#about"}
+              { text: "Get Started", href: "#contact" },
+              { text: "Learn More", href: "#about" }
             ]}
-            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"
+            imageSrc="https://via.placeholder.com/1920x1080.png?text=Modern+Business"
+            imageAlt="Modern business cityscape"
+            showDimOverlay={true}
           />
         </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."
+          <MediaSplitTabsAbout
+            title="Our Story & Vision"
+            description="We are dedicated to building innovative solutions that empower businesses and individuals."
+            tabs={[
+              { id: "mission", label: "Our Mission", description: "To deliver cutting-edge technology and exceptional service that drives success." },
+              { id: "values", label: "Our Values", description: "Integrity, innovation, customer focus, and collaboration are at the core of everything we do." },
+              { id: "team", label: "Our Team", description: "A passionate group of experts committed to excellence and achieving remarkable results." }
             ]}
+            imageSrc="https://via.placeholder.com/800x600.png?text=Team+Collaboration"
+            imageAlt="Team collaborating in an office"
+            imagePosition="right"
+            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."
+          <ProductCardTwo
+            title="Our Featured Products"
+            description="Explore a selection of our most popular and innovative products designed to meet your needs."
             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", brand: "TechInnovate", name: "AI Assistant Pro", price: "$199.99", rating: 5, reviewCount: "1.2k", imageSrc: "https://via.placeholder.com/400x400.png?text=AI+Assistant" },
+              { id: "2", brand: "FutureGadgets", name: "Smart Home Hub", price: "$249.00", rating: 4, reviewCount: "850", imageSrc: "https://via.placeholder.com/400x400.png?text=Smart+Home" },
+              { id: "3", brand: "InnovateCo", name: "Cloud Storage Plus", price: "$49.99", rating: 4, reviewCount: "3.5k", imageSrc: "https://via.placeholder.com/400x400.png?text=Cloud+Storage" },
+              { id: "4", brand: "FutureTech", name: "Eco-Friendly Charger", price: "$29.99", rating: 5, reviewCount: "2.1k", imageSrc: "https://via.placeholder.com/400x400.png?text=Eco+Charger" }
             ]}
+            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."
+          <FeatureCardThree
+            title="Key Features That Set Us Apart"
+            description="Discover the core functionalities and benefits that make our solutions stand out."
             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}
+              { id: "01", title: "Advanced Analytics", description: "Gain deep insights with our powerful and intuitive analytics dashboard.", imageSrc: "https://via.placeholder.com/600x400.png?text=Analytics" },
+              { id: "02", title: "Seamless Integration", description: "Connect effortlessly with your existing tools and workflows.", imageSrc: "https://via.placeholder.com/600x400.png?text=Integration" },
+              { id: "03", title: "24/7 Support", description: "Our dedicated support team is always here to help you succeed.", imageSrc: "https://via.placeholder.com/600x400.png?text=Support" }
             ]}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            useInvertedBackground={false}
             textboxLayout="default"
-            useInvertedBackground={true}
           />
         </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."
+          <TestimonialCardOne
+            title="What Our Clients Say"
+            description="Hear directly from our satisfied customers about their experience with our services."
             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: "Alice Wonderland", role: "CEO, InnovateCo", company: "Tech Solutions", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+1" },
+              { id: "2", name: "Bob The Builder", role: "Founder, ConstructCo", company: "Design Agency", rating: 4, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+2" },
+              { id: "3", name: "Charlie Chaplin", role: "Manager, Creative Hub", company: "Media Group", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+3" }
             ]}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            useInvertedBackground={true}
             textboxLayout="default"
-            useInvertedBackground={false}
           />
         </div>
 
         <div id="faq" data-section="faq">
-          <FaqSplitText 
-            sideTitle="Frequently Asked Questions"
+          <FaqSplitMedia
+            title="Frequently Asked Questions"
+            description="Find quick answers to the most common questions about our products and services."
             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."}
+              { id: "1", title: "How does your service work?", content: "Our service provides seamless integration with your existing systems, ensuring a smooth transition and minimal disruption." },
+              { id: "2", title: "What is your pricing model?", content: "We offer flexible pricing tiers designed to fit businesses of all sizes, from startups to large enterprises." },
+              { id: "3", title: "Can I customize the features?", content: "Yes, our platform is highly customizable, allowing you to tailor features to your specific business needs." },
+              { id: "4", title: "Do you offer support?", content: "Absolutely! We provide 24/7 customer support via chat, email, and phone to assist you with any inquiries." }
             ]}
-            textPosition="left"
+            imageSrc="https://via.placeholder.com/800x600.png?text=FAQ+Support"
+            imageAlt="Customer support representatives"
+            mediaAnimation="slide-up"
+            mediaPosition="left"
             faqsAnimation="slide-up"
             useInvertedBackground={false}
             animationType="smooth"
+            textboxLayout="default"
           />
         </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"}
+          <ContactFaq
+            ctaTitle="Ready to Start?"
+            ctaDescription="Get in touch with our team today to discuss your project and discover how we can help."
+            ctaButton={{ text: "Contact Us Now", href: "#contact" }}
+            ctaIcon={Phone}
+            faqs={[
+              { id: "1", title: "What are your office hours?", content: "Our support team is available Monday to Friday, 9 AM to 5 PM EST." },
+              { id: "2", title: "Where are you located?", content: "We operate globally with a primary office in a major tech hub. Contact us for specific details." },
+              { id: "3", title: "How quickly do you respond?", content: "We aim to respond to all inquiries within 24 business hours." }
             ]}
-            animationType="reveal-blur"
-            background={{ variant: "radial-gradient" }}
             useInvertedBackground={true}
+            animationType="slide-up"
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterBaseCard 
-            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"}
+              {title: "Solutions", items: [
+                {label: "Products", href: "#products"},
+                {label: "Features", href: "#features"}
               ]},
               {title: "Company", items: [
                 {label: "About Us", href: "#about"},
+                {label: "Blog", href: "/blog"},
                 {label: "FAQ", href: "#faq"},
                 {label: "Contact", href: "#contact"}
               ]}
             ]}
-            copyrightText="© 2024 Hookah Haven. All rights reserved."
+            copyrightText="© 2024 MyCo. All rights reserved."
           />
         </div>
       </main>
     </ThemeProvider>
   );
-}
+}

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

@@ -77,24 +77,29 @@ 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"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {name: "About", id: "/#about"},
+                                {name: "Features", id: "/#features"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Testimonials", id: "/#testimonials"},
+                                {name: "FAQ", id: "/#faq"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -106,12 +111,24 @@ function ProductPageContent({ params }: ProductPageProps) {
                     </main>
                     <div id="footer" data-section="footer">
                         <FooterBaseCard
-                            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" }] },
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                {
+                                    title: "Solutions",                                    items: [
+                                        { label: "Products", href: "/#products" },
+                                        { label: "Features", href: "/#features" }
+                                    ]
+                                },
+                                {
+                                    title: "Company",                                    items: [
+                                        { label: "About Us", href: "/#about" },
+                                        { label: "Blog", href: "/blog" },
+                                        { label: "FAQ", href: "/#faq" },
+                                        { label: "Contact", href: "/#contact" }
+                                    ]
+                                }
                             ]}
-                            copyrightText="© 2024 Hookah Haven. All rights reserved."
+                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -122,24 +139,29 @@ 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"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {name: "About", id: "/#about"},
+                                {name: "Features", id: "/#features"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Testimonials", id: "/#testimonials"},
+                                {name: "FAQ", id: "/#faq"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -157,12 +179,24 @@ function ProductPageContent({ params }: ProductPageProps) {
                     </main>
                     <div id="footer" data-section="footer">
                         <FooterBaseCard
-                            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" }] },
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                {
+                                    title: "Solutions",                                    items: [
+                                        { label: "Products", href: "/#products" },
+                                        { label: "Features", href: "/#features" }
+                                    ]
+                                },
+                                {
+                                    title: "Company",                                    items: [
+                                        { label: "About Us", href: "/#about" },
+                                        { label: "Blog", href: "/blog" },
+                                        { label: "FAQ", href: "/#faq" },
+                                        { label: "Contact", href: "/#contact" }
+                                    ]
+                                }
                             ]}
-                            copyrightText="© 2024 Hookah Haven. All rights reserved."
+                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -172,24 +206,29 @@ 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"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
+                            {name: "Home", id: "/"},
+                            {name: "About", id: "/#about"},
+                            {name: "Features", id: "/#features"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Testimonials", id: "/#testimonials"},
+                            {name: "FAQ", id: "/#faq"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
@@ -210,8 +249,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 +264,31 @@ 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"
+                        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" }] }
+                            {
+                                title: "Solutions",                                items: [
+                                    { label: "Products", href: "/#products" },
+                                    { label: "Features", href: "/#features" }
+                                ]
+                            },
+                            {
+                                title: "Company",                                items: [
+                                    { label: "About Us", href: "/#about" },
+                                    { label: "Blog", href: "/blog" },
+                                    { label: "FAQ", href: "/#faq" },
+                                    { label: "Contact", href: "/#contact" }
+                                ]
+                            }
                         ]}
-                        copyrightText="© 2024 Hookah Haven. All rights reserved."
+                        copyrightText="© 2024 MyCo. All rights reserved."
                     />
                 </div>
             </ReactLenis>

src/app/shop/page.tsx

@@ -44,24 +44,29 @@ 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"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {name: "About", id: "/#about"},
+                                {name: "Features", id: "/#features"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Testimonials", id: "/#testimonials"},
+                                {name: "FAQ", id: "/#faq"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -71,12 +76,24 @@ function ShopPageContent() {
                     </main>
                     <div id="footer" data-section="footer">
                         <FooterBaseCard
-                            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" }] },
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
+                                {
+                                    title: "Solutions",                                    items: [
+                                        { label: "Products", href: "/#products" },
+                                        { label: "Features", href: "/#features" }
+                                    ]
+                                },
+                                {
+                                    title: "Company",                                    items: [
+                                        { label: "About Us", href: "/#about" },
+                                        { label: "Blog", href: "/blog" },
+                                        { label: "FAQ", href: "/#faq" },
+                                        { label: "Contact", href: "/#contact" }
+                                    ]
+                                }
                             ]}
-                            copyrightText="© 2024 Hookah Haven. All rights reserved."
+                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -86,24 +103,29 @@ 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"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
+                            {name: "Home", id: "/"},
+                            {name: "About", id: "/#about"},
+                            {name: "Features", id: "/#features"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Testimonials", id: "/#testimonials"},
+                            {name: "FAQ", id: "/#faq"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
@@ -129,19 +151,31 @@ 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"
+                        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" }] }
+                            {
+                                title: "Solutions",                                items: [
+                                    { label: "Products", href: "/#products" },
+                                    { label: "Features", href: "/#features" }
+                                ]
+                            },
+                            {
+                                title: "Company",                                items: [
+                                    { label: "About Us", href: "/#about" },
+                                    { label: "Blog", href: "/blog" },
+                                    { label: "FAQ", href: "/#faq" },
+                                    { label: "Contact", href: "/#contact" }
+                                ]
+                            }
                         ]}
-                        copyrightText="© 2024 Hookah Haven. All rights reserved."
+                        copyrightText="© 2024 MyCo. 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);