build: Redesign home page

Author: CarLeonDev

website/package-lock.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"
   }
-}
+}

website/package.json

@@ -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>

website/src/components/Card.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,
     }}
   >

website/src/components/SiteTitle.astro

@@ -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 />