-
- © {currentYear} Biohazard VFX. All rights reserved.
-
-
);
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
+
+
+ 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) => (
-
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 */}
+
+
+
+
+
+ {/* Right-side label and description */}
+
+
+
+ {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",