Feat/showcase section

index.html

@@ -9,10 +9,10 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&family=Oooh+Baby&display=swap" rel="stylesheet">
-  
+
     <!-- Styles -->
     <link rel="stylesheet" href="styles.css">
-  
+
     <!-- Sentry Script -->
     <script src="https://js.sentry-cdn.com/8994bf86fecf7733832520db1565ab1f.min.js" crossorigin="anonymous"></script>
 </head>
@@ -57,7 +57,7 @@ <h1 class="hero__title">
               Conquer.
             </h1>
             <p class="hero__description">
-              Discover CodeClip, an exhilarating, lightweight web app that empowers developers to master coding challenges right in their browser!  Whether you're tackling algorithms, debugging scripts, or showcasing your solutions to the open-source community, CodeClip offers a seamless, interactive experience with a sleek interface, real-time feedback, and effortless sharing via unique URLs or GitHub Gists. 
+              Discover CodeClip, an exhilarating, lightweight web app that empowers developers to master coding challenges right in their browser!  Whether you're tackling algorithms, debugging scripts, or showcasing your solutions to the open-source community, CodeClip offers a seamless, interactive experience with a sleek interface, real-time feedback, and effortless sharing via unique URLs or GitHub Gists.
             </p>
             <div class="hero__cta">
               <a href="/coding" class="btn btn-primary">🎯 Start Coding</a>
@@ -82,6 +82,60 @@ <h1 class="hero__title">
         </div>
       </div>
     </section>
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+      <div class="content">
+          <!-- card -->
+
+          <div class="card">
+              <a href="#" target="_blank">
+                  <div class="icon" ><i class="material-icons md-36" alt="Challenge vault icon">security</i></div>
+                  <p class="title">Challenge Vault</p>
+                  <p class="text">All your challenges in one place — track, review, repeat.</p>
+              </a>
+          </div>
+
+
+          <!-- end card -->
+          <!-- card -->
+          <div class="card">
+              <a href="#" target="_blank">
+                  <div class="icon" ><i class="material-icons md-36" alt="Code editor icon">code</i></div>
+                  <p class="title">Code Editor</p>
+                  <p class="text">Write, test, and edit code seamlessly in your personal editor.</p>
+              </a>
+          </div>
+
+
+          <!-- end card -->
+          <!-- card -->
+
+          <div class="card">
+              <a href="#" target="_blank">
+                  <div class="icon" ><i class="material-icons md-36" alt="Solution sharing icon">share</i></div>
+                  <p class="title">Solution Sharing </p>
+                  <p class="text">Show your approach. Discover new ones.</p>
+              </a>
+          </div>
+
+
+          <!-- end card -->
+          <!-- card -->
+
+          <div class="card">
+              <a href="#" target="_blank">
+                  <div class="icon" ><i class="material-icons md-36" alt="AI recommendation icon">smart_toy</i></div>
+                  <p class="title">AI Recommendation </p>
+                  <p class="text">Let AI guide your next steps with personalized recommendations.</p>
+              </a>
+          </div>
+
+
+          <!-- end card -->
+
+
+
+      </div>
   </main>
 
   <!-- Theme Toggle -->

styles.css

@@ -442,4 +442,135 @@ body {
   .hero__title {
     font-size: 2rem;
   }
+}
+
+
+.content {
+  max-width: 1024px;
+  width: 100%;
+  padding: 0 4%;
+  padding-top: 150px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media screen and (max-width: 767px) {
+  .content {
+    padding-top: 300px;
+    flex-direction: column;
+  }
+}
+
+.card {
+  width: 100%;
+  max-width: 300px;
+  min-width: 200px;
+  height: 250px;
+  background-color: var(--background-color, #292929); /* fallback to #292929 if variable isn't set */
+  margin: 10px;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
+  border: 2px solid rgba(7, 7, 7, 0.12);
+  font-size: 16px;
+  transition: all 0.3s ease;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+
+[data-theme="dark"] .card {
+  --background-color: #292929;
+}
+
+[data-theme="light"] .card {
+  --background-color: #C9D9F6; /* or #f9f9f9 if you prefer */
+}
+[data-theme="light"] .title {
+  --color: #212121;
+}
+[data-theme="light"] .text {
+  --color: #212121;
+}
+
+.icon {
+  margin: 0 auto;
+  width: 100%;
+  height: 80px;
+  max-width:80px;
+  background: linear-gradient(90deg, #93C5FD 0%, #3B82F6 40%, rgba(0, 0, 0, 0.28) 60%);
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  transition: all 0.8s ease;
+  background-position: 0;
+  background-size: 200px;
+}
+
+
+
+.material-icons.md-36 { font-size: 36px; }
+
+
+.card .title {
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  margin-top: 30px;
+  color: var(--color, #ffffff);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+}
+
+
+.card .text {
+  width: 80%;
+  margin: 0 auto;
+  font-size: 13px;
+  text-align: center;
+  margin-top: 20px;
+  color: var(--color, #ffffff);
+  font-weight: 200;
+  letter-spacing: 2px;
+  opacity: 0;
+  max-height:0;
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  height: 270px;
+}
+
+.card:hover .info {
+  height: 90%;
+}
+
+.card:hover .text {
+  transition: all 0.3s ease;
+  opacity: 1;
+  max-height:40px;
+}
+
+.card:hover .icon {
+  background-position: -120px;
+  transition: all 0.3s ease;
+}
+
+.card:hover .icon i {
+  background: linear-gradient(90deg, #93C5FD, #3B82F6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  opacity: 1;
+  transition: all 0.3s ease;
+}
+a {
+  text-decoration: none;
 }