284 lines
17 KiB
TypeScript
284 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { AlertCircle, Lock, CreditCard, TrendingUp, Zap, Sparkles } from 'lucide-react';
|
|
|
|
export default function ClutchTierPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="ClutchTier"
|
|
navItems={[
|
|
{ name: "Problem", id: "problem" },
|
|
{ name: "Solution", id: "solution" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Metrics", id: "metrics" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{
|
|
text: "Start Free", href: "https://app.clutchtier.com/signup"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Pricing Execution. Governance. Outcomes."
|
|
description="Stop analyzing pricing and start executing it safely. ClutchTier is the infrastructure layer that governs every pricing decision, executes changes across your billing systems, and measures what actually happened."
|
|
tag="Pricing Operations Platform"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="blur-reveal"
|
|
buttons={[
|
|
{ text: "Start Free", href: "https://app.clutchtier.com/signup" },
|
|
{ text: "Watch Demo", href: "#" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
background={{ variant: "animated-grid" }}
|
|
carouselItems={[
|
|
{
|
|
id: "1", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/a-modern-saas-dashboard-showing-pricing--1773182902528-5e0f3e50.png?_wi=1", videoAriaLabel: "ClutchTier pricing dashboard interface"
|
|
},
|
|
{
|
|
id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/clean-process-flow-diagram-showing-decis-1773182902127-4bc84e54.png?_wi=1", imageAlt: "Pricing execution flow diagram"
|
|
},
|
|
{
|
|
id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/illustration-showing-team-collaboration--1773182902358-2d55cf1e.png?_wi=1", imageAlt: "Growth tier features visualization"
|
|
},
|
|
{
|
|
id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/enterprise-illustration-autonomous-execu-1773182902202-8b062c7e.png?_wi=1", imageAlt: "Scale tier autonomous operations"
|
|
},
|
|
{
|
|
id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/minimalist-illustration-representing-bas-1773182901494-c8cf4813.png?_wi=1", imageAlt: "Starter tier execution foundation"
|
|
},
|
|
{
|
|
id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/clean-process-flow-diagram-showing-decis-1773182902127-4bc84e54.png?_wi=2", imageAlt: "Governed execution pipeline"
|
|
}
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={5000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="problem" data-section="problem">
|
|
<TextAbout
|
|
tag="The Gap"
|
|
tagIcon={AlertCircle}
|
|
title="You know what to charge. Executing it safely is terrifying."
|
|
useInvertedBackground={false}
|
|
buttons={[]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="solution" data-section="solution">
|
|
<FeatureCardSeven
|
|
title="Three Moats. One Platform."
|
|
description="Execution infrastructure. Governance frameworks. Benchmark network. The three things AI will never replicate."
|
|
tag="Why ClutchTier Wins"
|
|
tagIcon={Lock}
|
|
tagAnimation="blur-reveal"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Execution Infrastructure", description: "Connect Stripe, Chargebee, Recurly. Execute pricing changes safely. Grandfathering automation. Rollback any change within seconds. Multi-system orchestration that just works.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/a-modern-saas-dashboard-showing-pricing--1773182902528-5e0f3e50.png?_wi=2", imageAlt: "Execution dashboard interface"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Governance & Compliance", description: "5-level risk classification. Audit trails that satisfy SOC 2. Decision rationale captured automatically. Approval workflows that scale from solo founder to enterprise committee.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/illustration-showing-team-collaboration--1773182902358-2d55cf1e.png?_wi=2", imageAlt: "Governance workflow visualization"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Benchmark Network", description: "Real pricing outcomes from 200+ SaaS companies. Anonymized, aggregated, GDPR compliant. Your changes calibrated against peers who made similar moves. Benchmark intelligence no AI training set has.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/network-visualization-showing-interconne-1773182902219-a16528a6.png", imageAlt: "Benchmark network visualization"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
title="Pricing That Scales With You"
|
|
description="Start free. Grow with confidence. From solo founder to scaling SaaS."
|
|
tag="Transparent Pricing"
|
|
tagIcon={CreditCard}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "free", title: "Free", price: "£0", period: "forever", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/minimalist-illustration-representing-bas-1773182901494-c8cf4813.png?_wi=2", imageAlt: "Free tier foundation", button: { text: "Get Started", href: "https://app.clutchtier.com/signup" },
|
|
features: [
|
|
"Pricing Page Grader", "What Should I Charge calculator", "WTP survey templates", "5 benchmark lookups/month", "Pricing Health Score"
|
|
]
|
|
},
|
|
{
|
|
id: "starter", title: "Starter", price: "£149", period: "/month", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/minimalist-illustration-representing-bas-1773182901494-c8cf4813.png?_wi=3", imageAlt: "Starter tier execution", button: { text: "Start Free Trial", href: "https://app.clutchtier.com/signup" },
|
|
features: [
|
|
"Stripe integration & execution", "Basic governance logging", "Grandfathering automation", "50 benchmark lookups/month", "Embedded surveys", "Competitor tracking (5)", "Slack integration", "Email support"
|
|
]
|
|
},
|
|
{
|
|
id: "growth", title: "Growth", price: "£599", period: "/month", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/illustration-showing-team-collaboration--1773182902358-2d55cf1e.png?_wi=3", imageAlt: "Growth tier collaboration", button: { text: "Start Free Trial", href: "https://app.clutchtier.com/signup" },
|
|
features: [
|
|
"Multi-provider billing (Stripe, Chargebee, Recurly, Paddle)", "A/B test execution engine", "Full 5-level governance framework", "Team support (up to 5 users)", "Unlimited benchmark access", "Competitor tracking (15)", "Phase 2 bounded autonomy (opt-in)", "Advanced segmentation", "Priority support"
|
|
]
|
|
},
|
|
{
|
|
id: "scale", title: "Scale", price: "£2,499", period: "/month", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlhekYZ1RQmKsRltjcPsPKK0bz/enterprise-illustration-autonomous-execu-1773182902202-8b062c7e.png?_wi=2", imageAlt: "Scale tier autonomous operations", button: { text: "Schedule Demo", href: "#" },
|
|
features: [
|
|
"Everything in Growth, plus:", "Enterprise integrations (Salesforce, ERP, BI tools)", "Compliance-grade audit trail (SOC 2 ready)", "Predictive pricing models", "International pricing execution", "Full Phase 3 autonomy", "Unlimited team members", "API access", "SSO/SAML", "Dedicated strategist", "99.9% uptime SLA"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="The Numbers That Matter"
|
|
description="Proven infrastructure for serious pricing work."
|
|
tag="Operations Metrics"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
animationType="scale-rotate"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "1", value: "99.7%", description: "Execution Success Rate" },
|
|
{ id: "2", value: "<5min", description: "Rollback Speed" },
|
|
{ id: "3", value: "200+", description: "Benchmark Companies" },
|
|
{ id: "4", value: "100%", description: "Audit Trail Coverage" }
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading SaaS Companies"
|
|
description="Built on the same integrations your team already uses."
|
|
tag="Integration Partners"
|
|
tagIcon={Zap}
|
|
tagAnimation="blur-reveal"
|
|
names={["Stripe", "Chargebee", "Slack", "HubSpot", "Mixpanel", "PostgreSQL", "Vercel", "AWS"]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
buttons={[]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Questions About Pricing Execution"
|
|
sideDescription="Everything you need to know about governance, benchmarks, and autonomy."
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
faqsAnimation="none"
|
|
faqs={[
|
|
{
|
|
id: "5", title: "Is my data secure?", content: "Yes. Row-level security on all customer data. Benchmark contributions anonymized and aggregated before storage. GDPR compliant. Deletion cascades to benchmark data. SOC 2 audit trail. Enterprise encryption."
|
|
},
|
|
{
|
|
id: "1", title: "How does execution actually work?", content: "Connect your billing provider (Stripe, Chargebee, etc.). Define your pricing change through our interface. ClutchTier previews the impact, executes through the governed pipeline, logs every action, and stores a rollback payload. Any execution can be reverted within seconds."
|
|
},
|
|
{
|
|
id: "2", title: "What makes governance different?", content: "Unlike spreadsheets or manual processes, ClutchTier classifies every decision into 5 risk levels (Routine → Blocked). Low-risk changes execute automatically within policy. Medium-risk changes need one approver. Strategic changes need committees. Every decision is audited."
|
|
},
|
|
{
|
|
id: "3", title: "How does the benchmark network work?", content: "Every customer contributes anonymized pricing outcomes. We aggregate them by vertical, company size, and pricing model. You see: 'Companies like yours who raised prices 12% saw 8% revenue lift with 1.2% churn.' Real data. Peer calibration."
|
|
},
|
|
{
|
|
id: "4", title: "What's Phase 2 and Phase 3 autonomy?", content: "Phase 1 (default): You decide, we execute, we log. Phase 2 (opt-in after 90 days): We execute low-risk actions automatically within bounds. Phase 3 (opt-in after 180 days): We run pricing continuously, you set policy and guardrails. All audited."
|
|
},
|
|
{
|
|
id: "6", title: "Can I integrate with our existing tools?", content: "Stripe, Chargebee, Recurly, Paddle for billing. HubSpot, Salesforce, Pipedrive for CRM. Mixpanel, Amplitude, Segment, PostHog for analytics. Intercom and Zendesk for support. More integrations added monthly."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Start executing pricing with confidence. No credit card required."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "https://app.clutchtier.com/signup" },
|
|
{ text: "Schedule Demo", href: "#" }
|
|
]}
|
|
background={{ variant: "animated-grid" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Features", href: "#solution" },
|
|
{ label: "Security", href: "#" },
|
|
{ label: "Status", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "API Reference", href: "#" },
|
|
{ label: "Guides", href: "#" },
|
|
{ label: "Community", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy", href: "#" },
|
|
{ label: "Terms", href: "#" },
|
|
{ label: "Security", href: "#" },
|
|
{ label: "Compliance", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2026 ClutchTier. All rights reserved."
|
|
bottomRightText="Built for pricing that executes."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|