Merge version_5 into main

Merge version_5 into main

src/app/blog/page.tsx

@@ -5,52 +5,52 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 
 // New imports based on requirements
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
+            defaultButtonVariant="elastic-effect"
-            defaultTextAnimation="reveal-blur"
+            defaultTextAnimation="entrance-slide"
-            borderRadius="rounded"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
+            sizing="mediumLarge"
-            background="aurora"
+            background="fluid"
-            cardStyle="inset"
+            cardStyle="soft-shadow"
-            primaryButtonStyle="primary-glow"
+            primaryButtonStyle="gradient"
-            secondaryButtonStyle="radial-glow"
+            secondaryButtonStyle="glass"
-            headingFontWeight="light"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="nav" data-section="nav">
-                    <NavbarStyleApple
+                    <NavbarStyleFullscreen
-                        brandName="Hookah Haven"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Головна", id: "/" },
+                            {name: "Home", id: "/"},
-                            { name: "Продукція", id: "/#products" },
+                            {name: "About", id: "/#about"},
-                            { name: "Про нас", id: "/#about" },
+                            {name: "Products", id: "/#products"},
-                            { name: "Особливості", id: "/#features" },
+                            {name: "Blog", id: "/blog"},
-                            { name: "Відгуки", id: "/#testimonials" },
+                            {name: "Contact", id: "/#contact"}
-                            { name: "FAQ", id: "/#faq" },
-                            { name: "Контакти", 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="Останні статті"
+                                title="Latest Insights & Updates"
-                                description="Ідеї та оновлення від нашої команди"
+                                description="Stay informed with our articles and news."
                                 textboxLayout="default"
                                 useInvertedBackground={false}
                                 animationType="slide-up"
@@ -59,26 +59,20 @@ export default function BlogPage() {
                     )}
 
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
+                        <FooterLogoEmphasis
-                            logoText="Hookah Haven"
+                            logoText="MyCo"
                             columns={[
-                                {
+                                {items: [
-                                    title: "Магазин",                                    items: [
+                                    {label: "Products", href: "/#products"},
-                                        { label: "Кальяни", href: "/#products" },
+                                    {label: "Features", href: "/#features"}
-                                        { label: "Тютюн", href: "/#products" },
+                                ]},
-                                        { label: "Вугілля", href: "/#products" },
+                                {items: [
-                                        { label: "Аксесуари", href: "/#products" }
+                                    {label: "About Us", href: "/#about"},
-                                    ]
+                                    {label: "Blog", href: "/blog"},
-                                },
+                                    {label: "Shop", href: "/shop"},
-                                {
+                                    {label: "Contact", href: "/#contact"}
-                                    title: "Компанія",                                    items: [
+                                ]}
-                                        { label: "Про нас", href: "/#about" },
-                                        { label: "FAQ", href: "/#faq" },
-                                        { label: "Контакти", 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({
+const dmSans = DM_Sans({
-  variable: "--font-archivo",  subsets: ["latin"],
+  variable: "--font-dm-sans",  subsets: ["latin"],
+});
+
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Hookah Haven | Кальяни преміум-класу, тютюн та аксесуари",  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"},
+    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"],
   },
+  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 NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqBase from '@/components/sections/faq/FaqBase';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Boxes, CheckCircle, Headphones } from 'lucide-react';
+import { Sparkles, Quote, CheckCircle, Mail } from 'lucide-react';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="reveal-blur"
+      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
+      borderRadius="pill"
       contentWidth="medium"
-      sizing="large"
+      sizing="mediumLarge"
-      background="aurora"
+      background="fluid"
-      cardStyle="inset"
+      cardStyle="soft-shadow"
-      primaryButtonStyle="primary-glow"
+      primaryButtonStyle="gradient"
-      secondaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
-      headingFontWeight="light"
+      headingFontWeight="bold"
     >
       <main>
         <div id="nav" data-section="nav">
-          <NavbarStyleApple 
+          <NavbarStyleFullscreen
-            brandName="Hookah Haven"
+            brandName="MyCo"
             navItems={[
-              {name: "Продукція", id: "products"},
+              {name: "Home", id: "/"},
-              {name: "Про нас", id: "about"},
+              {name: "About", id: "/#about"},
-              {name: "Особливості", id: "features"},
+              {name: "Products", id: "/#products"},
-              {name: "Відгуки", id: "testimonials"},
+              {name: "Blog", id: "/blog"},
-              {name: "FAQ", id: "faq"},
+              {name: "Contact", id: "/#contact"}
-              {name: "Контакти", id: "contact"}
             ]}
+            bottomLeftText="Innovation Hub"
+            bottomRightText="info@myco.com"
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroBillboardScroll 
+          <HeroBillboardRotatedCarousel
-            background={{ variant: "radial-gradient" }}
+            title="Innovate. Create. Elevate Your Business."
-            title="Відчуйте найкращий кальян"
+            description="Experience cutting-edge solutions designed to transform your operations and drive unparalleled success."
-            description="Відкрийте для себе преміум-вибір тютюну, кальянів та аксесуарів для неперевершеного досвіду куріння."
+            background={{ variant: "sparkles-gradient" }}
-            tag="Ваш найкращий кальянний напрямок"
+            tag="Next Gen Solutions"
+            tagIcon={Sparkles}
             buttons={[
-              {text: "Купити зараз", href: "#products"},
+              { text: "Discover More", href: "/#products" },
-              {text: "Дізнатися більше", href: "#about"}
+              { text: "Get Started", href: "/#contact" }
             ]}
-            imageSrc="https://img.b2bpic.net/free-photo/group-handsome-retro-welldressed-man-gangsters-spend-time-club-smoking-hookah-multiethnic-male-bachelor-mafia-party-restaurant_627829-12017.jpg"
+            carouselItems={[
-            imageAlt="Елегантний кальянний набір з димом"
+              { id: '1', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+1', imageAlt: 'Product showcase 1' },
-            tagAnimation="blur-reveal"
+              { id: '2', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+2', imageAlt: 'Product showcase 2' },
-            buttonAnimation="blur-reveal"
+              { id: '3', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+3', imageAlt: 'Product showcase 3' },
+              { id: '4', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+4', imageAlt: 'Product showcase 4' },
+              { id: '5', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+5', imageAlt: 'Product showcase 5' },
+              { id: '6', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+6', imageAlt: 'Product showcase 6' }
+            ]}
+            autoPlay={true}
+            autoPlayInterval={4000}
           />
         </div>
 
         <div id="about" data-section="about">
-          <TextSplitAbout 
+          <TestimonialAboutCard
-            title="Наша пристрасть до кальяну"
+            tag="Our Philosophy"
-            description={[
+            tagIcon={Quote}
-              "У Hookah Haven ми прагнемо забезпечити ентузіастів продукцією найвищої якості. Від рідкісних тютюнових сумішей до вишуканих кальянів та необхідних аксесуарів, ми ретельно підбираємо нашу колекцію, щоб кожна затяжка приносила задоволення.",              "Ми віримо у покращення ваших моментів відпочинку та соціального спілкування за допомогою чудового кальяну. Наша відданість досконалості гарантує неперевершений досвід."
+            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 
+          <ProductCardThree
-            title="Рекомендовані товари"
+            title="Our Featured Offerings"
-            description="Ознайомтеся з нашою відібраною колекцією преміальних кальянів, вишуканого тютюну та необхідних аксесуарів."
+            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: "1", name: "AI Assistant Pro", price: "$199.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+A" },
-              {id: "2", name: "Екзотичні тютюнові суміші", price: "$19.99", imageSrc: "https://img.b2bpic.net/free-photo/fresh-shisha-woman-hands_140725-1338.jpg", imageAlt: "Барвисті упаковки екзотичних тютюнових сумішей"},
+              { id: "2", name: "Smart Home Hub", price: "$249.00", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+B" },
-              {id: "3", name: "Натуральне кокосове вугілля", price: "$12.99", imageSrc: "https://img.b2bpic.net/free-photo/close-up-hookah-vaping_23-2149297183.jpg", imageAlt: "Купка натурального кокосового вугілля"},
+              { id: "3", name: "Cloud Storage Plus", price: "$49.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+C" },
-              {id: "4", name: "Преміум шланг для кальяну", price: "$34.99", imageSrc: "https://img.b2bpic.net/free-photo/hookah-still-life-composition_23-2149213330.jpg", imageAlt: "Преміум шланг для кальяну"}
+              { id: "4", name: "Eco-Friendly Charger", price: "$29.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+D" }
             ]}
+            gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
-            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={true}
-            useInvertedBackground={false}
             textboxLayout="default"
           />
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardTwentySix 
+          <FeatureCardTwentyOne
-            title="Чому обирають Hookah Haven?"
+            title="Unlock Limitless Possibilities"
-            description="Ми пропонуємо неперевершений вибір, гарантію якості та віддану підтримку клієнтів для покращення вашого кальянного досвіду."
+            description="Our platform brings powerful features designed to streamline your operations."
-            features={[
+            accordionItems={[
-              {title: "Неперевершена якість", description: "Лише найкращі матеріали та інгредієнти потрапляють до нашого асортименту, гарантуючи неперевершений досвід.", imageSrc: "https://img.b2bpic.net/free-photo/suitmaker-tailor-cutting-fabric_482257-78193.jpg", imageAlt: "Крупний план добре виготовленого компонента кальяну", buttonIcon: CheckCircle},
+              { id: "1", title: "Intuitive Interface", content: "Navigate our platform with ease thanks to our user-friendly design." },
-              {title: "Широкий асортимент", description: "Від класичних дизайнів до сучасних інновацій, знайдіть ідеальний кальян та тютюн на свій смак.", imageSrc: "https://img.b2bpic.net/free-photo/supermarket-banner-with-various-items_23-2149501012.jpg", imageAlt: "Різноманітний асортимент кальянів та тютюнових коробок", buttonIcon: Boxes},
+              { id: "2", title: "Robust Security", content: "Your data is protected with industry-leading security protocols." },
-              {title: "Професійна підтримка клієнтів", description: "Наша обізнана команда готова допомогти вам з будь-якими питаннями чи рекомендаціями.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-call-center-manager-providing-guidance-intern-addressing-questions_482257-125804.jpg", imageAlt: "Представник служби підтримки клієнтів допомагає клієнту", buttonIcon: Headphones}
+              { id: "3", title: "Scalable Infrastructure", content: "Grow your business without limits on our adaptable cloud infrastructure." }
             ]}
-            textboxLayout="default"
+            imageSrc="https://via.placeholder.com/800x600.png?text=Feature+Overview"
-            useInvertedBackground={true}
+            imageAlt="Feature showcase"
+            mediaAnimation="slide-up"
+            useInvertedBackground={false}
+            mediaPosition="left"
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardFive 
+          <TestimonialCardTwelve
-            title="Що кажуть наші клієнти"
-            description="Послухайте від задоволених ентузіастів, які відчули різницю Hookah Haven."
             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: '1', name: 'Emily White', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+1' },
-              {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: '2', name: 'David Lee', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+2' },
-              {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: '3', name: 'Sophia Miller', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+3' },
-              {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: '4', name: 'James Brown', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+4' }
             ]}
-            textboxLayout="default"
+            cardTitle="Trusted by industry leaders and satisfied customers worldwide."
-            useInvertedBackground={false}
+            cardTag="Join our growing community"
-          />
+            cardAnimation="blur-reveal"
-        </div>
-
-        <div id="faq" data-section="faq">
-          <FaqSplitText 
-            sideTitle="Часті питання"
-            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" }}
             useInvertedBackground={true}
           />
         </div>
 
+        <div id="faq" data-section="faq">
+          <FaqBase
+            title="Common Questions, Clear Answers"
+            description="Browse our FAQ to quickly find solutions and understand our services better."
+            faqs={[
+              { id: "1", title: "What is your onboarding process?", content: "Our onboarding is streamlined, guided by a dedicated success manager." },
+              { id: "2", title: "Do you offer custom solutions?", content: "Yes, we tailor our solutions to fit your unique business requirements." },
+              { id: "3", title: "How is customer support handled?", content: "We provide 24/7 support through multiple channels for your convenience." },
+              { id: "4", title: "What are your security measures?", content: "We implement robust security protocols and regular audits to protect your data." }
+            ]}
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqsAnimation="slide-up"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            tag="Connect With Us"
+            title="Let's Build Something Amazing Together"
+            description="Reach out to our team to discuss your next big idea or sign up for our newsletter."
+            tagIcon={Mail}
+            background={{ variant: "radial-gradient" }}
+            useInvertedBackground={true}
+            imageSrc="https://via.placeholder.com/800x600.png?text=Contact+Us"
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            inputPlaceholder="Your email address"
+            buttonText="Subscribe"
+            termsText="By subscribing, you agree to our privacy policy."
+            onSubmit={(email) => console.log("Subscribed with: ", email)}
+          />
+        </div>
+
         <div id="footer" data-section="footer">
-          <FooterBaseCard 
+          <FooterLogoEmphasis
-            logoText="Hookah Haven"
+            logoText="MyCo"
             columns={[
-              {title: "Магазин", items: [
+              {items: [
-                {label: "Кальяни", href: "#products"},
+                {label: "Products", href: "/#products"},
-                {label: "Тютюн", href: "#products"},
+                {label: "Features", href: "/#features"}
-                {label: "Вугілля", href: "#products"},
-                {label: "Аксесуари", href: "#products"}
               ]},
-              {title: "Компанія", items: [
+              {items: [
-                {label: "Про нас", href: "#about"},
+                {label: "About Us", href: "/#about"},
-                {label: "FAQ", href: "#faq"},
+                {label: "Blog", href: "/blog"},
-                {label: "Контакти", href: "#contact"}
+                {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 NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductDetail } from "@/hooks/useProductDetail";
@@ -77,41 +77,52 @@ function ProductPageContent({ params }: ProductPageProps) {
     if (isLoading) {
         return (
             <ThemeProvider
-                defaultButtonVariant="hover-magnetic"
+                defaultButtonVariant="elastic-effect"
-                defaultTextAnimation="reveal-blur"
+                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
+                sizing="mediumLarge"
-                background="aurora"
+                background="fluid"
-                cardStyle="inset"
+                cardStyle="soft-shadow"
-                primaryButtonStyle="primary-glow"
+                primaryButtonStyle="gradient"
-                secondaryButtonStyle="radial-glow"
+                secondaryButtonStyle="glass"
-                headingFontWeight="light"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
+                        <NavbarStyleFullscreen
-                            brandName="Hookah Haven"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Головна", id: "/" },
+                                {name: "Home", id: "/"},
-                                { name: "Магазин", id: "/shop" }
+                                {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
+                        <FooterLogoEmphasis
-                            logoText="Hookah Haven"
+                            logoText="MyCo"
                             columns={[
-                                { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
+                                {items: [
-                                { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] }
+                                    {label: "Products", href: "/#products"},
+                                    {label: "Features", href: "/#features"}
+                                ]},
+                                {items: [
+                                    {label: "About Us", href: "/#about"},
+                                    {label: "Blog", href: "/blog"},
+                                    {label: "Shop", href: "/shop"},
+                                    {label: "Contact", href: "/#contact"}
+                                ]}
                             ]}
-                            copyrightText="© 2024 Hookah Haven. Всі права захищені."
                         />
                     </div>
                 </ReactLenis>
@@ -122,47 +133,58 @@ function ProductPageContent({ params }: ProductPageProps) {
     if (!product) {
         return (
             <ThemeProvider
-                defaultButtonVariant="hover-magnetic"
+                defaultButtonVariant="elastic-effect"
-                defaultTextAnimation="reveal-blur"
+                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
+                sizing="mediumLarge"
-                background="aurora"
+                background="fluid"
-                cardStyle="inset"
+                cardStyle="soft-shadow"
-                primaryButtonStyle="primary-glow"
+                primaryButtonStyle="gradient"
-                secondaryButtonStyle="radial-glow"
+                secondaryButtonStyle="glass"
-                headingFontWeight="light"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
+                        <NavbarStyleFullscreen
-                            brandName="Hookah Haven"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Головна", id: "/" },
+                                {name: "Home", id: "/"},
-                                { name: "Магазин", id: "/shop" }
+                                {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
+                        <FooterLogoEmphasis
-                            logoText="Hookah Haven"
+                            logoText="MyCo"
                             columns={[
-                                { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
+                                {items: [
-                                { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] }
+                                    {label: "Products", href: "/#products"},
+                                    {label: "Features", href: "/#features"}
+                                ]},
+                                {items: [
+                                    {label: "About Us", href: "/#about"},
+                                    {label: "Blog", href: "/blog"},
+                                    {label: "Shop", href: "/shop"},
+                                    {label: "Contact", href: "/#contact"}
+                                ]}
                             ]}
-                            copyrightText="© 2024 Hookah Haven. Всі права захищені."
                         />
                     </div>
                 </ReactLenis>
@@ -172,26 +194,30 @@ function ProductPageContent({ params }: ProductPageProps) {
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
+            defaultButtonVariant="elastic-effect"
-            defaultTextAnimation="reveal-blur"
+            defaultTextAnimation="entrance-slide"
-            borderRadius="rounded"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
+            sizing="mediumLarge"
-            background="aurora"
+            background="fluid"
-            cardStyle="inset"
+            cardStyle="soft-shadow"
-            primaryButtonStyle="primary-glow"
+            primaryButtonStyle="gradient"
-            secondaryButtonStyle="radial-glow"
+            secondaryButtonStyle="glass"
-            headingFontWeight="light"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                    <NavbarStyleApple
+                    <NavbarStyleFullscreen
-                        brandName="Hookah Haven"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Головна", id: "/" },
+                            {name: "Home", id: "/"},
-                            { name: "Магазин", id: "/shop" }
+                            {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: "Add to Cart", onClick: handleAddToCart },
-                            { text: "Купити зараз", onClick: handleBuyNow }
+                            { 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
+                    <FooterLogoEmphasis
-                        logoText="Hookah Haven"
+                        logoText="MyCo"
                         columns={[
-                            { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
+                            {items: [
-                            { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] }
+                                {label: "Products", href: "/#products"},
+                                {label: "Features", href: "/#features"}
+                                ]},
+                            {items: [
+                                {label: "About Us", href: "/#about"},
+                                {label: "Blog", href: "/blog"},
+                                {label: "Shop", href: "/shop"},
+                                {label: "Contact", href: "/#contact"}
+                            ]}
                         ]}
-                        copyrightText="© 2024 Hookah Haven. Всі права захищені."
                     />
                 </div>
             </ReactLenis>

src/app/shop/page.tsx

@@ -3,8 +3,8 @@
 import { Suspense, useCallback } from "react";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
@@ -44,39 +44,50 @@ function ShopPageContent() {
     if (isLoading) {
         return (
             <ThemeProvider
-                defaultButtonVariant="hover-magnetic"
+                defaultButtonVariant="elastic-effect"
-                defaultTextAnimation="reveal-blur"
+                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
+                sizing="mediumLarge"
-                background="aurora"
+                background="fluid"
-                cardStyle="inset"
+                cardStyle="soft-shadow"
-                primaryButtonStyle="primary-glow"
+                primaryButtonStyle="gradient"
-                secondaryButtonStyle="radial-glow"
+                secondaryButtonStyle="glass"
-                headingFontWeight="light"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
+                        <NavbarStyleFullscreen
-                            brandName="Hookah Haven"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Головна", id: "/" },
+                                {name: "Home", id: "/"},
-                                { name: "Магазин", id: "/shop" }
+                                {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
+                        <FooterLogoEmphasis
-                            logoText="Hookah Haven"
+                            logoText="MyCo"
                             columns={[
-                                { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
+                                {items: [
-                                { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] }
+                                    {label: "Products", href: "/#products"},
+                                    {label: "Features", href: "/#features"}
+                                ]},
+                                {items: [
+                                    {label: "About Us", href: "/#about"},
+                                    {label: "Blog", href: "/blog"},
+                                    {label: "Shop", href: "/shop"},
+                                    {label: "Contact", href: "/#contact"}
+                                ]}
                             ]}
-                            copyrightText="© 2024 Hookah Haven. Всі права захищені."
                         />
                     </div>
                 </ReactLenis>
@@ -86,26 +97,30 @@ function ShopPageContent() {
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
+            defaultButtonVariant="elastic-effect"
-            defaultTextAnimation="reveal-blur"
+            defaultTextAnimation="entrance-slide"
-            borderRadius="rounded"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
+            sizing="mediumLarge"
-            background="aurora"
+            background="fluid"
-            cardStyle="inset"
+            cardStyle="soft-shadow"
-            primaryButtonStyle="primary-glow"
+            primaryButtonStyle="gradient"
-            secondaryButtonStyle="radial-glow"
+            secondaryButtonStyle="glass"
-            headingFontWeight="light"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                    <NavbarStyleApple
+                    <NavbarStyleFullscreen
-                        brandName="Hookah Haven"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Головна", id: "/" },
+                            {name: "Home", id: "/"},
-                            { name: "Магазин", id: "/shop" }
+                            {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
+                    <FooterLogoEmphasis
-                        logoText="Hookah Haven"
+                        logoText="MyCo"
                         columns={[
-                            { title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
+                            {items: [
-                            { title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] }
+                                {label: "Products", href: "/#products"},
+                                {label: "Features", href: "/#features"}
+                            ]},
+                            {items: [
+                                {label: "About Us", href: "/#about"},
+                                {label: "Blog", href: "/blog"},
+                                {label: "Shop", href: "/shop"},
+                                {label: "Contact", href: "/#contact"}
+                            ]}
                         ]}
-                        copyrightText="© 2024 Hookah Haven. Всі права захищені."
                     />
                 </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;;
+  /* --background: #f5faff;;
-  --card: #1a1a1a;;
+  --card: #f1f8ff;;
-  --foreground: #ffffffe6;;
+  --foreground: #001122;;
-  --primary-cta: #e6e6e6;;
+  --primary-cta: #15479c;;
-  --secondary-cta: #1a1a1a;;
+  --secondary-cta: #ffffff;;
-  --accent: #737373;;
+  --accent: #a8cce8;;
-  --background-accent: #737373;; */
+  --background-accent: #7ba3cf;; */
 
-  --background: #0a0a0a;;
+  --background: #f5faff;;
-  --card: #1a1a1a;;
+  --card: #f1f8ff;;
-  --foreground: #ffffffe6;;
+  --foreground: #001122;;
-  --primary-cta: #e6e6e6;;
+  --primary-cta: #15479c;;
   --primary-cta-text: #0a0a0a;;
-  --secondary-cta: #1a1a1a;;
+  --secondary-cta: #ffffff;;
   --secondary-cta-text: #ffffffe6;;
-  --accent: #737373;;
+  --accent: #a8cce8;;
-  --background-accent: #737373;;
+  --background-accent: #7ba3cf;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);