Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -1,17 +1,14 @@
 "use client";
 
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
-import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
-import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
-import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
+import FooterBase from "@/components/sections/footer/FooterBase";
-import FaqDouble from "@/components/sections/faq/FaqDouble";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Bot, User, Code, Database, Workflow, Settings, Search, FileText, Send, CheckCircle, Zap, MessageSquare, CreditCard, Star, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, Layers, GitBranch, Lock, Eye } from "lucide-react";
+import { Star } from "lucide-react";
 
 export default function ClientPortalTemplatePage() {
     const navItems = [
@@ -20,45 +17,59 @@ export default function ClientPortalTemplatePage() {
         { name: "Contact", id: "contact" },
     ];
 
-    const features: FeatureCard[] = [
+    const features = [
-        { bentoComponent: "3d-task-list", title: "Project Hub", items: [{ icon: Search, label: "Review Q1 Strategy", time: "10m ago" }, { icon: FileText, label: "Approve Ad Creative", time: "1h ago" }, { icon: CheckCircle, label: "Billing cycle completed", time: "3h ago" }], description: "Manage every deliverable and milestone in a single, transparent view." },
+        { id: "f1", title: "Project Hub", author: "PortalOS", description: "Manage every deliverable and milestone in a single, transparent view.", tags: ["Management", "Transparency"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman_23-2149153813.jpg" },
-        { bentoComponent: "chat", aiIcon: Bot, userIcon: User, exchanges: [{ userMessage: "Is the report ready?", aiResponse: "I've just uploaded the final Q1 audit to your portal. You can review it now." }], placeholder: "Send a message...", title: "Centralised Comms", description: "Stop chasing emails. All client communication is threaded by project." },
+        { id: "f2", title: "Centralised Comms", author: "PortalOS", description: "Stop chasing emails. All client communication is threaded by project.", tags: ["Communication", "Efficiency"], imageSrc: "http://img.b2bpic.net/free-photo/asian-architect-woman_53876-31462.jpg" },
-        { bentoComponent: "3d-card-grid", items: [{ name: "Stripe", icon: CreditCard }, { name: "Files", icon: FileText }, { name: "Tasks", icon: CheckCircle }, { name: "Teams", icon: User }], centerIcon: Workflow, title: "Revenue Ops", description: "Integrated Stripe billing and project tracking to ensure you get paid faster." }
+        { id: "f3", title: "Revenue Ops", author: "PortalOS", description: "Integrated Stripe billing and project tracking to ensure you get paid faster.", tags: ["Billing", "Finance"], imageSrc: "http://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg?_wi=1" }
-    ];
-
-    const testimonials = [
-        { id: "1", name: "Alex Rivers", handle: "Founder, CreativeScale", testimonial: "Finally, a portal that makes us look as premium as our work. Churn dropped 30%.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman_23-2149153813.jpg" },
-        { id: "2", name: "Jamie Smith", handle: "CEO, GrowthAgency", testimonial: "The onboarding automation alone saved my team 15 hours a week.", imageSrc: "http://img.b2bpic.net/free-photo/asian-architect-woman_53876-31462.jpg" }
     ];
 
     const pricingPlans = [
-        { id: "scale", price: "£299/mo", name: "Scale", buttons: [{ text: "Get Started", href: "#" }], features: ["Up to 10 Clients", "Custom Branding", "Stripe Integration", "Automated Invoicing"] },
+        { id: "scale", badge: "Starter", price: "£299/mo", subtitle: "Scale your agency operations", buttons: [{ text: "Get Started", href: "#" }], features: ["Up to 10 Clients", "Custom Branding", "Stripe Integration", "Automated Invoicing"] },
-        { id: "premium", badge: "Best Value", badgeIcon: Star, price: "£1,000/mo", name: "Premium", buttons: [{ text: "Book Setup", href: "#" }], features: ["Unlimited Clients", "Full White-Label", "DFY Onboarding", "Priority Support", "Advanced Reporting"] }
+        { id: "premium", badge: "Best Value", badgeIcon: Star, price: "£1,000/mo", subtitle: "Premium growth acceleration", buttons: [{ text: "Book Setup", href: "#" }], features: ["Unlimited Clients", "Full White-Label", "DFY Onboarding", "Priority Support", "Advanced Reporting"] },
+        { id: "enterprise", badge: "Expert", price: "£2,500/mo", subtitle: "Enterprise agency solution", buttons: [{ text: "Contact Us", href: "#" }], features: ["Custom Development", "Dedicated Account Manager", "API Access", "Unlimited Team"] }
     ];
 
     const faqs = [
         { id: "1", title: "Is this white-label?", content: "Yes, the entire portal is fully white-labeled to match your agency branding." },
-        { id: "2", title: "Why £1,000/mo?", content: "Our premium tier is designed for agencies looking to scale revenue by eliminating operational friction and maximizing retention." }
+        { id: "2", title: "Why £1,000/mo?", content: "Our premium tier is designed for agencies looking to scale revenue by eliminating operational friction and maximizing retention." },
+        { id: "3", title: "What integrations are supported?", content: "We support Stripe, Zapier, and native file management integrations." }
     ];
 
     return (
-        <ThemeProvider borderRadius="rounded" contentWidth="medium">
+        <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-            <NavbarStyleFullscreen navItems={navItems} brandName="PortalOS" />
+            <div id="nav" data-section="nav">
-            <HeroBillboardDashboard
+                <NavbarStyleFullscreen navItems={navItems} brandName="PortalOS" />
-                background={{ variant: "canvas-reveal" }}
-                tag="Client Operations Platform"
-                title="Elevate Your Agency Client Experience"
-                description="The premium white-label system for high-ticket service businesses to deliver work faster, look professional, and get paid on time."
-                buttons={[{ text: "Book Demo", href: "#" }]}
-                dashboard={{ title: "Agency Dashboard", logoIcon: Workflow, imageSrc: "http://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg", stats: [{ title: "Active Projects", values: [12, 14, 15], description: "Ongoing client deliverables" }, { title: "Revenue This Month", values: [8500, 9200, 11000], valuePrefix: "£", description: "Invoiced and paid through portal" }], listTitle: "Recent Activity", listItems: [{ icon: CheckCircle, title: "Milestone Approved", status: "Completed" }] }}
-            />
-            <div id="features">
-                <FeatureBento features={features} animationType="slide-up" title="Everything You Need to Scale" description="Replaces scattered tools with a unified system." textboxLayout="default" useInvertedBackground={false} />
             </div>
-            <PricingCardThree plans={pricingPlans} animationType="slide-up" title="Transparent Pricing" description="Built for growth and ROl." textboxLayout="default" />
+            <div id="hero" data-section="hero">
-            <FaqDouble faqs={faqs} title="Common Questions" textboxLayout="default" faqsAnimation="slide-up" />
+                <HeroBillboardRotatedCarousel 
-            <div id="contact">
+                    title="Elevate Your Agency Client Experience"
-                <ContactCTA tag="Get Started" title="Ready to Upgrade Your Operations?" description="Join the agencies transforming their client experience." buttons={[{ text: "Start your portal", href: "#" }]} />
+                    description="The premium white-label system for high-ticket service businesses to deliver work faster, look professional, and get paid on time."
+                    background={{ variant: "canvas-reveal" }}
+                    carouselItems={Array(6).fill({ id: "h1", imageSrc: "http://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg?_wi=2" })}
+                />
+            </div>
+            <div id="features" data-section="features">
+                <FeatureCardTwentyFour features={features} animationType="slide-up" title="Everything You Need to Scale" description="Replaces scattered tools with a unified system." textboxLayout="default" useInvertedBackground={false} />
+            </div>
+            <div id="pricing" data-section="pricing">
+                <PricingCardEight plans={pricingPlans} animationType="slide-up" title="Transparent Pricing" description="Built for growth and ROI." textboxLayout="default" useInvertedBackground={false} />
+            </div>
+            <div id="faq" data-section="faq">
+                <FaqSplitText faqs={faqs} sideTitle="Common Questions" faqsAnimation="slide-up" useInvertedBackground={false} />
+            </div>
+            <div id="contact" data-section="contact">
+                <ContactSplit tag="Get Started" title="Ready to Upgrade Your Operations?" description="Join the agencies transforming their client experience." useInvertedBackground={false} background={{ variant: "canvas-reveal" }} />
+            </div>
+            <div id="footer" data-section="footer">
+                <FooterBase 
+                    logoText="PortalOS"
+                    columns={[
+                        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+                        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
+                        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+                    ]}
+                    copyrightText="© 2025 PortalOS. All rights reserved."
+                />
             </div>
         </ThemeProvider>
     );