136 lines
5.6 KiB
TypeScript
136 lines
5.6 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { motion, useScroll, useTransform } from "framer-motion";
|
|
import { Button } from "./Button";
|
|
import { AbstractCircuit } from "./Effects";
|
|
import { GlitchText } from "./GlitchText";
|
|
|
|
/**
|
|
* HeroSection: "Binary Architecture / The Blueprint"
|
|
*
|
|
* - **Concept**: The website as a technical blueprint being rendered in real-time.
|
|
* - **Typography**: Massive scale, mixing black Sans and technical Mono.
|
|
* - **Details**: Coordinate markers, blueprint lines, and binary data integration.
|
|
*/
|
|
|
|
export const HeroSection: React.FC = () => {
|
|
const { scrollY } = useScroll();
|
|
const y = useTransform(scrollY, [0, 800], [0, 300]);
|
|
const opacity = useTransform(scrollY, [0, 600], [1, 0]);
|
|
|
|
return (
|
|
<section className="relative min-h-[85dvh] md:min-h-[100dvh] flex items-center justify-center overflow-hidden bg-white px-5 md:px-0">
|
|
{/* 1. The Binary Architecture (Background) */}
|
|
<div className="absolute inset-0 z-0">
|
|
<AbstractCircuit />
|
|
</div>
|
|
|
|
{/* 2. Content Layer */}
|
|
<div className="relative z-10 container mx-auto h-full flex flex-col justify-center items-center">
|
|
<motion.div
|
|
style={{ y, opacity }}
|
|
className="text-center relative max-w-full md:max-w-[90vw]"
|
|
>
|
|
{/* Architectural Coordinate Labels */}
|
|
<div className="absolute -left-20 top-0 hidden xl:flex flex-col gap-8 opacity-20 pointer-events-none">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="flex items-center gap-4">
|
|
<span className="text-[10px] font-mono">0x00{i}A</span>
|
|
<div className="w-12 h-[1px] bg-slate-400" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 1, delay: 0.2 }}
|
|
className="mb-4 md:mb-10 inline-flex items-center gap-3 md:gap-4 px-4 md:px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full"
|
|
>
|
|
<div className="flex gap-1">
|
|
<div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse" />
|
|
<div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" />
|
|
</div>
|
|
<span className="text-[9px] md:text-[10px] font-mono font-bold tracking-[0.3em] md:tracking-[0.4em] text-slate-500 uppercase">
|
|
Digital_Architect // v.2026
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Headline */}
|
|
<h1 className="text-3xl md:text-[11rem] font-black tracking-tighter leading-[0.9] md:leading-[0.8] text-slate-900 mb-6 md:mb-12 uppercase">
|
|
<div className="block">
|
|
<GlitchText delay={0.5} duration={1.2}>
|
|
Websites
|
|
</GlitchText>
|
|
</div>
|
|
<div
|
|
className="block font-mono text-transparent bg-clip-text bg-gradient-to-r from-slate-400 via-slate-300 to-slate-400 font-light italic"
|
|
style={{ letterSpacing: "-0.02em" }}
|
|
>
|
|
<GlitchText delay={0.9} duration={1}>
|
|
ohne overhead.
|
|
</GlitchText>
|
|
</div>
|
|
</h1>
|
|
|
|
{/* Subtext */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1, delay: 0.8 }}
|
|
className="flex flex-col items-center gap-6 md:gap-12"
|
|
>
|
|
<p className="text-base md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed px-4">
|
|
Ein Entwickler. Ein Ansprechpartner.{" "}
|
|
<br className="hidden md:block" />
|
|
<span className="text-slate-900 font-bold tracking-tight">
|
|
Systematische Architekturen für das Web.
|
|
</span>
|
|
</p>
|
|
|
|
<div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 w-full px-5 md:px-0">
|
|
<Button href="/contact" size="large" className="w-full md:w-auto">
|
|
Projekt anfragen
|
|
</Button>
|
|
<Button
|
|
href="/websites"
|
|
variant="outline"
|
|
size="large"
|
|
className="w-full md:w-auto"
|
|
>
|
|
Prozess ansehen
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* 3. Blueprint Frame (Decorative Borders) */}
|
|
<div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-4 md:m-8 opacity-40 md:opacity-40" />
|
|
<div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group">
|
|
<span className="text-[10px] font-mono tracking-widest text-slate-400">
|
|
POS_TRANSMISSION_001
|
|
</span>
|
|
</div>
|
|
<div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 p-4 opacity-20 transition-opacity hover:opacity-100 scale-75 md:scale-100 origin-bottom-right">
|
|
<span className="text-[10px] font-mono tracking-widest text-slate-400">
|
|
EST_2026 // M-ARCH
|
|
</span>
|
|
</div>
|
|
|
|
{/* 4. Scroll Indicator */}
|
|
<motion.div
|
|
className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40"
|
|
style={{ opacity }}
|
|
>
|
|
<div className="w-[1px] h-8 md:h-12 bg-slate-200" />
|
|
<span className="text-[9px] font-mono uppercase tracking-[0.3em] text-slate-400">
|
|
Scroll
|
|
</span>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
};
|