Update global styles and layout components; introduce new font and restructure homepage. Adjust color variables for light and dark themes, add new font styles, and enhance footer and navigation for improved accessibility. Replace old project showcase with updated components reflecting recent projects and branding efforts.

2025-10-12 16:15:08 -06:00
12 changed files with 284 additions and 282 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -1,53 +1,53 @@
@import "tailwindcss";

 :root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 3.9%;
-  --chart-1: 12 76% 61%;
-  --chart-2: 173 58% 39%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
-  --radius: 0.5rem;
-}
-
-.dark {
-  --background: 0 0% 3.9%;
+  --background: 0 0% 0%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
+  --primary: 188 100% 50%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
+  --accent: 188 100% 50%;
+  --accent-foreground: 0 0% 9%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
+  --ring: 188 100% 50%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 0 0% 0%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 188 100% 50%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: 188 100% 50%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 188 100% 50%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
@ -58,6 +58,7 @@
@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
+  --font-brand: var(--font-bebas);
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
@ -68,3 +69,10 @@ body {
  color: hsl(var(--foreground));
  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
 }
+
+.font-brand {
+  font-family: var(--font-brand), var(--font-sans), Arial, Helvetica, sans-serif;
+  font-weight: 900;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Bebas_Neue } from "next/font/google";
 import "./globals.css";
 import { Navigation } from "@/components/Navigation";
 import { Footer } from "@/components/Footer";
@ -18,6 +18,14 @@ const geistMono = Geist_Mono({
  preload: true,
 });

+const bebasNeue = Bebas_Neue({
+  variable: "--font-bebas",
+  subsets: ["latin"],
+  weight: "400",
+  display: "swap",
+  preload: true,
+});
+
 export const metadata: Metadata = {
  title: "Biohazard VFX - Professional Visual Effects Studio",
  description: "Creating stunning visual effects for film, television, and digital media. Expert VFX, motion graphics, compositing, and 3D animation services.",
@ -55,7 +63,7 @@ export default function RootLayout({
  };

  return (
-    <html lang="en">
+    <html lang="en" className="dark">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
@ -65,7 +73,7 @@ export default function RootLayout({
        />
      </head>
      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${bebasNeue.variable} antialiased bg-black text-white`}
      >
        <Navigation />
        <main className="min-h-screen">
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,131 +1,22 @@
-import Link from "next/link";
 import { Hero } from "@/components/Hero";
-import { VideoPlayer } from "@/components/VideoPlayer";
-import { ProjectCard } from "@/components/ProjectCard";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { projects, studioReel } from "@/data/projects";
-import { Sparkles, Zap, Award } from "lucide-react";
+import { ClientLogoGrid } from "@/components/ClientLogoGrid";
+import { ProjectShowcase } from "@/components/ProjectShowcase";
+import { MissionSection } from "@/components/MissionSection";
+import { ContactSection } from "@/components/ContactSection";
+import { BrandingSection } from "@/components/BrandingSection";
+import { projects } from "@/data/projects";

 export default function Home() {
  const featuredProjects = projects.filter((p) => p.featured);

  return (
    <>
-      <Hero
-        title="Crafting Extraordinary Visual Experiences"
-        subtitle="Award-winning visual effects studio delivering stunning VFX, motion graphics, and 3D animation for film, television, and digital media."
-      />
-
-      {/* Studio Reel Section */}
-      <section className="container py-16">
-        <div className="space-y-4 text-center">
-          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
-            Our Studio Reel
-          </h2>
-          <p className="mx-auto max-w-2xl text-muted-foreground">
-            A showcase of our best work from the past year
-          </p>
-        </div>
-        <div className="mt-8">
-          <VideoPlayer
-            videoUrl={studioReel.videoUrl}
-            thumbnailUrl={studioReel.thumbnailUrl}
-            title={studioReel.title}
-            className="aspect-video w-full"
-          />
-        </div>
-      </section>
-
-      <Separator className="container" />
-
-      {/* Featured Projects Section */}
-      <section className="container py-16">
-        <div className="space-y-4 text-center">
-          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
-            Featured Projects
-          </h2>
-          <p className="mx-auto max-w-2xl text-muted-foreground">
-            A selection of our recent work across film, commercial, and digital media
-          </p>
-        </div>
-        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {featuredProjects.map((project) => (
-            <ProjectCard key={project.id} project={project} />
-          ))}
-        </div>
-        <div className="mt-12 text-center">
-          <Button asChild size="lg">
-            <Link href="/portfolio">View Full Portfolio</Link>
-          </Button>
-        </div>
-      </section>
-
-      <Separator className="container" />
-
-      {/* Capabilities Section */}
-      <section className="container py-16">
-        <div className="space-y-4 text-center">
-          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
-            Our Capabilities
-          </h2>
-          <p className="mx-auto max-w-2xl text-muted-foreground">
-            Comprehensive visual effects services backed by years of industry experience
-          </p>
-        </div>
-        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          <Card>
-            <CardHeader>
-              <Sparkles className="h-8 w-8 text-primary" />
-              <CardTitle>Industry-Leading Technology</CardTitle>
-              <CardDescription>
-                Utilizing the latest tools and techniques to deliver photorealistic VFX that seamlessly integrate with your footage.
-              </CardDescription>
-            </CardHeader>
-          </Card>
-          <Card>
-            <CardHeader>
-              <Zap className="h-8 w-8 text-primary" />
-              <CardTitle>Fast Turnaround</CardTitle>
-              <CardDescription>
-                Efficient pipeline and experienced team ensure your project stays on schedule without compromising quality.
-              </CardDescription>
-            </CardHeader>
-          </Card>
-          <Card>
-            <CardHeader>
-              <Award className="h-8 w-8 text-primary" />
-              <CardTitle>Award-Winning Team</CardTitle>
-              <CardDescription>
-                Our artists have contributed to numerous award-winning productions across film and television.
-              </CardDescription>
-            </CardHeader>
-          </Card>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="container py-16">
-        <Card className="border-2">
-          <CardContent className="flex flex-col items-center gap-6 p-12 text-center">
-            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">
-              Ready to Bring Your Vision to Life?
-            </h2>
-            <p className="max-w-2xl text-muted-foreground">
-              Let&apos;s discuss your project and how we can help you create something extraordinary.
-            </p>
-            <div className="flex flex-col gap-4 sm:flex-row">
-              <Button asChild size="lg">
-                <Link href="/contact">Start a Project</Link>
-              </Button>
-              <Button asChild size="lg" variant="outline">
-                <Link href="/services">Explore Services</Link>
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      </section>
+      <Hero />
+      <ClientLogoGrid />
+      <ProjectShowcase projects={featuredProjects} />
+      <MissionSection />
+      <ContactSection />
+      <BrandingSection />
    </>
  );
 }
--- a/src/components/BrandingSection.tsx
+++ b/src/components/BrandingSection.tsx
@ -0,0 +1,13 @@
+export function BrandingSection() {
+  return (
+    <section className="py-24 bg-black">
+      <div className="container">
+        <div className="text-center">
+          <h1 className="font-brand text-6xl sm:text-7xl md:text-8xl lg:text-9xl text-white leading-none">
+            BIOHAZARD.
+          </h1>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/ClientLogoGrid.tsx
+++ b/src/components/ClientLogoGrid.tsx
@ -0,0 +1,29 @@
+export function ClientLogoGrid() {
+  const clientLogos = [
+    "Vercel", "NEXT", "scale", "APOLLO", "Calcom", "Linear",
+    "knock", "FLOX", "trunk", "Replay", "Graphite", "spiral",
+    "haastes", "CURSOR", "KREA", "Harvey", "ElevenLabs", "Black Forest Labs",
+    "Superplastic", "Triplicate", "SOLANA", "Basement", "MY BEAST", "EDGELORD",
+    "VIRTUAL REALITY", "VIVID", "SHADCN", "KARMA", "G"
+  ];
+
+  return (
+    <section className="py-8 bg-black">
+      <div className="mx-auto max-w-[980px] px-4">
+        <p className="mb-6 text-[10px] uppercase tracking-[0.2em] text-gray-400/80 text-center">
+          Trusted by basement.
+        </p>
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-x-10 gap-y-5">
+          {clientLogos.map((logo, index) => (
+            <div
+              key={index}
+              className="w-full text-left text-slate-300/70 text-[11px] sm:text-xs md:text-sm hover:text-slate-200 transition-colors border border-gray-600/30 p-3 rounded-sm"
+            >
+              {logo}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/ContactSection.tsx
+++ b/src/components/ContactSection.tsx
@ -0,0 +1,20 @@
+export function ContactSection() {
+  return (
+    <section className="py-10 bg-black">
+      <div className="mx-auto max-w-5xl px-4">
+        {/* Hatched bar */}
+        <div className="h-8 w-full bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.08)_0,rgba(255,255,255,0.08)_8px,transparent_8px,transparent_16px)] mb-6" />
+        <div className="text-left space-y-3">
+          <div className="text-xs text-gray-400">contact</div>
+          <h2 className="text-white text-2xl font-bold">Let's make an impact together.</h2>
+          <a
+            href="mailto:hello@basement.studio"
+            className="text-white text-lg underline hover:text-gray-300"
+          >
+            hello@basement.studio
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -4,81 +4,31 @@ import { Separator } from "@/components/ui/separator";
 export function Footer() {
  const currentYear = new Date().getFullYear();

+  const footerLinks = [
+    { href: "/", label: "Home" },
+    { href: "/services", label: "Services" },
+    { href: "/portfolio", label: "Showcase" },
+    { href: "/about", label: "People" },
+    { href: "#", label: "Blog" },
+    { href: "#", label: "Lab" },
+    { href: "/contact", label: "Contact Us" },
+  ];
+
  return (
-    <footer className="border-t bg-background">
-      <div className="container py-12">
-        <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
-          <div className="space-y-4">
-            <h3 className="text-lg font-semibold">Biohazard VFX</h3>
-            <p className="text-sm text-muted-foreground">
-              Creating stunning visual effects for film, television, and digital media.
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            <h4 className="text-sm font-semibold">Navigation</h4>
-            <ul className="space-y-2 text-sm">
-              <li>
-                <Link href="/" className="text-muted-foreground hover:text-foreground transition-colors">
-                  Home
+    <footer className="border-t border-gray-800 bg-black">
+      <div className="mx-auto max-w-5xl px-4 py-12">
+        <div className="grid grid-cols-1 gap-2 text-center">
+          {footerLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-xs text-gray-400 hover:text-white transition-colors"
+            >
+              {link.label}
            </Link>
-              </li>
-              <li>
-                <Link href="/about" className="text-muted-foreground hover:text-foreground transition-colors">
-                  About
-                </Link>
-              </li>
-              <li>
-                <Link href="/services" className="text-muted-foreground hover:text-foreground transition-colors">
-                  Services
-                </Link>
-              </li>
-              <li>
-                <Link href="/portfolio" className="text-muted-foreground hover:text-foreground transition-colors">
-                  Portfolio
-                </Link>
-              </li>
-            </ul>
-          </div>
-
-          <div className="space-y-4">
-            <h4 className="text-sm font-semibold">Services</h4>
-            <ul className="space-y-2 text-sm">
-              <li className="text-muted-foreground">Visual Effects</li>
-              <li className="text-muted-foreground">Motion Graphics</li>
-              <li className="text-muted-foreground">Compositing</li>
-              <li className="text-muted-foreground">3D Animation</li>
-            </ul>
-          </div>
-
-          <div className="space-y-4">
-            <h4 className="text-sm font-semibold">Contact</h4>
-            <ul className="space-y-2 text-sm">
-              <li>
-                <Link href="/contact" className="text-muted-foreground hover:text-foreground transition-colors">
-                  Get in Touch
-                </Link>
-              </li>
-              <li className="text-muted-foreground">info@biohazardvfx.com</li>
-            </ul>
-          </div>
-        </div>
-
-        <Separator className="my-8" />
-
-        <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
-          <p className="text-sm text-muted-foreground">
-            © {currentYear} Biohazard VFX. All rights reserved.
-          </p>
-          <div className="flex gap-4 text-sm text-muted-foreground">
-            <Link href="#" className="hover:text-foreground transition-colors">
-              Privacy Policy
-            </Link>
-            <Link href="#" className="hover:text-foreground transition-colors">
-              Terms of Service
-            </Link>
-          </div>
+          ))}
        </div>
+        <p className="mt-6 text-center text-[10px] text-gray-500">© {currentYear} Basement</p>
      </div>
    </footer>
  );
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@ -1,40 +1,39 @@
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-
 interface HeroProps {
-  title: string;
-  subtitle: string;
-  ctaText?: string;
-  ctaLink?: string;
-  secondaryCtaText?: string;
-  secondaryCtaLink?: string;
+  videoSrc?: string;
 }

-export function Hero({
-  title,
-  subtitle,
-  ctaText = "View Portfolio",
-  ctaLink = "/portfolio",
-  secondaryCtaText = "Get in Touch",
-  secondaryCtaLink = "/contact",
-}: HeroProps) {
+export function Hero({ videoSrc = "/hero-video.mp4" }: HeroProps) {
  return (
-    <section className="container flex flex-col items-center justify-center space-y-8 py-24 text-center md:py-32">
-      <div className="space-y-4 max-w-4xl">
-        <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">
-          {title}
+    <section className="relative h-[85vh] w-full overflow-hidden">
+      {/* Video Background */}
+      <video
+        className="absolute inset-0 h-full w-full object-cover"
+        autoPlay
+        muted
+        loop
+        playsInline
+      >
+        <source src={videoSrc} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+
+      {/* Gradient + dark overlay to match mockup */}
+      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent" />
+
+      {/* Content bottom-aligned */}
+      <div className="relative z-10 flex h-full items-end">
+        <div className="container pb-10 text-white">
+          <div className="max-w-5xl space-y-3">
+            <h1 className="text-[28px] sm:text-[36px] md:text-[44px] lg:text-[48px] leading-tight font-bold tracking-tight">
+              A digital studio & branding powerhouse
+              <br />
+              making cool shit that performs.
            </h1>
-        <p className="mx-auto max-w-2xl text-lg text-muted-foreground sm:text-xl">
-          {subtitle}
+            <p className="max-w-xl text-[10px] sm:text-xs text-gray-300">
+              We partner with the world's most ambitious brands to create powerful brands to unlock their full potential. We go beyond design to create compelling, strategic brand image.
            </p>
          </div>
-      <div className="flex flex-col gap-4 sm:flex-row">
-        <Button asChild size="lg">
-          <Link href={ctaLink}>{ctaText}</Link>
-        </Button>
-        <Button asChild size="lg" variant="outline">
-          <Link href={secondaryCtaLink}>{secondaryCtaText}</Link>
-        </Button>
+        </div>
      </div>
    </section>
  );
--- a/src/components/MissionSection.tsx
+++ b/src/components/MissionSection.tsx
@ -0,0 +1,43 @@
+export function MissionSection() {
+  return (
+    <section className="py-24 bg-black">
+      <div className="container">
+        <div className="max-w-4xl mx-auto text-center mb-16">
+          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-white leading-tight">
+            We're here to create the extraordinary. No shortcuts, just bold, precision-engineered work that elevates the game & leaves a mark.
+          </h2>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          <div className="space-y-4">
+            <h3 className="text-xl font-bold text-white">Website & Features</h3>
+            <p className="text-gray-300 leading-relaxed">
+              From sleek landing pages to complex web applications, we create responsive, user-friendly websites that look great and function flawlessly on any device.
+            </p>
+          </div>
+          
+          <div className="space-y-4">
+            <h3 className="text-xl font-bold text-white">Visual Branding</h3>
+            <p className="text-gray-300 leading-relaxed">
+              From logo identities to comprehensive brand guidelines, we build brands that tell a story, resonate with audiences, and stand out in the market.
+            </p>
+          </div>
+          
+          <div className="space-y-4">
+            <h3 className="text-xl font-bold text-white">UI/UX Design</h3>
+            <p className="text-gray-300 leading-relaxed">
+              We craft intuitive and engaging user interfaces that prioritize usability and accessibility, ensuring a seamless and enjoyable experience for every user.
+            </p>
+          </div>
+          
+          <div className="space-y-4">
+            <h3 className="text-xl font-bold text-white">Marketing & Growth</h3>
+            <p className="text-gray-300 leading-relaxed">
+              From social media campaigns to SEO optimization, we develop strategies that drive traffic, generate leads, and boost conversions for your business.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@ -22,10 +22,10 @@ export function Navigation() {
  ];

  return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <header className="sticky top-0 z-50 w-full border-b border-gray-800 bg-black/95 backdrop-blur supports-[backdrop-filter]:bg-black/60">
      <div className="container flex h-16 items-center justify-between">
        <Link href="/" className="flex items-center space-x-2">
-          <span className="text-2xl font-bold">Biohazard VFX</span>
+          <span className="text-2xl font-bold text-white">basement.</span>
        </Link>

        <NavigationMenu>
@ -33,7 +33,7 @@ export function Navigation() {
            {navItems.map((item) => (
              <NavigationMenuItem key={item.href}>
                <NavigationMenuLink asChild active={pathname === item.href}>
-                  <Link href={item.href} className={navigationMenuTriggerStyle()}>
+                  <Link href={item.href} className={`${navigationMenuTriggerStyle()} text-white hover:text-gray-300`}>
                    {item.label}
                  </Link>
                </NavigationMenuLink>
--- a/src/components/ProjectShowcase.tsx
+++ b/src/components/ProjectShowcase.tsx
@ -0,0 +1,41 @@
+import { Project } from "@/data/projects";
+
+interface ProjectShowcaseProps {
+  projects: Project[];
+}
+
+export function ProjectShowcase({ projects }: ProjectShowcaseProps) {
+  return (
+    <section className="py-16 bg-black">
+      <div className="mx-auto max-w-5xl px-4">
+        <h2 className="text-white text-xl font-bold mb-8">Featured Projects</h2>
+
+        <div className="space-y-16">
+          {projects.map((project) => (
+            <div key={project.id} className="grid grid-cols-12 gap-6 items-start">
+              {/* Image left */}
+              <div className="col-span-12 md:col-span-8">
+                <div className="relative overflow-hidden">
+                  <img
+                    src={project.thumbnailUrl}
+                    alt={project.title}
+                    className="w-full h-auto object-cover"
+                  />
+                </div>
+              </div>
+              {/* Right-side label and description */}
+              <div className="col-span-12 md:col-span-4 text-gray-300 text-xs space-y-2">
+                <div className="text-right">
+                  <div className="text-white">{project.title}</div>
+                </div>
+                <p className="leading-relaxed">
+                  {project.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@ -13,47 +13,47 @@ export interface Project {
 export const projects: Project[] = [
  {
    id: "1",
-    title: "Cinematic VFX Breakdown",
-    description: "High-end visual effects for feature film production",
-    category: "Film",
+    title: "Wound Shop",
+    description: "Partnering with Wound Shop means building the fastest, most performant websites. We craft beautiful, responsive designs that make for an enjoyable user experience.",
+    category: "Web Development",
    thumbnailUrl: "https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=800&q=80",
    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ",
    aspectRatio: 16 / 9,
    featured: true,
-    tags: ["VFX", "Film", "CGI"],
+    tags: ["Web", "Development", "Design"],
  },
  {
    id: "2",
-    title: "Commercial Product Spot",
-    description: "Stunning product visualization and motion graphics",
-    category: "Commercial",
+    title: "Daylight",
+    description: "A bold vision needs a strong launch. We crafted a dynamic brand identity for Daylight, ensuring it captured their innovative spirit and stood out in a crowded market, establishing a fresh, modern, and trustworthy presence.",
+    category: "Branding",
    thumbnailUrl: "https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=800&q=80",
    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ",
    aspectRatio: 1,
    featured: true,
-    tags: ["Commercial", "Motion Graphics"],
+    tags: ["Branding", "Identity", "Launch"],
  },
  {
    id: "3",
-    title: "Music Video Effects",
-    description: "Creative visual effects for music production",
-    category: "Music Video",
+    title: "KidSuper",
+    description: "Working with KidSuper, we developed a vibrant and playful brand identity that reflects their unique approach to fashion. Our designs brought their creative vision to life, ensuring a cohesive and memorable brand experience.",
+    category: "Fashion",
    thumbnailUrl: "https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=800&q=80",
    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ",
    aspectRatio: 9 / 16,
    featured: true,
-    tags: ["Music Video", "Creative"],
+    tags: ["Fashion", "Creative", "Brand"],
  },
  {
    id: "4",
-    title: "Sci-Fi Environment Design",
-    description: "Futuristic world building and environment creation",
-    category: "Film",
+    title: "Shop MrBeast",
+    description: "The world's biggest YouTuber needed a storefront that could keep up. We built a robust e-commerce platform for MrBeast, handling massive traffic and ensuring a seamless shopping experience for his millions of fans.",
+    category: "E-commerce",
    thumbnailUrl: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&q=80",
    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ",
    aspectRatio: 21 / 9,
-    featured: false,
-    tags: ["VFX", "Environment", "3D"],
+    featured: true,
+    tags: ["E-commerce", "Platform", "Scale"],
  },
  {
    id: "5",