@adminide-stack/clock-tik-browser 12.0.18-alpha.2 → 12.0.18-alpha.5

package/lib/pages/GetStarted/index.js

@@ -1,4 +1,266 @@
-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';import {Button}from'@admin-layout/tailwind-ui/shardui/button.js';import {ExampleCard}from'../../components/ExampleCard.js';import {UseCaseCard}from'../../components/UseCaseCard.js';import {ProTipCard}from'../../components/ProTipCard.js';import {ResourceCard}from'../../components/ResourceCard.js';// SVG Icon Components
+const SearchIcon = () => 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"
+  })
+});
+const BookIcon = () => 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"
+  })
+});
+const CodeIcon = () => 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: "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"
+  })
+});
+const QuestionIcon = () => 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"
+  })
+});
+const DatabaseIcon = () => 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 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"
+  })
+});
+const DocumentIcon = () => 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"
+  })
+});
+const WindowIcon = () => 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"
+  })
+});
+const GraduationIcon = () => 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"
+  })
+});
+const BriefcaseIcon = () => 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"
+  })
+});
+const UserIcon = () => 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"
+  })
+});
+const GridIcon = () => 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"
+  })
+});
+const LockIcon = () => 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"
+  })
+});
+const CommunityIcon = () => 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"
+  })
+});
+const GetStartedPage = () => {
+  // Data arrays - defined inside component to allow JSX
+  const exampleCards = [{
+    icon: SearchIcon,
+    title: '"I need a quick healthy recipe"',
+    description: 'Clockbook can find and provide you with recipes that are quick to make, use healthy ingredients, and suit your taste preferences.'
+  }, {
+    icon: BookIcon,
+    title: '"Shopping advice for a new pair of running headphones"',
+    description: "Clockbook's curated insights will get you specific, informed recommendations with data from reviews, forums, and reliable sources."
+  }, {
+    icon: CodeIcon,
+    title: '"Want to learn Python, but not sure where to begin?"',
+    description: 'Clockbook is the perfect helper - just a few quick prompts using the interactive panel and it will create a personalized learning plan.'
+  }];
+  const useCases = [{
+    icon: QuestionIcon,
+    title: 'Answering questions',
+    description: 'When faced with tough questions, Clockbook goes beyond normal search engines to provide answers from reliable sources, synthesizing information with citations to help you better understand complex topics.',
+    features: ['Get reliable information with proper citations', 'Find answers to specific, complex questions quickly'],
+    iconColor: 'from-blue-100 to-blue-200 text-blue-600'
+  }, {
+    icon: BookIcon,
+    title: 'Exploring topics in depth',
+    description: "Clockbook'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.",
+    linkText: 'Learn More',
+    linkHref: '#',
+    iconColor: 'from-purple-100 to-purple-200 text-purple-600'
+  }, {
+    icon: DatabaseIcon,
+    title: 'Organizing your Library',
+    description: 'Create your Threads in Clockbook to collect related topics, build collections and easily access content whenever you need it.',
+    features: ['Save important information for quick reference', 'Organize research by topics and subtopics'],
+    iconColor: 'from-green-100 to-green-200 text-green-600'
+  }, {
+    icon: DocumentIcon,
+    title: 'Interacting with your data',
+    description: 'Ask questions about your files like PDFs and CSVs. Clockbook can process the content, understand its structure, and provide insights based on your specific queries.',
+    features: ['Extract insights from complex documents', 'Analyze data without programming knowledge'],
+    iconColor: 'from-orange-100 to-orange-200 text-orange-600'
+  }];
+  const proSearchExamples = [{
+    icon: WindowIcon,
+    title: 'Travel Planning',
+    description: '"I\'m planning to take three days in Kyoto - what itinerary would you recommend?"'
+  }, {
+    icon: GraduationIcon,
+    title: 'Academic Research',
+    description: '"Find recent studies on solar panel recycling and specifically how recycling has improved."'
+  }, {
+    icon: BriefcaseIcon,
+    title: 'Professional Research',
+    description: 'Pro Search delivers the data you need to make informed business decisions with reliable sources.'
+  }, {
+    icon: UserIcon,
+    title: 'Idea Briefings',
+    description: 'Pro Search compiles deep from multiple angles, giving you a balanced view of current events.'
+  }];
+  const proTips = [{
+    icon: GridIcon,
+    title: 'Smart File Organization',
+    description: "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.",
+    linkText: 'Learn more',
+    linkHref: '#',
+    iconColor: 'from-emerald-100 to-emerald-200 text-emerald-600'
+  }, {
+    icon: UserIcon,
+    title: 'Personalize Your Experience',
+    description: 'Adjust settings like language, content format, and tone to customize your results. Creating a profile helps us deliver more personalized experiences.',
+    linkText: 'Learn more',
+    linkHref: '#',
+    iconColor: 'from-violet-100 to-violet-200 text-violet-600'
+  }, {
+    icon: LockIcon,
+    title: 'Privacy & Collaboration',
+    description: 'By default, your Threads and Spaces are private. You can decide to share with others using our collaboration features and sharing settings.',
+    linkText: 'Learn more',
+    linkHref: '#',
+    iconColor: 'from-rose-100 to-rose-200 text-rose-600'
+  }];
+  const resources = [{
+    icon: QuestionIcon,
+    title: 'Frequently Asked Questions',
+    description: 'Get answers to common questions and troubleshooting tips',
+    linkText: 'View more',
+    linkHref: '/help-center'
+  }, {
+    icon: CommunityIcon,
+    title: 'Join Our Community',
+    description: 'Connect with other users and share your experiences',
+    linkText: 'Explore',
+    linkHref: '/help-center'
+  }];
   return jsxs("div", {
     className: "min-h-screen bg-background",
     children: [jsx("section", {
@@ -17,13 +279,19 @@ import {jsxs,jsx}from'react/jsx-runtime';import {Button}from'@admin-layout/tailw
               children: "Everything you need to know to unlock the power of Clockbook 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: [jsx(Link, {
+                to: "/help-center",
+                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(Link, {
+                to: "/demo",
+                children: jsx(Button, {
+                  variant: "outline",
+                  className: "border-white text-foreground hover:bg-primary/10 px-8 py-3 text-base font-medium",
+                  children: "Watch Demo"
+                })
               })]
             })]
           }), jsx("div", {
@@ -77,120 +345,16 @@ import {jsxs,jsx}from'react/jsx-runtime';import {Button}from'@admin-layout/tailw
             className: "mb-8 text-2xl font-semibold text-foreground",
             children: "See Clockbook in Action"
           })
