Merge pull request #2 from AtomiCloud/feat/en/animated-bg

Feat/en/animated bg

src/components/Nav.astro

@@ -4,7 +4,7 @@ import logo from "../assets/light_app_logo.svg";
 import { RainbowButton } from "@/components/ui/rainbow-button";
 ---
 
-<div class="flex w-full justify-between items-center px-8 py-4 border-b-2 h-16">
+<div class="flex w-full justify-between items-center px-8 py-4 h-16">
     <div class="logo">
         <img class="w-[36px]" src={logo.src} alt="logo"/>
     </div>

src/components/index/Hero.astro

@@ -2,23 +2,30 @@
 import astroLogo from '../../assets/astro.svg';
 import logo from '../../assets/light_full_logo.svg';
 import cloud from '../../assets/cloud.svg';
+import blob from '../../assets/blob.svg';
 import mascot from "../../assets/mascot.png";
 import Waitlist from "./Waitlist.astro";
+import Nav from "../Nav.astro";
+import SvgBackground from "./SvgBackground.astro";
 ---
 
-<div id="container">
-    <main>
-        <div class="absolute flex flex-wrap md:flex-nowrap items-center justify-center gap-2 md:gap-28 max-w-[1200px]">
-            <div class="w-5/6 md:w-5/12 flex items-center justify-center" style="position: relative;">
+<SvgBackground />
+<div id="container overflow-hidden">
+    <main class="overflow-hidden">
+        <div class="absolute flex flex-wrap md:flex-nowrap items-center justify-center gap-2 md:gap-28 max-w-[1200px] overflow-hidden md:overflow-visible py-40">
+            <div class="w-11/12 md:w-5/12 flex items-center justify-center" style="position: relative;">
                 <img class="w-11/12 right-cloud" src={cloud.src} alt="cloud1"/>
                 <img class="w-11/12 left-cloud" src={cloud.src} alt="cloud2"/>
-                <img style="z-index: 1" src={mascot.src} alt="mascot" class="object-contain"/>
+                <img class="w-5/6 md:w-full object-contain" style="z-index: 1" src={mascot.src} alt="mascot"/>
             </div>
             <div class="w-5/6 md:w-5/12 flex flex-col justify-center items-center gap-4 md:gap-8">
+                <!--<div class="absolute w-[140%] md:w-[60%] " style="z-index: -1">-->
+                <!--    <img src={blob.src} alt="blob" class="w-full"/>-->
+                <!--</div>-->
                 <div class="text-xs md:text-sm  text-center bg-[#FFF4DC] text-pink-600 py-2 px-8 header rounded-lg">
                     JOIN THE KKOMMUNITY
                 </div>
-                <div class="w-full">
+                <div class="w-5/6 md:w-full">
                     <img src={logo.src} alt="logo"/>
                 </div>
                 <div class="slogan text-lg md:text-xl font-light text-justify text-light text-sky-800">
@@ -76,22 +83,37 @@ import Waitlist from "./Waitlist.astro";
     #container {
         font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
         height: 100%;
+        max-width: 100vw;
     }
 
     main {
-        min-height: calc(100vh - 6rem);
+        min-height: calc(100dvh - 6rem);
         display: flex;
         flex-direction: column;
         margin: auto;
         align-items: center;
         justify-content: center;
         width: 100%;
+        max-width: 100%;
     }
 
     h1 {
         font-size: 22px;
         margin-top: 0.25em;
     }
 
+    @keyframes animate {
+        0%{
+            transform: translateY(0) rotate(0deg);
+            opacity: 1;
+            border-radius: 0;
+        }
+        100%{
+            transform: translateY(-1000px) rotate(720deg);
+            opacity: 0;
+            border-radius: 50%;
+        }
+    }
+
 
 </style>

src/components/index/SvgBackground.astro

@@ -0,0 +1,17 @@
+---
+import background from '../../assets/bg-2.svg';
+import webBackground from '../../assets/bg-web.svg';
+---
+
+<div class="background absolute top-0 z-0 h-[60vh] md:h-[100vh]">
+    <img src={background.src} alt="background" class="w-full h-full object-cover block md:hidden"/>
+    <img src={webBackground.src} alt="background" class="w-full h-full object-cover hidden md:block"/>
+</div>
+
+<style>
+    .background {
+        width: 100vw;
+        z-index: -1;
+        overflow: hidden;
+    }
+</style>

src/components/index/Waitlist.astro

@@ -5,7 +5,7 @@ import { Icon } from 'astro-icon/components'
 ---
 
 <div class="flex flex-col gap-2">
-    <Input id="email" className="text-center text-md" type="email" placeholder="Enter your email"/>
+    <Input id="email" className="bg-white text-center text-md border-gray-500 border" type="email" placeholder="Enter your email"/>
     <p id="error" class="text-xs text-red-500 text-center py-0"></p>
 </div>
 <PulsatingButton id="reserve" >