Update the hero section.

Update the floating element at the top of the section

Introduce a new font for the main text.

Update the content and styles of the Features cards.

Author: arivvera

public/glass.jpg

@@ -5,4 +5,4 @@
 </div>
 
 {/* Noise texture overlay */}
-<div class="fixed inset-0  bg-[url('/noise.svg')] opacity-50 -z-10"></div>
+<div class="fixed inset-0  bg-[url('/glass.jpg')] opacity-5 -z-10"></div>

src/components/landing/Decorations.astro

@@ -1,5 +1,6 @@
 ---
-import { Flame, Sparkles, Stars } from "lucide-astro";
+import { Flame, Sparkles, Stars, CloudFog, Brain, Glasses, PartyPopper } from "lucide-astro";
+import Hero from "./Hero.astro";
 ---
 
 {/* Features Section */}
@@ -11,53 +12,57 @@ import { Flame, Sparkles, Stars } from "lucide-astro";
         class="group relative overflow-hidden rounded-2xl border border-purple-500/20 bg-purple-500/[0.02] p-6 transition-all duration-300 hover:bg-purple-500/[0.04] hover:shadow-[0_0_30px_rgba(139,92,246,0.1)] hover:-translate-y-1"
       >
         <div
-          class="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100"
+          class="absolute inset-0 bg-gradient-to-br from-purple-500/8 via-transparent to-transparent opacity-60 transition-opacity group-hover:opacity-100"
         >
         </div>
         <div class="mb-4 inline-flex rounded-xl bg-purple-500/10 p-3">
-          <Flame class="h-6 w-6 text-purple-400" />
+          <Brain class="h-6 w-6 text-purple-400" />
         </div>
         <h3 class="mb-2 text-xl font-semibold text-purple-200">
-          Console Magic
+          Peace of mind
         </h3>
         <p class="text-purple-200/70">
-          Transform your browser console into a dazzling display with just a simple phrase.
+          Embed Cascarilla.js into your website and rest assured everything will be just fine.
         </p>
       </div>
 
       <div
-        class="group relative overflow-hidden rounded-2xl border border-pink-500/20 bg-pink-500/[0.02] p-6 transition-all duration-300 hover:bg-pink-500/[0.04] hover:shadow-[0_0_30px_rgba(236,72,153,0.1)] hover:-translate-y-1"
+          class="group relative overflow-hidden rounded-2xl border border-red-500/20 bg-orange-500/[0.02] p-6 transition-all duration-300 hover:bg-red-500/[0.04] hover:shadow-[0_0_30px_rgba(239,131,68,0.1)] hover:-translate-y-1"
       >
         <div
-          class="absolute inset-0 bg-gradient-to-br from-pink-500/10 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100"
+            class="absolute inset-0 bg-gradient-to-br from-red-500/8 via-transparent to-transparent opacity-60 transition-opacity group-hover:opacity-100"
         >
         </div>
-        <div class="mb-4 inline-flex rounded-xl bg-pink-500/10 p-3">
-          <Stars class="h-6 w-6 text-pink-400" />
+        <div class="mb-4 inline-flex rounded-xl bg-red-500/10 p-3">
+          <Flame class="h-6 w-6 text-red-400" />
         </div>
-        <h3 class="mb-2 text-xl font-semibold text-pink-200">
-          Effortless Incantations
+        <h3 class="mb-2 text-xl font-semibold text-red-200">
+          Fire prove your site
         </h3>
-        <p class="text-pink-200/70">
-          Invoke powerful console displays with minimal code - just speak the magic words.
+        <p class="text-red-200/70">
+          It is statistically demonstrated that the use of Cascarilla.js results in less crashes in production.
         </p>
       </div>
 
       <div
-        class="group relative overflow-hidden rounded-2xl border border-red-500/20 bg-red-500/[0.02] p-6 transition-all duration-300 hover:bg-red-500/[0.04] hover:shadow-[0_0_30px_rgba(239,68,68,0.1)] hover:-translate-y-1"
+        class="group relative overflow-hidden rounded-2xl border border-pink-500/20 bg-pink-500/[0.02] p-6 transition-all duration-300 hover:bg-pink-500/[0.04] hover:shadow-[0_0_30px_rgba(236,72,153,0.1)] hover:-translate-y-1"
       >
         <div