-        }), jsxs("div", {
+        }), jsx("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",
-            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: "Clockbook 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"
-                  })]
-                })
-              })]
-            })]
-          }), 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: "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"
-                })
-              })
-            }), 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: "Clockbook'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"
-                  })]
-                })
-              })]
-            })]
-          }), 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: "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"
-                })
-              })
-            }), 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: "Clockbook 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"
-                  })]
-                })
-              })]
-            })]
-          })]
+          children: exampleCards.map((card, index) => {
+            const IconComponent = card.icon;
+            return jsx(ExampleCard, {
+              icon: jsx(IconComponent, {}),
+              title: card.title,
+              description: card.description
+            }, index);
+          })
         })]
       })]
     }), jsx("section", {
@@ -206,170 +370,38 @@ import {jsxs,jsx}from'react/jsx-runtime';import {Button}from'@admin-layout/tailw
             className: "mx-auto max-w-3xl text-xl text-muted-foreground",
             children: "Discover the powerful ways Clockbook can transform your workflow and enhance your productivity"
           })]
-        }), jsxs("div", {
+        }), jsx("div", {
           className: "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",
-              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, Clockbook 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: "Clockbook'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"
-              })]
-            })]
-          })]
-        }), jsxs("div", {
+          children: useCases.slice(0, 2).map((useCase, index) => {
+            const IconComponent = useCase.icon;
+            return jsx(UseCaseCard, {
+              icon: jsx(IconComponent, {}),
+              title: useCase.title,
+              description: useCase.description,
+              features: useCase.features,
+              linkText: useCase.linkText,
+              linkHref: useCase.linkHref,
+              iconColor: useCase.iconColor
+            }, index);
+          })
+        }), jsx("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",
-              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",
-                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 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 Clockbook 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"
-                  })
-                })
-              }), 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. Clockbook 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"]
-              })]
-            })]
-          })]
+          children: useCases.slice(2).map((useCase, index) => {
+            const IconComponent = useCase.icon;
+            return jsx(UseCaseCard, {
+              icon: jsx(IconComponent, {}),
+              title: useCase.title,
+              description: useCase.description,
+              features: useCase.features,
+              linkText: useCase.linkText,
+              linkHref: useCase.linkHref,
+              iconColor: useCase.iconColor
+            }, index + 2);
+          })
         })]
       })
     }), jsx("section", {
-      className: "relative py-20",
+      className: "relative py-20 bg-gradient-to-br from-muted/50 to-primary/5 py-20",
       children: jsxs("div", {
         className: "container mx-auto px-16",
         children: [jsxs("div", {
@@ -384,7 +416,7 @@ import {jsxs,jsx}from'react/jsx-runtime';import {Button}from'@admin-layout/tailw
         }), 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",
+            className: "rounded-xl bg-background shadow-md p-8",
             children: [jsx("h3", {
               className: "mb-6 text-2xl font-semibold text-foreground",
               children: "Quick Search vs. Pro Search"
@@ -393,7 +425,7 @@ import {jsxs,jsx}from'react/jsx-runtime';import {Button}from'@admin-layout/tailw
               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",
+            className: "rounded-xl bg-background shadow-md p-8",
             children: [jsx("h3", {
               className: "mb-6 text-2xl font-semibold text-foreground",
               children: "Why would I use it?"
@@ -408,157 +440,16 @@ import {jsxs,jsx}from'react/jsx-runtime';import {Button}from'@admin-layout/tailw
             className: "mb-8 text-2xl font-semibold text-foreground",
             children: "Pro Search Examples"
           })
-        }), jsxs("div", {
+        }), jsx("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",
-            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"
-                  })]
-                })
-              })]
-            })]
-          }), 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: "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"
-                })
-              })
-            }), 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"
-              }), 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"
-                  })]
-                })
-              })]
-            })]
-          })]
+          children: proSearchExamples.map((example, index) => {
+            const IconComponent = example.icon;
+            return jsx(ExampleCard, {
+              icon: jsx(IconComponent, {}),
+              title: example.title,
+              description: example.description
+            }, index);
+          })
         })]
       })
     }), jsx("section", {
@@ -574,111 +465,21 @@ import {jsxs,jsx}from'react/jsx-runtime';import {Button}from'@admin-layout/tailw
             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 Clockbook"
           })]
