From 9543cca413754ef11599d885e074f5da218cebfd Mon Sep 17 00:00:00 2001 From: NicholaiVogel Date: Sun, 12 Oct 2025 16:15:08 -0600 Subject: [PATCH] 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. --- src/app/globals.css | 74 +++++++++------- src/app/layout.tsx | 14 ++- src/app/page.tsx | 133 +++-------------------------- src/components/BrandingSection.tsx | 13 +++ src/components/ClientLogoGrid.tsx | 29 +++++++ src/components/ContactSection.tsx | 20 +++++ src/components/Footer.tsx | 94 +++++--------------- src/components/Hero.tsx | 65 +++++++------- src/components/MissionSection.tsx | 43 ++++++++++ src/components/Navigation.tsx | 6 +- src/components/ProjectShowcase.tsx | 41 +++++++++ src/data/projects.ts | 34 ++++---- 12 files changed, 284 insertions(+), 282 deletions(-) create mode 100644 src/components/BrandingSection.tsx create mode 100644 src/components/ClientLogoGrid.tsx create mode 100644 src/components/ContactSection.tsx create mode 100644 src/components/MissionSection.tsx create mode 100644 src/components/ProjectShowcase.tsx diff --git a/src/app/globals.css b/src/app/globals.css index ab9fa88..46d9fd3 100644 --- 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; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 31c6159..ab8a9d2 100644 --- 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 ( - + @@ -65,7 +73,7 @@ export default function RootLayout({ />
diff --git a/src/app/page.tsx b/src/app/page.tsx index 69aaba7..313a29d 100644 --- 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 ( <> - - - {/* Studio Reel Section */} -
-
-

- Our Studio Reel -

-

- A showcase of our best work from the past year -

-
-
- -
-
- - - - {/* Featured Projects Section */} -
-
-

- Featured Projects -

-

- A selection of our recent work across film, commercial, and digital media -

-
-
- {featuredProjects.map((project) => ( - - ))} -
-
- -
-
- - - - {/* Capabilities Section */} -
-
-

- Our Capabilities -

-

- Comprehensive visual effects services backed by years of industry experience -

-
-
- - - - Industry-Leading Technology - - Utilizing the latest tools and techniques to deliver photorealistic VFX that seamlessly integrate with your footage. - - - - - - - Fast Turnaround - - Efficient pipeline and experienced team ensure your project stays on schedule without compromising quality. - - - - - - - Award-Winning Team - - Our artists have contributed to numerous award-winning productions across film and television. - - - -
-
- - {/* CTA Section */} -
- - -

- Ready to Bring Your Vision to Life? -

-

- Let's discuss your project and how we can help you create something extraordinary. -

-
- - -
- - -
+ + + + + + ); } diff --git a/src/components/BrandingSection.tsx b/src/components/BrandingSection.tsx new file mode 100644 index 0000000..f781507 --- /dev/null +++ b/src/components/BrandingSection.tsx @@ -0,0 +1,13 @@ +export function BrandingSection() { + return ( +
+
+
+

+ BIOHAZARD. +

+
+
+
+ ); +} diff --git a/src/components/ClientLogoGrid.tsx b/src/components/ClientLogoGrid.tsx new file mode 100644 index 0000000..26451ef --- /dev/null +++ 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 ( +
+
+

+ Trusted by basement. +

+
+ {clientLogos.map((logo, index) => ( +
+ {logo} +
+ ))} +
+
+
+ ); +} diff --git a/src/components/ContactSection.tsx b/src/components/ContactSection.tsx new file mode 100644 index 0000000..f9292df --- /dev/null +++ b/src/components/ContactSection.tsx @@ -0,0 +1,20 @@ +export function ContactSection() { + return ( +
+
+ {/* Hatched bar */} +
+
+
contact
+

Let's make an impact together.

+ + hello@basement.studio + +
+
+
+ ); +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 03c7ca1..cd2ef36 100644 --- 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 ( -
-
-
-
-

Biohazard VFX

-

- Creating stunning visual effects for film, television, and digital media. -

-
- -
-

Navigation

-
    -
  • - - Home - -
    • -
  • - - About - -
    • -
  • - - Services - -
    • -
  • - - Portfolio - -
    • -
-
- -
-

Services

-
    -
  • Visual Effects
    • -
  • Motion Graphics
    • -
  • Compositing
    • -
  • 3D Animation
    • -
-
- -
-

Contact

-
    -
  • - - Get in Touch - -
    • -
  • info@biohazardvfx.com
    • -
-
-
- - - -
-

- © {currentYear} Biohazard VFX. All rights reserved. -

-
- - Privacy Policy +
+
+
+ {footerLinks.map((link) => ( + + {link.label} - - Terms of Service - -
+ ))}
+

© {currentYear} Basement

); diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index c746768..a926bdb 100644 --- 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 ( -
-
-

- {title} -

-

- {subtitle} -

-
-
- - +
+ {/* Video Background */} + + + {/* Gradient + dark overlay to match mockup */} +
+ + {/* Content bottom-aligned */} +
+
+
+

+ A digital studio & branding powerhouse +
+ making cool shit that performs. +

+

+ 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. +

+
+
); diff --git a/src/components/MissionSection.tsx b/src/components/MissionSection.tsx new file mode 100644 index 0000000..884f702 --- /dev/null +++ b/src/components/MissionSection.tsx @@ -0,0 +1,43 @@ +export function MissionSection() { + return ( +
+
+
+

+ We're here to create the extraordinary. No shortcuts, just bold, precision-engineered work that elevates the game & leaves a mark. +

+
+ +
+
+

Website & Features

+

+ From sleek landing pages to complex web applications, we create responsive, user-friendly websites that look great and function flawlessly on any device. +

+
+ +
+

Visual Branding

+

+ From logo identities to comprehensive brand guidelines, we build brands that tell a story, resonate with audiences, and stand out in the market. +

+
+ +
+

UI/UX Design

+

+ We craft intuitive and engaging user interfaces that prioritize usability and accessibility, ensuring a seamless and enjoyable experience for every user. +

+
+ +
+

Marketing & Growth

+

+ From social media campaigns to SEO optimization, we develop strategies that drive traffic, generate leads, and boost conversions for your business. +

+
+
+
+
+ ); +} diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 65b3f09..e5db3cc 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -22,10 +22,10 @@ export function Navigation() { ]; return ( -
+
- Biohazard VFX + basement. @@ -33,7 +33,7 @@ export function Navigation() { {navItems.map((item) => ( - + {item.label} diff --git a/src/components/ProjectShowcase.tsx b/src/components/ProjectShowcase.tsx new file mode 100644 index 0000000..2294f90 --- /dev/null +++ b/src/components/ProjectShowcase.tsx @@ -0,0 +1,41 @@ +import { Project } from "@/data/projects"; + +interface ProjectShowcaseProps { + projects: Project[]; +} + +export function ProjectShowcase({ projects }: ProjectShowcaseProps) { + return ( +
+
+

Featured Projects

+ +
+ {projects.map((project) => ( +
+ {/* Image left */} +
+
+ {project.title} +
+
+ {/* Right-side label and description */} +
+
+
{project.title}
+
+

+ {project.description} +

+
+
+ ))} +
+
+
+ ); +} diff --git a/src/data/projects.ts b/src/data/projects.ts index dc7a5b5..ea8c36d 100644 --- 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",