From 2f3f7fe94b33e85e6fe19c9a7d4dfe2ddf94dfbc Mon Sep 17 00:00:00 2001
From: Desktop <desktop@igny8.com>
Date: Fri, 14 Nov 2025 02:08:03 +0500
Subject: [PATCH] Update Home.tsx

---
 frontend/src/marketing/pages/Home.tsx | 202 +++++++++++---------------
 1 file changed, 88 insertions(+), 114 deletions(-)

diff --git a/frontend/src/marketing/pages/Home.tsx b/frontend/src/marketing/pages/Home.tsx
index 0f33bfb9..a3b869ee 100644
--- a/frontend/src/marketing/pages/Home.tsx
+++ b/frontend/src/marketing/pages/Home.tsx
@@ -10,6 +10,8 @@ import {
   LightBulbIcon,
   DocumentTextIcon,
   ArrowRightIcon,
+  RocketLaunchIcon,
+  ChatBubbleLeftRightIcon,
 } from "@heroicons/react/24/outline";
 import { testimonials } from "../data/testimonials";
 
@@ -18,7 +20,7 @@ const Home: React.FC = () => {
     const isExternal = cta.href.startsWith("http");
     
     if (isExternal) {
-      return (
+  return (
         <a
           href={cta.href}
           className={className}
@@ -122,6 +124,9 @@ const Home: React.FC = () => {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
             {/* Left: Text Content */}
             <div className="flex flex-col gap-6 z-10">
+              <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-white/90 bg-white/10 px-4 py-2 rounded-full border border-white/20 backdrop-blur-sm w-fit">
+                AI + SEO Platform
+              </span>
               <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold leading-tight text-white">
                 Scale SEO content from keyword discovery to AI-crafted outputs.
               </h1>
@@ -140,9 +145,11 @@ const Home: React.FC = () => {
               </div>
             </div>
 
-            {/* Right: Dashboard Screenshot */}
+            {/* Right: Dashboard Screenshot - Increased size 20-30% */}
             <div className="relative z-10">
-              <div className="relative">
+              <div className="relative scale-110 lg:scale-125">
+                {/* Soft glow behind screenshot */}
+                <div className="absolute -inset-8 bg-gradient-to-br from-white/30 via-[#0693e3]/20 to-[#5d4ae3]/20 rounded-3xl blur-3xl" />
                 {/* Device frame effect */}
                 <div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" />
                 <div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-2xl overflow-hidden">
@@ -168,9 +175,9 @@ const Home: React.FC = () => {
       </section>
 
       {/* SOCIAL PROOF LOGOS */}
-      <section className="py-12 bg-white">
+      <section className="py-8 bg-white border-b border-slate-100">
         <div className="max-w-6xl mx-auto px-6">
-          <div className="flex flex-col gap-6 items-center">
+          <div className="flex flex-col gap-4 items-center">
             <span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-medium">
               Trusted by modern organic teams
             </span>
@@ -192,58 +199,8 @@ const Home: React.FC = () => {
         </div>
       </section>
 
-      {/* 4-PRODUCT SYSTEM OVERVIEW */}
-      <section className="py-24 bg-gradient-to-b from-white via-[#0693e3]/2 to-[#5d4ae3]/2">
-        <div className="max-w-6xl mx-auto px-6">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
-              One engine that unifies search intelligence, content, and automation.
-            </h2>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {productModules.map((module, index) => {
-              const Icon = module.icon;
-              return (
-                <div
-                  key={module.title}
-                  className={`relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 flex flex-col gap-6 group hover:border-[#0693e3]/50 transition-all shadow-lg hover:shadow-2xl hover:-translate-y-1`}
-                >
-                  {/* Gradient border on hover */}
-                  <div className={`absolute -inset-0.5 bg-gradient-to-br ${module.color} rounded-3xl opacity-0 group-hover:opacity-20 blur transition-opacity -z-10`} />
-                  
-                  <div className={`size-14 rounded-2xl bg-gradient-to-br ${module.color} flex items-center justify-center text-white shadow-lg`}>
-                    <Icon className="h-7 w-7" />
-                  </div>
-                  
-                  <div>
-                    <h3 className="text-2xl font-bold text-slate-900 mb-2">{module.title}</h3>
-                    <p className="text-sm text-slate-600 mb-4">{module.subtitle}</p>
-                    <ul className="space-y-3">
-                      {module.bullets.map((bullet, i) => (
-                        <li key={i} className="flex gap-3 text-sm text-slate-700">
-                          <span className={`mt-1.5 size-2 rounded-full bg-gradient-to-br ${module.color} shadow-sm flex-shrink-0`} />
-                          <span>{bullet}</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  
-                  <a
-                    href={module.link}
-                    className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group-hover:gap-3 transition-all mt-auto"
-                  >
-                    Learn more
-                    <ArrowRightIcon className="h-4 w-4" />
-                  </a>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-
       {/* HOW IGNY8 WORKS (PIPELINE) */}
-      <section className="py-24 bg-white">
+      <section className="py-24 bg-gradient-to-b from-white via-[#0693e3]/3 to-[#5d4ae3]/3">
         <div className="max-w-7xl mx-auto px-6">
           <div className="text-center mb-16">
             <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
@@ -256,16 +213,16 @@ const Home: React.FC = () => {
           
           {/* Horizontal Timeline */}
           <div className="relative">
-            {/* Connecting line */}
-            <div className="absolute top-12 left-0 right-0 h-0.5 bg-gradient-to-r from-[#0693e3] via-[#5d4ae3] via-[#ff7a00] via-[#0bbf87] to-[#0693e3] opacity-20 hidden md:block" />
+            {/* Enhanced connecting line with shadow */}
+            <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[#0693e3] via-[#5d4ae3] via-[#ff7a00] via-[#0bbf87] to-[#0693e3] opacity-25 hidden md:block shadow-lg shadow-[#0693e3]/20" />
             
             <div className="grid grid-cols-2 md:grid-cols-7 gap-6 md:gap-4">
               {workflowSteps.map((step, index) => {
                 const Icon = step.icon;
                 return (
                   <div key={step.name} className="flex flex-col items-center gap-3">
-                    <div className={`relative size-24 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center text-white shadow-xl z-10 group hover:scale-110 transition-transform`}>
-                      <Icon className="h-10 w-10" />
+                    <div className={`relative size-28 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center text-white shadow-xl z-10 group hover:scale-110 transition-transform`}>
+                      <Icon className="h-12 w-12" />
                       {/* Glow effect */}
                       <div className={`absolute -inset-2 bg-gradient-to-br ${step.color} rounded-full opacity-0 group-hover:opacity-30 blur-xl transition-opacity -z-10`} />
                     </div>
@@ -282,16 +239,22 @@ const Home: React.FC = () => {
       {productModules.map((module, index) => {
         const Icon = module.icon;
         const isLeft = module.align === "left";
+        const backgroundTints = [
+          "bg-white",
+          "bg-gradient-to-b from-[#0693e3]/1 to-white",
+          "bg-gradient-to-b from-[#0bbf87]/1 to-white",
+          "bg-gradient-to-b from-[#5d4ae3]/1 to-white",
+        ];
         
         return (
-          <section key={module.title} className={`py-24 ${index % 2 === 0 ? "bg-white" : "bg-gradient-to-b from-slate-50/50 to-white"}`}>
+          <section key={module.title} className={`py-32 ${backgroundTints[index]}`}>
             <div className="max-w-7xl mx-auto px-6">
-              <div className={`grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center ${!isLeft ? "lg:grid-flow-dense" : ""}`}>
-                {/* Screenshot */}
+              <div className={`grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center ${!isLeft ? "lg:grid-flow-dense" : ""}`}>
+                {/* Screenshot - Larger scale 1.15 */}
                 <div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}>
-                  <div className="relative">
-                    {/* Gradient frame background */}
-                    <div className={`absolute -inset-4 bg-gradient-to-br ${module.color} rounded-3xl opacity-20 blur-2xl`} />
+                  <div className="relative scale-110 lg:scale-115">
+                    {/* Gradient frame background with colored glow */}
+                    <div className={`absolute -inset-6 bg-gradient-to-br ${module.color} rounded-3xl opacity-25 blur-3xl`} />
                     <div className="relative rounded-2xl border-2 border-slate-200 bg-white shadow-2xl overflow-hidden">
                       <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/30 to-transparent flex items-center gap-2 px-4">
                         <div className="flex gap-2">
@@ -306,8 +269,8 @@ const Home: React.FC = () => {
                         className="w-full h-auto object-cover mt-12"
                       />
                     </div>
-                    {/* Overlap shadow */}
-                    <div className={`absolute -bottom-6 ${isLeft ? "-right-6" : "-left-6"} w-32 h-32 bg-gradient-to-br ${module.color} rounded-2xl opacity-10 blur-2xl -z-10`} />
+                    {/* Overlap shadow with module color */}
+                    <div className={`absolute -bottom-8 ${isLeft ? "-right-8" : "-left-8"} w-40 h-40 bg-gradient-to-br ${module.color} rounded-2xl opacity-15 blur-3xl -z-10`} />
                   </div>
                 </div>
 
@@ -348,44 +311,47 @@ const Home: React.FC = () => {
       })}
 
       {/* AUTOMATION SNAPSHOT SECTION */}
-      <section className="py-24 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden">
-        {/* Background pattern */}
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.1),transparent_70%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(109,74,227,0.15),transparent_50%)]" />
+      <section className="py-24 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+        {/* Richer background pattern */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.15),transparent_70%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(11,191,135,0.1),transparent_50%)]" />
         
         <div className="relative max-w-7xl mx-auto px-6">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
             {/* Left: Content */}
             <div className="z-10">
               <div className="flex items-center gap-3 mb-6">
-                <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#5d4ae3] flex items-center justify-center text-white shadow-lg">
+                <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#5d4ae3] flex items-center justify-center text-white shadow-lg shadow-[#0693e3]/30">
                   <BoltIcon className="h-6 w-6" />
                 </div>
                 <h2 className="text-4xl md:text-5xl font-bold text-white">
                   Automation Engine
                 </h2>
               </div>
-              <p className="text-xl text-slate-300 mb-8 leading-relaxed">
+              <p className="text-xl text-slate-200 mb-8 leading-relaxed font-medium">
                 Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute.
               </p>
               
-              {/* Automation Timeline */}
+              {/* Automation Timeline with neon glows */}
               <div className="space-y-6 mb-8">
                 {[
-                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]" },
-                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]" },
-                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]" },
-                  { from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]" },
-                  { from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]" },
-                  { from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]" },
+                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
+                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" },
+                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" },
+                  { from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" },
+                  { from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
+                  { from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" },
                 ].map((handoff, i) => (
                   <div key={i} className="flex items-center gap-4">
-                    <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg`}>
+                    <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
                       {handoff.icon}
+                      {/* Neon glow effect */}
+                      <div className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-xl opacity-0 group-hover:opacity-60 blur-md transition-opacity -z-10`} />
                     </div>
                     <div className="flex-1">
-                      <div className="text-white font-semibold">{handoff.from} → {handoff.to}</div>
-                      <div className="text-sm text-slate-400">Automated handoff with quality checks</div>
+                      <div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div>
+                      <div className="text-sm text-slate-300">Automated handoff with quality checks</div>
                     </div>
                   </div>
                 ))}
@@ -430,16 +396,16 @@ const Home: React.FC = () => {
       {/* TESTIMONIALS */}
       <section className="py-24 bg-white">
         <div className="max-w-7xl mx-auto px-6">
-          <div className="text-center mb-16">
+          <div className="text-center mb-12">
             <span className="inline-flex items-center rounded-full border border-[#0693e3]/20 bg-[#0693e3]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[#0693e3] mb-4">
               Loved by scaling teams
             </span>
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
               Teams ship more content, capture more demand, and see faster ROI with Igny8.
             </h2>
           </div>
           
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             {testimonials.map((testimonial, index) => {
               const gradientColors = [
                 "from-[#0693e3]/20 to-[#0472b8]/10",
@@ -447,47 +413,47 @@ const Home: React.FC = () => {
                 "from-[#5d4ae3]/20 to-[#3a2f94]/10",
               ];
               const borderColors = [
-                "border-[#0693e3]/30",
-                "border-[#0bbf87]/30",
-                "border-[#5d4ae3]/30",
-              ];
+            "border-[#0693e3]/30",
+            "border-[#0bbf87]/30",
+            "border-[#5d4ae3]/30",
+          ];
               
-              return (
+          return (
                 <div
                   key={testimonial.name}
-                  className={`relative rounded-3xl border-2 ${borderColors[index]} bg-gradient-to-br ${gradientColors[index]} bg-white/50 backdrop-blur-sm p-8 flex flex-col gap-6 shadow-lg hover:shadow-2xl hover:-translate-y-1 transition-all`}
+                  className={`relative rounded-3xl border-2 ${borderColors[index]} bg-gradient-to-br ${gradientColors[index]} bg-white/80 backdrop-blur-sm p-8 flex flex-col gap-6 shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all`}
                 >
-                  {/* Avatar placeholder */}
-                  <div className={`size-12 rounded-full bg-gradient-to-br ${gradientColors[index].split(" ")[0]} flex items-center justify-center text-white font-bold text-lg shadow-lg`}>
+                  {/* Avatar placeholder with better contrast */}
+                  <div className={`size-14 rounded-full bg-gradient-to-br ${gradientColors[index].split(" ")[0]} flex items-center justify-center text-white font-bold text-xl shadow-lg`}>
                     {testimonial.name.charAt(0)}
                   </div>
                   
-                  <p className="text-base text-slate-700 leading-relaxed font-medium flex-1">
+                  <p className="text-base text-slate-800 leading-relaxed font-semibold flex-1">
                     "{testimonial.quote}"
                   </p>
                   
                   <div className="flex flex-col gap-1">
-                    <span className="font-bold text-slate-900">{testimonial.name}</span>
-                    <span className="text-sm text-slate-600">
+                    <span className="font-bold text-slate-900 text-lg">{testimonial.name}</span>
+                    <span className="text-sm text-slate-700 font-medium">
                       {testimonial.title} · {testimonial.company}
                     </span>
                   </div>
                   
-                  {/* Metrics badge */}
-                  <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-gradient-to-r ${gradientColors[index]} text-slate-700 text-xs font-semibold w-fit`}>
+                  {/* Metrics badge with better contrast */}
+                  <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-slate-800 text-xs font-bold w-fit shadow-sm`}>
                     <span>3× faster</span>
                     <span>•</span>
                     <span>+132% lift</span>
                   </div>
                 </div>
-              );
-            })}
+          );
+        })}
           </div>
         </div>
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[#8b5cf6] via-[#5d4ae3] to-[#0693e3]">
         {/* Dashboard overlay in background */}
         <div className="absolute inset-0 opacity-10">
           <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
@@ -497,21 +463,29 @@ const Home: React.FC = () => {
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
         
         <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight">
             Ready to orchestrate SEO, content, and creative in one AI engine?
           </h2>
-          <p className="text-xl text-white/85 mb-10 max-w-2xl mx-auto">
+          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
             Launch Igny8 in minutes. Start automating your workflow, or book a white-glove onboarding session with our team.
           </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            {renderCta(
-              { label: "Start Free", href: "https://app.igny8.com/signup" },
-              "inline-flex items-center justify-center rounded-xl bg-white text-[#0693e3] px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
-            )}
-            {renderCta(
-              { label: "Talk to Sales", href: "/contact" },
-              "inline-flex items-center justify-center rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-8 py-4 text-base font-semibold hover:bg-white/20 hover:border-white/50 transition"
-            )}
+          <div className="flex flex-col sm:flex-row gap-5 justify-center">
+            <a
+              href="https://app.igny8.com/signup"
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+            >
+              <RocketLaunchIcon className="h-5 w-5" />
+              Start Free
+            </a>
+            <Link
+              to="/contact"
+              className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-10 py-5 text-lg font-bold hover:bg-white/20 hover:border-white/50 transition"
+            >
+              <ChatBubbleLeftRightIcon className="h-5 w-5" />
+              Talk to Sales
+            </Link>
           </div>
         </div>
       </section>