diff --git a/src/Components/Achievements.css b/src/Components/Achievements.css new file mode 100644 index 0000000..b9e2cb2 --- /dev/null +++ b/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; } +} \ No newline at end of file diff --git a/src/Components/Achievements.jsx b/src/Components/Achievements.jsx new file mode 100644 index 0000000..e56f85f --- /dev/null +++ b/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 ( +
+
+
+

Competitions & Achievements

+

+ A legacy of excellence in autonomous underwater robotics competitions. + SubjuGator consistently demonstrates superior performance and innovation on the global stage. +

+
+ +
+
+ {carouselItems.map((item, index) => ( +
+
+
{item.place}
+
+

{item.title}

+

{item.season}

+
+ {item.place === "1st Place" && ( +
🏆
+ )} +
+
+ ))} +
+
+
+
+ ); +} + +export default Achievements; \ No newline at end of file diff --git a/src/Data/achievementsData.json b/src/Data/achievementsData.json new file mode 100644 index 0000000..0f64f97 --- /dev/null +++ b/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" } +] \ No newline at end of file diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx index ee6f022..e1deef3 100644 --- a/src/Pages/Home.jsx +++ b/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() { + + {/* Achievements Section */} + {/* Latest Updates */}
diff --git a/src/styles/Home.css b/src/styles/Home.css index 0b76335..08d9174 100644 --- a/src/styles/Home.css +++ b/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);