-        }), jsxs("div", {
+        }), jsx("div", {
           className: "grid gap-8 md:grid-cols-2 lg:grid-cols-3",
-          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"
-              })]
-            })]
-          }), 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"
-              })]
-            }), 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"
-              })]
-            })]
-          })]
+          children: proTips.map((tip, index) => {
+            const IconComponent = tip.icon;
+            return jsx(ProTipCard, {
+              icon: jsx("div", {
+                className: `flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br ${tip.iconColor}`,
+                children: jsx(IconComponent, {})
+              }),
+              title: tip.title,
+              description: tip.description,
+              linkText: tip.linkText,
+              linkHref: tip.linkHref
+            }, index);
+          })
         })]
       })
     }), jsx("section", {
@@ -694,81 +495,18 @@ import {jsxs,jsx}from'react/jsx-runtime';import {Button}from'@admin-layout/tailw
             className: "mx-auto max-w-3xl text-xl text-muted-foreground",
             children: "Continue your journey with these helpful resources and community connections"
           })]
-        }), jsxs("div", {
+        }), jsx("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"
-              })]
-            })]
-          })]
+          children: resources.map((resource, index) => {
+            const IconComponent = resource.icon;
+            return jsx(ResourceCard, {
+              icon: jsx(IconComponent, {}),
+              title: resource.title,
+              description: resource.description,
+              linkText: resource.linkText,
+              linkHref: resource.linkHref
+            }, index);
+          })
         })]
       })
     })]