122 lines
5.0 KiB
TypeScript
122 lines
5.0 KiB
TypeScript
/* eslint-disable */
|
|
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
|
import Button from "@/components/ui/Button";
|
|
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
|
import TextAnimation from "@/components/ui/TextAnimation";
|
|
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
|
import ScrollReveal from "@/components/ui/ScrollReveal";
|
|
import { motion } from "motion/react";
|
|
|
|
const primaryButton = {
|
|
text: "Explore Projects",
|
|
href: "#projects"
|
|
};
|
|
const secondaryButton = {
|
|
text: "Contact Me",
|
|
href: "#contact"
|
|
};
|
|
const items = [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-expert-working-with-technology-neon-lights_23-2151645569.jpg"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-manager-standing-up-relieve-back-pain_482257-67482.jpg"
|
|
}
|
|
];
|
|
|
|
type HeroSplitMediaGridProps = {
|
|
tag: string;
|
|
title: string;
|
|
description: string;
|
|
primaryButton: { text: string; href: string };
|
|
secondaryButton: { text: string; href: string };
|
|
items: [
|
|
{ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never },
|
|
{ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never }
|
|
];
|
|
};
|
|
|
|
const HeroInline = () => {
|
|
return (
|
|
<section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
|
|
<HeroBackgroundSlot />
|
|
<div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto">
|
|
<div className="w-full md:w-1/2">
|
|
<div className="flex flex-col items-center md:items-start gap-3">
|
|
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
|
<p>{"Mehak Bhutto • Portfolio 2026"}</p>
|
|
</div>
|
|
|
|
<TextAnimation
|
|
text={"Designing the Future of Digital Experiences."}
|
|
variant="slide-up"
|
|
gradientText={true}
|
|
tag="h1"
|
|
className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance"
|
|
/>
|
|
|
|
<TextAnimation
|
|
text={"Creative Developer & UI/UX Engineer crafting immersive, high-performance web applications with a focus on motion and interaction."}
|
|
variant="slide-up"
|
|
gradientText={false}
|
|
tag="p"
|
|
className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance"
|
|
/>
|
|
|
|
<div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3">
|
|
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
|
|
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full md:w-1/2 flex justify-center items-center perspective-[1200px]">
|
|
<motion.div
|
|
className="relative w-full max-w-sm aspect-[3/4] rounded-2xl border border-border/50 bg-card p-4 shadow-2xl flex flex-col gap-4 origin-top"
|
|
animate={{
|
|
rotateZ: [-1.5, 1.5, -1.5],
|
|
rotateY: [-3, 3, -3],
|
|
y: [-8, 8, -8]
|
|
}}
|
|
transition={{
|
|
repeat: Infinity,
|
|
duration: 5,
|
|
ease: "easeInOut"
|
|
}}
|
|
style={{ transformStyle: "preserve-3d" }}
|
|
>
|
|
<div className="absolute -top-16 left-1/2 -translate-x-1/2 w-0.5 h-16 bg-gradient-to-b from-transparent to-border"></div>
|
|
<div className="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-primary-cta shadow-[0_0_15px_var(--primary-cta)]"></div>
|
|
|
|
<div className="w-full h-3/5 rounded-xl overflow-hidden relative">
|
|
<ImageOrVideo imageSrc={items[0].imageSrc} className="w-full h-full object-cover" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
|
<div className="absolute bottom-4 left-4 text-white font-medium text-lg">Featured Work</div>
|
|
</div>
|
|
<div className="flex-1 flex flex-col justify-between">
|
|
<div>
|
|
<h3 className="text-2xl font-semibold text-foreground">Spatial Interface</h3>
|
|
<p className="text-base text-muted-foreground mt-1">Next-gen interaction design</p>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-mono text-primary-cta">2026.01</span>
|
|
<div className="w-10 h-10 rounded-full bg-primary-cta/10 flex items-center justify-center text-primary-cta">
|
|
↗
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default function HeroSection() {
|
|
return (
|
|
<div data-webild-section="hero" id="hero">
|
|
<HeroInline />
|
|
</div>
|
|
);
|
|
}
|