@adminide-stack/yantra-help-browser 12.0.16-alpha.21 → 12.0.16-alpha.22

package/lib/pages/GetStarted/index.js

@@ -1,775 +1,431 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {Button}from'@admin-layout/tailwind-ui/shardui/button.js';const GetStartedPage = () => {
+import {jsxs,jsx}from'react/jsx-runtime';import {Link}from'@remix-run/react';const STEPS = [{
+  num: '01',
+  title: 'Create Your Account',
+  desc: 'Sign up in 30 seconds. No credit card required. Get instant access to the full platform.',
+  color: 'from-cyan-500 to-blue-500',
+  icon: '👤'
+}, {
+  num: '02',
+  title: 'Set Up Your Workspace',
+  desc: 'Create Spaces for your projects, invite team members, and customize your environment.',
+  color: 'from-violet-500 to-purple-500',
+  icon: '🏗️'
+}, {
+  num: '03',
+  title: 'Deploy AI Employees',
+  desc: 'Configure intelligent agents that automate sales, engineering, marketing, and support tasks.',
+  color: 'from-pink-500 to-rose-500',
+  icon: '🤖'
+}, {
+  num: '04',
+  title: 'Scale & Optimize',
+  desc: 'Monitor performance, fine-tune workflows, and scale your AI workforce as your business grows.',
+  color: 'from-amber-500 to-orange-500',
+  icon: '🚀'
+}];
+const USE_CASES = [{
+  title: 'Answering Complex Questions',
+  desc: 'Yantra goes beyond search engines — synthesizing information from reliable sources with citations to help you understand complex topics deeply.',
+  items: ['Reliable information with proper citations', 'Answers to specific, complex questions fast'],
+  gradient: 'from-blue-500/10 to-indigo-500/10',
+  iconBg: 'from-blue-500/20 to-indigo-500/20',
+  iconColor: 'text-blue-500'
+}, {
+  title: 'Exploring Topics In Depth',
+  desc: 'Pro Search provides guided exploration with detailed insights from experts, enabling you to discover connections and gain expertise on any subject.',
+  items: ['Multi-step research flows', 'Expert-grade analysis'],
+  gradient: 'from-violet-500/10 to-purple-500/10',
+  iconBg: 'from-violet-500/20 to-purple-500/20',
+  iconColor: 'text-violet-500'
+}, {
+  title: 'Organizing Your Library',
+  desc: 'Create Threads to collect related topics, build collections, and easily access your curated content — your personal knowledge base.',
+  items: ['Save important info for quick reference', 'Organize research by topics'],
+  gradient: 'from-emerald-500/10 to-teal-500/10',
+  iconBg: 'from-emerald-500/20 to-teal-500/20',
+  iconColor: 'text-emerald-500'
+}, {
+  title: 'Interacting With Your Data',
+  desc: 'Ask questions about PDFs, CSVs, and documents. Yantra processes content, understands structure, and provides insights from your files.',
+  items: ['Extract insights from complex docs', 'Analyze data without coding'],
+  gradient: 'from-amber-500/10 to-orange-500/10',
+  iconBg: 'from-amber-500/20 to-orange-500/20',
+  iconColor: 'text-amber-500'
+}];
+const TIPS = [{
+  title: 'Be Specific With Prompts',
+  desc: 'The more context you provide, the better Yantra can tailor its response. Include details about format, depth, and audience.',
+  gradient: 'from-cyan-500 to-blue-500'
+}, {
+  title: 'Use Spaces for Organization',
+  desc: 'Create dedicated Spaces for different projects or topics. Invite collaborators and build shared knowledge bases.',
+  gradient: 'from-violet-500 to-purple-500'
+}, {
+  title: 'Leverage Pro Search',
+  desc: 'For complex research, switch to Pro Search mode. It asks clarifying questions and performs multi-step analysis.',
+  gradient: 'from-pink-500 to-rose-500'
+}];
+const GetStartedPage = () => {
   return jsxs("div", {
     className: "min-h-screen bg-background",
-    children: [jsx("section", {
-      className: "relative w-full bg-[#057d78] py-20",
-      children: jsx("div", {
-        className: "container mx-auto px-16 pt-20",
-        children: jsxs("div", {
-          className: "flex flex-col items-start justify-between gap-12 md:flex-row",
-          children: [jsxs("div", {
-            className: "max-w-4xl",
-            children: [jsx("h1", {
-              className: "mb-4 mt-8 text-left text-[5rem] font-[300] leading-[1.1] tracking-tight text-white",
-              children: "Getting Started"
-            }), jsx("p", {
-              className: "mb-8 text-xl font-normal text-primary-foreground/90",
-              children: "Everything you need to know to unlock the power of Yantra and transform how you search, learn, and discover."
-            }), jsxs("div", {
-              className: "flex flex-wrap gap-4",
-              children: [jsx(Button, {
-                className: "bg-primary-foreground text-primary hover:bg-primary-foreground/90 px-8 py-3 text-base font-medium",
-                children: "Start Exploring"
-              }), jsx(Button, {
-                variant: "outline",
-                className: "border-white text-foreground hover:bg-primary/10 px-8 py-3 text-base font-medium",
-                children: "Watch Demo"
-              })]
-            })]
+    children: [jsxs("div", {
+      className: "relative overflow-hidden w-full",
+      children: [jsxs("div", {
+        className: "absolute inset-0 bg-[#060b18]",
+        children: [jsxs("div", {
+          className: "absolute inset-0",
+          children: [jsx("div", {
+            className: "absolute left-[5%] top-[-10%] h-[500px] w-[500px] rounded-full opacity-20 blur-[120px]",
+            style: {
+              background: 'radial-gradient(circle, #06b6d4, transparent 70%)',
+              animation: 'gsFloat1 8s ease-in-out infinite'
+            }
           }), jsx("div", {
-            className: "hidden h-80 w-96 md:block",
-            children: jsxs("div", {
-              className: "relative h-full w-full",
-              children: [jsx("div", {
-                className: "absolute h-full w-full rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 shadow-xl"
-              }), jsx("div", {
-                className: "absolute -right-8 -top-8 h-full w-full rounded-lg bg-teal-600/20 shadow-xl"
-              }), jsx("div", {
-                className: "absolute -right-4 -top-4 h-full w-full rounded-lg bg-teal-500/30 shadow-xl"
-              }), jsx("div", {
-                className: "absolute inset-4 flex items-center justify-center",
-                children: jsxs("div", {
-                  className: "text-center text-foreground",
-                  children: [jsx("div", {
-                    className: "mb-4 text-6xl",
-                    children: "\uD83D\uDE80"
-                  }), jsx("div", {
-                    className: "text-lg font-medium",
-                    children: "Ready to explore?"
-                  })]
-                })
-              })]
-            })
+            className: "absolute right-[10%] top-[20%] h-[400px] w-[400px] rounded-full opacity-15 blur-[120px]",
+            style: {
+              background: 'radial-gradient(circle, #8b5cf6, transparent 70%)',
+              animation: 'gsFloat2 10s ease-in-out infinite'
+            }
+          }), jsx("div", {
+            className: "absolute bottom-0 left-[30%] h-[350px] w-[350px] rounded-full opacity-10 blur-[100px]",
+            style: {
+              background: 'radial-gradient(circle, #ec4899, transparent 70%)',
+              animation: 'gsFloat3 12s ease-in-out infinite'
+            }
           })]
-        })
-      })
-    }), jsxs("section", {
-      className: "relative py-20",
-      children: [jsx("div", {
-        className: "absolute inset-0 z-0 opacity-5",
-        children: jsx("div", {
-          className: "h-full w-full bg-gradient-to-br from-primary/5 to-primary/10"
-        })
+        }), jsx("div", {
+          className: "absolute inset-0 opacity-[0.03]",
+          style: {
+            backgroundImage: 'radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1px)',
+            backgroundSize: '24px 24px'
+          }
+        })]
+      }), jsx("style", {
+        dangerouslySetInnerHTML: {
+          __html: `
+                    @keyframes gsFloat1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(20px,-20px); } }
+                    @keyframes gsFloat2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-15px,15px); } }
+                    @keyframes gsFloat3 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(18px,-10px); } }
+                    @keyframes gsShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
+                    @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
+                    @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
+                `
+        }
       }), jsxs("div", {
-        className: "container relative z-10 mx-auto px-16",
+        className: "relative z-10 mx-auto flex min-h-[480px] max-w-7xl flex-col items-center justify-center px-6 pb-16 pt-24 text-center lg:px-16",
         children: [jsxs("div", {
-          className: "mb-16 text-center",
-          children: [jsx("h2", {
-            className: "mb-6 text-4xl font-bold tracking-tight text-foreground",
-            children: "What is Yantra?"
-          }), jsx("p", {
-            className: "mx-auto max-w-4xl text-xl text-muted-foreground leading-relaxed",
-            children: "Yantra is a powerful platform that combines advanced AI technologies and human insights. It's not just about answering questions, it's about empowering you to do more\u2014whether you're looking to solve complex problems, explore new topics, or learn get in-the-moment insights."
+          className: "mb-6 inline-flex items-center gap-2 rounded-full border border-cyan-500/20 bg-cyan-500/[0.08] px-4 py-1.5 text-[12px] font-medium text-cyan-400 backdrop-blur-md",
+          children: [jsx("span", {
+            className: "text-[14px]",
+            children: "\uD83D\uDE80"
+          }), " Your journey starts here"]
+        }), jsxs("h1", {
+          className: "mb-5 text-4xl font-extrabold leading-[1.08] tracking-tight text-white sm:text-5xl lg:text-[60px]",
+          children: ["Get Started with", ' ', jsx("span", {
+            className: "bg-clip-text text-transparent",
+            style: {
+              backgroundImage: 'linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6)',
+              backgroundSize: '200% auto',
+              animation: 'gsShimmer 4s linear infinite'
+            },
+            children: "Yantra AI"
+          })]
+        }), jsx("p", {
+          className: "mx-auto max-w-2xl text-base leading-relaxed text-white/45 lg:text-[17px]",
+          children: "Everything you need to unlock the power of AI employees. From first login to full deployment \u2014 we'll guide you every step of the way."
+        }), jsxs("div", {
+          className: "mt-8 flex flex-wrap items-center justify-center gap-3",
+          children: [jsxs("a", {
+            href: "#steps",
+            className: "inline-flex items-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-gray-900 shadow-lg transition-all hover:-translate-y-0.5 hover:shadow-xl",
+            children: [jsx("svg", {
+              className: "h-4 w-4",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M13 7l5 5m0 0l-5 5m5-5H6"
+              })
+            }), "Start the Guide"]
+          }), jsx(Link, {
+            to: "/help-center",
+            className: "inline-flex items-center gap-2 rounded-xl border border-white/20 bg-white/[0.06] px-6 py-3 text-sm font-semibold text-white/80 backdrop-blur-sm transition-all hover:-translate-y-0.5 hover:bg-white/10",
+            children: "Browse Help Center"
           })]
+        })]
+      }), jsxs("div", {
+        className: "relative z-10",
+        children: [jsx("div", {
+          className: "h-px bg-gradient-to-r from-transparent via-cyan-500/20 to-transparent"
         }), jsx("div", {
+          className: "h-16 bg-gradient-to-b from-[#060b18] to-background"
+        })]
+      })]
+    }), jsx("section", {
+      id: "steps",
+      className: "py-16",
+      children: jsxs("div", {
+        className: "container mx-auto max-w-7xl px-6 lg:px-16",
+        children: [jsxs("div", {
           className: "mb-12 text-center",
-          children: jsx("h3", {
-            className: "mb-8 text-2xl font-semibold text-foreground",
-            children: "See Yantra in Action"
-          })
-        }), jsxs("div", {
-          className: "grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3",
           children: [jsxs("div", {
-            className: "group flex cursor-pointer items-start gap-6 rounded-xl bg-card p-8 shadow-sm transition-all hover:bg-primary/5 hover:shadow-lg hover:-translate-y-1",
+            className: "mb-3 flex items-center justify-center gap-2",
             children: [jsx("div", {
-              className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 text-primary group-hover:from-primary/20 group-hover:to-primary/30 transition-all",
-              children: jsx("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                strokeWidth: 1.5,
-                stroke: "currentColor",
-                className: "h-6 w-6",
-                children: jsx("path", {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-                })
-              })
-            }), jsxs("div", {
-              className: "flex flex-col",
-              children: [jsx("h4", {
-                className: "mb-3 text-lg font-semibold text-foreground group-hover:text-primary transition-colors",
-                children: "\"I need a quick healthy recipe\""
-              }), jsx("p", {
-                className: "mb-6 text-sm leading-relaxed text-muted-foreground",
-                children: "Yantra can find and provide you with recipes that are quick to make, use healthy ingredients, and suit your taste preferences."
-              }), jsx(Button, {
-                variant: "link",
-                className: "p-0 text-sm text-primary hover:text-primary/80 self-start",
-                children: jsxs("div", {
-                  className: "flex items-center gap-1",
-                  children: ["View example ", jsx("span", {
-                    className: "ml-1 transition-transform group-hover:translate-x-1",
-                    children: "\u2192"
-                  })]
-                })
-              })]
+              className: "h-1 w-8 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500"
+            }), jsx("span", {
+              className: "text-[11px] font-bold uppercase tracking-[0.15em] text-cyan-500",
+              children: "Quick Start"
+            }), jsx("div", {
+              className: "h-1 w-8 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500"
             })]
-          }), jsxs("div", {
-            className: "group flex cursor-pointer items-start gap-6 rounded-xl bg-card p-8 shadow-sm transition-all hover:bg-primary/5 hover:shadow-lg hover:-translate-y-1",
+          }), jsx("h2", {
+            className: "text-2xl font-extrabold tracking-tight text-foreground lg:text-3xl",
+            children: "Up and running in 4 steps"
+          }), jsx("p", {
+            className: "mx-auto mt-2 max-w-lg text-sm text-muted-foreground",
+            children: "Follow these steps to go from zero to fully operational AI workforce"
+          })]
+        }), jsx("div", {
+          className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+          children: STEPS.map(step => jsxs("div", {
+            className: "group relative overflow-hidden rounded-2xl border border-border/60 bg-card p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
             children: [jsx("div", {
-              className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 text-primary group-hover:from-primary/20 group-hover:to-primary/30 transition-all",
-              children: jsx("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                strokeWidth: 1.5,
-                stroke: "currentColor",
-                className: "h-6 w-6",
-                children: jsx("path", {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
-                })
-              })
+              className: "absolute left-0 right-0 top-0 h-[2px] bg-gradient-to-r from-transparent via-current to-transparent opacity-0 transition-opacity group-hover:opacity-100",
+              style: {
+                color: 'rgb(6,182,212)'
+              }
+            }), jsx("div", {
+              className: "mb-4 text-3xl",
+              children: step.icon
             }), jsxs("div", {
-              className: "flex flex-col",
-              children: [jsx("h4", {
-                className: "mb-3 text-lg font-semibold text-foreground group-hover:text-primary transition-colors",
-                children: "\"Shopping advice for a new pair of running headphones\""
-              }), jsx("p", {
-                className: "mb-6 text-sm leading-relaxed text-muted-foreground",
-                children: "Yantra's curated insights will get you specific, informed recommendations with data from reviews, forums, and reliable sources."
-              }), jsx(Button, {
-                variant: "link",
-                className: "p-0 text-sm text-primary hover:text-primary/80 self-start",
-                children: jsxs("div", {
-                  className: "flex items-center gap-1",
-                  children: ["View example ", jsx("span", {
-                    className: "ml-1 transition-transform group-hover:translate-x-1",
-                    children: "\u2192"
-                  })]
-                })
-              })]
+              className: `mb-3 inline-flex rounded-full bg-gradient-to-r ${step.color} px-2.5 py-0.5 text-[11px] font-bold text-white`,
+              children: ["Step ", step.num]
+            }), jsx("h3", {
+              className: "mb-2 text-[15px] font-semibold text-foreground",
+              children: step.title
+            }), jsx("p", {
+              className: "text-[13px] leading-relaxed text-muted-foreground",
+              children: step.desc
             })]
+          }, step.num))
+        })]
+      })
+    }), jsx("section", {
+      className: "border-t border-border/30 py-16",
+      children: jsx("div", {
+        className: "container mx-auto max-w-4xl px-6 lg:px-16",
+        children: jsxs("div", {
+          className: "relative overflow-hidden rounded-3xl bg-gradient-to-br from-[#0c1222] to-[#111827] p-10 text-center lg:p-14",
+          children: [jsx("div", {
+            className: "absolute left-0 top-0 h-40 w-40 rounded-full bg-cyan-500/10 blur-[80px]"
+          }), jsx("div", {
+            className: "absolute bottom-0 right-0 h-40 w-40 rounded-full bg-violet-500/10 blur-[80px]"
           }), jsxs("div", {
-            className: "group flex cursor-pointer items-start gap-6 rounded-xl bg-card p-8 shadow-sm transition-all hover:bg-primary/5 hover:shadow-lg hover:-translate-y-1",
-            children: [jsx("div", {
-              className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 text-primary group-hover:from-primary/20 group-hover:to-primary/30 transition-all",
-              children: jsx("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
+            className: "relative z-10",
+            children: [jsxs("div", {
+              className: "mb-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-1.5 text-[12px] font-medium text-white/50",
+              children: [jsx("svg", {
+                className: "h-3.5 w-3.5 text-cyan-400",
                 fill: "none",
-                viewBox: "0 0 24 24",
-                strokeWidth: 1.5,
                 stroke: "currentColor",
-                className: "h-6 w-6",
+                viewBox: "0 0 24 24",
                 children: jsx("path", {
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
-                  d: "M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
+                  strokeWidth: 1.5,
+                  d: "M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
                 })
-              })
+              }), "About Yantra"]
+            }), jsx("h2", {
+              className: "mb-4 text-2xl font-extrabold text-white lg:text-3xl",
+              children: "What is Yantra?"
+            }), jsx("p", {
+              className: "mx-auto max-w-2xl text-base leading-relaxed text-white/50",
+              children: "Yantra is a powerful AI platform that combines cutting-edge language models with deep enterprise integrations. It's not just about answering questions \u2014 it's about deploying AI employees that handle real work: sales outreach, code reviews, customer support, content creation, and more."
             }), jsxs("div", {
-              className: "flex flex-col",
-              children: [jsx("h4", {
-                className: "mb-3 text-lg font-semibold text-foreground group-hover:text-primary transition-colors",
-                children: "\"Want to learn Python, but not sure where to begin?\""
-              }), jsx("p", {
-                className: "mb-6 text-sm leading-relaxed text-muted-foreground",
-                children: "Yantra is the perfect helper - just a few quick prompts using the interactive panel and it will create a personalized learning plan."
-              }), jsx(Button, {
-                variant: "link",
-                className: "p-0 text-sm text-primary hover:text-primary/80 self-start",
-                children: jsxs("div", {
-                  className: "flex items-center gap-1",
-                  children: ["View example ", jsx("span", {
-                    className: "ml-1 transition-transform group-hover:translate-x-1",
-                    children: "\u2192"
-                  })]
-                })
+              className: "mx-auto mt-8 grid max-w-lg grid-cols-3 gap-4",
+              children: [jsxs("div", {
+                className: "rounded-xl border border-white/[0.06] bg-white/[0.03] p-4 text-center",
+                children: [jsx("div", {
+                  className: "text-xl font-bold text-white",
+                  children: "10K+"
+                }), jsx("div", {
+                  className: "mt-0.5 text-[11px] text-white/30",
+                  children: "Teams"
+                })]
+              }), jsxs("div", {
+                className: "rounded-xl border border-white/[0.06] bg-white/[0.03] p-4 text-center",
+                children: [jsx("div", {
+                  className: "text-xl font-bold text-white",
+                  children: "50M+"
+                }), jsx("div", {
+                  className: "mt-0.5 text-[11px] text-white/30",
+                  children: "Tasks Automated"
+                })]
+              }), jsxs("div", {
+                className: "rounded-xl border border-white/[0.06] bg-white/[0.03] p-4 text-center",
+                children: [jsx("div", {
+                  className: "text-xl font-bold text-white",
+                  children: "99.9%"
+                }), jsx("div", {
+                  className: "mt-0.5 text-[11px] text-white/30",
+                  children: "Uptime"
+                })]
               })]
             })]
           })]
-        })]
-      })]
+        })
+      })
     }), jsx("section", {
-      className: "relative bg-gradient-to-br from-muted/50 to-primary/5 py-20",
+      className: "border-t border-border/30 py-16",
       children: jsxs("div", {
-        className: "container mx-auto px-16",
+        className: "container mx-auto max-w-7xl px-6 lg:px-16",
         children: [jsxs("div", {
-          className: "mb-16 text-center",
-          children: [jsx("h2", {
-            className: "mb-6 text-4xl font-bold tracking-tight text-foreground",
-            children: "What should I use Yantra for?"
-          }), jsx("p", {
-            className: "mx-auto max-w-3xl text-xl text-muted-foreground",
-            children: "Discover the powerful ways Yantra can transform your workflow and enhance your productivity"
-          })]
-        }), jsxs("div", {
-          className: "grid gap-12 md:grid-cols-2",
+          className: "mb-12 text-center",
           children: [jsxs("div", {
-            className: "group rounded-xl bg-card p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1",
-            children: [jsxs("div", {
-              className: "mb-6 flex items-center gap-4",
-              children: [jsx("div", {
-                className: "flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-blue-100 to-blue-200 text-blue-600",
-                children: jsx("svg", {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  strokeWidth: 1.5,
-                  stroke: "currentColor",
-                  className: "h-6 w-6",
-                  children: jsx("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
-                  })
-                })
-              }), jsx("h3", {
-                className: "text-2xl font-semibold text-foreground",
-                children: "Answering questions"
-              })]
-            }), jsx("p", {
-              className: "mb-6 text-muted-foreground leading-relaxed",
-              children: "When faced with tough questions, Yantra goes beyond normal search engines to provide answers from reliable sources, synthesizing information with citations to help you better understand complex topics."
-            }), jsxs("ul", {
-              className: "space-y-2 text-sm text-muted-foreground",
-              children: [jsxs("li", {
-                className: "flex items-center gap-2",
-                children: [jsx("div", {
-                  className: "h-1.5 w-1.5 rounded-full bg-primary/5"
-                }), "Get reliable information with proper citations"]
-              }), jsxs("li", {
-                className: "flex items-center gap-2",
-                children: [jsx("div", {
-                  className: "h-1.5 w-1.5 rounded-full bg-primary/5"
-                }), "Find answers to specific, complex questions quickly"]
-              })]
-            })]
-          }), jsxs("div", {
-            className: "group rounded-xl bg-card p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1",
-            children: [jsxs("div", {
-              className: "mb-6 flex items-center gap-4",
-              children: [jsx("div", {
-                className: "flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-purple-100 to-purple-200 text-purple-600",
-                children: jsx("svg", {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  strokeWidth: 1.5,
-                  stroke: "currentColor",
-                  className: "h-6 w-6",
-                  children: jsx("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
-                  })
-                })
-              }), jsx("h3", {
-                className: "text-2xl font-semibold text-foreground",
-                children: "Exploring topics in depth"
-              })]
-            }), jsx("p", {
-              className: "mb-6 text-muted-foreground leading-relaxed",
-              children: "Yantra's Pro Search feature provides a guided exploration of topics with detailed insights from experts, enabling you to discover connections and gain depth on subjects you're researching."
-            }), jsxs("a", {
-              href: "#",
-              className: "inline-flex items-center gap-2 text-sm font-medium text-primary/80 hover:text-primary transition-colors",
-              children: ["Learn More ", jsx("span", {
-                className: "transition-transform group-hover:translate-x-1",
-                children: "\u2192"
-              })]
+            className: "mb-3 flex items-center justify-center gap-2",
+            children: [jsx("div", {
+              className: "h-1 w-8 rounded-full bg-gradient-to-r from-violet-500 to-purple-500"
+            }), jsx("span", {
+              className: "text-[11px] font-bold uppercase tracking-[0.15em] text-violet-500",
+              children: "Use Cases"
+            }), jsx("div", {
+              className: "h-1 w-8 rounded-full bg-gradient-to-r from-purple-500 to-violet-500"
             })]
+          }), jsx("h2", {
+            className: "text-2xl font-extrabold tracking-tight text-foreground lg:text-3xl",
+            children: "What can you do with Yantra?"
+          }), jsx("p", {
+            className: "mx-auto mt-2 max-w-lg text-sm text-muted-foreground",
+            children: "Discover the powerful ways Yantra transforms your workflow"
           })]
-        }), jsxs("div", {
-          className: "mt-12 grid gap-12 md:grid-cols-2",
-          children: [jsxs("div", {
-            className: "group rounded-xl bg-card p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1",
-            children: [jsxs("div", {
-              className: "mb-6 flex items-center gap-4",
+        }), jsx("div", {
+          className: "grid gap-4 md:grid-cols-2",
+          children: USE_CASES.map(uc => jsxs("div", {
+            className: "group relative overflow-hidden rounded-2xl border border-border/60 bg-card p-7 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
+            children: [jsx("div", {
+              className: `pointer-events-none absolute inset-0 bg-gradient-to-br ${uc.gradient} opacity-0 transition-opacity group-hover:opacity-100`
+            }), jsxs("div", {
+              className: "relative z-10",
               children: [jsx("div", {
-                className: "flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-green-100 to-green-200 text-green-600",
+                className: `mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br ${uc.iconBg} ${uc.iconColor}`,
                 children: jsx("svg", {
-                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-5 w-5",
                   fill: "none",
-                  viewBox: "0 0 24 24",
-                  strokeWidth: 1.5,
                   stroke: "currentColor",
-                  className: "h-6 w-6",
-                  children: jsx("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.812c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
-                  })
-                })
-              }), jsx("h3", {
-                className: "text-2xl font-semibold text-foreground",
-                children: "Organizing your Library"
-              })]
-            }), jsx("p", {
-              className: "mb-6 text-muted-foreground leading-relaxed",
-              children: "Create your Threads in Yantra to collect related topics, build collections and easily access content whenever you need it."
-            }), jsxs("ul", {
-              className: "space-y-2 text-sm text-muted-foreground",
-              children: [jsxs("li", {
-                className: "flex items-center gap-2",
-                children: [jsx("div", {
-                  className: "h-1.5 w-1.5 rounded-full bg-primary/5"
-                }), "Save important information for quick reference"]
-              }), jsxs("li", {
-                className: "flex items-center gap-2",
-                children: [jsx("div", {
-                  className: "h-1.5 w-1.5 rounded-full bg-primary/5"
-                }), "Organize research by topics and subtopics"]
-              })]
-            })]
-          }), jsxs("div", {
-            className: "group rounded-xl bg-card p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1",
-            children: [jsxs("div", {
-              className: "mb-6 flex items-center gap-4",
-              children: [jsx("div", {
-                className: "flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-orange-100 to-orange-200 text-orange-600",
-                children: jsx("svg", {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
                   viewBox: "0 0 24 24",
                   strokeWidth: 1.5,
-                  stroke: "currentColor",
-                  className: "h-6 w-6",
                   children: jsx("path", {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    d: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+                    d: "M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
                   })
                 })
               }), jsx("h3", {
-                className: "text-2xl font-semibold text-foreground",
-                children: "Interacting with your data"
-              })]
-            }), jsx("p", {
-              className: "mb-6 text-muted-foreground leading-relaxed",
-              children: "Ask questions about your files like PDFs and CSVs. Yantra can process the content, understand its structure, and provide insights based on your specific queries."
-            }), jsxs("ul", {
-              className: "space-y-2 text-sm text-muted-foreground",
-              children: [jsxs("li", {
-                className: "flex items-center gap-2",
-                children: [jsx("div", {
-                  className: "h-1.5 w-1.5 rounded-full bg-primary/5"
-                }), "Extract insights from complex documents"]
-              }), jsxs("li", {
-                className: "flex items-center gap-2",
-                children: [jsx("div", {
-                  className: "h-1.5 w-1.5 rounded-full bg-primary/5"
-                }), "Analyze data without programming knowledge"]
+                className: "mb-2 text-lg font-semibold text-foreground",
+                children: uc.title
+              }), jsx("p", {
+                className: "mb-4 text-[13px] leading-relaxed text-muted-foreground",
+                children: uc.desc
+              }), jsx("ul", {
+                className: "space-y-1.5",
+                children: uc.items.map(item => jsxs("li", {
+                  className: "flex items-center gap-2 text-[12px] text-muted-foreground",
+                  children: [jsx("svg", {
+                    className: `h-3.5 w-3.5 shrink-0 ${uc.iconColor}`,
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: jsx("path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M5 13l4 4L19 7"
+                    })
+                  }), item]
+                }, item))
               })]
             })]
-          })]
+          }, uc.title))
         })]
       })
     }), jsx("section", {
-      className: "relative py-20",
+      className: "border-t border-border/30 py-16",
       children: jsxs("div", {
-        className: "container mx-auto px-16",
+        className: "container mx-auto max-w-7xl px-6 lg:px-16",
         children: [jsxs("div", {
-          className: "mb-16 text-center",
-          children: [jsx("h2", {
-            className: "mb-6 text-4xl font-bold tracking-tight text-foreground",
-            children: "What is Pro Search?"
-          }), jsx("p", {
-            className: "mx-auto max-w-4xl text-xl text-muted-foreground leading-relaxed",
-            children: "Pro Search is your conversational search guide. Instead of quick, generic results, Pro Search engages with you, fine-tuning its answers based on your needs."
-          })]
-        }), jsxs("div", {
-          className: "mb-16 grid gap-12 md:grid-cols-2",
-          children: [jsxs("div", {
-            className: "rounded-xl bg-gradient-to-br from-blue-50 to-indigo-50 p-8",
-            children: [jsx("h3", {
-              className: "mb-6 text-2xl font-semibold text-foreground",
-              children: "Quick Search vs. Pro Search"
-            }), jsx("p", {
-              className: "text-muted-foreground leading-relaxed",
-              children: "While Quick Search gives you fast basic answers, Pro Search goes beyond to provide in-depth, customized pro preferences, details, context, and fine-grained search results. It's providing intelligent multistep flows and contextual help."
-            })]
-          }), jsxs("div", {
-            className: "rounded-xl bg-gradient-to-br from-purple-50 to-pink-50 p-8",
-            children: [jsx("h3", {
-              className: "mb-6 text-2xl font-semibold text-foreground",
-              children: "Why would I use it?"
-            }), jsx("p", {
-              className: "text-muted-foreground leading-relaxed",
-              children: "Pro Search gives you unprecedented access to the world's knowledge with AI-powered comprehensive insights. It lets you explore diverse range of opinions in a conversational flow. With faster response time and personalized experience. Coming in just the first 30 minutes of your time, you're bound to discover something you couldn't have otherwise."
-            })]
-          })]
-        }), jsx("div", {
           className: "mb-12 text-center",
-          children: jsx("h3", {
-            className: "mb-8 text-2xl font-semibold text-foreground",
-            children: "Pro Search Examples"
-          })
-        }), jsxs("div", {
-          className: "grid grid-cols-1 gap-8 md:grid-cols-2",
           children: [jsxs("div", {
-            className: "group flex cursor-pointer items-start gap-6 rounded-xl bg-card p-8 shadow-sm transition-all hover:bg-primary/5 hover:shadow-lg hover:-translate-y-1",
+            className: "mb-3 flex items-center justify-center gap-2",
             children: [jsx("div", {
-              className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 text-primary group-hover:from-primary/20 group-hover:to-primary/30 transition-all",
-              children: jsx("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                strokeWidth: 1.5,
-                stroke: "currentColor",
-                className: "h-6 w-6",
-                children: jsx("path", {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"
-                })
-              })
-            }), jsxs("div", {
-              className: "flex flex-col",
-              children: [jsx("h4", {
-                className: "mb-3 text-lg font-semibold text-foreground group-hover:text-primary transition-colors",
-                children: "Travel Planning"
-              }), jsx("p", {
-                className: "mb-6 text-sm leading-relaxed text-muted-foreground",
-                children: "\"I'm planning to take three days in Kyoto - what itinerary would you recommend?\""
-              }), jsx(Button, {
-                variant: "link",
-                className: "p-0 text-sm text-primary hover:text-primary/80 self-start",
-                children: jsxs("div", {
-                  className: "flex items-center gap-1",
-                  children: ["View example ", jsx("span", {
-                    className: "ml-1 transition-transform group-hover:translate-x-1",
-                    children: "\u2192"
-                  })]
-                })
-              })]
-            })]
-          }), jsxs("div", {
-            className: "group flex cursor-pointer items-start gap-6 rounded-xl bg-card p-8 shadow-sm transition-all hover:bg-primary/5 hover:shadow-lg hover:-translate-y-1",
-            children: [jsx("div", {
-              className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 text-primary group-hover:from-primary/20 group-hover:to-primary/30 transition-all",
-              children: jsx("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                strokeWidth: 1.5,
-                stroke: "currentColor",
-                className: "h-6 w-6",
-                children: jsx("path", {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
-                })
-              })
-            }), jsxs("div", {
-              className: "flex flex-col",
-              children: [jsx("h4", {
-                className: "mb-3 text-lg font-semibold text-foreground group-hover:text-primary transition-colors",
-                children: "Academic Research"
-              }), jsx("p", {
-                className: "mb-6 text-sm leading-relaxed text-muted-foreground",
-                children: "\"Find recent studies on solar panel recycling and specifically how recycling has improved.\""
-              }), jsx(Button, {
-                variant: "link",
-                className: "p-0 text-sm text-primary hover:text-primary/80 self-start",
-                children: jsxs("div", {
-                  className: "flex items-center gap-1",
-                  children: ["View example ", jsx("span", {
-                    className: "ml-1 transition-transform group-hover:translate-x-1",
-                    children: "\u2192"
-                  })]
-                })
-              })]
-            })]
-          }), jsxs("div", {
-            className: "group flex cursor-pointer items-start gap-6 rounded-xl bg-card p-8 shadow-sm transition-all hover:bg-primary/5 hover:shadow-lg hover:-translate-y-1",
-            children: [jsx("div", {
-              className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 text-primary group-hover:from-primary/20 group-hover:to-primary/30 transition-all",
-              children: jsx("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                strokeWidth: 1.5,
-                stroke: "currentColor",
-                className: "h-6 w-6",
-                children: jsx("path", {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z"
-                })
-              })
-            }), jsxs("div", {
-              className: "flex flex-col",
-              children: [jsx("h4", {
-                className: "mb-3 text-lg font-semibold text-foreground group-hover:text-primary transition-colors",
-                children: "Professional Research"
-              }), jsx("p", {
-                className: "mb-6 text-sm leading-relaxed text-muted-foreground",
-                children: "Pro Search delivers the data you need to make informed business decisions with reliable sources."
-              }), jsx(Button, {
-                variant: "link",
-                className: "p-0 text-sm text-primary hover:text-primary/80 self-start",
-                children: jsxs("div", {
-                  className: "flex items-center gap-1",
-                  children: ["View example ", jsx("span", {
-                    className: "ml-1 transition-transform group-hover:translate-x-1",
-                    children: "\u2192"
-                  })]
-                })
-              })]
+              className: "h-1 w-8 rounded-full bg-gradient-to-r from-amber-500 to-orange-500"
+            }), jsx("span", {
+              className: "text-[11px] font-bold uppercase tracking-[0.15em] text-amber-500",
+              children: "Pro Tips"
+            }), jsx("div", {
+              className: "h-1 w-8 rounded-full bg-gradient-to-r from-orange-500 to-amber-500"
             })]
-          }), jsxs("div", {
-            className: "group flex cursor-pointer items-start gap-6 rounded-xl bg-card p-8 shadow-sm transition-all hover:bg-primary/5 hover:shadow-lg hover:-translate-y-1",
+          }), jsx("h2", {
+            className: "text-2xl font-extrabold tracking-tight text-foreground lg:text-3xl",
+            children: "Tips for Success"
+          })]
+        }), jsx("div", {
+          className: "grid gap-4 md:grid-cols-3",
+          children: TIPS.map(tip => jsxs("div", {
+            className: "group relative overflow-hidden rounded-2xl border border-border/60 bg-card p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
             children: [jsx("div", {
-              className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 text-primary group-hover:from-primary/20 group-hover:to-primary/30 transition-all",
-              children: jsx("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                strokeWidth: 1.5,
-                stroke: "currentColor",
-                className: "h-6 w-6",
-                children: jsx("path", {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
-                })
-              })
+              className: `absolute left-0 right-0 top-0 h-1 bg-gradient-to-r ${tip.gradient}`
             }), jsxs("div", {
-              className: "flex flex-col",
-              children: [jsx("h4", {
-                className: "mb-3 text-lg font-semibold text-foreground group-hover:text-primary transition-colors",
-                children: "Idea Briefings"
+              className: "relative z-10 pt-2",
+              children: [jsx("h3", {
+                className: "mb-2 text-[15px] font-semibold text-foreground",
+                children: tip.title
               }), jsx("p", {
-                className: "mb-6 text-sm leading-relaxed text-muted-foreground",
-                children: "Pro Search compiles deep from multiple angles, giving you a balanced view of current events."
-              }), jsx(Button, {
-                variant: "link",
-                className: "p-0 text-sm text-primary hover:text-primary/80 self-start",
-                children: jsxs("div", {
-                  className: "flex items-center gap-1",
-                  children: ["View example ", jsx("span", {
-                    className: "ml-1 transition-transform group-hover:translate-x-1",
-                    children: "\u2192"
-                  })]
-                })
+                className: "text-[13px] leading-relaxed text-muted-foreground",
+                children: tip.desc
               })]
             })]
-          })]
+          }, tip.title))
         })]
       })
     }), jsx("section", {
-      className: "relative bg-gradient-to-br from-muted/50 to-primary/5 py-20",
-      children: jsxs("div", {
-        className: "container mx-auto px-16",
-        children: [jsxs("div", {
-          className: "mb-16 text-center",
-          children: [jsx("h2", {
-            className: "mb-6 text-4xl font-bold tracking-tight text-foreground",
-            children: "Pro Tips for Success"
-          }), jsx("p", {
-            className: "mx-auto max-w-3xl text-xl text-muted-foreground",
-            children: "Here are three essential tips that will help you maximize your experience with Yantra"
-          })]
-        }), jsxs("div", {
-          className: "grid gap-8 md:grid-cols-2 lg:grid-cols-3",
+      className: "border-t border-border/30 py-16",
+      children: jsx("div", {
+        className: "container mx-auto max-w-4xl px-6 lg:px-16",
+        children: jsxs("div", {
+          className: "relative overflow-hidden rounded-3xl bg-gradient-to-r from-cyan-500 via-blue-600 to-violet-600 p-10 text-center lg:p-14",
           children: [jsxs("div", {
-            className: "group rounded-xl border border-border bg-card p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1",
-            children: [jsxs("div", {
-              className: "mb-6 flex items-center gap-4",
-              children: [jsx("div", {
-                className: "flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-emerald-100 to-emerald-200 text-emerald-600",
-                children: jsx("svg", {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  strokeWidth: 1.5,
-                  stroke: "currentColor",
-                  className: "h-6 w-6",
-                  children: jsx("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"
-                  })
-                })
-              }), jsx("h3", {
-                className: "text-xl font-semibold text-foreground",
-                children: "Smart File Organization"
-              })]
-            }), jsx("p", {
-              className: "mb-6 text-muted-foreground leading-relaxed",
-              children: "Save time by using the filters to narrow your results and find exactly what you're looking for. The faceted navigation helps you quickly drill down into specific categories."
-            }), jsxs("a", {
-              href: "#",
-              className: "inline-flex items-center gap-2 text-sm font-medium text-primary/80 hover:text-primary transition-colors",
-              children: ["Learn more ", jsx("span", {
-                className: "transition-transform group-hover:translate-x-1",
-                children: "\u2192"
-              })]
+            className: "pointer-events-none absolute inset-0",
+            children: [jsx("div", {
+              className: "absolute left-[15%] top-4 h-2 w-2 rounded-full bg-white/20"
+            }), jsx("div", {
+              className: "absolute bottom-8 right-[20%] h-1.5 w-1.5 rounded-full bg-white/15"
             })]
           }), jsxs("div", {
-            className: "group rounded-xl border border-border bg-card p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1",
-            children: [jsxs("div", {
-              className: "mb-6 flex items-center gap-4",
-              children: [jsx("div", {
-                className: "flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-violet-100 to-violet-200 text-violet-600",
-                children: jsx("svg", {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  strokeWidth: 1.5,
-                  stroke: "currentColor",
-                  className: "h-6 w-6",
-                  children: jsx("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
-                  })
-                })
-              }), jsx("h3", {
-                className: "text-xl font-semibold text-foreground",
-                children: "Personalize Your Experience"
-              })]
+            className: "relative z-10",
+            children: [jsx("h2", {
+              className: "text-2xl font-extrabold text-white lg:text-3xl",
+              children: "Ready to transform your workflow?"
             }), jsx("p", {
-              className: "mb-6 text-muted-foreground leading-relaxed",
-              children: "Adjust settings like language, content format, and tone to customize your results. Creating a profile helps us deliver more personalized experiences."
-            }), jsxs("a", {
-              href: "#",
-              className: "inline-flex items-center gap-2 text-sm font-medium text-primary/80 hover:text-primary transition-colors",
-              children: ["Learn more ", jsx("span", {
-                className: "transition-transform group-hover:translate-x-1",
-                children: "\u2192"
-              })]
-            })]
-          }), jsxs("div", {
-            className: "group rounded-xl border border-border bg-card p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-1",
-            children: [jsxs("div", {
-              className: "mb-6 flex items-center gap-4",
-              children: [jsx("div", {
-                className: "flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-rose-100 to-rose-200 text-rose-600",
-                children: jsx("svg", {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  strokeWidth: 1.5,
-                  stroke: "currentColor",
-                  className: "h-6 w-6",
-                  children: jsx("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
-                  })
-                })
-              }), jsx("h3", {
-                className: "text-xl font-semibold text-foreground",
-                children: "Privacy & Collaboration"
-              })]
-            }), jsx("p", {
-              className: "mb-6 text-muted-foreground leading-relaxed",
-              children: "By default, your Threads and Spaces are private. You can decide to share with others using our collaboration features and sharing settings."
-            }), jsxs("a", {
-              href: "#",
-              className: "inline-flex items-center gap-2 text-sm font-medium text-primary/80 hover:text-primary transition-colors",
-              children: ["Learn more ", jsx("span", {
-                className: "transition-transform group-hover:translate-x-1",
-                children: "\u2192"
-              })]
-            })]
-          })]
-        })]
-      })
-    }), jsx("section", {
-      className: "relative bg-gradient-to-br from-primary/5 to-primary/10 py-20",
-      children: jsxs("div", {
-        className: "container mx-auto px-16",
-        children: [jsxs("div", {
-          className: "mb-16 text-center",
-          children: [jsx("h2", {
-            className: "mb-6 text-4xl font-bold tracking-tight text-foreground",
-            children: "There's always more to learn"
-          }), jsx("p", {
-            className: "mx-auto max-w-3xl text-xl text-muted-foreground",
-            children: "Continue your journey with these helpful resources and community connections"
-          })]
-        }), jsxs("div", {
-          className: "space-y-6",
-          children: [jsxs("div", {
-            className: "group flex cursor-pointer items-center justify-between rounded-xl bg-card p-8 shadow-sm transition-all hover:bg-primary/5 hover:shadow-lg hover:-translate-y-1",
-            children: [jsxs("div", {
-              className: "flex items-center gap-6",
-              children: [jsx("div", {
-                className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 text-primary group-hover:from-primary/20 group-hover:to-primary/30 transition-all",
-                children: jsx("svg", {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  strokeWidth: 1.5,
-                  stroke: "currentColor",
-                  className: "h-6 w-6",
-                  children: jsx("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
-                  })
-                })
-              }), jsxs("div", {
-                children: [jsx("h3", {
-                  className: "text-xl font-semibold text-foreground group-hover:text-primary transition-colors",
-                  children: "Frequently Asked Questions"
-                }), jsx("p", {
-                  className: "mt-1 text-sm text-muted-foreground",
-                  children: "Get answers to common questions and troubleshooting tips"
-                })]
-              })]
-            }), jsxs("a", {
-              href: "#",
-              className: "inline-flex items-center gap-2 text-sm font-medium text-primary/80 hover:text-primary transition-colors",
-              children: ["View more ", jsx("span", {
-                className: "transition-transform group-hover:translate-x-1",
-                children: "\u2192"
-              })]
-            })]
-          }), jsxs("div", {
-            className: "group flex cursor-pointer items-center justify-between rounded-xl bg-card p-8 shadow-sm transition-all hover:bg-primary/5 hover:shadow-lg hover:-translate-y-1",
-            children: [jsxs("div", {
-              className: "flex items-center gap-6",
-              children: [jsx("div", {
-                className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 text-primary group-hover:from-primary/20 group-hover:to-primary/30 transition-all",
-                children: jsx("svg", {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  strokeWidth: 1.5,
-                  stroke: "currentColor",
-                  className: "h-6 w-6",
-                  children: jsx("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
-                  })
-                })
-              }), jsxs("div", {
-                children: [jsx("h3", {
-                  className: "text-xl font-semibold text-foreground group-hover:text-primary transition-colors",
-                  children: "Join Our Community"
-                }), jsx("p", {
-                  className: "mt-1 text-sm text-muted-foreground",
-                  children: "Connect with other users and share your experiences"
-                })]
-              })]
-            }), jsxs("a", {
-              href: "#",
-              className: "inline-flex items-center gap-2 text-sm font-medium text-primary/80 hover:text-primary transition-colors",
-              children: ["Explore ", jsx("span", {
-                className: "transition-transform group-hover:translate-x-1",
-                children: "\u2192"
+              className: "mx-auto mt-3 max-w-md text-base text-white/70",
+              children: "Join thousands of teams building with Yantra AI employees."
+            }), jsxs("div", {
+              className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row",
+              children: [jsx(Link, {
+                to: "/help-center",
+                className: "inline-flex items-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-gray-900 shadow-lg transition-all hover:-translate-y-0.5 hover:shadow-xl",
+                children: "Explore Help Center"
+              }), jsx("a", {
+                href: "#",
+                className: "inline-flex items-center gap-2 rounded-xl border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-all hover:-translate-y-0.5 hover:bg-white/20",
+                children: "Contact Sales"
               })]
             })]
           })]
-        })]
+        })
       })
     })]
   });