From 7a55053941a60b1b7efdddd4bef381354375c95b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Le=C3=B3n?= <carlos.leon@meru.com>
Date: Sat, 19 Oct 2024 02:10:03 -0600
Subject: [PATCH] build: Redesign home page

---
 website/package-lock.json              |   9 ++
 website/package.json                   |   3 +-
 website/src/components/Card.astro      | 144 +++++--------------------
 website/src/components/SiteTitle.astro |   4 +-
 website/src/content/docs/index.mdx     | 110 ++++++++++---------
 website/src/styles/custom.css          |  62 +++++++----
 website/tailwind.config.mjs            |  20 ++--
 7 files changed, 151 insertions(+), 201 deletions(-)

diff --git a/website/package-lock.json b/website/package-lock.json
index fd556bdf..304a1946 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -15,6 +15,7 @@
         "@astrojs/tailwind": "^5.1.0",
         "@expressive-code/plugin-collapsible-sections": "^0.35.3",
         "@expressive-code/plugin-line-numbers": "^0.35.3",
+        "@iconify-json/mdi": "^1.2.1",
         "@types/alpinejs": "^3.13.10",
         "alpinejs": "^3.13.10",
         "astro": "^4.7.1",
@@ -1181,6 +1182,14 @@
         "@expressive-code/core": "^0.35.3"
       }
     },
+    "node_modules/@iconify-json/mdi": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.1.tgz",
+      "integrity": "sha512-dSkQU78gsZV6Yxnq78+LuX7jzeFC/5NAmz7O3rh558GimGFcwMVY/OtqRowIzjqJBmMmWZft7wkFV4TrwRXjlg==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/tools": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-3.0.7.tgz",
diff --git a/website/package.json b/website/package.json
index 6dd3a5ae..732935bc 100644
--- a/website/package.json
+++ b/website/package.json
@@ -17,6 +17,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "@expressive-code/plugin-collapsible-sections": "^0.35.3",
     "@expressive-code/plugin-line-numbers": "^0.35.3",
+    "@iconify-json/mdi": "^1.2.1",
     "@types/alpinejs": "^3.13.10",
     "alpinejs": "^3.13.10",
     "astro": "^4.7.1",
@@ -31,4 +32,4 @@
     "prettier-plugin-astro": "^0.13.0",
     "sass": "^1.76.0"
   }
-}
\ No newline at end of file
+}
diff --git a/website/src/components/Card.astro b/website/src/components/Card.astro
index 5f9d69f3..cfbc396a 100644
--- a/website/src/components/Card.astro
+++ b/website/src/components/Card.astro
@@ -1,5 +1,5 @@
 ---
