- Add all shadcn/ui components (button, card, form, dialog, navigation-menu, etc.) - Create main layout with navigation header and footer - Implement homepage with hero, showreel, featured projects, and capabilities - Build about page with studio origins, values, and capabilities - Create services page with detailed service offerings - Implement portfolio page with masonry grid for varying aspect ratios - Build contact page with 4-step multistep form - Add project and service data structures with placeholder content - Configure SEO metadata, canonical links, and JSON-LD schema - Add font preloading and image lazy-loading for performance - Configure Next.js Image for Unsplash remote patterns - Fix Navigation component to use modern Link pattern (remove legacyBehavior) - Add comprehensive README with project documentation
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { MasonryGrid } from "@/components/MasonryGrid";
|
|
import { projects } from "@/data/projects";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Portfolio - Biohazard VFX",
|
|
description: "Explore our portfolio of visual effects work including film, television, commercials, and digital media projects.",
|
|
alternates: {
|
|
canonical: "/portfolio",
|
|
},
|
|
};
|
|
|
|
export default function PortfolioPage() {
|
|
return (
|
|
<>
|
|
{/* Hero Section */}
|
|
<section className="container py-24 text-center">
|
|
<div className="space-y-4 max-w-4xl mx-auto">
|
|
<h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
|
|
Our Portfolio
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground sm:text-xl">
|
|
A showcase of our visual effects work across film, television, commercials, and digital media.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Portfolio Grid */}
|
|
<section className="container pb-24">
|
|
<MasonryGrid projects={projects} />
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
|