Update src/app/shop/page.tsx

Merge version_5 into main

src/app/blog/page.tsx

@@ -31,15 +31,9 @@ export default function BlogPage() {
         >
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingOverlay
-                    navItems={[
+                    navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
-                        { name: "Home", id: "/" },
-                        { name: "Features", id: "/#features" },
-                        { name: "Solutions", id: "/#products" },
-                        { name: "Reviews", id: "/#testimonials" },
-                        { name: "Contact", id: "/#contact" },
-                    ]}
                     brandName="CRM AI"
-                    button={{ text: "Get Started", href: "#contact" }}
+                    button={{ text: "Get Started", href: "/#contact" }}
                     buttonClassName="min-w-[120px] justify-center"
                     buttonTextClassName="relative top-[0.5px]"
                     className="z-50 backdrop-blur-md"

src/app/features/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import {
+  BarChart2,
+  ClipboardCheck,
+  Github,
+  Linkedin,
+  Shield,
+  Twitter,
+  Workflow,
+  Zap
+} from 'lucide-react';
+
+const socialLinks = [
+    { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
+    { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
+    { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
+];
+
+export default function FeaturesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSmall"
+      background="aurora"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
+          brandName="CRM AI"
+          button={{text:"Get Started",href:"/#contact"}}
+          buttonClassName="min-w-[120px] justify-center"
+          buttonTextClassName="relative top-[0.5px]"
+          className="z-50 backdrop-blur-md"
+        />
+      </div>
+
+      <div id="features-glow" data-section="features-glow">
+        <FeatureBorderGlow
+          title="Discover Our Cutting-Edge AI Capabilities"
+          description="Explore the powerful features that make our AI CRM platform an industry leader, designed to supercharge your business growth."
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          features={[
+            {icon:Zap,title:"Intelligent Lead Scoring",description:"Automatically prioritize high-value leads with AI-driven scoring, focusing your sales efforts where they matter most."},
+            {icon:Workflow,title:"Automated Task Management",description:"Streamline operations by automating repetitive tasks, freeing up your team to focus on strategic initiatives."},
+            {icon:BarChart2,title:"Predictive Analytics Dashboard",description:"Gain foresight with advanced analytics, predicting customer churn and future trends to stay ahead of the curve."},
+            {icon:Shield,title:"Enhanced Data Security",description:"Protect sensitive customer information with robust encryption and AI-powered threat detection, ensuring compliance and trust."},
+            {icon:ClipboardCheck,title:"Customizable Workflow Automation",description:"Tailor workflows to your unique business needs, automating processes from onboarding to customer support with ease."},
+            {icon:BarChart2,title:"Omnichannel Customer Engagement",description:"Connect with customers across all channels seamlessly, providing consistent and personalized experiences at every touchpoint."}
+          ]}
+          tag="Key Features"
+          className="py-16 md:py-24"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="CRM AI"
+          copyrightText="© 2024 | CRM AI. All rights reserved."
+          socialLinks={socialLinks}
+          className="py-16 md:py-20"
+          cardClassName="py-10 px-6 sm:px-10 md:px-12"
+          logoClassName="text-lg font-bold"
+          copyrightTextClassName="text-sm text-foreground/70"
+          socialContainerClassName="gap-x-4"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import HeroCentered from '@/components/sections/hero/HeroCentered';
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
@@ -46,7 +46,7 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
-          navItems={[{name:"Home",id:"/"},{name:"Features",id:"#features"},{name:"Solutions",id:"#products"},{name:"Reviews",id:"#testimonials"},{name:"Contact",id:"#contact"}]}
+          navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"#products"},{name:"Reviews",id:"#testimonials"},{name:"Contact",id:"#contact"}]}
           brandName="CRM AI"
           button={{text:"Get Started",href:"#contact"}}
           buttonClassName="min-w-[120px] justify-center"
@@ -56,17 +56,19 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
+        <HeroCentered
-          logoText="CRM AI"
+          title="CRM AI"
           description="Unleash the power of artificial intelligence to automate tasks, gain deeper customer insights, and drive unparalleled growth for your business."
           background={{variant:"sparkles-gradient"}}
+          avatars={[
+            { src: "https://via.placeholder.com/40", alt: "User Avatar 1" },
+            { src: "https://via.placeholder.com/40", alt: "User Avatar 2" },
+            { src: "https://via.placeholder.com/40", alt: "User Avatar 3" }
+          ]}
+          avatarText="Trusted by AI innovators"
           buttons={[{text:"Get Started Free",href:"#contact"},{text:"Watch Demo",href:"#features"}]}
           buttonAnimation="slide-up"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/a-user-friendly-interface-showcasing-ai--1771626574716-a33c15c9.png?_wi=1"
+          className="min-h-[calc(100svh-var(--navbar-height))] md:min-h-[calc(100vh-var(--navbar-height))] pt-[var(--navbar-height)]"
-          imageAlt="AI-Powered Automation Interface"
-          mediaAnimation="opacity"
-          frameStyle="card"
-          className="min-h-[calc(100svh-var(--navbar-height))] md:min-h-[calc(100vh-var(--navbar-height))] pt-[var(--navbar-height))]"
         />
       </div>
 
@@ -81,13 +83,17 @@ export default function LandingPage() {
       </div>
 
       <div id="features" data-section="features">
-        <FeatureCardTen
+        <FeatureCardTwentyThree
           title="Smart Features Designed for Your Success"
           description="Our AI CRM platform comes packed with intelligent tools to streamline operations, enhance customer relationships, and accelerate your business growth."
           textboxLayout="default"
           animationType="slide-up"
           useInvertedBackground={false}
-          features={[{id:"1",title:"AI-Powered Automation",description:"Automate repetitive tasks like data entry, lead scoring, and email sequences, freeing up your team to focus on high-value activities.",media:{imageSrc:"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/a-user-friendly-interface-showcasing-ai--1771626574716-a33c15c9.png?_wi=2",imageAlt:"AI-Powered Automation Interface"},items:[{icon:Workflow,text:"Automated Lead Qualification"},{icon:Mail,text:"Intelligent Email Campaigns"},{icon:ClipboardCheck,text:"Smart Task Prioritization"}],reverse:false},{id:"2",title:"Deep Customer Insights",description:"Leverage AI to analyze customer behavior, predict churn, and identify cross-selling opportunities, giving you a 360-degree view of your clients.",media:{imageSrc:"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/an-ai-crm-platform-displaying-deep-custo-1771626574569-fd46e2c4.png?_wi=2",imageAlt:"Customer Insights Dashboard"},items:[{icon:BarChart2,text:"Predictive Analytics"},{icon:Smile,text:"Sentiment Analysis"},{icon:Target,text:"Customer Segmentation"}],reverse:true},{id:"3",title:"Personalized Engagement",description:"Deliver hyper-personalized experiences across all touchpoints with AI-driven content recommendations and adaptive communication strategies.",media:{imageSrc:"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/a-crm-interface-demonstrating-ai-driven--1771626575190-6adb5515.png?_wi=2",imageAlt:"Personalized Customer Engagement"},items:[{icon:User,text:"Dynamic Content Delivery"},{icon:MessageSquare,text:"AI-Powered Chatbots"},{icon:Heart,text:"Enhanced Customer Loyalty"}],reverse:false}]}
+          features={[
+            {id:"1",title:"AI-Powered Automation",tags:["AI Capabilities","AI-Powered Feature"],imageSrc:"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/a-user-friendly-interface-showcasing-ai--1771626574716-a33c15c9.png?_wi=2",imageAlt:"AI-Powered Automation Interface"},
+            {id:"2",title:"Deep Customer Insights",tags:["AI Capabilities","Deep Feature"],imageSrc:"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/an-ai-crm-platform-displaying-deep-custo-1771626574569-fd46e2c4.png?_wi=2",imageAlt:"Customer Insights Dashboard"},
+            {id:"3",title:"Personalized Engagement",tags:["AI Capabilities","Personalized Feature"],imageSrc:"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/a-crm-interface-demonstrating-ai-driven--1771626575190-6adb5515.png?_wi=2",imageAlt:"Personalized Customer Engagement"}
+          ]}
           tag="AI Capabilities"
           className="py-16 md:py-24"
         />

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

@@ -90,9 +90,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="bold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingOverlay
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
                             brandName="CRM AI"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="min-w-[120px] justify-center"
@@ -139,9 +139,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="bold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingOverlay
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
                             brandName="CRM AI"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="min-w-[120px] justify-center"
@@ -195,9 +195,9 @@ function ProductPageContent({ params }: ProductPageProps) {
             headingFontWeight="bold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
                         brandName="CRM AI"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="min-w-[120px] justify-center"

src/app/shop/page.tsx

@@ -31,7 +31,9 @@ export default function ShopPage() {
         getCheckoutItems,
     } = useCart();
 
-    const { checkout, isLoading: isCheckoutLoading } = useCheckout();
+    const {
+        checkout, isLoading: isCheckoutLoading
+    } = useCheckout();
 
     const handleCheckout = useCallback(async () => {
         if (cartItems.length === 0) return;
@@ -57,9 +59,9 @@ export default function ShopPage() {
                 headingFontWeight="bold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} 
+                        navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
                         brandName="CRM AI"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="min-w-[120px] justify-center"
@@ -105,9 +107,9 @@ export default function ShopPage() {
             headingFontWeight="bold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
                         brandName="CRM AI"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="min-w-[120px] justify-center"