Proffesional freelance ui

2026-01-21 02:52:49 +01:00
parent 3824322aa9
commit e226455c96
24 changed files with 1739 additions and 912 deletions
@@ -0,0 +1,97 @@
+import { ArrowRight, Github, Linkedin, Youtube } from "lucide-react";
+import Link from "next/link";
+
+export function HeroSection() {
+  return (
+    <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
+      {/* Background Effects */}
+      <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-card" />
+      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
+      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl" />
+
+      <div className="container mx-auto px-6 relative z-10">
+        <div className="max-w-4xl mx-auto text-center">
+          {/* Status Badge */}
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-8 animate-fade-in">
+            <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
+            <span className="text-sm text-muted-foreground">
+              Available for new projects
+            </span>
+          </div>
+
+          {/* Main Heading */}
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 animate-fade-in-up">
+            <span className="text-foreground">Building</span>{" "}
+            <span className="text-gradient-gold">exceptional</span>
+            <br />
+            <span className="text-foreground">digital experiences</span>
+          </h1>
+
+          {/* Subheading */}
+          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 animate-fade-in-delay-1">
+            I'm{" "}
+            <span className="text-foreground font-medium">Klesti Selimaj</span>,
+            a 16-year-old software engineer with 6+ years of experience.
+            Passionate about low-level systems, modern web apps, and crafting
+            tools that make a difference.
+          </p>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12 animate-fade-in-delay-2">
+            <Link
+              href="/pricing"
+              className="group flex items-center gap-2 bg-accent text-accent-foreground px-8 py-4 rounded-xl font-medium hover:bg-accent/90 transition-all hover:gap-3"
+            >
+              Work with me
+              <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
+            </Link>
+            <a
+              href="https://github.com/selimaj-dev"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 bg-secondary text-secondary-foreground px-8 py-4 rounded-xl font-medium hover:bg-secondary/80 transition-colors"
+            >
+              <Github className="w-4 h-4" />
+              View GitHub
+            </a>
+          </div>
+
+          {/* Social Links */}
+          <div className="flex items-center justify-center gap-6 animate-fade-in-delay-3">
+            <a
+              href="https://github.com/selimaj-dev"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-accent transition-colors"
+            >
+              <Github className="w-5 h-5" />
+            </a>
+            <a
+              href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-accent transition-colors"
+            >
+              <Linkedin className="w-5 h-5" />
+            </a>
+            <a
+              href="https://www.youtube.com/@0xkleo"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-accent transition-colors"
+            >
+              <Youtube className="w-5 h-5" />
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* Scroll Indicator */}
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
+        <div className="w-6 h-10 border-2 border-muted-foreground/30 rounded-full flex items-start justify-center p-2">
+          <div className="w-1 h-2 bg-accent rounded-full animate-pulse" />
+        </div>
+      </div>
+    </section>
+  );
+}