implemented hero section for landing page

index.html

@@ -13,8 +13,9 @@
   <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&family=Oooh+Baby&display=swap" rel="stylesheet">
 
   <!-- Styles -->
-  <link rel="stylesheet" href="styles/main.css">
+
   <link rel="stylesheet" href="./styles/themes.css" />
+  <link rel="stylesheet" href="styles/main.css">
   <link rel="stylesheet" href="styles.css">
 
   <!-- Sentry Script -->
@@ -51,21 +52,33 @@
 
   <!-- Hero section -->
   <div id="hero-section">
-    <div class="bars-container">
-      <div class="bar red"></div>
-      <div class="bar green"></div>
-      <div class="bar yellow"></div>
-      <div class="bar blue"></div>
-    </div>
+   <div class="hero-content">
+  <h1 class="hero-title"> <span id="element" class="purple"></span></h1>
+  <p class="hero-subtitle">CodeClip is your mini playground to practice, challenge, and grow — made for GSSoC and beyond.</p>
+  <div class="hero-buttons">
+    <a href="#" class="btn btn-primary">Start Coding</a>
+    <a href="#" class="btn btn-secondary">Browse Challenges</a>
+  </div>
+</div>
 
-    <h1>Code-Clip</h1>
-    <h3>--- A tiny playground for your giant ideas</h3>
   </div>
 
   <!-- Footer -->
   <div id="footer"></div>
 
   <!-- Scripts -->
+
+  <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
+
+    <!-- Setup and start animation! -->
+    <script>
+      var typed = new Typed("#element", {
+        strings: [
+          "Unleash Your Inner Coder",
+        ],
+        typeSpeed: 50,
+      });
+    </script>
   <script src="scripts/app.js"></script>
   <script src="./scripts/theme.js"></script>
 </body>

styles.css

@@ -132,4 +132,102 @@ body {
   .header__logo .logo-text {
     font-size: 1.2rem;
   }
-} 
+} 
+
+ .hero-content {
+  z-index: 5;
+  text-align: center;
+  padding: 1rem;
+  max-width: 800px;
+}
+
+.hero-title {
+  font-size: 3.2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  line-height: 1.2;
+  font-family: 'Bitcount', system-ui;
+}
+
+.hero-subtitle {
+  font-size: 1.2rem;
+  font-family: system-ui, sans-serif;
+  margin-bottom: 2rem;
+  line-height: 1.5;
+}
+
+.hero-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1rem;
+  border-radius: 5px;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background-color: #2d72d9;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #2859a3;
+  transform: scale(1.05);
+}
+
+.btn-secondary {
+  background-color: transparent;
+  color: black;
+
+}
+
+.btn-secondary:hover {
+  background-color: #2d72d9;
+  color: white;
+  transform: scale(1.05);
+}
+
+/* Responsive font resizing */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.2rem;
+  }
+
+  .hero-subtitle {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-buttons {
+    flex-direction: column;
+  }
+
+  .btn {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.hero-title {
+  animation-delay: 0.2s;
+  animation-fill-mode: both;
+}
+.hero-subtitle {
+  animation-delay: 0.6s;
+  animation-fill-mode: both;
+}
+.hero-buttons {
+  animation-delay: 1s;
+  animation-fill-mode: both;
+}
+

styles/main.css

@@ -10,51 +10,24 @@
         height: 100%;
         display: flex;
         flex-direction: column;
-        color: ivory;
+        animation: fadeIn 0.6s ease-in-out;
       }
       #navbar{
         height: 10%;
         width: 100%;
-        /* background-color: red; */
+
       }
       #hero-section{
         height: 70%;
         width: 100%;
-        /* background-color: yellow; */
+
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         position: relative;
         z-index: 1;
       }
-      .bars-container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        gap: 2rem;
-        z-index: 0;
-        overflow: hidden;
-      }
-
-      .bar {
-        width: 100px;
-        height: 100px;
-        border-radius: 50%;
-        animation: bounceY 1.2s ease-in-out infinite alternate;
-        opacity: 0.8;
-        z-index: 2;
-      }
-
-      .bar.red { background-color: red; animation-delay: 0s; }
-      .bar.green { background-color: yellow; animation-delay: 0.7s; }
-      .bar.yellow { background-color: green; animation-delay: 1.4s; }
-      .bar.blue { background-color: rgb(22, 22, 240); animation-delay: 2.1s; }
-
       @keyframes bounceY {
         from {
           transform: translateY(200px);
@@ -64,23 +37,70 @@
         }
       }
 
-      /* On hover over hero-section, speed up bars */
+
       #hero-section:hover .bar {
         animation-duration: 0.9s;
       }
 
-      #hero-section h1{
-        font-size: 5rem;
-        font-family: 'Bitcount';
-        margin-bottom: 2%;
-        z-index: 10;
-      }
-      #hero-section h3{
-        font-family: 'Oooh Baby';
-        font-size: 2rem;
-        color: #EFEFFE;
-        /* text-decoration: underline wavy; */
-      }
+
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+
+.hero-title {
+  animation: fadeSlideUp 1s ease-out forwards;
+  opacity: 0;
+  animation-delay: 0.2s;
+}
+
+.hero-subtitle {
+  animation: fadeIn 1s ease-out forwards;
+  opacity: 0;
+  animation-delay: 0.6s;
+}
+
+.hero-buttons {
+  animation: zoomIn 1s ease-out forwards;
+  opacity: 0;
+  animation-delay: 1s;
+}
+
+
+.btn:hover {
+  transform: scale(1.08);
+  box-shadow: 0 0 12px rgba(0, 188, 212, 0.3);
+}
+
+
+
       #footer{
         height: 20%;
         width: 100%;