Update src/app/shop/page.tsx

Merge version_3 into main

src/app/blog/page.tsx

@@ -7,50 +7,50 @@ import { useBlogPosts } from "@/hooks/useBlogPosts";
 // New imports based on requirements
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
-            defaultTextAnimation="reveal-blur"
-            borderRadius="rounded"
+            defaultButtonVariant="elastic-effect"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
-            background="aurora"
-            cardStyle="inset"
-            primaryButtonStyle="primary-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="light"
+            sizing="mediumLarge"
+            background="fluid"
+            cardStyle="soft-shadow"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarStyleApple
-                        brandName="Hookah Haven"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Головна", 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: "Features", id: "/#features"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Testimonials", id: "/#testimonials"},
+                            {name: "FAQ", id: "/#faq"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
                     />
                 </div>
 
                     {isLoading ? (
                         <div className="w-content-width mx-auto py-20 text-center">
-                            <p className="text-foreground">Завантаження дописів...</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"
@@ -60,25 +60,24 @@ export default function BlogPage() {
 
                     <div id="footer" data-section="footer">
                         <FooterBaseCard
-                            logoText="Hookah Haven"
+                            logoText="MyCo"
                             columns={[
                                 {
-                                    title: "Магазин",                                    items: [
-                                        { label: "Кальяни", href: "/#products" },
-                                        { label: "Тютюн", href: "/#products" },
-                                        { label: "Вугілля", href: "/#products" },
-                                        { label: "Аксесуари", href: "/#products" }
+                                    title: "Solutions",                                    items: [
+                                        { label: "Products", href: "/#products" },
+                                        { label: "Features", href: "/#features" }
                                     ]
                                 },
                                 {
-                                    title: "Компанія",                                    items: [
-                                        { label: "Про нас", href: "/#about" },
+                                    title: "Company",                                    items: [
+                                        { label: "About Us", href: "/#about" },
+                                        { label: "Blog", href: "/blog" },
                                         { label: "FAQ", href: "/#faq" },
-                                        { label: "Контакти", href: "/#contact" }
+                                        { label: "Contact", href: "/#contact" }
                                     ]
                                 }
                             ]}
-                            copyrightText="© 2024 Hookah Haven. Всі права захищені."
+                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
             </ReactLenis>

src/app/layout.tsx

@@ -1,24 +1,31 @@
 import type { Metadata } from "next";
-import { Archivo } from "next/font/google";
+import { DM_Sans } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
-const archivo = Archivo({
-  variable: "--font-archivo",  subsets: ["latin"],
+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",  subsets: ["latin"],
+});
+
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Hookah Haven | Кальяни преміум-класу, тютюн та аксесуари",  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

@@ -2,166 +2,179 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import ContactText from '@/components/sections/contact/ContactText';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Boxes, CheckCircle, Headphones } from 'lucide-react';
+import { Phone } from 'lucide-react';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="rounded"
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
       contentWidth="medium"
-      sizing="large"
-      background="aurora"
-      cardStyle="inset"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="radial-glow"
-      headingFontWeight="light"
+      sizing="mediumLarge"
+      background="fluid"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <main>
         <div id="nav" data-section="nav">
           <NavbarStyleApple 
-            brandName="Hookah Haven"
+            brandName="MyCo"
             navItems={[
-              {name: "Продукція", id: "products"},
-              {name: "Про нас", id: "about"},
-              {name: "Особливості", id: "features"},
-              {name: "Відгуки", id: "testimonials"},
+              {name: "Home", id: "/"},
+              {name: "About", id: "about"},
+              {name: "Features", id: "features"},
+              {name: "Products", id: "products"},
+              {name: "Testimonials", id: "testimonials"},
               {name: "FAQ", id: "faq"},
-              {name: "Контакти", id: "contact"}
+              {name: "Contact", id: "contact"}
             ]}
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroBillboardScroll 
-            background={{ variant: "radial-gradient" }}
-            title="Відчуйте найкращий кальян"
-            description="Відкрийте для себе преміум-вибір тютюну, кальянів та аксесуарів для неперевершеного досвіду куріння."
-            tag="Ваш найкращий кальянний напрямок"
+          <HeroLogo
+            logoText="MyCo"
+            description="Innovative solutions for a brighter future."
             buttons={[
-              {text: "Купити зараз", href: "#products"},
-              {text: "Дізнатися більше", href: "#about"}
+              { text: "Get Started", href: "#contact" },
+              { text: "Learn More", href: "#about" }
             ]}
-            imageSrc="https://img.b2bpic.net/free-photo/group-handsome-retro-welldressed-man-gangsters-spend-time-club-smoking-hookah-multiethnic-male-bachelor-mafia-party-restaurant_627829-12017.jpg"
-            imageAlt="Елегантний кальянний набір з димом"
-            tagAnimation="blur-reveal"
-            buttonAnimation="blur-reveal"
+            imageSrc="https://via.placeholder.com/1920x1080.png?text=Modern+Business"
+            imageAlt="Modern business cityscape"
+            showDimOverlay={true}
           />
         </div>
 
         <div id="about" data-section="about">
-          <TextSplitAbout 
-            title="Наша пристрасть до кальяну"
-            description={[
-              "У Hookah Haven ми прагнемо забезпечити ентузіастів продукцією найвищої якості. Від рідкісних тютюнових сумішей до вишуканих кальянів та необхідних аксесуарів, ми ретельно підбираємо нашу колекцію, щоб кожна затяжка приносила задоволення.",              "Ми віримо у покращення ваших моментів відпочинку та соціального спілкування за допомогою чудового кальяну. Наша відданість досконалості гарантує неперевершений досвід."
+          <MediaSplitTabsAbout
+            title="Our Story & Vision"
+            description="We are dedicated to building innovative solutions that empower businesses and individuals."
+            tabs={[
+              { id: "mission", label: "Our Mission", description: "To deliver cutting-edge technology and exceptional service that drives success." },
+              { id: "values", label: "Our Values", description: "Integrity, innovation, customer focus, and collaboration are at the core of everything we do." },
+              { id: "team", label: "Our Team", description: "A passionate group of experts committed to excellence and achieving remarkable results." }
             ]}
+            imageSrc="https://via.placeholder.com/800x600.png?text=Team+Collaboration"
+            imageAlt="Team collaborating in an office"
+            imagePosition="right"
+            mediaAnimation="slide-up"
             useInvertedBackground={false}
-            showBorder={true}
-            buttons={[{ text: "Наша історія", href: "#about" }]}
           />
         </div>
 
         <div id="products" data-section="products">
-          <ProductCardOne 
-            title="Рекомендовані товари"
-            description="Ознайомтеся з нашою відібраною колекцією преміальних кальянів, вишуканого тютюну та необхідних аксесуарів."
+          <ProductCardTwo
+            title="Our Featured Products"
+            description="Explore a selection of our most popular and innovative products designed to meet your needs."
             products={[
-              {id: "1", name: "Розкішний скляний кальян", 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", brand: "TechInnovate", name: "AI Assistant Pro", price: "$199.99", rating: 5, reviewCount: "1.2k", imageSrc: "https://via.placeholder.com/400x400.png?text=AI+Assistant" },
+              { id: "2", brand: "FutureGadgets", name: "Smart Home Hub", price: "$249.00", rating: 4, reviewCount: "850", imageSrc: "https://via.placeholder.com/400x400.png?text=Smart+Home" },
+              { id: "3", brand: "InnovateCo", name: "Cloud Storage Plus", price: "$49.99", rating: 4, reviewCount: "3.5k", imageSrc: "https://via.placeholder.com/400x400.png?text=Cloud+Storage" },
+              { id: "4", brand: "FutureTech", name: "Eco-Friendly Charger", price: "$29.99", rating: 5, reviewCount: "2.1k", imageSrc: "https://via.placeholder.com/400x400.png?text=Eco+Charger" }
             ]}
+            gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
-            gridVariant="three-columns-all-equal-width"
-            useInvertedBackground={false}
+            useInvertedBackground={true}
             textboxLayout="default"
           />
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardTwentySix 
-            title="Чому обирають Hookah Haven?"
-            description="Ми пропонуємо неперевершений вибір, гарантію якості та віддану підтримку клієнтів для покращення вашого кальянного досвіду."
+          <FeatureCardThree
+            title="Key Features That Set Us Apart"
+            description="Discover the core functionalities and benefits that make our solutions stand out."
             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}
+              { id: "01", title: "Advanced Analytics", description: "Gain deep insights with our powerful and intuitive analytics dashboard.", imageSrc: "https://via.placeholder.com/600x400.png?text=Analytics" },
+              { id: "02", title: "Seamless Integration", description: "Connect effortlessly with your existing tools and workflows.", imageSrc: "https://via.placeholder.com/600x400.png?text=Integration" },
+              { id: "03", title: "24/7 Support", description: "Our dedicated support team is always here to help you succeed.", imageSrc: "https://via.placeholder.com/600x400.png?text=Support" }
             ]}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            useInvertedBackground={false}
             textboxLayout="default"
-            useInvertedBackground={true}
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardFive 
-            title="Що кажуть наші клієнти"
-            description="Послухайте від задоволених ентузіастів, які відчули різницю Hookah Haven."
+          <TestimonialCardOne
+            title="What Our Clients Say"
+            description="Hear directly from our satisfied customers about their experience with our services."
             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: "Alice Wonderland", role: "CEO, InnovateCo", company: "Tech Solutions", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+1" },
+              { id: "2", name: "Bob The Builder", role: "Founder, ConstructCo", company: "Design Agency", rating: 4, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+2" },
+              { id: "3", name: "Charlie Chaplin", role: "Manager, Creative Hub", company: "Media Group", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+3" }
             ]}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            useInvertedBackground={true}
             textboxLayout="default"
-            useInvertedBackground={false}
           />
         </div>
 
         <div id="faq" data-section="faq">
-          <FaqSplitText 
-            sideTitle="Часті питання"
+          <FaqSplitMedia
+            title="Frequently Asked Questions"
+            description="Find quick answers to the most common questions about our products and services."
             faqs={[
-              {id: "1", title: "Який тютюн ви пропонуєте?", content: "Ми пропонуємо широкий асортимент преміального тютюну для кальяну, включаючи традиційні, сучасні та екзотичні суміші від провідних світових брендів."},
-              {id: "2", title: "Чи здійснюєте ви міжнародну доставку?", content: "Наразі ми здійснюємо доставку лише в межах [Вашої країни/регіону]. Будь ласка, перегляньте нашу політику доставки для отримання додаткової інформації."},
-              {id: "3", title: "Як доглядати за новим кальяном?", content: "Кожен кальян поставляється з інструкціями по догляду. Зазвичай, найкраще чистити всі компоненти після кожного використання теплою водою та щіткою."},
-              {id: "4", title: "Яка ваша політика повернення?", content: "Ми приймаємо повернення протягом 30 днів з моменту покупки для невикористаних та нерозпакованих товарів. Детальну інформацію дивіться в нашій повній політиці повернення."}
+              { id: "1", title: "How does your service work?", content: "Our service provides seamless integration with your existing systems, ensuring a smooth transition and minimal disruption." },
+              { id: "2", title: "What is your pricing model?", content: "We offer flexible pricing tiers designed to fit businesses of all sizes, from startups to large enterprises." },
+              { id: "3", title: "Can I customize the features?", content: "Yes, our platform is highly customizable, allowing you to tailor features to your specific business needs." },
+              { id: "4", title: "Do you offer support?", content: "Absolutely! We provide 24/7 customer support via chat, email, and phone to assist you with any inquiries." }
             ]}
-            textPosition="left"
+            imageSrc="https://via.placeholder.com/800x600.png?text=FAQ+Support"
+            imageAlt="Customer support representatives"
+            mediaAnimation="slide-up"
+            mediaPosition="left"
             faqsAnimation="slide-up"
             useInvertedBackground={false}
             animationType="smooth"
+            textboxLayout="default"
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactText 
-            text="Готові покращити свій кальянний досвід? Зв'яжіться з нашою командою для персоналізованих рекомендацій або будь-яких запитів."
-            buttons={[
-              {text: "Зв'язатися з нами", href: "/contact"},
-              {text: "Купити всю продукцію", href: "#products"}
+          <ContactFaq
+            ctaTitle="Ready to Start?"
+            ctaDescription="Get in touch with our team today to discuss your project and discover how we can help."
+            ctaButton={{ text: "Contact Us Now", href: "#contact" }}
+            ctaIcon={Phone}
+            faqs={[
+              { id: "1", title: "What are your office hours?", content: "Our support team is available Monday to Friday, 9 AM to 5 PM EST." },
+              { id: "2", title: "Where are you located?", content: "We operate globally with a primary office in a major tech hub. Contact us for specific details." },
+              { id: "3", title: "How quickly do you respond?", content: "We aim to respond to all inquiries within 24 business hours." }
             ]}
-            animationType="reveal-blur"
-            background={{ variant: "radial-gradient" }}
             useInvertedBackground={true}
+            animationType="slide-up"
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterBaseCard 
-            logoText="Hookah Haven"
+            logoText="MyCo"
             columns={[
-              {title: "Магазин", items: [
-                {label: "Кальяни", href: "#products"},
-                {label: "Тютюн", href: "#products"},
-                {label: "Вугілля", href: "#products"},
-                {label: "Аксесуари", href: "#products"}
+              {title: "Solutions", items: [
+                {label: "Products", href: "#products"},
+                {label: "Features", href: "#features"}
               ]},
-              {title: "Компанія", items: [
-                {label: "Про нас", href: "#about"},
+              {title: "Company", items: [
+                {label: "About Us", href: "#about"},
+                {label: "Blog", href: "/blog"},
                 {label: "FAQ", href: "#faq"},
-                {label: "Контакти", href: "#contact"}
+                {label: "Contact", href: "#contact"}
               ]}
             ]}
-            copyrightText="© 2024 Hookah Haven. Всі права захищені."
+            copyrightText="© 2024 MyCo. All rights reserved."
           />
         </div>
       </main>

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

@@ -77,41 +77,58 @@ function ProductPageContent({ params }: ProductPageProps) {
     if (isLoading) {
         return (
             <ThemeProvider
-                defaultButtonVariant="hover-magnetic"
-                defaultTextAnimation="reveal-blur"
-                borderRadius="rounded"
+                defaultButtonVariant="elastic-effect"
+                defaultTextAnimation="entrance-slide"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
-                background="aurora"
-                cardStyle="inset"
-                primaryButtonStyle="primary-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="light"
+                sizing="mediumLarge"
+                background="fluid"
+                cardStyle="soft-shadow"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="glass"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                         <NavbarStyleApple
-                            brandName="Hookah Haven"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Головна", id: "/" },
-                                { name: "Магазин", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {name: "About", id: "/#about"},
+                                {name: "Features", id: "/#features"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Testimonials", id: "/#testimonials"},
+                                {name: "FAQ", id: "/#faq"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
+                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </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"
+                            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" }] }
+                                {
+                                    title: "Solutions",                                    items: [
+                                        { label: "Products", href: "/#products" },
+                                        { label: "Features", href: "/#features" }
+                                    ]
+                                },
+                                {
+                                    title: "Company",                                    items: [
+                                        { label: "About Us", href: "/#about" },
+                                        { label: "Blog", href: "/blog" },
+                                        { label: "FAQ", href: "/#faq" },
+                                        { label: "Contact", href: "/#contact" }
+                                    ]
+                                }
                             ]}
-                            copyrightText="© 2024 Hookah Haven. Всі права захищені."
+                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -122,47 +139,64 @@ function ProductPageContent({ params }: ProductPageProps) {
     if (!product) {
         return (
             <ThemeProvider
-                defaultButtonVariant="hover-magnetic"
-                defaultTextAnimation="reveal-blur"
-                borderRadius="rounded"
+                defaultButtonVariant="elastic-effect"
+                defaultTextAnimation="entrance-slide"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
-                background="aurora"
-                cardStyle="inset"
-                primaryButtonStyle="primary-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="light"
+                sizing="mediumLarge"
+                background="fluid"
+                cardStyle="soft-shadow"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="glass"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                         <NavbarStyleApple
-                            brandName="Hookah Haven"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Головна", id: "/" },
-                                { name: "Магазин", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {name: "About", id: "/#about"},
+                                {name: "Features", id: "/#features"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Testimonials", id: "/#testimonials"},
+                                {name: "FAQ", id: "/#faq"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
+                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </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"
+                            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" }] }
+                                {
+                                    title: "Solutions",                                    items: [
+                                        { label: "Products", href: "/#products" },
+                                        { label: "Features", href: "/#features" }
+                                    ]
+                                },
+                                {
+                                    title: "Company",                                    items: [
+                                        { label: "About Us", href: "/#about" },
+                                        { label: "Blog", href: "/blog" },
+                                        { label: "FAQ", href: "/#faq" },
+                                        { label: "Contact", href: "/#contact" }
+                                    ]
+                                }
                             ]}
-                            copyrightText="© 2024 Hookah Haven. Всі права захищені."
+                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -172,26 +206,31 @@ function ProductPageContent({ params }: ProductPageProps) {
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
-            defaultTextAnimation="reveal-blur"
-            borderRadius="rounded"
+            defaultButtonVariant="elastic-effect"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
-            background="aurora"
-            cardStyle="inset"
-            primaryButtonStyle="primary-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="light"
+            sizing="mediumLarge"
+            background="fluid"
+            cardStyle="soft-shadow"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
                     <NavbarStyleApple
-                        brandName="Hookah Haven"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Головна", id: "/" },
-                            { name: "Магазин", id: "/shop" }
+                            {name: "Home", id: "/"},
+                            {name: "About", id: "/#about"},
+                            {name: "Features", id: "/#features"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Testimonials", id: "/#testimonials"},
+                            {name: "FAQ", id: "/#faq"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
-                        button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
+                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
                 <div id="product-detail-card" data-section="product-detail-card">
@@ -210,8 +249,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 +264,31 @@ 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"
+                        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" }] }
+                            {
+                                title: "Solutions",                                items: [
+                                    { label: "Products", href: "/#products" },
+                                    { label: "Features", href: "/#features" }
+                                ]
+                            },
+                            {
+                                title: "Company",                                items: [
+                                    { label: "About Us", href: "/#about" },
+                                    { label: "Blog", href: "/blog" },
+                                    { label: "FAQ", href: "/#faq" },
+                                    { label: "Contact", href: "/#contact" }
+                                ]
+                            }
                         ]}
-                        copyrightText="© 2024 Hookah Haven. Всі права захищені."
+                        copyrightText="© 2024 MyCo. All rights reserved."
                     />
                 </div>
             </ReactLenis>

src/app/shop/page.tsx

@@ -44,39 +44,56 @@ function ShopPageContent() {
     if (isLoading) {
         return (
             <ThemeProvider
-                defaultButtonVariant="hover-magnetic"
-                defaultTextAnimation="reveal-blur"
-                borderRadius="rounded"
+                defaultButtonVariant="elastic-effect"
+                defaultTextAnimation="entrance-slide"
+                borderRadius="pill"
                 contentWidth="medium"
-                sizing="large"
-                background="aurora"
-                cardStyle="inset"
-                primaryButtonStyle="primary-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="light"
+                sizing="mediumLarge"
+                background="fluid"
+                cardStyle="soft-shadow"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="glass"
+                headingFontWeight="bold"
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                         <NavbarStyleApple
-                            brandName="Hookah Haven"
+                            brandName="MyCo"
                             navItems={[
-                                { name: "Головна", id: "/" },
-                                { name: "Магазин", id: "/shop" }
+                                {name: "Home", id: "/"},
+                                {name: "About", id: "/#about"},
+                                {name: "Features", id: "/#features"},
+                                {name: "Products", id: "/#products"},
+                                {name: "Testimonials", id: "/#testimonials"},
+                                {name: "FAQ", id: "/#faq"},
+                                {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
+                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </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"
+                            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" }] }
+                                {
+                                    title: "Solutions",                                    items: [
+                                        { label: "Products", href: "/#products" },
+                                        { label: "Features", href: "/#features" }
+                                    ]
+                                },
+                                {
+                                    title: "Company",                                    items: [
+                                        { label: "About Us", href: "/#about" },
+                                        { label: "Blog", href: "/blog" },
+                                        { label: "FAQ", href: "/#faq" },
+                                        { label: "Contact", href: "/#contact" }
+                                    ]
+                                }
                             ]}
-                            copyrightText="© 2024 Hookah Haven. Всі права захищені."
+                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -86,26 +103,31 @@ function ShopPageContent() {
 
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
-            defaultTextAnimation="reveal-blur"
-            borderRadius="rounded"
+            defaultButtonVariant="elastic-effect"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
             contentWidth="medium"
-            sizing="large"
-            background="aurora"
-            cardStyle="inset"
-            primaryButtonStyle="primary-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="light"
+            sizing="mediumLarge"
+            background="fluid"
+            cardStyle="soft-shadow"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
                     <NavbarStyleApple
-                        brandName="Hookah Haven"
+                        brandName="MyCo"
                         navItems={[
-                            { name: "Головна", id: "/" },
-                            { name: "Магазин", id: "/shop" }
+                            {name: "Home", id: "/"},
+                            {name: "About", id: "/#about"},
+                            {name: "Features", id: "/#features"},
+                            {name: "Products", id: "/#products"},
+                            {name: "Testimonials", id: "/#testimonials"},
+                            {name: "FAQ", id: "/#faq"},
+                            {name: "Contact", id: "/#contact"}
                         ]}
-                        button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
+                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">
@@ -114,9 +136,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 +151,31 @@ 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"
+                        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" }] }
+                            {
+                                title: "Solutions",                                items: [
+                                    { label: "Products", href: "/#products" },
+                                    { label: "Features", href: "/#features" }
+                                ]
+                            },
+                            {
+                                title: "Company",                                items: [
+                                    { label: "About Us", href: "/#about" },
+                                    { label: "Blog", href: "/blog" },
+                                    { label: "FAQ", href: "/#faq" },
+                                    { label: "Contact", href: "/#contact" }
+                                ]
+                            }
                         ]}
-                        copyrightText="© 2024 Hookah Haven. Всі права захищені."
+                        copyrightText="© 2024 MyCo. All rights reserved."
                     />
                 </div>
             </ReactLenis>

src/app/styles/base.css

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

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #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);