aethex-forge/client/pages/Pricing.tsx
Builder.io f5b1b95611 Resize Engage outline CTA button
cgen-1d7872a682b2455a85ec7e465f05e8c6
2025-10-04 01:33:55 +00:00

670 lines
25 KiB
TypeScript

import { useEffect, useRef, useState } from "react";
import Layout from "@/components/Layout";
import LoadingScreen from "@/components/LoadingScreen";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom";
import {
BadgeDollarSign,
Briefcase,
CalendarCheck,
CheckCircle2,
Award,
BarChart3,
Clock,
DollarSign,
Handshake,
Layers,
LineChart,
Rocket,
Sparkles,
Stars,
Users,
} from "lucide-react";
type ServiceBundle = {
id: string;
name: string;
description: string;
startingAt: string;
typicalScope: string;
timeline: string;
includes: string[];
};
type EngagementModel = {
name: string;
summary: string;
bestFor: string;
pricing: string;
highlights: string[];
};
type CommissionTier = {
name: string;
split: string;
threshold: string;
notes: string;
};
type AddOn = {
title: string;
description: string;
rate: string;
icon: React.ElementType;
};
const serviceBundles: ServiceBundle[] = [
{
id: "game-development",
name: "Game Development",
description:
"Full-cycle production for Roblox, mobile, desktop, and console experiences. Ideal for creators scaling prototypes into live products.",
startingAt: "Starting at $2,500",
typicalScope: "Custom builds, ports, live ops systems",
timeline: "2-12 months depending on scope",
includes: [
"Dedicated producer + cross-disciplinary pod",
"Weekly playable builds with QA reports",
"Monetization + analytics integration",
"Launch, certification, and post-launch support",
],
},
{
id: "development-consulting",
name: "Development Consulting",
description:
"Strategy, architecture, and delivery acceleration for product teams modernizing stacks or scaling platforms.",
startingAt: "Starting at $6,000",
typicalScope: "Audits, modernization, DevOps, team enablement",
timeline: "1-12 weeks for engagements, retainers available",
includes: [
"Detailed technical audit and roadmap",
"Implementation pairing with in-house teams",
"Security, compliance, and performance baselines",
"Executive-ready reporting and success metrics",
],
},
{
id: "mentorship",
name: "Mentorship & Education",
description:
"Personalized mentorship programs, boot camps, and corporate training to upskill teams and individuals.",
startingAt: "Starting at $150/month",
typicalScope: "1:1 mentorship, group cohorts, enterprise training",
timeline: "4-24 weeks depending on track",
includes: [
"Custom learning plans and project briefs",
"Weekly live sessions with senior practitioners",
"Portfolio and interview preparation",
"Progress analytics shared with sponsors",
],
},
];
const engagementModels: EngagementModel[] = [
{
name: "Project-Based",
summary:
"Fixed-scope delivery with milestone billing. Transparent budgets and predictable outcomes for well-defined initiatives.",
bestFor: "Game launches, feature builds, audits, modernization projects",
pricing: "Quotes from $5,000 based on scope",
highlights: [
"Detailed proposal with scope, timeline, and deliverables",
"Milestone-based invoices aligned to value delivered",
"Dedicated producer as single point of contact",
],
},
{
name: "Retainer & Pod",
summary:
"Reserved capacity from a cross-functional AeThex pod. Ideal for studios needing consistent momentum and rapid iteration.",
bestFor: "Live ops, product roadmap execution, embedded leadership",
pricing: "Pods available from $4,500/month",
highlights: [
"Guaranteed hours and sprint cadence",
"Mix-and-match roles (engineering, design, PM)",
"Velocity reporting and prioritization workshops",
],
},
{
name: "Revenue Share / Commission",
summary:
"Performance-aligned partnerships where AeThex participates directly in upside across launches, cosmetics, or creator tooling.",
bestFor:
"Creators with engaged audiences, experiential brands, emerging studios",
pricing: "Flexible splits after recouped production costs",
highlights: [
"Shared analytics dashboards and growth experiments",
"Ongoing live ops + marketing alignment meetings",
"Option to blend with modest retainers for guaranteed throughput",
],
},
];
const commissionTiers: CommissionTier[] = [
{
name: "Indie Accelerator",
split: "70% creator / 30% AeThex after cost recovery",
threshold: "Projects under $50K or first-time launches",
notes:
"AeThex fronts production sprints and tooling. Marketing boosts via community partners included.",
},
{
name: "Studio Partnership",
split: "80% partner / 20% AeThex on net revenue",
threshold: "Established teams with existing distribution",
notes:
"Joint roadmap planning, LiveOps experimentation, and marketplace merchandising support.",
},
{
name: "Enterprise Commission",
split: "Custom 10-25% performance fee",
threshold:
"High-profile activations, seasonal events, or branded experiences",
notes:
"Co-marketing, compliance, and rapid scale pods with 24/7 operations.",
},
];
const addOns: AddOn[] = [
{
title: "Creative Direction",
description:
"Narrative design, concept art, branding systems, and pitch decks ready for investors or communities.",
rate: "$2,000+ per engagement",
icon: Sparkles,
},
{
title: "Growth & Monetization",
description:
"Economy balancing, pricing experiments, retention funnels, and live events strategy.",
rate: "$1,200/mo or revenue share",
icon: LineChart,
},
{
title: "Support & Operations",
description:
"Player support, moderation, telemetry tuning, and automated health checks across platforms.",
rate: "$95/hr or bundle",
icon: Users,
},
{
title: "QA & Certification",
description:
"Platform certification, device matrix testing, and regression pipelines for continuous delivery.",
rate: "$1,500 per release window",
icon: CalendarCheck,
},
];
const process = [
{
step: "01",
title: "Discovery & Alignment",
description:
"Schedule an intro call, share goals, and walk through references. We map success criteria and define the engagement model.",
},
{
step: "02",
title: "Proposal & Approval",
description:
"Receive a detailed proposal with investment breakdown, milestones, resourcing model, and optional add-ons.",
},
{
step: "03",
title: "Launch Sprint",
description:
"Kick off with a stakeholder workshop. We lock delivery cadence, communication stack, and analytics instrumentation.",
},
{
step: "04",
title: "Scale & Optimize",
description:
"Track KPIs together, review demos, and iterate. Additional pods or commission tiers can be activated as momentum grows.",
},
];
const faqs = [
{
question: "How do you price mixed-scope engagements?",
answer:
"We blend fixed-fee milestones for known deliverables with retainers or revenue share for live operations and experimental features. The model is always transparent and documented before kickoff.",
},
{
question: "What information helps you quote faster?",
answer:
"Links to existing builds, tech stack details, target platforms, deadlines, and growth goals. Even bullet-point dreams are welcome—our team is great at filling in blanks.",
},
{
question: "Can we start small before scaling up?",
answer:
"Absolutely. Many partners engage us for a quick assessment or prototype sprint before expanding into retainers or revenue share models.",
},
{
question: "Do you work with external creators or agencies?",
answer:
"Yes. We routinely collaborate with independent artists, streamers, and agencies. Our commission tiers were designed to align incentives across blended teams.",
},
];
export default function Engage() {
const [isLoading, setIsLoading] = useState(true);
const toastShownRef = useRef(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
if (!toastShownRef.current) {
aethexToast.system("Engagement center ready");
toastShownRef.current = true;
}
}, 900);
return () => clearTimeout(timer);
}, []);
if (isLoading) {
return (
<LoadingScreen
message="Loading engagement center..."
showProgress
duration={900}
/>
);
}
return (
<Layout>
<div className="min-h-screen bg-aethex-gradient">
{/* Hero */}
<section className="relative overflow-hidden py-16 sm:py-24 lg:py-28">
<div className="absolute inset-0 opacity-15">
{[...Array(35)].map((_, idx) => (
<div
key={idx}
className="absolute text-aethex-400/80 animate-float"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s`,
fontSize: `${8 + Math.random() * 8}px`,
}}
>
{"💼🎮📈🛠️".charAt(Math.floor(Math.random() * 4))}
</div>
))}
</div>
<div className="container relative z-10 mx-auto max-w-5xl px-4 text-center">
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
<Badge
variant="outline"
className="border-aethex-400/50 text-aethex-300 backdrop-blur-sm"
>
<Handshake className="mr-2 h-3 w-3" />
Engagement Playbook
</Badge>
<h1 className="text-4xl font-black tracking-tight sm:text-5xl lg:text-6xl">
<span className="text-gradient-purple">
Choose how you collaborate with AeThex
</span>
</h1>
<p className="text-lg text-muted-foreground sm:text-xl">
Compare investment models, commission structures, and add-ons in
a single hub. Every action to engage AeThex now routes here so
you can align stakeholders quickly.
</p>
<div className="flex flex-col gap-4 sm:flex-row">
<Button
asChild
size="lg"
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
>
<Link to="#bundles" className="flex items-center gap-2">
<BadgeDollarSign className="h-5 w-5" />
Explore Engagement Bundles
</Link>
</Button>
<Button
asChild
variant="outline"
size="lg"
className="border-aethex-400/60 text-aethex-100 hover:bg-aethex-500/10 text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
>
<Link to="/contact" className="flex items-center gap-2">
<Rocket className="h-5 w-5" />
Book a Scoping Call
</Link>
</Button>
</div>
<div className="flex flex-wrap justify-center gap-3 text-xs uppercase tracking-[0.2em] text-muted-foreground/70">
<span className="flex items-center gap-1">
<Clock className="h-3 w-3" />
24-hour proposal turnaround
</span>
<span className="flex items-center gap-1">
<Stars className="h-3 w-3" />
Transparent milestones
</span>
<span className="flex items-center gap-1">
<Users className="h-3 w-3" />
Embedded expert pods
</span>
</div>
</div>
</div>
</section>
{/* Service Bundles */}
<section id="bundles" className="bg-background/30 py-16 sm:py-20">
<div className="container mx-auto max-w-6xl px-4">
<div className="text-center">
<h2 className="text-3xl font-bold text-gradient mb-4 sm:text-4xl">
Core Engagement Bundles
</h2>
<p className="text-lg text-muted-foreground">
These bundles power every CTA across Game Development,
Consulting, and Mentorship. Pick the bundle, customize with
add-ons, and launch fast.
</p>
</div>
<div className="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{serviceBundles.map((bundle, index) => (
<Card
key={bundle.id}
id={bundle.id}
className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover:-translate-y-1"
style={{ animationDelay: `${index * 0.1}s` }}
>
<CardHeader className="space-y-4">
<div className="inline-flex items-center gap-2 rounded-full border border-aethex-400/30 bg-background/40 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-aethex-200">
<Layers className="h-3 w-3" /> {bundle.typicalScope}
</div>
<CardTitle className="text-2xl">{bundle.name}</CardTitle>
<CardDescription>{bundle.description}</CardDescription>
<div className="text-left text-sm text-muted-foreground">
<span className="font-semibold text-aethex-300">
{bundle.startingAt}
</span>
<div>{bundle.timeline}</div>
</div>
</CardHeader>
<CardContent className="space-y-3">
{bundle.includes.map((item) => (
<div
key={item}
className="flex items-start gap-2 text-sm text-muted-foreground"
>
<CheckCircle2 className="mt-0.5 h-4 w-4 text-aethex-400" />
<span>{item}</span>
</div>
))}
<Button
asChild
variant="outline"
className="mt-4 w-full border-aethex-400/40 text-aethex-100 hover:border-aethex-400 hover:bg-aethex-500/10"
>
<Link
to={`/contact?subject=${encodeURIComponent(bundle.name + " Inquiry")}`}
>
Request {bundle.name} Proposal
</Link>
</Button>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Engagement Models */}
<section className="py-16 sm:py-20">
<div className="container mx-auto max-w-6xl px-4">
<div className="text-center">
<h2 className="text-3xl font-bold text-gradient mb-4 sm:text-4xl">
Engagement Models
</h2>
<p className="text-lg text-muted-foreground">
Mix and match fixed project work, retainers, or
performance-based commissions. Every option includes transparent
reporting.
</p>
</div>
<div className="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{engagementModels.map((model) => (
<Card
key={model.name}
className="border-border/50 bg-card/40 hover:border-aethex-400/50 transition-all duration-500 hover:-translate-y-1"
>
<CardHeader className="space-y-3">
<CardTitle className="text-2xl">{model.name}</CardTitle>
<CardDescription>{model.summary}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="rounded-lg border border-border/50 bg-background/40 p-4 text-sm text-muted-foreground">
<div className="font-semibold text-aethex-300">
Best for
</div>
<div>{model.bestFor}</div>
</div>
<div className="text-sm font-semibold text-aethex-300">
{model.pricing}
</div>
<div className="space-y-2 text-sm text-muted-foreground">
{model.highlights.map((highlight) => (
<div key={highlight} className="flex items-start gap-2">
<CheckCircle2 className="h-4 w-4 text-aethex-400" />
<span>{highlight}</span>
</div>
))}
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Commission Tiers */}
<section className="bg-background/30 py-16 sm:py-20">
<div className="container mx-auto max-w-5xl px-4">
<div className="text-center">
<h2 className="text-3xl font-bold text-gradient mb-4 sm:text-4xl">
Commission & Revenue Share Tiers
</h2>
<p className="text-lg text-muted-foreground">
When upside matters more than invoices, these tiers align our
success with yours. All tiers include weekly revenue snapshots
and experiment planning calls.
</p>
</div>
<div className="mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
{commissionTiers.map((tier) => (
<Card
key={tier.name}
className="border-border/50 bg-card/40 hover:border-aethex-400/50 transition-all duration-500"
>
<CardHeader className="space-y-2">
<CardTitle className="text-xl">{tier.name}</CardTitle>
<CardDescription className="text-sm font-semibold text-aethex-300">
{tier.split}
</CardDescription>
</CardHeader>
<CardContent className="space-y-3 text-sm text-muted-foreground">
<div className="flex items-center gap-2">
<BarChart3 className="h-4 w-4 text-aethex-400" />
<span>{tier.threshold}</span>
</div>
<p>{tier.notes}</p>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Add-ons */}
<section className="py-16 sm:py-20">
<div className="container mx-auto max-w-6xl px-4">
<div className="text-center">
<h2 className="text-3xl font-bold text-gradient mb-4 sm:text-4xl">
Popular Add-ons
</h2>
<p className="text-lg text-muted-foreground">
Bolt these on to any bundle or engagement model for extra lift.
Investments shown are typicalfinal quotes depend on scope.
</p>
</div>
<div className="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-6 md:grid-cols-2">
{addOns.map((addon) => {
const Icon = addon.icon;
return (
<Card
key={addon.title}
className="border-border/50 bg-card/40 hover:border-aethex-400/50 transition-all duration-500"
>
<CardHeader className="flex flex-row items-start justify-between">
<div className="space-y-2">
<CardTitle>{addon.title}</CardTitle>
<CardDescription>{addon.description}</CardDescription>
</div>
<Icon className="h-8 w-8 text-aethex-400" />
</CardHeader>
<CardContent>
<div className="inline-flex items-center gap-2 rounded-full border border-aethex-400/40 bg-background/30 px-4 py-1 text-sm font-semibold text-aethex-200">
<DollarSign className="h-4 w-4" /> {addon.rate}
</div>
</CardContent>
</Card>
);
})}
</div>
</div>
</section>
{/* Process */}
<section className="bg-background/30 py-16 sm:py-20">
<div className="container mx-auto max-w-5xl px-4">
<div className="text-center">
<h2 className="text-3xl font-bold text-gradient mb-4 sm:text-4xl">
How Engagements Flow
</h2>
<p className="text-lg text-muted-foreground">
Every engagementregardless of investmentfollows a transparent
flow so you always know what happens next.
</p>
</div>
<div className="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-6 md:grid-cols-2">
{process.map((stage) => (
<Card
key={stage.step}
className="border-border/50 bg-card/40 hover:border-aethex-400/50 transition-all duration-500"
>
<CardHeader className="space-y-2">
<div className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
Step {stage.step}
</div>
<CardTitle>{stage.title}</CardTitle>
</CardHeader>
<CardContent className="text-sm text-muted-foreground">
{stage.description}
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* FAQs + CTA */}
<section className="py-16 sm:py-20">
<div className="container mx-auto max-w-5xl px-4">
<div className="grid gap-12 md:grid-cols-[3fr,2fr]">
<div>
<h2 className="text-3xl font-bold text-gradient mb-6 sm:text-4xl">
Frequently Asked
</h2>
<div className="space-y-6">
{faqs.map((faq) => (
<div
key={faq.question}
className="rounded-xl border border-border/40 bg-card/40 p-6"
>
<h3 className="text-lg font-semibold text-foreground">
{faq.question}
</h3>
<p className="mt-2 text-sm text-muted-foreground">
{faq.answer}
</p>
</div>
))}
</div>
</div>
<Card className="border-aethex-400/50 bg-gradient-to-br from-aethex-950/80 via-aethex-900/60 to-neon-blue/10 backdrop-blur">
<CardHeader className="space-y-4 text-center">
<CardTitle className="text-2xl text-gradient">
Ready to start?
</CardTitle>
<CardDescription className="text-sm text-muted-foreground">
Share your goals and we'll craft a tailored engagement plan
within one business day.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<Button
asChild
size="lg"
className="w-full bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 text-base sm:text-lg py-4 sm:py-5"
>
<Link
to="/contact"
className="flex items-center justify-center gap-2"
>
<Briefcase className="h-5 w-5" />
Request Proposal
</Link>
</Button>
<Button
asChild
variant="outline"
className="w-full border-aethex-400/60 text-aethex-100 hover:bg-aethex-500/10 text-base sm:text-lg py-4 sm:py-5"
>
<a href="mailto:hello@aethex.biz?subject=AeThex Engagement Inquiry">
hello@aethex.biz
</a>
</Button>
<div className="rounded-lg border border-border/40 bg-background/40 p-4 text-left text-xs text-muted-foreground">
<p>
Need NDAs or procurement documents? Mention it in your
message and our operations team will respond with the
required paperwork.
</p>
</div>
</CardContent>
</Card>
</div>
</div>
</section>
</div>
</Layout>
);
}