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: "Головна", id: "/" },
-                            { name: "Продукція", id: "/#products" },
-                            { name: "Про нас", id: "/#about" },
-                            { name: "Особливості", id: "/#features" },
-                            { name: "Відгуки", id: "/#testimonials" },
-                            { name: "FAQ", id: "/#faq" },
-                            { name: "Контакти", 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">Завантаження дописів...</p>
+                            <p className="text-foreground">Loading blog posts...</p>
                         </div>
                     ) : (
                         <div id="blog" data-section="blog">
-                            <BlogCardTwo
+                            <BlogCardThree
                                 blogs={posts}
-                                title="Останні статті"
-                                description="Ідеї та оновлення від нашої команди"
+                                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: "Магазин",                                    items: [
-                                        { label: "Кальяни", href: "/#products" },
-                                        { label: "Тютюн", href: "/#products" },
-                                        { label: "Вугілля", href: "/#products" },
-                                        { label: "Аксесуари", href: "/#products" }
-                                    ]
-                                },
-                                {
-                                    title: "Компанія",                                    items: [
-                                        { label: "Про нас", href: "/#about" },
-                                        { label: "FAQ", href: "/#faq" },
-                                        { label: "Контакти", 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. Всі права захищені."
                         />
                     </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 | Кальяни преміум-класу, тютюн та аксесуари",  description: "Відкрийте для себе найкращий вибір кальянів, преміальних тютюнових сумішей та необхідних аксесуарів у Hookah Haven. Підніміть свій досвід куріння вже сьогодні.",  keywords: ["кальян", "шиша", "тютюн", "вугілля", "аксесуари для кальяну", "преміум кальян", "онлайн магазин кальянів"],
+  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 | Кальяни преміум-класу, тютюн та аксесуари",    description: "Відкрийте для себе найкращий вибір кальянів, преміальних тютюнових сумішей та необхідних аксесуарів у Hookah Haven. Підніміть свій досвід куріння вже сьогодні.",    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: "Елегантний кальянний набір з димом"},
+        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 | Кальяни преміум-класу, тютюн та аксесуари",    description: "Відкрийте для себе найкращий вибір кальянів, преміальних тютюнових сумішей та необхідних аксесуарів у Hookah Haven. Підніміть свій досвід куріння вже сьогодні.",    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({
@@ -27,10 +34,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="uk" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${archivo.variable} antialiased`}
+          className={`${dmSans.variable} ${inter.variable} antialiased`}
         >
           <Tag />
           {children}

src/app/page.tsx

@@ -1,167 +1,183 @@
 "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: "Продукція", id: "products"},
-              {name: "Про нас", id: "about"},
-              {name: "Особливості", id: "features"},
-              {name: "Відгуки", id: "testimonials"},
-              {name: "FAQ", id: "faq"},
-              {name: "Контакти", 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="Відчуйте найкращий кальян"
-            description="Відкрийте для себе преміум-вибір тютюну, кальянів та аксесуарів для неперевершеного досвіду куріння."
-            tag="Ваш найкращий кальянний напрямок"
+          <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: "Купити зараз", href: "#products"},
-              {text: "Дізнатися більше", 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="Елегантний кальянний набір з димом"
-            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="Наша пристрасть до кальяну"
-            description={[
-              "У Hookah Haven ми прагнемо забезпечити ентузіастів продукцією найвищої якості. Від рідкісних тютюнових сумішей до вишуканих кальянів та необхідних аксесуарів, ми ретельно підбираємо нашу колекцію, щоб кожна затяжка приносила задоволення.",              "Ми віримо у покращення ваших моментів відпочинку та соціального спілкування за допомогою чудового кальяну. Наша відданість досконалості гарантує неперевершений досвід."
-            ]}
+          <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: "Наша історія", href: "#about" }]}
           />
         </div>
 
         <div id="products" data-section="products">
-          <ProductCardOne 
-            title="Рекомендовані товари"
-            description="Ознайомтеся з нашою відібраною колекцією преміальних кальянів, вишуканого тютюну та необхідних аксесуарів."
+          <ProductCardThree
+            title="Our Featured Offerings"
+            description="Explore our innovative products, crafted to enhance your productivity and lifestyle."
             products={[
-              {id: "1", name: "Розкішний скляний кальян", price: "$249.99", imageSrc: "https://img.b2bpic.net/free-photo/meduza-hookah-with-cockatails-side-view_140725-9140.jpg", imageAlt: "Розкішна скляна кальянна трубка"},
-              {id: "2", name: "Екзотичні тютюнові суміші", price: "$19.99", imageSrc: "https://img.b2bpic.net/free-photo/fresh-shisha-woman-hands_140725-1338.jpg", imageAlt: "Барвисті упаковки екзотичних тютюнових сумішей"},
-              {id: "3", name: "Натуральне кокосове вугілля", price: "$12.99", imageSrc: "https://img.b2bpic.net/free-photo/close-up-hookah-vaping_23-2149297183.jpg", imageAlt: "Купка натурального кокосового вугілля"},
-              {id: "4", name: "Преміум шланг для кальяну", price: "$34.99", imageSrc: "https://img.b2bpic.net/free-photo/hookah-still-life-composition_23-2149213330.jpg", imageAlt: "Преміум шланг для кальяну"}
+              { 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="Чому обирають Hookah Haven?"
-            description="Ми пропонуємо неперевершений вибір, гарантію якості та віддану підтримку клієнтів для покращення вашого кальянного досвіду."
-            features={[
-              {title: "Неперевершена якість", description: "Лише найкращі матеріали та інгредієнти потрапляють до нашого асортименту, гарантуючи неперевершений досвід.", imageSrc: "https://img.b2bpic.net/free-photo/suitmaker-tailor-cutting-fabric_482257-78193.jpg", imageAlt: "Крупний план добре виготовленого компонента кальяну", buttonIcon: CheckCircle},
-              {title: "Широкий асортимент", description: "Від класичних дизайнів до сучасних інновацій, знайдіть ідеальний кальян та тютюн на свій смак.", imageSrc: "https://img.b2bpic.net/free-photo/supermarket-banner-with-various-items_23-2149501012.jpg", imageAlt: "Різноманітний асортимент кальянів та тютюнових коробок", buttonIcon: Boxes},
-              {title: "Професійна підтримка клієнтів", description: "Наша обізнана команда готова допомогти вам з будь-якими питаннями чи рекомендаціями.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-call-center-manager-providing-guidance-intern-addressing-questions_482257-125804.jpg", imageAlt: "Представник служби підтримки клієнтів допомагає клієнту", 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="Що кажуть наші клієнти"
-            description="Послухайте від задоволених ентузіастів, які відчули різницю Hookah Haven."
+          <TestimonialCardTwelve
             testimonials={[
-              {id: "1", name: "Омар Аль-Хасан, Знавець", date: "Date: 15 May 2024", title: "Просто найкращі!", quote: "Hookah Haven забезпечує якість та різноманітність. Моє улюблене місце для всіх потреб шиші.", tag: "Преміум досвід", 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: "Задоволений клієнт насолоджується кальяном"},
-              {id: "2", name: "Лейла Хан, Власниця лаунжу", date: "Date: 20 April 2024", title: "Підвищили мій бізнес", quote: "Їх опції вугілля та тютюну просто фантастичні. Мої клієнти в захваті від якості!", tag: "Бізнес-партнер", 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: "Власниця лаунжу посміхається"},
-              {id: "3", name: "Ахмед Малік, Соціальний курець", date: "Date: 10 March 2024", title: "Відмінний вибір та сервіс", quote: "Знайшов тут свою нову улюблену суміш. Персонал був неймовірно корисним та доброзичливим.", tag: "Новий фаворит", 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: "Людина насолоджується кальянною сесією"},
-              {id: "4", name: "Сара Джафарі, Ентузіастка", date: "Date: 02 February 2024", title: "Неперевершена якість!", quote: "Кальяни приголомшливі та працюють бездоганно. Безумовно, варті кожної копійки.", tag: "Високоякісне обладнання", 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: "Жінка милується кальяном"}
+              { 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="Часті питання"
-            faqs={[
-              {id: "1", title: "Який тютюн ви пропонуєте?", content: "Ми пропонуємо широкий асортимент преміального тютюну для кальяну, включаючи традиційні, сучасні та екзотичні суміші від провідних світових брендів."},
-              {id: "2", title: "Чи здійснюєте ви міжнародну доставку?", content: "Наразі ми здійснюємо доставку лише в межах [Вашої країни/регіону]. Будь ласка, перегляньте нашу політику доставки для отримання додаткової інформації."},
-              {id: "3", title: "Як доглядати за новим кальяном?", content: "Кожен кальян поставляється з інструкціями по догляду. Зазвичай, найкраще чистити всі компоненти після кожного використання теплою водою та щіткою."},
-              {id: "4", title: "Яка ваша політика повернення?", content: "Ми приймаємо повернення протягом 30 днів з моменту покупки для невикористаних та нерозпакованих товарів. Детальну інформацію дивіться в нашій повній політиці повернення."}
-            ]}
-            textPosition="left"
-            faqsAnimation="slide-up"
-            useInvertedBackground={false}
-            animationType="smooth"
-          />
-        </div>
-
-        <div id="contact" data-section="contact">
-          <ContactText 
-            text="Готові покращити свій кальянний досвід? Зв'яжіться з нашою командою для персоналізованих рекомендацій або будь-яких запитів."
-            buttons={[
-              {text: "Зв'язатися з нами", href: "/contact"},
-              {text: "Купити всю продукцію", 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: "Магазин", items: [
-                {label: "Кальяни", href: "#products"},
-                {label: "Тютюн", href: "#products"},
-                {label: "Вугілля", href: "#products"},
-                {label: "Аксесуари", href: "#products"}
+              {items: [
+                {label: "Products", href: "/#products"},
+                {label: "Features", href: "/#features"}
               ]},
-              {title: "Компанія", items: [
-                {label: "Про нас", href: "#about"},
-                {label: "FAQ", href: "#faq"},
-                {label: "Контакти", href: "#contact"}
+              {items: [
+                {label: "About Us", href: "/#about"},
+                {label: "Blog", href: "/blog"},
+                {label: "Shop", href: "/shop"},
+                {label: "Contact", href: "/#contact"}
               ]}
             ]}
-            copyrightText="© 2024 Hookah Haven. Всі права захищені."
           />
         </div>
       </main>

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,41 +77,52 @@ 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: "Головна", id: "/" },
-                                { name: "Магазин", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {name: "About", id: "/#about"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Blog", id: "/blog"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
+                            bottomLeftText="Innovation Hub"
+                            bottomRightText="info@myco.com"
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <div id="loading-indicator" data-section="loading-indicator">
-                            <p className="text-foreground">Завантаження товару...</p>
+                            <p className="text-foreground">Loading product...</p>
                         </div>
                     </main>
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
-                            logoText="Hookah Haven"
+                        <FooterLogoEmphasis
+                            logoText="MyCo"
                             columns={[
-                                { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
-                                { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", 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. Всі права захищені."
                         />
                     </div>
                 </ReactLenis>
@@ -122,47 +133,58 @@ 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: "Головна", id: "/" },
-                                { name: "Магазин", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {name: "About", id: "/#about"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Blog", id: "/blog"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
+                            bottomLeftText="Innovation Hub"
+                            bottomRightText="info@myco.com"
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <div id="not-found" data-section="not-found" className="text-center">
-                            <p className="text-foreground mb-4">Товар не знайдено</p>
+                            <p className="text-foreground mb-4">Product not found</p>
                             <button
                                 onClick={() => router.push("/shop")}
                                 className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
                             >
-                                Повернутися до магазину
+                                Back to Shop
                             </button>
                         </div>
                     </main>
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
-                            logoText="Hookah Haven"
+                        <FooterLogoEmphasis
+                            logoText="MyCo"
                             columns={[
-                                { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
-                                { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", 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. Всі права захищені."
                         />
                     </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: "Головна", id: "/" },
-                            { name: "Магазин", id: "/shop" }
+                            {name: "Home", id: "/"},
+                            {name: "About", id: "/#about"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Blog", id: "/blog"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
-                        button={{ text: "Кошик", 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: "Додати до кошика", onClick: handleAddToCart },
-                            { text: "Купити зараз", 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 ? "Обробка..." : "Оформити замовлення",                                onClick: handleCheckout,
+                                text: isCheckoutLoading ? "Processing..." : "Checkout",                                onClick: handleCheckout,
                             },
                         ]}
                     />
                 </div>
                 <div id="footer" data-section="footer">
-                    <FooterBaseCard
-                        logoText="Hookah Haven"
+                    <FooterLogoEmphasis
+                        logoText="MyCo"
                         columns={[
-                            { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
-                            { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", 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. Всі права захищені."
                     />
                 </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: "Головна", id: "/" },
-                                { name: "Магазин", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {name: "About", id: "/#about"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Blog", id: "/blog"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Кошик", 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">Завантаження товарів...</p>
+                        <p className="text-foreground">Loading products...</p>
                     </main>
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
-                            logoText="Hookah Haven"
+                        <FooterLogoEmphasis
+                            logoText="MyCo"
                             columns={[
-                                { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
-                                { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", 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. Всі права захищені."
                         />
                     </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: "Головна", id: "/" },
-                            { name: "Магазин", id: "/shop" }
+                            {name: "Home", id: "/"},
+                            {name: "About", id: "/#about"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Blog", id: "/blog"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
-                        button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
+                        bottomLeftText="Innovation Hub"
+                        bottomRightText="info@myco.com"
                     />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">
@@ -114,9 +129,9 @@ function ShopPageContent() {
                         products={products}
                         searchValue={search}
                         onSearchChange={setSearch}
-                        searchPlaceholder="Пошук товарів..."
+                        searchPlaceholder="Search products..."
                         filters={filters}
-                        emptyMessage="Товари не знайдено"
+                        emptyMessage="No products found"
                     />
                 </div>
                 <div id="product-cart" data-section="product-cart">
@@ -129,19 +144,26 @@ function ShopPageContent() {
                         total={`$${cartTotal}`}
                         buttons={[
                             {
-                                text: isCheckoutLoading ? "Обробка..." : "Оформити замовлення",                                onClick: handleCheckout,
+                                text: isCheckoutLoading ? "Processing..." : "Checkout",                                onClick: handleCheckout,
                             },
                         ]}
                     />
                 </div>
                 <div id="footer" data-section="footer">
-                    <FooterBaseCard
-                        logoText="Hookah Haven"
+                    <FooterLogoEmphasis
+                        logoText="MyCo"
                         columns={[
-                            { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
-                            { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", 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. Всі права захищені."
                     />
                 </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: #0a0a0a;;
-  --card: #1a1a1a;;
-  --foreground: #ffffffe6;;
-  --primary-cta: #e6e6e6;;
-  --secondary-cta: #1a1a1a;;
-  --accent: #737373;;
-  --background-accent: #737373;; */
+  /* --background: #f5faff;;
+  --card: #f1f8ff;;
+  --foreground: #001122;;
+  --primary-cta: #15479c;;
+  --secondary-cta: #ffffff;;
+  --accent: #a8cce8;;
+  --background-accent: #7ba3cf;; */
 
-  --background: #0a0a0a;;
-  --card: #1a1a1a;;
-  --foreground: #ffffffe6;;
-  --primary-cta: #e6e6e6;;
+  --background: #f5faff;;
+  --card: #f1f8ff;;
+  --foreground: #001122;;
+  --primary-cta: #15479c;;
   --primary-cta-text: #0a0a0a;;
-  --secondary-cta: #1a1a1a;;
+  --secondary-cta: #ffffff;;
   --secondary-cta-text: #ffffffe6;;
-  --accent: #737373;;
-  --background-accent: #737373;;
+  --accent: #a8cce8;;
+  --background-accent: #7ba3cf;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);