96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
// components/portfolio/PortfolioHero.tsx
|
|
import { motion } from "framer-motion";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import { GridPattern } from "../GridPattern";
|
|
import { ImageWithFallback } from "../figma/ImageWithFallback";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
interface PortfolioHeroProps {
|
|
badgeText?: string;
|
|
title: string;
|
|
subtitle: string;
|
|
subtitleTwo?: string;
|
|
imageUrl: string;
|
|
imageAlt: string;
|
|
}
|
|
|
|
export const PortfolioHero = ({
|
|
badgeText = "Portfolio",
|
|
title,
|
|
subtitle,
|
|
subtitleTwo,
|
|
imageUrl,
|
|
imageAlt,
|
|
}: PortfolioHeroProps) => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<section className="relative pt-32 pb-24 bg-background overflow-hidden">
|
|
<GridPattern strokeDasharray="4 2" />
|
|
|
|
<div className="relative z-10 container mx-auto px-4 lg:px-6">
|
|
{/* Back Button */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="mb-12"
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => navigate("/case-studies")}
|
|
className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0 hover:bg-transparent"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Back to Portfolio
|
|
</Button>
|
|
</motion.div>
|
|
|
|
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
|
{/* Content - Left Aligned */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="lg:col-span-7"
|
|
>
|
|
<div className="mb-6">
|
|
<Badge variant="secondary" className="text-accent border-accent/20 bg-accent/10">
|
|
{badgeText}
|
|
</Badge>
|
|
</div>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-8 leading-tight">
|
|
{title}
|
|
</h1>
|
|
|
|
<p className="text-xl text-muted-foreground mb-6 leading-relaxed max-w-2xl">
|
|
{subtitle}
|
|
</p>
|
|
<p className="text-xl text-muted-foreground mb-10 leading-relaxed max-w-2xl">
|
|
{subtitleTwo}
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Project Image */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="lg:col-span-5"
|
|
>
|
|
<div className="relative aspect-[4/3] overflow-hidden bg-card/30 rounded-2xl border border-border/50 p-4">
|
|
<ImageWithFallback
|
|
src={imageUrl}
|
|
alt={imageAlt}
|
|
className="w-full h-full object-contain object-center rounded-xl"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}; |