Ajustes

src/components/HeroSection.astro

@@ -0,0 +1,56 @@
+---
+import { Image } from 'astro:assets';
+import bookImage from '../assets/img/hero-background.png';
+import pinIcon from '../assets/img/pin.png';
+import crystalBallIcon from '../assets/img/mystery-crystal-ball-blue.svg';
+import spellbookIcon from '../assets/img/book.png';
+---
+<section class="hero relative overflow-hidden bg-pink-dark min-h-screen flex items-center">
+    <div class="absolute inset-0 z-0">
+        <Image
+                src={bookImage}
+                alt="Livro aberto mágico"
+                class="w-full h-full object-cover opacity-70"
+        />
+    </div>
+    <div class="container mx-auto my-auto px-10 pb-80 relative z-20 text-white">
+        <div class="text-center mb-12">
+            <h1 class="text-5xl font-bold mb-4">Desperte a sua imaginação<br/>e explore novos mundos</h1>
+            <p class="text-xl mb-8">Junte-se ao clube de assinatura Encantos Literários e<br/>descubra maravilhas e
+                aventuras a cada página</p>
+            <a href="#planos"
+               class="bg-pink-base hover:bg-pink-light text-white font-bold py-3 px-8 rounded-full transition-colors text-lg inline-block">
+                Assinar agora
+            </a>
+        </div>
+        <div class="text-center text-blue-light">
+            <p class="text-2xl mb-4">
+                Receba todo mês um <span class="font-bold">livro surpresa</span> do seu tema favorito,
+                acompanhado de
+            </p>
+            <p class="text-2xl">
+                <span class="font-bold">brindes exclusivos</span> que tornarão a sua experiência literária <span
+                    class="font-bold">encantadora</span>
+            </p>
+        </div>
+    </div>
+
+    <div class="absolute inset-0 z-30 pointer-events-none mr-60">
+        <Image src={pinIcon} alt="Pin mágico" width={80} height={80}
+               class="absolute left-1/4 bottom-1/4 animate-float"/>
+        <Image src={crystalBallIcon} alt="Bola de cristal" width={60} height={60}
+               class="absolute right-1/4 top-1/3 animate-float"/>
+        <Image src={spellbookIcon} alt="Livro de feitiços" width={70} height={70}
+               class="absolute left-1/3 top-1/4 animate-float"/>
+    </div>
+</section>
+
+<style>
+    .animate-float {
+        animation: float 6s ease-in-out infinite;
+    }
+    @keyframes float {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-20px); }
+    }
+</style>

src/components/KitSection.astro

@@ -0,0 +1,52 @@
+---
+import { Image } from 'astro:assets';
+import kitImage from '../assets/img/book.png'; // Assuma que temos uma imagem do kit completo
+import bookIcon from '../assets/img/book.png';
+import pinIcon from '../assets/img/pin.png';
+import bookmarkIcon from '../assets/img/bookmark-yellow.png';
+---
+<section aria-label="Kit Mensal" class="bg-gradient-to-b from-pink-light/30 to-pink-dark/30 py-20">
+    <div class="container mx-auto px-4">
+        <h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12">
+            <span class="text-blue-light">✦</span> Conheça o kit mensal <span class="text-blue-light">✦</span>
+        </h2>
+
+        <div class="flex flex-col md:flex-row items-center justify-center gap-12">
+            <div class="w-full md:w-1/2 max-w-md">
+                <Image
+                        src={kitImage}
+                        alt="Kit mensal Encantos Literários"
+                        width={500}
+                        height={500}
+                        class="w-full h-auto rounded-lg shadow-xl"
+                />
+            </div>
+
+            <div class="w-full md:w-1/2 max-w-md space-y-8">
+                <div class="flex items-start space-x-4">
+                    <Image src={bookIcon} alt="Ícone de livro" width={24} height={24} />
+                    <div>
+                        <h3 class="font-bold text-xl text-purple-400">Livro Surpresa</h3>
+                        <p class="text-pink-300">Um livro cuidadosamente selecionado em capa dura para sua coleção.</p>
+                    </div>
+                </div>
+
+                <div class="flex items-start space-x-4">
+                    <Image src={pinIcon} alt="Ícone de broche" width={24} height={24} />
+                    <div>
+                        <h3 class="font-bold text-xl text-purple-400">Broche Exclusivo</h3>
+                        <p class="text-pink-300">Um broche temático para personalizar sua mochila ou estante.</p>
+                    </div>
+                </div>
+
+                <div class="flex items-start space-x-4">
+                    <Image src={bookmarkIcon} alt="Ícone de marcador de página" width={24} height={24} />
+                    <div>
+                        <h3 class="font-bold text-xl text-purple-400">Marcadores de Página</h3>
+                        <p class="text-pink-300">Marcadores temáticos para acompanhar sua leitura com estilo.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

src/layouts/Layout.astro

@@ -12,7 +12,7 @@ const {title} = Astro.props;
     <meta charset="UTF-8"/>
     <meta name="description" content="Clube de Assinatura Encantos Literários"/>
     <meta name="viewport" content="width=device-width"/>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+    <link rel="icon" type="image/svg+xml" href="/clube-assinatura/ImageTextBook-blue.svg"/>
     <meta name="generator" content={Astro.generator}/>
     <title>{title}</title>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap" rel="stylesheet">

src/pages/index.astro

@@ -1,10 +1,14 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Header from '../components/Header.astro';
+import HeroSection from "../components/HeroSection.astro";
+import KitSection from "../components/KitSection.astro";
 ---
 
 <Layout title="Encantos Literários - Clube de Assinatura">
     <Header/>
+    <HeroSection/>
+    <KitSection/>
     <main class="text-text-body">
         <section class="hero bg-shape-base py-20">
             <div class="container mx-auto px-4">