Achievement Section

src/Components/Achievements.css

@@ -0,0 +1,144 @@
+
+/* Achievements Section */
+.achievements-section {
+    padding: 6rem 2rem;
+    background: #000;
+    color: #fff;
+    font-family: 'Roboto', sans-serif;
+}
+
+.achievements-section .section-header {
+    margin-bottom: 3rem;
+    text-align: center;
+}
+
+.achievements-section .section-header h2 {
+    font-size: 3rem;
+    font-weight: 800;
+    background: linear-gradient(90deg, #00d4ff, #00ffbb);
+    background-clip: text;  
+    -webkit-background-clip: text; 
+    color: transparent;    
+    -webkit-text-fill-color: transparent; /
+}
+
+
+.achievements-section .section-header .subtitle {
+    font-size: 1.2rem;
+    color: #bbb;
+    max-width: 700px;
+    margin: 1rem auto 0;
+    line-height: 1.6;
+}
+
+
+.carousel-wrapper {
+    overflow: hidden;
+    position: relative;
+    padding-bottom: 2rem;
+}
+
+.carousel-track {
+    display: flex;
+    gap: 2rem;
+    animation: scrollRight 180s linear infinite; 
+}
+
+.float-wrapper {
+    display: inline-block;
+    animation: floatUpDown 4s ease-in-out infinite alternate;
+}
+
+
+.pentagon-badge {
+    background: linear-gradient(145deg, #1f253d, #2a3152);
+    color: #fff;
+    min-width: 250px;
+    max-width: 260px;
+    flex-shrink: 0;
+    text-align: center;
+    border-radius: 12px;
+    padding: 3rem 1.5rem 2rem 1.5rem;
+    position: relative;
+    clip-path: polygon(
+        0 0,
+        100% 0,
+        100% 75%,
+        75% 100%,
+        25% 100%,
+        0 75%
+    );
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+@keyframes floatUpDown {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+    100% { transform: translateY(0); }
+}
+
+
+@keyframes scrollRight {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-50%); } /* Scroll left by half the track */
+}
+
+
+.badge-ribbon {
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: #00ffbb;
+    letter-spacing: 1px;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+}
+
+
+.badge-content h3 {
+    font-size: 1.4rem;
+    font-weight: 700;
+    margin-bottom: 0.3rem;
+}
+
+.badge-content p {
+    font-size: 1rem;
+    color: #ccc;
+}
+
+
+.pentagon-badge::after {
+    content: "🏆";
+    font-size: 4rem;
+    color: gold;
+    display: block;
+    text-align: center;
+    margin-bottom: 1rem;
+    position: relative;
+    top: 0; 
+    z-index: 1;
+    animation: trophyGlow 2s ease-in-out infinite alternate;
+    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
+}
+
+@keyframes trophyGlow {
+    0% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5); }
+    50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 35px rgba(255, 215, 0, 0.6); }
+    100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5); }
+}
+
+.pentagon-badge::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(120deg, rgba(0,212,255,0.05), rgba(0,255,187,0.03));
+    border-radius: 12px;
+    pointer-events: none;
+    animation: overlayPulse 3s ease-in-out infinite alternate;
+}
+
+@keyframes overlayPulse {
+    0% { opacity: 0.4; }
+    50% { opacity: 0.8; }
+    100% { opacity: 0.4; }
+}

