feat: update color palette, refine UI component borders, and add background patterns and navigation links

Author: AnoyRC

app/globals.css

@@ -25,47 +25,47 @@
 }
 
 :root {
-  --primary: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.967 0.001 286.375);
+  --primary: oklch(0.205 0 0);
+  --secondary: oklch(0.97 0 0);
   --text: #000000;
   --dark: #1d1f26;
   --radius: 0.625rem;
-  --background:#edf0f4;
-  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.145 0 0);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
   --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-  --destructive-foreground: oklch(0.505 0.213 27.518);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --destructive-foreground: var(--color-red-700);
   --info: oklch(0.623 0.214 259.815);
   --info-foreground: oklch(0.488 0.243 264.376);
   --success: oklch(0.696 0.17 162.48);
   --success-foreground: oklch(0.508 0.118 165.612);
   --warning: oklch(0.769 0.188 70.08);
   --warning-foreground: oklch(0.555 0.163 48.998);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
 }
 
 @theme {
@@ -83,6 +83,13 @@
     color: var(--text);
     background: var(--background);
     font-family: Arial, Helvetica, sans-serif;
+    @apply bg-background text-foreground;
+  }
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    @apply font-sans;
   }
 }
 
@@ -192,41 +199,46 @@
   --color-success: var(--success);
   --color-info-foreground: var(--info-foreground);
   --color-info: var(--info);
+  --font-heading: var(--font-sans);
+  --font-sans: var(--font-sans);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
+  --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
+  --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
+  --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-  --destructive-foreground: oklch(0.704 0.191 22.216);
+  --sidebar-ring: oklch(0.556 0 0);
+  --destructive-foreground: var(--color-red-400);
   --info: oklch(0.623 0.214 259.815);
   --info-foreground: oklch(0.707 0.165 254.624);
   --success: oklch(0.696 0.17 162.48);

components/Reviews.js

