src/components/sections/hero/hero.tsx

@@ -0,0 +1,35 @@
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+export default function Hero() {
+  return (
+    <section id="hero" aria-label="Hero section" className="py-20">
+      <div className="flex flex-col md:flex-row items-center gap-8 mx-auto w-content-width">
+        <div className="flex flex-col items-start gap-6 text-left w-full md:w-1/2">
+          <TextAnimation
+            text="Your Vision, Our Innovation"
+            variant="fade"
+            gradientText={true}
+            tag="h1"
+            className="text-6xl font-medium text-balance"
+          />
+          <TextAnimation
+            text="Transforming ideas into reality with cutting-edge solutions and unparalleled expertise."
+            variant="fade"
+            gradientText={false}
+            tag="p"
+            className="text-lg leading-tight"
+          />
+          <div className="flex flex-wrap gap-3 mt-3">
+            <Button text="Get Started" href="#contact" variant="primary" />
+            <Button text="Learn More" href="#features" variant="secondary" animationDelay={0.1} />
+          </div>
+        </div>
+        <div className="w-full md:w-1/2 h-80 md:h-[500px] card rounded overflow-hidden">
+          <ImageOrVideo imageSrc="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80" />
+        </div>
+      </div>
+    </section>
+  );
+}