Merge version_2 into main #2
@@ -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 FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
||||
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
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 { Workflow, Star, CheckCircle, Search, FileText, CreditCard, User, Bot, Mail } from "lucide-react";
|
||||
|
||||
export default function ClientPortalTemplatePage() {
|
||||
const navItems = [
|
||||
@@ -20,45 +17,51 @@ export default function ClientPortalTemplatePage() {
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const features: FeatureCard[] = [
|
||||
{ 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." },
|
||||
{ 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." },
|
||||
{ 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." }
|
||||
];
|
||||
|
||||
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 features = [
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
{ 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" }
|
||||
];
|
||||
|
||||
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: "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: "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", 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">
|
||||
<NavbarStyleFullscreen navItems={navItems} brandName="PortalOS" />
|
||||
<HeroBillboardDashboard
|
||||
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: "Get Your Custom Portal", 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} />
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen navItems={navItems} brandName="PortalOS" />
|
||||
</div>
|
||||
<PricingCardThree plans={pricingPlans} animationType="slide-up" title="Transparent Pricing" description="Built for growth and ROl." textboxLayout="default" />
|
||||
<FaqDouble faqs={faqs} title="Common Questions" textboxLayout="default" faqsAnimation="slide-up" />
|
||||
<div id="contact">
|
||||
<ContactCTA tag="Get Started" title="Ready to Upgrade Your Operations?" description="Join the agencies transforming their client experience." buttons={[{ text: "Start your portal", href: "#" }]} />
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
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."
|
||||
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" })}
|
||||
/>
|
||||
</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} />
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal logoText="PortalOS" columns={[{ title: "Product", items: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }] }]} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user