salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Home.tsx

Browse Source
This commit is contained in:
Desktop
2025-11-14 02:08:03 +05:00
parent 2ce80bdf6e
commit 2f3f7fe94b
1 changed files with 88 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
frontend/src/marketing/pages/Home.tsx
View File

@@ -10,6 +10,8 @@ import {
LightBulbIcon, LightBulbIcon,
DocumentTextIcon, DocumentTextIcon,
ArrowRightIcon, ArrowRightIcon,
RocketLaunchIcon,
ChatBubbleLeftRightIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { testimonials } from "../data/testimonials"; import { testimonials } from "../data/testimonials";
@@ -18,7 +20,7 @@ const Home: React.FC = () => {
const isExternal = cta.href.startsWith("http"); const isExternal = cta.href.startsWith("http");
if (isExternal) { if (isExternal) {
return ( return (
<a <a
href={cta.href} href={cta.href}
className={className} 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"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
{/* Left: Text Content */} {/* Left: Text Content */}
<div className="flex flex-col gap-6 z-10"> <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"> <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. Scale SEO content from keyword discovery to AI-crafted outputs.
</h1> </h1>
@@ -140,9 +145,11 @@ const Home: React.FC = () => {
</div> </div>
</div> </div>
{/* Right: Dashboard Screenshot */} {/* Right: Dashboard Screenshot - Increased size 20-30% */}
<div className="relative z-10"> <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 */} {/* Device frame effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" /> <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"> <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> </section>
{/* SOCIAL PROOF LOGOS */} {/* 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="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"> <span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-medium">
Trusted by modern organic teams Trusted by modern organic teams
</span> </span>
@@ -192,58 +199,8 @@ const Home: React.FC = () => {
</div> </div>
</section> </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) */} {/* 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="max-w-7xl mx-auto px-6">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4"> <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
@@ -256,16 +213,16 @@ const Home: React.FC = () => {
{/* Horizontal Timeline */} {/* Horizontal Timeline */}
<div className="relative"> <div className="relative">
{/* Connecting line */} {/* Enhanced connecting line with shadow */}
<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" /> <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"> <div className="grid grid-cols-2 md:grid-cols-7 gap-6 md:gap-4">
{workflowSteps.map((step, index) => { {workflowSteps.map((step, index) => {
const Icon = step.icon; const Icon = step.icon;
return ( return (
<div key={step.name} className="flex flex-col items-center gap-3"> <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`}> <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-10 w-10" /> <Icon className="h-12 w-12" />
{/* Glow effect */} {/* 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 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> </div>
@@ -282,16 +239,22 @@ const Home: React.FC = () => {
{productModules.map((module, index) => { {productModules.map((module, index) => {
const Icon = module.icon; const Icon = module.icon;
const isLeft = module.align === "left"; 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 ( 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="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" : ""}`}> <div className={`grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center ${!isLeft ? "lg:grid-flow-dense" : ""}`}>
{/* Screenshot */} {/* Screenshot - Larger scale 1.15 */}
<div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}> <div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}>
<div className="relative"> <div className="relative scale-110 lg:scale-115">
{/* Gradient frame background */} {/* Gradient frame background with colored glow */}
<div className={`absolute -inset-4 bg-gradient-to-br ${module.color} rounded-3xl opacity-20 blur-2xl`} /> <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="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="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"> <div className="flex gap-2">
@@ -306,8 +269,8 @@ const Home: React.FC = () => {
className="w-full h-auto object-cover mt-12" className="w-full h-auto object-cover mt-12"
/> />
</div> </div>
{/* Overlap shadow */} {/* Overlap shadow with module color */}
<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`} /> <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>
</div> </div>
@@ -348,44 +311,47 @@ const Home: React.FC = () => {
})} })}
{/* AUTOMATION SNAPSHOT SECTION */} {/* AUTOMATION SNAPSHOT SECTION */}
<section className="py-24 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden"> <section className="py-24 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
{/* Background pattern */} {/* Richer 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_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.15),transparent_50%)]" /> <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="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"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
{/* Left: Content */} {/* Left: Content */}
<div className="z-10"> <div className="z-10">
<div className="flex items-center gap-3 mb-6"> <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" /> <BoltIcon className="h-6 w-6" />
</div> </div>
<h2 className="text-4xl md:text-5xl font-bold text-white"> <h2 className="text-4xl md:text-5xl font-bold text-white">
Automation Engine Automation Engine
</h2> </h2>
</div> </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. Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute.
</p> </p>
{/* Automation Timeline */} {/* Automation Timeline with neon glows */}
<div className="space-y-6 mb-8"> <div className="space-y-6 mb-8">
{[ {[
{ from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]" }, { from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
{ from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]" }, { from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" },
{ from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]" }, { from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" },
{ from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]" }, { from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" },
{ from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]" }, { from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
{ from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]" }, { from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" },
].map((handoff, i) => ( ].map((handoff, i) => (
<div key={i} className="flex items-center gap-4"> <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} {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>
<div className="flex-1"> <div className="flex-1">
<div className="text-white font-semibold">{handoff.from} → {handoff.to}</div> <div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div>
<div className="text-sm text-slate-400">Automated handoff with quality checks</div> <div className="text-sm text-slate-300">Automated handoff with quality checks</div>
</div> </div>
</div> </div>
))} ))}
@@ -430,16 +396,16 @@ const Home: React.FC = () => {
{/* TESTIMONIALS */} {/* TESTIMONIALS */}
<section className="py-24 bg-white"> <section className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-6"> <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"> <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 Loved by scaling teams
</span> </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. Teams ship more content, capture more demand, and see faster ROI with Igny8.
</h2> </h2>
</div> </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) => { {testimonials.map((testimonial, index) => {
const gradientColors = [ const gradientColors = [
"from-[#0693e3]/20 to-[#0472b8]/10", "from-[#0693e3]/20 to-[#0472b8]/10",
@@ -447,47 +413,47 @@ const Home: React.FC = () => {
"from-[#5d4ae3]/20 to-[#3a2f94]/10", "from-[#5d4ae3]/20 to-[#3a2f94]/10",
]; ];
const borderColors = [ const borderColors = [
"border-[#0693e3]/30", "border-[#0693e3]/30",
"border-[#0bbf87]/30", "border-[#0bbf87]/30",
"border-[#5d4ae3]/30", "border-[#5d4ae3]/30",
]; ];
return ( return (
<div <div
key={testimonial.name} 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 */} {/* Avatar placeholder with better contrast */}
<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`}> <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)} {testimonial.name.charAt(0)}
</div> </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}" "{testimonial.quote}"
</p> </p>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-bold text-slate-900">{testimonial.name}</span> <span className="font-bold text-slate-900 text-lg">{testimonial.name}</span>
<span className="text-sm text-slate-600"> <span className="text-sm text-slate-700 font-medium">
{testimonial.title} · {testimonial.company} {testimonial.title} · {testimonial.company}
</span> </span>
</div> </div>
{/* Metrics badge */} {/* Metrics badge with better contrast */}
<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`}> <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>3× faster</span>
<span>•</span> <span>•</span>
<span>+132% lift</span> <span>+132% lift</span>
</div> </div>
</div> </div>
); );
})} })}
</div> </div>
</div> </div>
</section> </section>
{/* FINAL CTA */} {/* 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 */} {/* Dashboard overlay in background */}
<div className="absolute inset-0 opacity-10"> <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" /> <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="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"> <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? Ready to orchestrate SEO, content, and creative in one AI engine?
</h2> </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. Launch Igny8 in minutes. Start automating your workflow, or book a white-glove onboarding session with our team.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-5 justify-center">
{renderCta( <a
{ label: "Start Free", href: "https://app.igny8.com/signup" }, 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" target="_blank"
)} rel="noreferrer"
{renderCta( 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"
{ 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" <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>
</div> </div>
</section> </section>