first commit

frontend/app/home/components/HeroSection.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { Badge, Button, Card } from "ikoncomponents";
+import { ArrowRight, Brain, BrainCircuit } from "lucide-react";
+import { useRouter } from "next/dist/client/components/navigation";
+
+export function HeroSection() {
+  const router = useRouter();
+
+  const handleStartTrial = () => {
+    router.push("/main/overview/dashboard");
+  };
+
+  return (
+    <section className="min-h-[70vh] flex justify-center py-12 px-4 sm:px-6">
+      <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center max-w-7xl w-full">
+        {/* LEFT SECTION */}
+        <div className="space-y-8">
+          <Badge className="bg-indigo-500/10 text-indigo-400 border-indigo-500/20 px-3 py-1 flex items-center gap-2 w-fit">
+            <BrainCircuit size={14} />
+            AI-Powered Platform
+          </Badge>
+
+          <div className="space-y-4">
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
+              Predictive Project <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400">
+                Management
+              </span>
+            </h1>
+
+            <p className="text-gray-400 text-base sm:text-lg max-w-lg leading-relaxed">
+              Transform reactive project tracking into proactive, predictive
+              management. Leverage AI and ML for executive-level insights into
+              financial health, resource optimization, and schedule
+              predictability.
+            </p>
+          </div>
+
+          <div className="flex gap-4">
+            <Button
+              className="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-6 text-lg rounded-md group"
+              onClick={handleStartTrial}
+            >
+              Get Started
+              <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
+            </Button>
+          </div>
+
+          <div className="grid grid-cols-2 gap-8 pt-8 border-t border-white/5 max-w-md">
+            <div>
+              <div className="text-3xl font-bold text-indigo-400">20%</div>
+              <p className="text-sm text-gray-500 uppercase tracking-wider mt-1">
+                Reduced Schedule Overruns
+              </p>
+            </div>
+            <div>
+              <div className="text-3xl font-bold text-indigo-400">85%</div>
+              <p className="text-sm text-gray-500 uppercase tracking-wider mt-1">
+                AI Prediction Accuracy
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* RIGHT SECTION */}
+        <div className="relative max-w-lg w-full">
+          <Card className="p-4 rounded-2xl shadow-2xl">
+            <div className="flex justify-between items-center mb-3">
+              <div className="flex gap-2">
+                <div className="w-3 h-3 rounded-full bg-red-500/80" />
+                <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
+                <div className="w-3 h-3 rounded-full bg-green-500/80" />
+              </div>
+
+              <Badge variant="secondary" className="bg-white/5 font-normal">
+                Live Preview
+              </Badge>
+            </div>
+
+            <div className="flex justify-between items-start p-3 border rounded-xl">
+              <div>
+                <h3 className="text-lg font-semibold">Enterprise Rollout</h3>
+                <p className="text-sm">Phase 2 Active</p>
+              </div>
+
+              <div className="flex items-center gap-4 text-right">
+                <div>
+                  <div className="text-2xl font-bold text-green-400">92</div>
+                  <div className="text-[10px] uppercase tracking-widest">
+                    AI Score
+                  </div>
+                </div>
+
+                <div className="p-2 rounded-full border border-green-500/30 bg-green-500/10">
+                  <Brain className="text-green-400" size={24} />
+                </div>
+              </div>
+            </div>
+
+            <div className="grid lg:grid-cols-3 gap-3">
+              <StatBox label="Budget" value="$2.4M" />
+              <StatBox label="P/L Health" value="+12%" highlight />
+              <StatBox label="On-Time" value="98%" />
+            </div>
+
+            <div className="flex items-center gap-1">
+              <div className="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
+                <div className="h-full bg-gradient-to-r from-indigo-500 to-cyan-400 w-[75%]" />
+              </div>
+              <span className="text-xs w-10 text-right">75%</span>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function StatBox({
+  label,
+  value,
+  highlight,
+}: {
+  label: string;
+  value: string;
+  highlight?: boolean;
+}) {
+  return (
+    <div className="p-4 rounded-xl border text-center">
+      <div className={`text-xl font-bold ${highlight ? "text-green-400" : ""}`}>
+        {value}
+      </div>
+      <div className="text-[10px] text-gray-500 uppercase mt-1">{label}</div>
+    </div>
+  );
+}