From 5b284a73a6b09f6008a2fed9548f90e9564b39d2 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 17:34:14 +0000
Subject: [PATCH] Update components/hero.tsx

---
 components/hero.tsx | 90 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 components/hero.tsx

diff --git a/components/hero.tsx b/components/hero.tsx
new file mode 100644
index 0000000..51b0302
--- /dev/null
+++ b/components/hero.tsx
@@ -0,0 +1,90 @@
+"use client";
+import { Container } from "@/components/container";
+import { Button } from "@/components/ui/button";
+import { Sparkles, TrendingUp, Zap } from "lucide-react";
+
+export function Hero() {
+  const scrollToPricing = () => {
+    document.getElementById('pricing')?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return (
+    <section className="relative py-20 md:py-32 overflow-hidden">
+      {/* Golden gradient background */}
+      <div className="absolute inset-0 golden-gradient opacity-10"></div>
+      
+      {/* Animated golden particles */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute top-20 left-10 w-2 h-2 bg-amber-400 rounded-full animate-pulse"></div>
+        <div className="absolute top-40 right-20 w-3 h-3 bg-yellow-500 rounded-full animate-bounce"></div>
+        <div className="absolute bottom-20 left-1/4 w-2 h-2 bg-amber-500 rounded-full animate-ping"></div>
+        <div className="absolute top-1/3 right-1/3 w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></div>
+      </div>
+
+      <Container className="relative z-10">
+        <div className="text-center max-w-4xl mx-auto">
+          {/* Badge */}
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-amber-100 to-yellow-100 border-2 border-amber-300 mb-6 golden-shadow">
+            <Sparkles className="w-4 h-4 text-amber-600" />
+            <span className="text-sm font-semibold text-amber-900">عرض محدود - سجلي الآن!</span>
+          </div>
+
+          {/* Main Headline */}
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+            <span className="golden-text">ابدئي مشروعك الرقمي</span>
+            <br />
+            <span className="text-gray-900">من الصفر إلى الربح</span>
+          </h1>
+
+          {/* Subheadline */}
+          <p className="text-lg md:text-xl text-gray-700 mb-8 max-w-3xl mx-auto leading-relaxed">
+            تعلمي التسويق عبر إنستغرام، صناعة المحتوى، والذكاء الاصطناعي
+            <br />
+            <span className="font-semibold text-amber-700">بدون خبرة، بدون رأس مال، بدون جمهور كبير</span>
+          </p>
+
+          {/* Features Icons */}
+          <div className="flex flex-wrap justify-center gap-6 mb-10">
+            <div className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-md">
+              <TrendingUp className="w-5 h-5 text-amber-600" />
+              <span className="text-sm font-medium text-gray-800">نتائج سريعة</span>
+            </div>
+            <div className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-md">
+              <Zap className="w-5 h-5 text-amber-600" />
+              <span className="text-sm font-medium text-gray-800">محتوى جاهز</span>
+            </div>
+            <div className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-md">
+              <Sparkles className="w-5 h-5 text-amber-600" />
+              <span className="text-sm font-medium text-gray-800">ذكاء اصطناعي</span>
+            </div>
+          </div>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <Button 
+              size="lg" 
+              onClick={scrollToPricing}
+              className="golden-gradient text-white font-bold text-lg px-8 py-6 rounded-full golden-glow hover:scale-105 transition-transform duration-300 shadow-xl"
+            >
+              <Sparkles className="w-5 h-5 ml-2" />
+              سجّلي الآن - 39$ فقط
+            </Button>
+            <Button 
+              size="lg" 
+              variant="outline"
+              onClick={() => document.getElementById('content')?.scrollIntoView({ behavior: 'smooth' })}
+              className="border-2 border-amber-400 text-amber-900 font-semibold text-lg px-8 py-6 rounded-full hover:bg-amber-50 transition-all duration-300"
+            >
+              اكتشفي المحتوى
+            </Button>
+          </div>
+
+          {/* Trust Badge */}
+          <p className="mt-8 text-sm text-gray-600">
+            ✨ انضمت أكثر من <span className="font-bold text-amber-700">500+ طالبة</span> وحققن نتائج مذهلة
+          </p>
+        </div>
+      </Container>
+    </section>
+  );
+}