Add Pricing & Engagement page

cgen-cbe02e8dd46045419e287596a82d0113

client/pages/Pricing.tsx

@@ -0,0 +1,655 @@
+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 Pricing() {
+  const [isLoading, setIsLoading] = useState(true);
+  const toastShownRef = useRef(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+      if (!toastShownRef.current) {
+        aethexToast.system("Pricing & Engagement center ready");
+        toastShownRef.current = true;
+      }
+    }, 900);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (isLoading) {
+    return (
+      <LoadingScreen
+        message="Loading pricing matrix..."
+        showProgress
+        duration={900}
+      />
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="min-h-screen bg-aethex-gradient">
+        {/* Hero */}
+        <section className="relative overflow-hidden py-20 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" />
+                Pricing & 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 price button across 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"
+                >
+                  <Link to="#bundles" className="flex items-center gap-2">
+                    <BadgeDollarSign className="h-5 w-5" />
+                    Explore Pricing Bundles
+                  </Link>
+                </Button>
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-aethex-400/60 text-aethex-100 hover:bg-aethex-500/10"
+                >
+                  <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-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 gap-6 lg:grid-cols-3">
+              {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-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 gap-6 lg:grid-cols-3">
+              {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-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 gap-6 md:grid-cols-3">
+              {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-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.
+                Pricing shown is typical—final quotes depend on scope.
+              </p>
+            </div>
+
+            <div className="mt-12 grid grid-cols-1 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-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 engagement—regardless of pricing—follows a transparent flow
+                so you always know what happens next.
+              </p>
+            </div>
+
+            <div className="mt-12 grid grid-cols-1 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-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"
+                  >
+                    <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"
+                  >
+                    <a href="mailto:hello@aethex.biz?subject=AeThex Pricing 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>
+  );
+}