dynamic island nav bar and smooth scrolling

Flamebamboo · Nov 21, 2024 · 3399af4 · 3399af4
1 parent f99ea92
commit 3399af4
Show file tree

Hide file tree

Showing 7 changed files with 3,495 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="en" class="scroll-smooth">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -16,19 +16,23 @@
   <!-- Body -->
   <body class="bg-gradient-to-r from-[#1A1A1D] to-[#000B58] text-white">
     <!-- Navbar -->
-    <nav id="navbar" class="p-4 md:p-8 fixed w-full top-0 z-10 transition duration-300">
-      <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
-        <a href="#" class="text-xl md:text-2xl font-readex-pro mb-4 md:mb-0">AuraHub</a>
-        <div class="space-x-4 md:space-x-9 font-readex-pro text-sm md:text-base">
-          <a href="#features" class="hover:text-gray-300 underline-animation">Home</a>
-          <a href="#benefits" class="hover:text-gray-300 underline-animation">Features</a>
-          <a href="#contact" class="hover:text-gray-300 underline-animation">Waitlist</a>
+
+    <div class="nav-container">
+      <nav class="dynamic-island">
+        <div class="brand">
+          <a href="#" class="logo">AuraHub</a>
         </div>
-      </div>
-    </nav>
+        <div class="nav-content">
+          <a href="#hero">Home</a>
+          <a href="#features">Features</a>
+          <a href="#contact">Download</a>
+        </div>
+      </nav>
+    </div>
 
     <!-- Hero Section -->
     <section
+      id="hero"
       class="min-h-screen flex flex-col md:flex-row justify-center items-center text-center md:text-left pt-32 md:pt-24 px-4 md:px-16">
       <div class="gradient-bg">
         <div class="gradients-container">
@@ -68,6 +72,7 @@ <h1 class="text-4xl md:text-7xl font-extrabold font-baloo-bhaijaan">
 
     <!-- New Section -->
     <section
+      id="features"
       class="min-h-screen flex flex-col md:flex-row px-4 md:px-16 bg-[#0f1234] py-12 md:py-0">
       <div class="flex flex-col md:flex-row items-center w-full">
         <div class="w-full md:w-3/4 flex justify-center md:justify-end order-2 md:order-1">
@@ -83,7 +88,7 @@ <h5 class="font-readex-pro font-extralight text-center px-4 md:px-8">
             -Boost your productivity with focus sessions invite friends and gain
             <span class="text-purple-600 font-bold">Aura Points</span>
             together.
-          </h 5>
+          </h5>
         </div>
       </div>
     </section>