-import { Icon } from "@astrojs/starlight/components";
+import { Icon } from "astro-icon/components";
 
 interface Props {
   icon?: string;
@@ -10,125 +10,33 @@ const { icon, title } = Astro.props;
 ---
 
 <article
-  class="card sl-flex rounded-2xl drop-shadow-[0_0_1px_rgba(49,49,49,0.2)]"
+  class="card group/card sl-flex relative flex flex-col overflow-hidden p-8 rounded-2xl border shadow-lg bg-gradient-to-tr border-accent-700/[.5] shadow-accent-900/[.5] from-accent-950/[.25] to-accent-900/[.25] hover:boder-accent-700 hover:shadow-accent-900 hover:from-950/[0.75] hover:to-accent-900/[0.75] ease-in-out duration-300"
 >
+  <div class="sl-flex">
+    {
+      icon && (
+        <div class="absolute -top-16 -right-16 z-0 p-8 rounded-full border border-accent-800/[.5] bg-accent-800/[.15] group-hover/card:border-accent-800 group-hover/card:bg-accent-800/[.5] ease-in-out duration-300">
+          <div class="relative p-6 rounded-full border border-accent-700/[.5] bg-accent-700/[.15] group-hover/card:border-accent-700 group-hover/card:bg-accent-700/[.5] ease-in-out duration-300">
+            <div class="icon relative flex items-center justify-center w-14 h-14 rounded-full border border-accent-600/[.5] bg-accent-600/[.15] group-hover/card:border-accent-600 group-hover/card:bg-accent-600/[.5] ease-in-out duration-300">
+              <Icon
+                name={icon as any}
+                size={32}
+                class="text-accent-300 group-hover/card:text-accent-200 ease-in-out duration-300"
+              />
+            </div>
+          </div>
+        </div>
+      )
+    }
+    <p
+      class="text-xl font-semibold text-accent-300 group-hover/card:text-accent-200 !m-0 z-10 sm:text-2xl md:text-3xl md:mb-3 ease-in-out duration-300"
+      set:html={title}
+    />
+  </div>
+
   <div
-    class="card-inner flex flex-col relative w-full h-full overflow-hidden rounded-2xl transition duration-300"
+    class="text-md text-gray-200 group-hover/card:text-gray-100 sm:text-lg z-10"
   >
-    <p class="title sl-flex">
-      {icon && <Icon name={icon as any} class="icon" size="1.333em" />}
-      <span set:html={title} />
-    </p>
-    <div class="body"><slot /></div>
+    <slot />
   </div>
 </article>
-
-<style>
-  .card {
-    --sl-card-border: var(--sl-color-accent-high);
-    --sl-card-bg: var(--sl-color-accent);
-    position: relative;
-    box-sizing: border-box;
-  }
-  /* .card:nth-child(4n + 1) {
-    --sl-card-border: var(--sl-color-orange);
-    --sl-card-bg: var(--sl-color-orange-low);
-  }
-  .card:nth-child(4n + 3) {
-    --sl-card-border: var(--sl-color-green);
-    --sl-card-bg: var(--sl-color-green-low);
-  }
-  .card:nth-child(4n + 4) {
-    --sl-card-border: var(--sl-color-red);
-    --sl-card-bg: var(--sl-color-red-low);
-  }
-  .card:nth-child(4n + 5) {
-    --sl-card-border: var(--sl-color-blue);
-    --sl-card-bg: var(--sl-color-blue-low);
-  } */
-
-  .card .card-inner {
-    position: relative;
-    padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
-    gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
-    box-sizing: border-box;
-
-    --tw-gradient-from: hsl(from var(--sl-color-accent-low) h s l / 100%)
-      var(--tw-gradient-from-position);
-    --tw-gradient-to: transparent var(--tw-gradient-to-position);
-
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-    background-image: linear-gradient(to left bottom, var(--tw-gradient-stops)),
-      linear-gradient(
-        to left bottom,
-        hsl(from var(--sl-color-accent-low) h s l / 100%),
-        hsl(from var(--sl-color-accent-low) h s l / 15%)
-      );
-  }
-
-  .card:hover .card-inner {
-    background-image: linear-gradient(to left bottom, var(--tw-gradient-stops));
-  }
-
-  .card::before {
-    z-index: -1;
-    content: "";
-    inset: -1px;
-    opacity: 1;
-    pointer-events: none;
-    position: absolute;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    border-radius: 1rem;
-
-    transition-property: background-color;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 0.3s;
-    animation-duration: 0.3s;
-
-    background-image: linear-gradient(
-      45deg,
-      hsl(from var(--sl-color-accent) h s l / 50%),
-      hsl(from var(--sl-color-accent) h s l / 50%)
-    );
-  }
-
-  .card:hover::before {
-    opacity: 1;
-
-    background-image: radial-gradient(
-        400px circle at var(--mouse-x) var(--mouse-y),
-        var(--sl-color-accent) 0%,
-        transparent 100%
-      ),
-      linear-gradient(
-        45deg,
-        hsl(from var(--sl-color-accent) h s l / 40%),
-        hsl(from var(--sl-color-accent) h s l / 40%)
-      );
-  }
-
-  .title {
-    font-weight: 600;
-    font-size: var(--sl-text-h4);
-    color: var(--sl-color-white);
-    line-height: var(--sl-line-height-headings);
-    gap: 1rem;
-    align-items: center;
-  }
-  .card .icon {
-    border: 1px solid var(--sl-card-border);
-    background-color: var(--sl-card-bg);
-    padding: 0.2em;
-    border-radius: 0.25rem;
-  }
-  .card .body {
-    margin: 0;
-    font-size: clamp(
-      var(--sl-text-sm),
-      calc(0.5rem + 1vw),
-      var(--sl-text-body)
-    );
-  }
-</style>
diff --git a/website/src/components/SiteTitle.astro b/website/src/components/SiteTitle.astro
index b2d94da5..31f2e2c9 100644
--- a/website/src/components/SiteTitle.astro
+++ b/website/src/components/SiteTitle.astro
@@ -6,7 +6,7 @@ import type { Props } from "@astrojs/starlight/props";
 const href = Astro.props.locale ?? "/";
 ---
 
-<a {href} class="site-title sl-flex">
+<a {href} class="site-title sl-flex gap-2">
   {
     config.logo && logos.dark && (
       <>
@@ -32,7 +32,7 @@ const href = Astro.props.locale ?? "/";
   }
   <span
     class:list={{
-      "bg-gradient-to-b from-accent-400 to-accent-200 bg-clip-text text-transparent": true,
+      "bg-gradient-to-b from-accent-500 to-accent-200 bg-clip-text text-transparent": true,
       "sr-only": config.logo?.replacesTitle,
     }}
   >
diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx
index b0b520a2..85b525b8 100644
--- a/website/src/content/docs/index.mdx
+++ b/website/src/content/docs/index.mdx
@@ -1,27 +1,29 @@
 ---
 title: Reactter
-description: A light, powerful and quick Reactive State Management, Dependency Injection and Event handler.
+description: A light, powerful and quick Reactive State Management, Dependency Injection and Event Handler for Dart/Flutter.
 template: splash
 hero:
-  title: <h1 class="text-5xl bg-gradient-to-b from-accent-400 to-accent-300 bg-clip-text text-transparent">Reactter</h1>
+  title: <h1 class="text-5xl sm:text-6xl bg-gradient-to-b from-accent-600 to-accent-300 bg-clip-text text-transparent">Reactter</h1>
   tagline:
-    A
-    <span class="text-lg font-bold bg-gradient-to-b from-slate-100 to-slate-400 bg-clip-text text-transparent">lightweight</span>,
-    <span class="text-lg font-bold bg-gradient-to-b from-slate-100 to-slate-400 bg-clip-text text-transparent">powerful</span>, and
-    <span class="text-lg font-bold bg-gradient-to-b from-slate-100 to-slate-400 bg-clip-text text-transparent">reactive</span>
-    <br />
-    <span class="text-xl font-bold bg-gradient-to-b from-accent-300 to-accent-200 bg-clip-text text-transparent">State Management</span>,
-    <span class="text-xl font-bold bg-gradient-to-b from-accent-300 to-accent-200 bg-clip-text text-transparent">Dependency Injection</span>
-    and
-    <span class="text-xl font-bold bg-gradient-to-b from-accent-300 to-accent-200 bg-clip-text text-transparent">Event handler</span>.
+    <p class="text-xl sm:text-2xl">
+      A
+      <span class="font-bold bg-gradient-to-b from-slate-100 to-slate-400 bg-clip-text text-transparent">lightweight</span>,
+      <span class="font-bold bg-gradient-to-b from-slate-100 to-slate-400 bg-clip-text text-transparent">powerful</span>, and
+      <span class="font-bold bg-gradient-to-b from-slate-100 to-slate-400 bg-clip-text text-transparent">reactive</span>
+    </p>
+    <p class="text-2xl sm:text-3xl">
+      <span class="font-semibold bg-gradient-to-b from-accent-500 to-accent-200 bg-clip-text text-transparent">State Management</span>,
+      <span class="font-semibold bg-gradient-to-b from-accent-500 to-accent-200 bg-clip-text text-transparent">Dependency Injection</span> and
+      <span class="font-semibold bg-gradient-to-b from-accent-500 to-accent-200 bg-clip-text text-transparent">Event Handler</span> for Dart/Flutter.
+    </p>
   image:
     html: <div id="hero_logo"></div>
   actions:
-    - text: Get Started
+    - text: <span class="text-lg sm:text-xl font-medium">Get Started</span>
       link: /reactter/getting_started/
-      icon: right-arrow
+      icon: rocket
       variant: primary
-    - text: Explore on pub.dev
+    - text: <span class="text-lg sm:text-xl">Explore on pub.dev</span>
       link: https://pub.dev/packages/reactter
       icon: external
       attrs:
@@ -30,50 +32,54 @@ hero:
 
 import { CardGrid } from "@astrojs/starlight/components";
 import Card from "@/components/Card.astro";
-import ScriptIndex from "@/components/ScriptIndex.astro";
 
 <div class="flex flex-col items-start justify-start">
   ## Try it
-  Experience the full potential of Reactter by trying it online on <a href="https://zapp.run/pub/flutter_reactter" target="_blank">Zapp</a>.
+  <p class="text-lg sm:text-xl">Experience the full potential of Reactter by trying it online on <a href="https://zapp.run/pub/flutter_reactter" target="_blank">Zapp</a>.</p>
   <iframe
+    class="!hidden sm:!block rounded-2xl w-full !h-[600px] border shadow-2xl border-accent-700/[0.5] shadow-accent-700/[.5] bg-accent-950/[.5] hover:boder-accent-700 hover:shadow-accent-700 hover:bg-accent-950 ease-in-out duration-300"
     src="https://zapp.run/edit/zn9806bin990?theme=dark&lazy=false&file=lib/examples/1_counter/counter_page.dart"
-    class="w-full !h-[600px] border-0 overflow-hidden"
-  ></iframe>
+  />
+  <iframe
+    class="!block sm:!hidden rounded-2xl w-full !h-[600px] border shadow-2xl border-accent-700/[0.5] shadow-accent-700/[.5] bg-accent-950/[.5] hover:boder-accent-700 hover:shadow-accent-700 hover:bg-accent-950 ease-in-out duration-300"
+    src="https://zapp.run/edit/zn9806bin990?theme=dark&lazy=true&file=lib/examples/1_counter/counter_page.dart"
+  />
 </div>
 
 ## Features
+<div>
+  <CardGrid stagger>
+    <Card title="Fine-grained reactivity" icon="mdi:creation">
+      React to changes at the finest level of granularity, providing precise
+      control and responsiveness in your app.
+      Learn more about [Rendering control](/reactter/core_concepts/rendering_control).
+    </Card>
+    <Card title="Lightweight" icon="mdi:telegram">
+      Reactter boasts a minimal footprint, ensuring efficient performance without
+      relying on any external dependencies.
+    </Card>
+    <Card title="Highly reusable" icon="mdi:json">
+      Share states and logic across your app using [Dependency
+      Injection](/reactter/core_concepts/dependency_injection) and [Custom Hooks](/reactter/core_concepts/hooks/#custom-hook).
+    </Card>
+    <Card title="Easy to use" icon="mdi:star">
+      Just a few lines of code to get started. Without code generation or complex
+      configurations.
+    </Card>
+    <Card title="100% Dart" icon="dart">
+      Supports Dart server, Dart JS (HTML), Flutter (Web, Mobile and Desktop),
+      etc. Reactter can be used in any Dart project! Compatible with latest
+      Dart/Flutter versions.
+    </Card>
+    <Card title="Fully testable" icon="mdi:code-tags-check">
+      Test your states and logic easily. Reactter is 100% test coverage.
+      <div class="flex">
+        [![Codecov](https://img.shields.io/codecov/c/github/2devs-team/reactter?logo=codecov)](https://app.codecov.io/gh/2devs-team/reactter)
+      </div>
+    </Card>
+    <Card title="No Boilerplate" icon="mdi:code-tags">
+      Reduce code significantly and simplify your app.
+    </Card>
+  </CardGrid>
+</div>
 
-<CardGrid stagger>
-  <Card title="Fine-grained reactivity" icon="rocket">
-    React to changes at the finest level of granularity, providing precise
-    control and responsiveness in your app.
-    Learn more about [Rendering control](/reactter/core_concepts/rendering_control).
-  </Card>
-  <Card title="Lightweight" icon="telegram">
-    Reactter boasts a minimal footprint, ensuring efficient performance without
-    relying on any external dependencies.
-  </Card>
-  <Card title="No Boilerplate" icon="seti:html">
-    Reduce code significantly and simplify your app.
-  </Card>
-  <Card title="Easy to use" icon="star">
-    Just a few lines of code to get started. Without code generation or complex
-    configurations.
-  </Card>
-  <Card title="Highly reusable" icon="seti:json">
-    Share states and logic across your app using [Dependency
-    Injection](/reactter/core_concepts/dependency_injection) and [Custom Hooks](/reactter/core_concepts/hooks/#custom-hook).
-  </Card>
-  <Card title="100% Dart" icon="seti:dart">
-    Supports Dart server, Dart JS (HTML), Flutter (Web, Mobile and Desktop),
-    etc. Reactter can be used in any Dart project! Compatible with latest
-    Dart/Flutter versions.
-  </Card>
-  <Card title="Fully testable" icon="approve-check">
-    Test your states and logic easily. Reactter is 100% test coverage.
-
-    [![Codecov](https://img.shields.io/codecov/c/github/2devs-team/reactter?logo=codecov)](https://app.codecov.io/gh/2devs-team/reactter)
-  </Card>
-</CardGrid>
-
-<ScriptIndex />
diff --git a/website/src/styles/custom.css b/website/src/styles/custom.css
index 3d1f2347..2f384038 100644
--- a/website/src/styles/custom.css
+++ b/website/src/styles/custom.css
@@ -10,11 +10,25 @@
   --sl-cal-lightness: calc(l - 0.1);
 }
 
+body {
+  background-color: hsl(from var(--sl-color-accent-low) h s 05% / 100%);
+}
+
 [data-has-hero] header {
   background-color: transparent;
-  border-bottom-color: hsl(from var(--sl-color-hairline-shade) h s var(--sl-cal-lightness) / 25%);
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
+  border-bottom: none;
+}
+
+[data-has-hero] header::before {
+  background: radial-gradient(62.87% 100% at 50% 100%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 100%);
+  bottom: 0;
+  content: "";
+  height: 1px;
+  left: 0;
+  position: absolute;
+  width: 100%;
 }
 
 [data-has-hero] header.top {
@@ -47,46 +61,49 @@
 }
 
 [data-has-hero] .page {
-  background: linear-gradient(215deg, var(--sl-color-accent-low), transparent 40%),
-    radial-gradient(var(--sl-color-accent-low), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
-    radial-gradient(var(--sl-color-accent-low), transparent 60%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
+  background: 
+    linear-gradient(215deg, transparent 0%, rgb(from var(--sl-color-accent-low) r g b / 0.5) 45%, rgb(from var(--sl-color-accent-low) r g b / 0.5) 55%,  transparent 100%);
 }
 
 [data-has-hero] .action.primary {
-  @apply ring-1 ring-accent-600/50;
+  @apply ring-1 ring-accent-500/50;
   --sl-color-text-accent: linear-gradient(45deg, var(--sl-color-accent), var(--sl-color-accent-low));
   color: var(--sl-color-white);
 }
 
 [data-has-hero] .action.primary {
   --clr-font-main: hsla(0 0% 20% / 100);
-  --btn-bg-1: rgb(43, 182, 246, 1);
-  --btn-bg-2: rgba(0, 87, 155, 0.25);
-  --btn-bg-color: hsla(360 100% 100% / 1);
-  --radii: 2.5em;
+  --btn-primary-bg-1: var(--sl-color-accent);
+  --btn-primary-bg-2: rgb(from var(--sl-color-accent-low) r g b / 0.75);
+  --btn-primary-bg-color: hsla(360 100% 100% / 1);
+  --btn-primary-border-color: rgb(from var(--sl-color-accent) r g b / 0.75);
+  --btn-primary-shadow-outside-color-1: rgb(from var(--sl-color-accent) r g b / 0.5);
+  --btn-primary-shadow-outside-color-2: rgb(from var(--sl-color-accent) r g b / 0.25);
+  --btn-primary-shadow-inner-color-1: rgb(from var(--sl-color-accent) r g b / 0.5);
+  --btn-primary-shadow-inner-color-2: rgb(from var(--sl-color-accent) r g b / 0.75);
+  --btn-primary-border-radius: 2.5em;
   cursor: pointer;
   padding: 0.9em 1.4em;
   min-width: 120px;
   min-height: 44px;
-  font-size: var(--size, 1rem);
-  font-family: "Segoe UI", system-ui, sans-serif;
-  font-weight: 500;
   transition: 0.8s;
   background-size: 280% auto;
-  background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
+  background-image: linear-gradient(325deg, var(--btn-primary-bg-2) 0%, var(--btn-primary-bg-1) 55%, var(--btn-primary-bg-2) 90%);
   border: none;
-  border-radius: var(--radii);
-  color: var(--btn-bg-color);
-  box-shadow: 0px 0px 20px rgb(43, 182, 246, 0.5), 0px 5px 5px -1px rgba(0, 87, 155, 0.25), inset 4px 4px 8px rgb(83, 197, 248, 0.5), inset -4px -4px 8px rgba(0, 87, 155, 0.35);
+  border-radius: var(--btn-primary-border-radius);
+  color: var(--btn-primary-bg-color);
+  border: 1px solid var(--btn-primary-border-color);
+  box-shadow: 0px 0px 20px var(--btn-primary-shadow-outside-color-1), 0px 5px 5px -1px var(--btn-primary-shadow-outside-color-2), inset 4px 4px 8px var(--btn-primary-shadow-inner-color-1), inset -4px -4px 8px var(--btn-primary-shadow-inner-color-2);
 }
 
 [data-has-hero] .action.primary:hover {
   background-position: right top;
+  box-shadow: 0px 0px 20px var(--btn-primary-shadow-outside-color-1), 0px 5px 5px -1px var(--btn-primary-shadow-outside-color-1), inset 4px 4px 8px var(--btn-primary-shadow-inner-color-1), inset -4px -4px 8px var(--btn-primary-shadow-inner-color-2);
 }
 
 [data-has-hero] .action.primary:is(:focus, :focus-visible, :active) {
   outline: none;
-  box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);
+  box-shadow: 0 0 0 3px var(--btn-primary-shadow-outside-color-2), 0 0 0 6px var(--btn-primary-shadow-outside-color-2);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -95,7 +112,6 @@
   }
 }
 
-
 ol ul:last-child {
   margin-bottom: 1rem;
 }
@@ -140,3 +156,13 @@ ol ul:last-child {
   border-radius: var(--header-border-radius);
   box-shadow: var(--ec-frm-frameBoxShdCssVal);
 }
+
+.card-grid {
+  position: relative;
+}
+
+.card-grid::before {
+  position: absolute;
+  content: "";
+  background: radial-gradient(var(--sl-color-accent), transparent 50%);
+}
\ No newline at end of file
diff --git a/website/tailwind.config.mjs b/website/tailwind.config.mjs
index 6a061652..6d827905 100644
--- a/website/tailwind.config.mjs
+++ b/website/tailwind.config.mjs
@@ -2,16 +2,16 @@ import starlightPlugin from "@astrojs/starlight-tailwind";
 
 const accent = {
   50: "#f0f9ff",
-  100: "#d0e7ff",
-  200: "#92d1fe",
-  300: "#6abfff",
-  400: "#4ea3e0",
-  500: "#0073aa",
-  600: "#0073aa",
-  700: "#005a84",
-  800: "#004366",
-  900: "#003653",
-  950: "#00273d",
+  100: "#e0f2fe",
+  200: "#bae5fd",
+  300: "#7ed2fb",
+  400: "#2bb6f6",
+  500: "#10a2e7",
+  600: "#0382c6",
+  700: "#0468a0",
+  800: "#085884",
+  900: "#0d496d",
+  950: "#082e49",
 };
 const gray = {
   100: "#f4f7fa",