feat: add initial layout components and styles for site

src/components/sections/Hero.tsx

@@ -0,0 +1,107 @@
+import { motion } from 'framer-motion';
+import { FadeIn } from '../ui/FadeIn';
+import { GermanyFlag } from '../ui/GermanyFlag';
+
+export const Hero = () => {
+  return (
+    <section className="min-h-[100dvh] flex items-center px-4 sm:px-8 relative pt-24 sm:pt-8">
+      <div className="absolute inset-0 theme-bg-gradient"></div>
+      <div className="max-w-screen-xl w-full relative pt-8 sm:pt-24">
+        <FadeIn className="space-y-8 sm:space-y-16">
+          <div className="space-y-6 sm:space-y-8">
+            <div className="space-y-6 sm:space-y-8">
+              <div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full theme-accent theme-border theme-transition">
+                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
+                <span className="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span>
+              </div>
+              <div className="space-y-2 sm:space-y-3">
+                <h2 className="font-['DM_Sans'] text-xl sm:text-3xl theme-secondary tracking-wide font-medium theme-transition">
+                  Jan-Marlon Leibl
+                </h2>
+                <div>
+                  <h1 className="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.1] sm:leading-[0.95] max-w-4xl theme-primary theme-transition">
+                    Software Developer
+                    <br />
+                    <span className="theme-secondary">based in <GermanyFlag /></span>
+                  </h1>
+                </div>
+              </div>
+            </div>
+            <p className="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition">
+              Passionate about creating digital experiences, with a focus on PHP and modern web technologies.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
+              <motion.a 
+                href="#work"
+                className="w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 theme-button-primary rounded-lg sm:rounded-full transition-colors text-sm sm:text-base tracking-wide font-medium group"
+                whileHover={{ scale: 1.03 }}
+                whileTap={{ scale: 0.97 }}
+              >
+                View My Work
+                <svg 
+                  className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform" 
+                  viewBox="0 0 24 24" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  strokeWidth="2"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7"/>
+                </svg>
+              </motion.a>
+              <motion.a
+                href="mailto:jleibl@proton.me"
+                className="w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full theme-button-secondary hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide group"
+                whileHover={{ scale: 1.03 }}
+                whileTap={{ scale: 0.97 }}
+              >
+                Get in Touch
+                <svg 
+                  className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform" 
+                  viewBox="0 0 24 24" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  strokeWidth="2"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7"/>
+                </svg>
+              </motion.a>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 font-['Instrument_Sans'] text-sm sm:text-base tracking-wide border-t theme-border pt-6 sm:pt-8">
+            <div className="space-y-1.5 sm:space-y-2.5 group">
+              <span className="theme-text-40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Email</span>
+              <a 
+                href="mailto:jleibl@proton.me" 
+                className="theme-text-90 hover:theme-primary transition-colors flex items-center gap-2 sm:gap-2.5 group-hover:gap-3 duration-300"
+              >
+                jleibl@proton.me
+                <svg 
+                  className="w-4 h-4 sm:w-5 sm:h-5 opacity-0 group-hover:opacity-100 transition-all -translate-x-4 group-hover:translate-x-0 duration-300" 
+                  viewBox="0 0 24 24" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  strokeWidth="2"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7"/>
+                </svg>
+              </a>
+            </div>
+            <div className="space-y-1.5 sm:space-y-2.5">
+              <span className="theme-text-40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Role</span>
+              <span className="theme-text-90">
+                Fullstack Developer
+              </span>
+            </div>
+            <div className="space-y-1.5 sm:space-y-2.5">
+              <span className="theme-text-40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Experience</span>
+              <span className="theme-text-90">
+                5+ Years
+              </span>
+            </div>
+          </div>
+        </FadeIn>
+      </div>
+    </section>
+  );
+};