@@ -405,7 +405,7 @@ export default function Reviews() {
       setTimeout(() => {
         setDisplayedReviews((prev) => {
           const available = REVIEWS.filter(
-            (r) => !prev.some((p) => p.title === r.title)
+            (r) => !prev.some((p) => p.title === r.title),
           );
 
           if (available.length === 0) return prev;
@@ -453,7 +453,7 @@ export default function Reviews() {
               }}
             >
               <blockquote className="h-full">
-                <div className="rounded-xl shadow-md bg-secondary flex flex-col justify-between h-full gap-4 p-6">
+                <div className="rounded-xl bg-secondary/70 border border-black/10 shadow-md flex flex-col justify-between h-full gap-4 p-6">
                   <div>
                     <h3 className="text-lg font-semibold mb-2">{item.title}</h3>
 

components/flowContainer/ChatbotNode.js

@@ -7,7 +7,7 @@ export default function ChatbotNode() {
   return (
     <div className="w-64 rounded-lg">
       <Card
-        className={`w-full relative before:rounded-sm rounded-lg py-4 pb-2 border-black/15 border bg-white`}
+        className={`w-full relative before:rounded-sm rounded-lg py-4 pb-2 border-black/30 border bg-white shadow-lg`}
       >
         <CardHeader className="flex flex-row items-center justify-between space-y-0 border-b border-black/15 border-dashed px-4 [.border-b]:pb-4">
           <CardTitle className="text-sm font-medium ">

components/flowContainer/ChatbotResponse.js

@@ -7,7 +7,7 @@ export default function ChatbotResponse() {
   return (
     <div className="w-64 rounded-lg">
       <Card
-        className={`w-full relative before:rounded-sm rounded-lg py-4 pb-2 bg-white border-black/15 border`}
+        className={`w-full relative before:rounded-sm rounded-lg py-4 pb-2 bg-white border-black/30 border shadow-lg`}
       >
         <CardHeader className="flex flex-row items-center justify-between space-y-0 border-b border-black/15 border-dashed px-4 [.border-b]:pb-4">
           <CardTitle className="text-sm font-medium">

components/flowContainer/KbNode.js

@@ -8,7 +8,7 @@ export default function KbNode() {
   return (
     <div className="w-64 rounded-lg">
       <Card
-        className={`w-full border-black/50 relative rounded-lg before:rounded-lg py-4 pb-2 bg-white border-black/15 border`}
+        className={`w-full border-black/50 relative rounded-lg before:rounded-lg py-4 pb-2 bg-white border-black/30 border shadow-lg`}
       >
         <CardHeader className="flex flex-row items-center justify-between space-y-0 border-b border-black/15 border-dashed px-4 [.border-b]:pb-4">
           <CardTitle className="text-sm font-medium">

components/flowContainer/OpenAINode.js

@@ -10,7 +10,7 @@ export default function OpenAINode() {
   return (
     <div className="w-64 rounded-lg">
       <Card
-        className={`w-full relative rounded-lg before:rounded-lg py-4 pb-2 bg-white border-black/15 border`}
+        className={`w-full relative rounded-lg before:rounded-lg py-4 pb-2 bg-white border-black/30 border shadow-lg`}
       >
         <CardHeader className="flex flex-row items-center justify-between space-y-0 border-b border-black/15 border-dashed px-4 [.border-b]:pb-4">
           <CardTitle className="text-sm font-medium">

components/home/features/FeatureCard.js

@@ -1,6 +1,6 @@
 const FeatureCard = ({ icon, title, description }) => {
   return (
-    <div className="rounded-xl bg-secondary p-6 shadow-md hover:shadow-md transition-shadow z-10">
+    <div className="rounded-xl bg-secondary/70 border border-black/10 p-6 shadow-md hover:shadow-md transition-shadow z-10">
       <div className="h-16 w-16 bg-background rounded-sm shadow-md flex items-center justify-center text-primary mb-4">
         {icon}
       </div>

components/home/flow/Editor.js

@@ -10,6 +10,7 @@ export default function Editor() {
       className="border-b border-dashed border-black/50 hidden sm:block"
     >
       <Container className="pt-20 pb-5 px-0!">
+        <div className="absolute inset-0 -z-10 h-full w-full bg-[radial-gradient(#DFE0E8_1.2px,transparent_1px)] bg-[size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_40%,transparent_100%)]"></div>
         <div className="text-center space-y-2">
           <Badge className="bg-secondary border border-black/50 text-black/50 px-3 py-1 rounded-xl">
             How it Works

components/home/header/Header.js

@@ -9,6 +9,7 @@ import { useRandomAnimation } from "@/hooks/useRandomAnimation";
 import BagsBadge from "./BagsBadge";
 import { Button } from "@/components/ui/button";
 import NodeVisualizer from "@/components/NodeVisualizer";
+import Link from "next/link";
 
 const Header = () => {
   const clockAnimate = useRandomAnimation(500);
@@ -20,8 +21,21 @@ const Header = () => {
 
   return (
     <section className="border-b border-dashed border-black/50 text-black">
-      <Container className="flex gap-10 pt-12 flex-col pb-12 sm:pb-20 justify-center px-0!">
-        <div className="mt-5 xl:mt-20 flex flex-col items-center text-center gap-6 md:gap-8">
+      <Container className="flex gap-10 pt-0 flex-col pb-12 sm:pb-20 justify-center px-0!">
+        <div className="absolute inset-0 -z-10 h-full w-full bg-[radial-gradient(#DFE0E8_1.2px,transparent_1px)] bg-[size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_40%,transparent_100%)]"></div>
+        <div className="mt-10 xl:mt-20 flex flex-col items-center text-center gap-6 md:gap-8">
+          <Link
+            href="https://affiliate.deforge.io"
+            target="_blank"
+            className="text-xs font-medium p-1 border border-black/30 shadow-md bg-secondary/70 rounded-full px-3 flex items-center gap-2"
+            aria-hidden
+          >
+            <div className="w-2 h-2 rounded-full bg-green-500">
+              <div className="w-2 h-2 rounded-full bg-green-500 animate-ping"></div>
+            </div>
+            Refer us and earn rewards.
+          </Link>
+
           <div className="flex gap-4 items-center sm:flex-row flex-col">
             <ProductHuntBadge />
             <BagsBadge />

components/home/navbar/Navbar.js

@@ -17,6 +17,11 @@ const navLinks = [
     label: "Agents",
     isExternal: false,
   },
+  {
+    href: "https://runanvil.com",
+    label: "Anvil",
+    isExternal: true,
+  },
   {
     href: "https://forum.deforge.io",
     label: "Forum",