Fortura/apps/www/app/about/page.tsx

// app/about/page.tsx

'use client';

import * as React from 'react';
import { AwardIcon, UsersIcon, ZapIcon } from 'lucide-react';

import { Navbar } from '@workspace/ui/components/layout';
import { Footer } from '@workspace/ui/components/layout';
import { Container } from '@workspace/ui/components/layout';
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';
import { Callout } from '@workspace/ui/components/content';
import { FinalCTASection } from '@workspace/ui/components/content';
import Image from 'next/image';

export default function AboutPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />

      {/* Hero Section */}
      <AnimatedSection className="border-b border-muted">
        <Container maxWidth="10xl">
          <div className="text-center py-20 md:py-28">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
              About Fortura
            </h1>
            <p className="mt-6 text-xl text-muted-foreground max-w-3xl mx-auto">
              We built it for VFX first. That&apos;s why it works for everyone else.
            </p>
          </div>
        </Container>
      </AnimatedSection>

      {/* Origin Story */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <div className="flex flex-col lg:flex-row gap-16 items-center">
            <div className="flex-1">
              <h2 className="text-4xl font-bold mb-8">Our Origin Story</h2>
              <div className="space-y-6">
                <p className="text-xl text-muted-foreground">
                  Fortura was born in the high-stakes world of Visual Effects
                  (VFX) production. VFX studios operate on razor-thin margins,
                  require massive computational power, and deal with enormous
                  datasets (petabytes) that need to move fast.
                </p>
                <p className="text-xl text-muted-foreground">
                  We saw firsthand how the cloud billing model was financially
                  unsustainable for these studios. They were hemorrhaging money
                  on egress fees, rent for virtual machines that sat idle half
                  the time, and paying premium prices for &quot;enterprise&quot; support
                  that often lagged behind community forums.
                </p>
                <p className="text-xl text-muted-foreground">
                  So, we built a better way. A way to own the hardware, colocate
                  it for low-cost power and bandwidth, and automate the hell out
                  of operations so a small team could manage massive
                  infrastructure.
                </p>
              </div>
            </div>
            <div className="flex-1 flex justify-center">
              <div className="relative w-full h-80 rounded-xl overflow-hidden border">
                <Image
                  src="/about/about-vfx-studio.jpg"
                  alt="VFX studio render and review environment"
                  fill
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  className="object-cover"
                  priority={false}
                />
              </div>
            </div>
          </div>
        </Container>
      </AnimatedSection>

      {/* Why That Matters */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <h2 className="text-4xl font-bold mb-16 text-center">
            Why That Matters
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="space-y-4 p-8 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20">
              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary mb-4">
                <AwardIcon className="size-6" />
              </div>
              <h3 className="text-2xl font-bold">Petabyte Scale</h3>
              <p className="text-muted-foreground">
                We cut our teeth on systems handling hundreds of terabytes to
                petabytes of data. This means we know how to design for scale,
                performance, and cost-efficiency from the ground up.
              </p>
            </div>
            <div className="space-y-4 p-8 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20">
              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary mb-4">
                <UsersIcon className="size-6" />
              </div>
              <h3 className="text-2xl font-bold">Low Budgets</h3>
              <p className="text-muted-foreground">
                VFX studios have tight budgets. Every dollar spent on
                infrastructure is a dollar not spent on creative talent or
                compute rendering the next shot. This discipline forces us to
                find the absolute cheapest, most efficient solutions.
              </p>
            </div>
            <div className="space-y-4 p-8 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20">
              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary mb-4">
                <ZapIcon className="size-6" />
              </div>
              <h3 className="text-2xl font-bold">Real-Time Demands</h3>
              <p className="text-muted-foreground">
                In VFX, deadlines are absolute. A render farm that&apos;s down is a
                studio that&apos;s losing money. This means we obsess over uptime,
                redundancy, and zero-downtime upgrades. What works for 24/7 VFX
                pipelines works for any business-critical application.
              </p>
            </div>
          </div>
        </Container>
      </AnimatedSection>

      {/* Our Mission */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <h2 className="text-4xl font-bold mb-16">Our Mission</h2>
          <div className="space-y-8 max-w-4xl">
            <p className="text-xl text-muted-foreground">
              Our mission is to fundamentally change how enterprises think about
              infrastructure. The cloud model of &quot;rent forever&quot; is a bad deal
              for anyone with significant scale or data. It&apos;s a wealth transfer
              from innovative businesses to cloud providers.
            </p>
            <p className="text-xl text-muted-foreground">
              We show you how to own your infrastructure, colocate it for
              performance and cost, and operate it with a tiny fraction of the
              overhead of a cloud provider. You keep the performance, you keep
              the data, and you keep the savings.
            </p>
            <Callout variant="default" className="text-xl p-8">
              <span className="font-semibold">
                &quot;Your hosting provider is fucking you.&quot;
              </span>{' '}
              This isn&apos;t just a tagline; it&apos;s a technical reality. We&apos;re here to
              help you take control.
            </Callout>
          </div>
        </Container>
      </AnimatedSection>

      {/* Final CTA */}
      <AnimatedSection className="py-20 border-t border-muted">
        <Container maxWidth="10xl">
          <FinalCTASection
            title="Ready to take control?"
            description="Book a free architecture call to see how much you can save by moving from renting to owning."
            primaryCtaText="Book Architecture Call"
            primaryCtaHref="/contact"
          />
        </Container>
      </AnimatedSection>

      <Footer />
    </div>
  );
}