src/Components/Achievements.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import achievementsData from "../Data/achievementsData.json";
+import "./Achievements.css";
+
+function Achievements() {
+
+    const carouselItems = [...achievementsData, ...achievementsData];
+
+
+
+    return (
+        <section className="achievements-section section">
+            <div className="container">
+                <div className="section-header">
+                    <h2 className="text-center">Competitions & Achievements</h2>
+                    <p className="text-center subtitle">
+                        A legacy of excellence in autonomous underwater robotics competitions. 
+                        SubjuGator consistently demonstrates superior performance and innovation on the global stage.
+                    </p>
+                </div>
+
+                <div className="carousel-wrapper">
+                    <div className="carousel-track">
+                        {carouselItems.map((item, index) => (
+                            <div className="float-wrapper" key={index}>
+                                <div className="pentagon-badge">
+                                    <div className="badge-ribbon">{item.place}</div>
+                                    <div className="badge-content">
+                                        <h3>{item.title}</h3>
+                                        <p>{item.season}</p>
+                                    </div>
+                                    {item.place === "1st Place" && (
+                                        <div className="trophy-glow">🏆</div>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export default Achievements;

src/Data/achievementsData.json

@@ -0,0 +1,16 @@
+
+[
+    { "season": "2005", "title": "Champion", "place": "1st Place" },
+    { "season": "2006", "title": "Champion", "place": "1st Place" },
+    { "season": "2007", "title": "Champion", "place": "1st Place" },
+    { "season": "1998", "title": "Top 3", "place": "3rd Place" },
+    { "season": "1999", "title": "Top 3", "place": "3rd Place" },
+    { "season": "2000", "title": "Top 3", "place": "3rd Place" },
+    { "season": "2001", "title": "Top 3", "place": "3rd Place" },
+    { "season": "2002", "title": "Top 3", "place": "3rd Place" },
+    { "season": "2003", "title": "Top 3", "place": "3rd Place" },
+    { "season": "2004", "title": "Top 3", "place": "3rd Place" },
+    { "season": "2008", "title": "Top 3", "place": "3rd Place" },
+    { "season": "2010", "title": "Top 3", "place": "3rd Place" },
+    { "season": "2011", "title": "Top 3", "place": "3rd Place" }
+]

src/Pages/Home.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { Link } from "react-router-dom";
 import { FaCogs, FaBolt, FaLaptopCode } from "react-icons/fa";
 import "../styles/Home.css";
+import Achievements from "../Components/Achievements.jsx";
 
 function Home() {
   const heroBackgroundRef = useRef(null);
@@ -169,6 +170,9 @@ function Home() {
           </div>
         </div>
       </section>
+
+      {/* Achievements Section */}
+      <Achievements/> 
 
       {/* Latest Updates */}
       <section className="updates-section section">

src/styles/Home.css

@@ -34,6 +34,7 @@
   transition: opacity 1.5s ease;
 }
 
+
 .hero-background::after {
   content: "";
   position: absolute;
@@ -385,6 +386,121 @@
   font-weight: 700;
 }
 
+/* Achievements Section with Glow effect */
+.achievements-section {
+  padding: 4rem 2rem;
+  background-color: #0a0a1a;
+}
+
+.section-header {
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.section-header h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #00d4ff;
+}
+
+.section-header .subtitle {
+  font-size: 1.1rem;
+  color: #cccccc;
+  max-width: 700px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.carousel-wrapper {
+  overflow-x: auto;
+  padding-bottom: 1rem;
+}
+
+.carousel-track {
+  display: flex;
+  gap: 2rem;
+  padding: 1rem 0;
+  scroll-snap-type: x mandatory;
+  align-items: flex-start;
+}
+.pentagon-badge {
+  background: linear-gradient(145deg, #0d1b3d, #1f3b70);
+  color: #ffffff;
+  padding: 4rem 1.5rem 2.5rem 1.5rem; 
+  min-width: 240px;
+  max-width: 260px;
+  scroll-snap-align: start;
+  flex-shrink: 0;
+  text-align: center;
+  position: relative;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% 80%,
+    75% 100%,
+    25% 100%,
+    0 80%
+  );
+  border: 2px solid #00d4ff;
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.7), 0 0 35px rgba(0, 212, 255, 0.5);
+}
+
+.pentagon-badge::after {
+  content: "🏆";
+  font-size: 4rem;
+  color: gold;
+  display: block;
+  text-align: center;
+  margin-bottom: 1rem;
+  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6);
+  position: relative;
+  top: 0; 
+  z-index: 1;
+}
+
+.pentagon-badge::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: -6px;
+  width: calc(100% + 12px);
+  height: calc(100% + 12px);
+  border-radius: 16px;
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% 80%,
+    75% 100%,
+    25% 100%,
+    0 80%
+  );
+  border: 2px solid #00d4ff;
+  box-shadow: 0 0 15px #00d4ff, 0 0 25px #00ffff, 0 0 35px #007acc;
+  z-index: -1;
+  opacity: 0.8;
+  animation: glowPulse 2s infinite alternate;
+}
+
+@keyframes glowPulse {
+  0% {
+    opacity: 0.4;
+    box-shadow: 0 0 10px #00d4ff, 0 0 20px #00ffff, 0 0 30px #007acc;
+  }
+  50% {
+    opacity: 1;
+    box-shadow: 0 0 15px #00d4ff, 0 0 25px #00ffff, 0 0 35px #007acc;
+  }
+  100% {
+    opacity: 0.4;
+    box-shadow: 0 0 10px #00d4ff, 0 0 20px #00ffff, 0 0 30px #007acc;
+  }
+}
+
 /* Updates section */
 .updates-section {
   background-color: var(--color-background);