-          class="absolute inset-0 bg-gradient-to-br from-red-500/10 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100"
+          class="absolute inset-0 bg-gradient-to-br from-pink-500/8 via-transparent to-transparent opacity-60 transition-opacity group-hover:opacity-100"
         >
         </div>
-        <div class="mb-4 inline-flex rounded-xl bg-red-500/10 p-3">
-          <Sparkles class="h-6 w-6 text-red-400" />
+        <div class="mb-4 inline-flex rounded-xl bg-pink-500/10 p-3">
+          <PartyPopper class="h-6 w-6 text-pink-400" />
         </div>
-        <h3 class="mb-2 text-xl font-semibold text-red-200">Visual Spellcraft</h3>
-        <p class="text-red-200/70">
-          Cast stunning visual effects in your console with simple, memorable phrases.
+        <h3 class="mb-2 text-xl font-semibold text-pink-200">
+          Be cool
+        </h3>
+        <p class="text-pink-200/70">
+          By using Cascarilla.js you officially belong to the coolest of Cuban developers, no matter where you are.
         </p>
       </div>
+
+
     </div>
   </div>
 </section>

src/components/landing/Features.astro

@@ -1,5 +1,5 @@
 ---
-import { Github, Sparkles, Wand2, Zap } from "lucide-astro";
+import { Github, Heart, Sparkles, Wand2, Zap, Wand, Vibrate, Star } from "lucide-astro";
 ---
 
 {/* Hero Section */}
@@ -25,20 +25,18 @@ import { Github, Sparkles, Wand2, Zap } from "lucide-astro";
     <div class="text-center">
       <div class="inline-block animate-float">
         <div
-          class="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-4 py-2 text-sm text-purple-300 backdrop-blur-sm transition-colors hover:border-purple-400/50 hover:bg-purple-500/20"
+          class="mb-6 inline-flex items-center gap-2 rounded-full bg-purple-500/5 px-6 py-4 text-sm text-purple-300 backdrop-blur-sm"
         >
-          <Sparkles class="h-4 w-4" />
-          <span>Add Magic to your Website</span>
-          <div class="h-1.5 w-1.5 rounded-full bg-purple-400 animate-pulse">
-          </div>
+          <Star class="h-4 w-4 stroke-1 stroke-amber-300 fill-amber-300" />
+          <span>Add Good Vibes to your Website</span>
         </div>
       </div>
 
       <h1
         class="mb-6 text-4xl font-bold tracking-tight sm:text-6xl md:text-7xl"
       >
         <span
-          class="animate-text-shimmer bg-[linear-gradient(45deg,#8b5cf6,#ec4899,#f43f5e,#8b5cf6)] bg-[length:200%_auto] bg-clip-text text-transparent"
+          class="animate-text-shimmer bg-[linear-gradient(45deg,#8b5cf6,#ec4899,#f43f5e,#8b5cf6)] bg-[length:200%_auto] bg-clip-text text-transparent knewave-regular"
         >
           Cascarilla.js
         </span>
@@ -66,7 +64,7 @@ import { Github, Sparkles, Wand2, Zap } from "lucide-astro";
           class="group relative max-w-max h-12 overflow-hidden rounded-full border-2 border-purple-600 px-6 transition-all hover:border-purple-700 hover:shadow-[0_0_20px_rgba(139,92,246,0.3)] hover:scale-105 cursor-pointer flex justify-center items-center"
         >
           <span class="relative z-10 flex items-center gap-2">
-            <Github/>
+            <Github class="h-5 w-5 group-hover:rotate-12 group-hover:mr-1"/>
             Source Code
           </span>
         </a>

src/components/landing/Hero.astro

@@ -5,6 +5,9 @@ import "../styles/global.css";
 <!doctype html>
 <html lang="en">
   <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />

src/layouts/Layout.astro

@@ -50,4 +50,11 @@ button {
 
 html {
   scroll-behavior: smooth;
-}
+}
+
+.knewave-regular {
+  font-family: "Knewave", system-ui;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: 2px;
+}