style(web): update HomePage icons and button styles

Author: leonardcser

apps/web/src/pages/home-page.tsx

@@ -1,16 +1,14 @@
 import {
+  ArrowDown,
   ArrowRight,
-  Cloud,
+  ArrowUp,
   Cpu,
   Database,
-  GitFork,
-  Layers,
-  Palette,
+  Github,
   PlayCircle,
   Rocket,
   Share2,
   Workflow,
-  Zap,
 } from "lucide-react";
 import { Link, Navigate } from "react-router";
 
@@ -30,58 +28,43 @@ export function HomePage() {
 
   const features = [
     {
-      icon: (
-        <Workflow className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />
-      ),
+      icon: <Workflow className="h-8 w-8 text-rose-600 dark:text-rose-400" />,
       title: "Visual Workflow Editor",
       description:
         "A drag-and-drop interface so easy, even your cat could automate your chores. (Results may vary.)",
     },
     {
-      icon: <Cpu className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />,
+      icon: <Cpu className="h-8 w-8 text-rose-600 dark:text-rose-400" />,
       title: "AI-Powered Nodes",
       description:
         "Jump on the AI bandwagon: text summarization, image analysis, and more, all without reading a single research paper.",
     },
     {
-      icon: <Share2 className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />,
+      icon: <Share2 className="h-8 w-8 text-rose-600 dark:text-rose-400" />,
       title: "Serverless Execution",
       description:
         "Run workflows on Cloudflare's edge, where servers are just a rumor. Deploy, forget, and hope for the best.",
     },
     {
-      icon: (
-        <PlayCircle className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />
-      ),
+      icon: <PlayCircle className="h-8 w-8 text-rose-600 dark:text-rose-400" />,
       title: "Real-time Monitoring",
       description:
         "Watch your workflows succeed, fail, or do something in between—all in real time, for your viewing pleasure.",
     },
     {
-      icon: (
-        <Database className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />
-      ),
+      icon: <Database className="h-8 w-8 text-rose-600 dark:text-rose-400" />,
       title: "Persistent Storage",
       description:
         "Store your workflows with Cloudflare D1. Because sometimes, you actually want your data to stick around.",
     },
     {
-      icon: <Rocket className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />,
+      icon: <Rocket className="h-8 w-8 text-rose-600 dark:text-rose-400" />,
       title: "Modern & Performant",
       description:
         "Built with all the latest buzzwords: React, TailwindCSS, and Shadcn UI. Fast, beautiful, and probably over-engineered.",
     },
   ];
 
-  const techStack = [
-    { name: "React", icon: <Layers className="h-6 w-6" /> },
-    { name: "TypeScript", icon: <Zap className="h-6 w-6" /> },
-    { name: "TailwindCSS", icon: <Palette className="h-6 w-6" /> },
-    { name: "Shadcn UI", icon: <Layers className="h-6 w-6" /> },
-    { name: "React Flow", icon: <GitFork className="h-6 w-6" /> },
-    { name: "Cloudflare", icon: <Cloud className="h-6 w-6" /> },
-  ];
-
   return (
     <div className="overflow-x-hidden">
       {/* <HomeHeader /> */}
@@ -93,12 +76,12 @@ export function HomePage() {
             <img
               src="/logo.svg"
               alt="dafthunk"
-              className="h-16 dark:invert mb-6"
+              className="h-12 sm:h-16 dark:invert mb-6"
             />
             <div className="max-w-prose mx-auto">
               <div className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-4 relative text-center">
                 <h1 className="relative">
-                  <span className="bg-gradient-to-r from-indigo-600 to-purple-700 dark:from-indigo-500 dark:to-purple-400 bg-clip-text text-transparent">
+                  <span className="bg-gradient-to-r from-rose-600 to-purple-700 dark:from-rose-500 dark:to-purple-400 bg-clip-text text-transparent">
                     Workflows
                   </span>{" "}
                   no one asked for.
@@ -109,14 +92,32 @@ export function HomePage() {
                 automate automating.
               </p>
             </div>
-            <div className="flex flex-col sm:flex-row justify-center w-full items-center gap-3 sm:gap-4 mb-10">
+            <div className="flex flex-col sm:flex-row justify-center w-full items-center gap-2 sm:gap-3 mb-10">
               <Button
                 asChild
                 size="default"
                 className="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-medium w-full sm:w-auto"
               >
                 <Link to="/workflows/playground">
-                  Start Building <ArrowRight className="ms-1 size-4" />
+                  Break it <ArrowUp className="ml-1 h-4 w-4" />
+                </Link>
+              </Button>
+              <Button
+                asChild
+                size="default"
+                className="bg-gradient-to-b sm:bg-gradient-to-r from-indigo-600 to-rose-600 hover:from-indigo-700 hover:to-rose-700 dark:bg-gradient-to-r dark:from-indigo-500 dark:to-rose-500 dark:hover:from-indigo-600 dark:hover:to-rose-600 text-white font-medium w-full sm:w-auto"
+              >
+                <Link to="/workflows/playground">
+                  Fix it <ArrowDown className="ml-1 h-4 w-4" />
+                </Link>
+              </Button>
+              <Button
+                asChild
+                size="default"
+                className="bg-rose-600 hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-600 text-white font-medium w-full sm:w-auto"
+              >
+                <Link to="/workflows/playground">
+                  Prompt it <ArrowRight className="ml-1 h-4 w-4" />
                 </Link>
               </Button>
             </div>
@@ -144,7 +145,7 @@ export function HomePage() {
               {features.map((feature) => (
                 <Card key={feature.title} className="h-full">
                   <CardHeader className="flex flex-row items-start gap-3 p-5">
-                    <div className="mt-1 text-indigo-600 dark:text-indigo-400">
+                    <div className="mt-1 text-rose-600 dark:text-rose-400">
                       {feature.icon}
                     </div>
                     <div>
@@ -168,43 +169,38 @@ export function HomePage() {
             <span className="text-indigo-600 dark:text-indigo-400 font-medium uppercase tracking-wider text-xs">
               Crafted in Public (So You Can Witness the Chaos)
             </span>
-            <h2 className="text-2xl md:text-3xl lg:text-4xl font-semibold tracking-tight mt-2 mb-10">
+            <h2 className="text-2xl md:text-3xl lg:text-4xl font-semibold tracking-tight mt-1 mb-2">
               Built with Open Source Technologies
             </h2>
-            <div className="flex flex-wrap justify-center items-center gap-x-6 gap-y-8 md:gap-x-8 lg:gap-x-10 max-w-3xl mx-auto">
-              {techStack.map((tech) => (
-                <div
-                  key={tech.name}
-                  className="group flex flex-col items-center gap-2 text-muted-foreground transition-colors"
-                >
-                  <div className="p-4 bg-neutral-200/75 dark:bg-neutral-800/75 rounded-full border-2 border-transparent group-hover:border-indigo-600 dark:group-hover:border-indigo-400 transition-colors">
-                    <div className="group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
-                      {tech.icon}
-                    </div>
-                  </div>
-                  <span className="text-sm font-medium group-hover:text-indigo-600 dark:group-hover:text-indigo-400">
-                    {tech.name}
-                  </span>
-                </div>
-              ))}
-            </div>
+            <p className="text-muted-foreground mb-6">
+              Join the community and help us build the future of workflows.
+            </p>
+            <Button
+              asChild
+              size="default"
+              className="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-medium"
+            >
+              <Link to="https://github.com/dafthunk-com/dafthunk">
+                Contribute to the Project <Github className="ml-1 h-4 w-4" />
+              </Link>
+            </Button>
           </div>
         </section>
 
         {/* Call to Action Section */}
         <section className="relative py-16 md:py-20">
           {/* Blurred balls background */}
           <div className="container mx-auto text-center px-6 max-w-prose">
-            <h2 className="text-2xl sm:text-3xl md:text-4xl font-semibold tracking-tight mb-4 text-indigo-600 dark:text-indigo-400">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-semibold tracking-tight mb-4 text-rose-600 dark:text-rose-400">
               Alright, Enough Procrastinating
             </h2>
-            <p className="text-base sm:text-lg text-muted-foreground mb-8">
+            <p className="text-base sm:text-lg text-muted-foreground mb-6">
               Start solving imaginary problems, and break the playground.
             </p>
             <Button
               asChild
               size="default"
-              className="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-medium"
+              className="bg-rose-600 hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-600 text-white font-medium"
             >
               <Link to="/workflows/playground">
                 Start Building Now <ArrowRight className="ml-2 h-4 w-4" />