diff --git a/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx b/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx new file mode 100644 index 0000000..a6d2eb3 --- /dev/null +++ b/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx @@ -0,0 +1,183 @@ +"use client"; + +import { motion } from "framer-motion"; +import { useState, useEffect } from "react"; +import DecryptedText from './DecryptedText'; +import '../../glitch.css'; + +const AnimatedHero = () => { + // Cycling texts for decrypted animation + const texts = [ + "WELCOME TO CP SQUAD_", + "IF YOU LOVE CODING_", + "YOU'RE AT THE RIGHT PLACE_", + "SOLVE PROBLEMS_" + ]; + + const [currentTextIndex, setCurrentTextIndex] = useState(0); + const [key, setKey] = useState(0); + + // Cycle through texts automatically + useEffect(() => { + const interval = setInterval(() => { + setCurrentTextIndex((prev) => (prev + 1) % texts.length); + setKey(prev => prev + 1); // Force re-render of DecryptedText + }, 4000); + + return () => clearInterval(interval); + }, [texts.length]); + + // Delta Triangle Background with Matrix Characters (Static Pattern) + const DeltaTriangleBackground = () => { + const [triangleChars, setTriangleChars] = useState([]); + const matrixChars = "abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*"; + + useEffect(() => { + const createTriangleMatrix = () => { + const chars = []; + const rows = 20; // Reduced rows for smaller triangle + + for (let row = 0; row < rows; row++) { + // Calculate characters per row (triangle shape - wider at bottom) + const charsInRow = Math.floor(3 + (row * 1.8)); + const rowWidth = charsInRow * 2; // Total width of this row + const startX = 50 - (rowWidth / 2); // Center each row + + for (let col = 0; col < charsInRow; col++) { + const randomBrightness = 0.4 + Math.random() * 0.6; + chars.push({ + id: `char-${row}-${col}`, + char: matrixChars[Math.floor(Math.random() * matrixChars.length)], + x: startX + (col * 2), // Horizontal spacing + y: 15 + (row * 3), // Vertical spacing - starts lower for centered triangle + brightness: randomBrightness, + glowDelay: Math.random() * 5, // Random glow timing + }); + } + } + + setTriangleChars(chars); + }; + + createTriangleMatrix(); + + // Refresh characters occasionally for variety + const interval = setInterval(createTriangleMatrix, 12000); + return () => clearInterval(interval); + }, []); + + return ( +
+ {/* Dense Triangle Matrix Characters - Static with subtle glow */} + {triangleChars.map((charData) => ( + + {charData.char} + + ))} + + {/* Subtle random character flicker effect */} + +
+ ); + }; + + return ( +
+ {/* Delta Triangle Background - Only the triangle */} + + + {/* Main Content */} +
+ {/* Animated Container */} + + {/* Main Title: CP SQUAD (Delta Force Style) */} + + CP SQUAD + + + {/* Decrypted Text Animation - Green text like Delta Force */} + +
+ +
+ + +
+ + {/* Gradient Overlay at bottom */} +
+
+ ); +}; + +export default AnimatedHero; \ No newline at end of file diff --git a/cpsquad/app/component/AnimatedHero/AnimatedHero_Complete.jsx b/cpsquad/app/component/AnimatedHero/AnimatedHero_Complete.jsx new file mode 100644 index 0000000..84afa88 --- /dev/null +++ b/cpsquad/app/component/AnimatedHero/AnimatedHero_Complete.jsx @@ -0,0 +1,425 @@ +"use client"; + +import { motion, AnimatePresence } from "framer-motion"; +import { useState, useEffect } from "react"; +import DecryptedText from './DecryptedText'; +import '../../glitch.css'; + +const AnimatedHero = () => { + // Cycling texts for decrypted animation + const texts = [ + "WELCOME TO CP SQUAD", + "IF YOU LOVE CODING", + "YOU'RE AT THE RIGHT PLACE_", + "SOLVE PROBLEMS" + ]; + + const [currentTextIndex, setCurrentTextIndex] = useState(0); + const [key, setKey] = useState(0); + + // Cycle through texts automatically + useEffect(() => { + const interval = setInterval(() => { + setCurrentTextIndex((prev) => (prev + 1) % texts.length); + setKey(prev => prev + 1); + }, 4000); + + return () => clearInterval(interval); + }, [texts.length]); + + // Delta Triangle with Full Animation Cycle + const DeltaTriangleBackground = () => { + const [triangleChars, setTriangleChars] = useState([]); + const [animationPhase, setAnimationPhase] = useState('drawing'); // drawing, filling, filled, glitch, reset + const [visibleChars, setVisibleChars] = useState(new Set()); + const [borderComplete, setBorderComplete] = useState(false); + const matrixChars = "abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*"; + + useEffect(() => { + const createTriangleMatrix = () => { + const chars = []; + const rows = 28; + + for (let row = 0; row < rows; row++) { + const charsInRow = Math.floor((row + 1) * 3.2); + const startX = 50 - (charsInRow * 1.1) / 2; + + for (let col = 0; col < charsInRow; col++) { + chars.push({ + id: `char-${row}-${col}`, + char: matrixChars[Math.floor(Math.random() * matrixChars.length)], + x: startX + (col * 2.2), + y: 12 + (row * 2.9), + row: row, + col: col, + fillDelay: (row * 0.08) + (col * 0.02), + }); + } + } + + return chars; + }; + + const chars = createTriangleMatrix(); + setTriangleChars(chars); + + // Animation Cycle Timeline (15 seconds total) + const startCycle = () => { + // Phase 1: Draw border (0-2s) + setAnimationPhase('drawing'); + setBorderComplete(false); + setVisibleChars(new Set()); + + setTimeout(() => { + setBorderComplete(true); + }, 2000); + + // Phase 2: Fill with characters one by one (2-7s) + setTimeout(() => { + setAnimationPhase('filling'); + + // Add characters one by one + chars.forEach((char) => { + setTimeout(() => { + setVisibleChars(prev => new Set([...prev, char.id])); + }, char.fillDelay * 1000); + }); + }, 2000); + + // Phase 3: Fully filled state (7-11s) + setTimeout(() => { + setAnimationPhase('filled'); + }, 7000); + + // Phase 4: Glitch effect (11-13s) + setTimeout(() => { + setAnimationPhase('glitch'); + }, 11000); + + // Phase 5: Reset/fade out (13-15s) + setTimeout(() => { + setAnimationPhase('reset'); + setVisibleChars(new Set()); + setBorderComplete(false); + }, 13000); + }; + + startCycle(); + const interval = setInterval(startCycle, 15000); + + return () => clearInterval(interval); + }, []); + + return ( +
+ {/* Animated Triangle Border */} + + + + + + + + + + + + + + + + {/* Main Triangle Outline */} + + + {/* Corner Accents */} + {borderComplete && animationPhase !== 'reset' && ( + <> + + + + + )} + + + {/* Matrix Characters filling the triangle */} + + {triangleChars.map((charData) => { + const isVisible = visibleChars.has(charData.id); + + if (!isVisible && animationPhase !== 'glitch' && animationPhase !== 'filled') return null; + + return ( + + {charData.char} + + ); + })} + +
+ ); + }; + + // Subtle Background Matrix Rain + const BackgroundMatrixRain = () => { + const [columns, setColumns] = useState([]); + const matrixChars = "01"; + + useEffect(() => { + const createColumns = () => { + if (typeof window === 'undefined') return []; + + const width = window.innerWidth; + const height = window.innerHeight; + const columnCount = width < 640 ? 6 : width < 1024 ? 10 : 15; + + const cols = []; + for (let i = 0; i < columnCount; i++) { + const charsPerColumn = Math.floor(height / 35) + 2; + cols.push({ + id: i, + x: (i / columnCount) * 100, + chars: Array.from({ length: charsPerColumn }, () => + matrixChars[Math.floor(Math.random() * matrixChars.length)] + ), + delay: Math.random() * 10, + speed: 10 + Math.random() * 5, + }); + } + return cols; + }; + + setColumns(createColumns()); + + const handleResize = () => setColumns(createColumns()); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return ( +
+ {columns.map((column) => ( + + {column.chars.join('')} + + ))} +
+ ); + }; + + return ( +
+ {/* Background Matrix Rain */} + + + {/* Delta Triangle Background */} + + + {/* Main Content */} +
+ + {/* Main Title: CP SQUAD */} + + CP SQUAD + + + {/* Decrypted Text */} + + + + + {/* Description */} + + At CP Squad, we bridge the gaps between problems and solutions. We combine our + expertise in competitive programming to craft powerful problem-solving skills. + + + {/* CTA Buttons */} + + + Learn More + + + Explore + + + +
+ + {/* Gradient Overlay */} +
+
+ ); +}; + +export default AnimatedHero; diff --git a/cpsquad/app/component/AnimatedHero/AnimatedHero_delta.jsx b/cpsquad/app/component/AnimatedHero/AnimatedHero_delta.jsx new file mode 100644 index 0000000..e69de29 diff --git a/cpsquad/app/component/AnimatedHero/DecryptedText.jsx b/cpsquad/app/component/AnimatedHero/DecryptedText.jsx new file mode 100644 index 0000000..e62dd52 --- /dev/null +++ b/cpsquad/app/component/AnimatedHero/DecryptedText.jsx @@ -0,0 +1,207 @@ +import { useEffect, useState, useRef } from 'react'; +import { motion } from 'framer-motion'; + +const styles = { + wrapper: { + display: 'inline-block', + whiteSpace: 'pre-wrap' + }, + srOnly: { + position: 'absolute', + width: '1px', + height: '1px', + padding: 0, + margin: '-1px', + overflow: 'hidden', + clip: 'rect(0,0,0,0)', + border: 0 + } +}; + +export default function DecryptedText({ + text, + speed = 50, + maxIterations = 10, + sequential = false, + revealDirection = 'start', + useOriginalCharsOnly = false, + characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+', + className = '', + parentClassName = '', + encryptedClassName = '', + animateOn = 'hover', + ...props +}) { + const [displayText, setDisplayText] = useState(text); + const [isHovering, setIsHovering] = useState(false); + const [isScrambling, setIsScrambling] = useState(false); + const [revealedIndices, setRevealedIndices] = useState(new Set()); + const [hasAnimated, setHasAnimated] = useState(false); + const containerRef = useRef(null); + + useEffect(() => { + let interval; + let currentIteration = 0; + + const getNextIndex = revealedSet => { + const textLength = text.length; + switch (revealDirection) { + case 'start': + return revealedSet.size; + case 'end': + return textLength - 1 - revealedSet.size; + case 'center': { + const middle = Math.floor(textLength / 2); + const offset = Math.floor(revealedSet.size / 2); + const nextIndex = revealedSet.size % 2 === 0 ? middle + offset : middle - offset - 1; + + if (nextIndex >= 0 && nextIndex < textLength && !revealedSet.has(nextIndex)) { + return nextIndex; + } + + for (let i = 0; i < textLength; i++) { + if (!revealedSet.has(i)) return i; + } + return 0; + } + default: + return revealedSet.size; + } + }; + + const availableChars = useOriginalCharsOnly + ? Array.from(new Set(text.split(''))).filter(char => char !== ' ') + : characters.split(''); + + const shuffleText = (originalText, currentRevealed) => { + if (useOriginalCharsOnly) { + const positions = originalText.split('').map((char, i) => ({ + char, + isSpace: char === ' ', + index: i, + isRevealed: currentRevealed.has(i) + })); + + const nonSpaceChars = positions.filter(p => !p.isSpace && !p.isRevealed).map(p => p.char); + + for (let i = nonSpaceChars.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]]; + } + + let charIndex = 0; + return positions + .map(p => { + if (p.isSpace) return ' '; + if (p.isRevealed) return originalText[p.index]; + return nonSpaceChars[charIndex++]; + }) + .join(''); + } else { + return originalText + .split('') + .map((char, i) => { + if (char === ' ') return ' '; + if (currentRevealed.has(i)) return originalText[i]; + return availableChars[Math.floor(Math.random() * availableChars.length)]; + }) + .join(''); + } + }; + + if (isHovering) { + setIsScrambling(true); + interval = setInterval(() => { + setRevealedIndices(prevRevealed => { + if (sequential) { + if (prevRevealed.size < text.length) { + const nextIndex = getNextIndex(prevRevealed); + const newRevealed = new Set(prevRevealed); + newRevealed.add(nextIndex); + setDisplayText(shuffleText(text, newRevealed)); + return newRevealed; + } else { + clearInterval(interval); + setIsScrambling(false); + return prevRevealed; + } + } else { + setDisplayText(shuffleText(text, prevRevealed)); + currentIteration++; + if (currentIteration >= maxIterations) { + clearInterval(interval); + setIsScrambling(false); + setDisplayText(text); + } + return prevRevealed; + } + }); + }, speed); + } else { + setDisplayText(text); + setRevealedIndices(new Set()); + setIsScrambling(false); + } + + return () => { + if (interval) clearInterval(interval); + }; + }, [isHovering, text, speed, maxIterations, sequential, revealDirection, characters, useOriginalCharsOnly]); + + useEffect(() => { + if (animateOn !== 'view' && animateOn !== 'both') return; + + const observerCallback = entries => { + entries.forEach(entry => { + if (entry.isIntersecting && !hasAnimated) { + setIsHovering(true); + setHasAnimated(true); + } + }); + }; + + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.1 + }; + + const observer = new IntersectionObserver(observerCallback, observerOptions); + const currentRef = containerRef.current; + if (currentRef) { + observer.observe(currentRef); + } + + return () => { + if (currentRef) { + observer.unobserve(currentRef); + } + }; + }, [animateOn, hasAnimated]); + + const hoverProps = + animateOn === 'hover' || animateOn === 'both' + ? { + onMouseEnter: () => setIsHovering(true), + onMouseLeave: () => setIsHovering(false) + } + : {}; + + return ( + + {displayText} + + + + ); +} diff --git a/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx b/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx index 0d56ddb..2cc113c 100644 --- a/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx +++ b/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx @@ -12,7 +12,6 @@ const ScrollSidebar = () => { { id: "hero", label: "Home" }, { id: "about", label: "About" }, { id: "features", label: "Features" }, - { id: "blogs", label: "Blogs" }, { id: "footer", label: "Contact" }, ]; diff --git a/cpsquad/app/glitch.css b/cpsquad/app/glitch.css new file mode 100644 index 0000000..ce77b30 --- /dev/null +++ b/cpsquad/app/glitch.css @@ -0,0 +1,323 @@ +/* Performance Optimization - Hardware Acceleration */ +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Matrix Rain Glow Effect - Optimized */ +@keyframes matrix-glow { + 0%, 100% { + filter: brightness(1) blur(0.3px); + } + 50% { + filter: brightness(1.3) blur(0.5px); + } +} + +/* Matrix Character Flicker - Optimized */ +@keyframes matrix-flicker { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +/* Import Chava Font */ +/*@import url('https://fonts.googleapis.com/css2?family=Chava&display=swap');*/ + +/* Matrix Background Subtle Pulse */ +@keyframes matrix-pulse-bg { + 0%, 100% { + opacity: 0.6; + filter: brightness(1); + } + 50% { + opacity: 0.7; + filter: brightness(1.1); + } +} + +/* Matrix Background Flickering */ +@keyframes matrix-flicker-bg { + 0%, 90%, 100% { + opacity: 0.6; + } + 92%, 96% { + opacity: 0.4; + } + 94%, 98% { + opacity: 0.65; + } +} + +.matrix-background { + animation: matrix-pulse-bg 4s ease-in-out infinite, matrix-flicker-bg 8s ease-in-out infinite; + will-change: opacity; + transform: translateZ(0); + backface-visibility: hidden; + perspective: 1000px; +} + +.matrix-background-static { + animation: matrix-pulse-bg 6s ease-in-out infinite; + will-change: opacity; + transform: translateZ(0); +} + +.matrix-background-filled { + animation: matrix-pulse-bg 4s ease-in-out infinite, matrix-flicker-bg 6s ease-in-out infinite; + will-change: opacity; + transform: translateZ(0); + backface-visibility: hidden; +} + +/* Yellow Border Pulse Animation */ +@keyframes border-pulse { + 0%, 100% { + filter: drop-shadow(0 0 8px rgba(255, 235, 59, 0.6)); + } + 50% { + filter: drop-shadow(0 0 15px rgba(255, 235, 59, 0.9)); + } +} + +/* Delta Frame Glow */ +@keyframes frame-glow { + 0%, 100% { + opacity: 0.8; + } + 50% { + opacity: 1; + } +} + +.matrix-rain-container { + animation: matrix-glow 2s ease-in-out infinite; +} + +/* Glitch Keyframes for the large text (CP SQUAD) - Subtle effect */ +@keyframes glitch { + 0%, 90%, 100% { + transform: translate(0); + } + 92% { + transform: translate(-2px, 2px); + } + 94% { + transform: translate(2px, -2px); + } + 96% { + transform: translate(-2px, -2px); + } + 98% { + transform: translate(2px, 2px); + } +} + +/* Glitch Keyframes for the typing cursor (_ character) */ +@keyframes glitch-cursor { + 0% { + text-shadow: 2px 0 #00ff00, -2px 0 #00ffc4; + opacity: 1; + clip-path: inset(0 0 0 0); + } + 25% { + text-shadow: 4px 0 #00ff00, -4px 0 #00ffc4; + opacity: 0.8; + clip-path: inset(0 50% 0 0); + } + 50% { + text-shadow: -2px 0 #00ff00, 2px 0 #00ffc4; + opacity: 1; + clip-path: inset(0 0 0 0); + } + 75% { + text-shadow: 0 5px #00ff00, 0 -5px #00ffc4; + opacity: 0.7; + clip-path: inset(50% 0 0 0); + } + 100% { + text-shadow: 2px 0 #00ff00, -2px 0 #00ffc4; + opacity: 1; + clip-path: inset(0 0 0 0); + } +} + +/* Cursor Blink Keyframes */ +@keyframes blink-cursor { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +/* Glitch Title Styling - Clean & Optimized for all screen sizes */ +.glitch-text { + position: relative; + font-family: 'Chava', monospace, 'Courier New', Courier; + font-size: clamp(2.5rem, 8vw, 7rem); + font-weight: 400; + color: white; + animation: glitch 4s infinite alternate; + letter-spacing: 0.08em; + line-height: 1.2; + will-change: transform; + text-shadow: + 0 0 20px rgba(255, 255, 255, 0.5), + 0 0 40px rgba(0, 255, 196, 0.3); + transform: translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +/* Tablet optimization */ +@media (max-width: 1024px) { + .glitch-text { + font-size: clamp(2rem, 10vw, 5rem); + letter-spacing: 0.05em; + } +} + +/* Mobile optimization */ +@media (max-width: 640px) { + .glitch-text { + font-size: clamp(1.75rem, 12vw, 3.5rem); + letter-spacing: 0.03em; + } +} + +/* Pseudo-elements for the color-separated glitch effect - Subtle */ +.glitch-text::before, +.glitch-text::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; +} + +.glitch-text::before { + left: 2px; + text-shadow: -2px 0 #ff00c4; + clip-path: inset(20% 0 70% 0); + animation: glitch 4s infinite alternate-reverse, glitch-flicker 4s infinite; +} + +.glitch-text::after { + left: -2px; + text-shadow: -2px 0 #00ffc4; + clip-path: inset(40% 0 55% 0); + animation: glitch 4s infinite alternate, glitch-flicker 4s infinite 0.2s; +} + +/* Glitch flicker animation */ +@keyframes glitch-flicker { + 0%, 89%, 100% { + opacity: 0; + } + 90%, 99% { + opacity: 0.8; + } +} + +/* Glitch Cursor Styling - Optimized */ +.glitch-cursor { + display: inline-block; + color: #00ffc4; + text-shadow: 2px 0 #00ff00, -2px 0 #00ffc4; + animation: glitch-cursor 0.5s infinite alternate, blink-cursor 0.7s infinite step-end; + will-change: opacity, text-shadow; +} + +/* Typing Subtitle Styling - Fully Responsive & Optimized */ +.typing-text { + font-family: 'Chava', monospace, 'Courier New', Courier; + font-size: clamp(0.875rem, 2.5vw, 1.5rem); + font-weight: 400; + color: #00ffc4; + margin-top: 20px; + letter-spacing: 0.08em; + line-height: 1.6; + min-height: 2em; + display: inline-block; + will-change: contents; + transform: translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +/* Revealed text styling */ +.typing-text-revealed { + font-family: 'Chava', monospace; + color: #00ffc4; + text-shadow: 0 0 8px rgba(0, 255, 196, 0.5); +} + +/* Encrypted text styling */ +.typing-text-encrypted { + font-family: 'Chava', monospace; + color: #00ff00; + opacity: 0.6; + text-shadow: 0 0 5px rgba(0, 255, 0, 0.3); +} + +/* Tablet optimization */ +@media (max-width: 1024px) { + .typing-text { + font-size: clamp(0.75rem, 3vw, 1.25rem); + letter-spacing: 0.05em; + } +} + +/* Mobile optimization */ +@media (max-width: 640px) { + .typing-text { + font-size: clamp(0.75rem, 4vw, 1rem); + letter-spacing: 0.03em; + line-height: 1.8; + } +} + +/* Delta Frame Responsive Styling */ +.delta-frame { + transition: all 0.3s ease; +} + +.delta-outer-border { + vector-effect: non-scaling-stroke; +} + +/* Responsive stroke widths for delta frame */ +@media (max-width: 640px) { + .delta-frame svg path, + .delta-frame svg line { + stroke-width: 0.5 !important; + } + + .delta-outer-border { + stroke-width: 0.6 !important; + } +} + +@media (min-width: 641px) and (max-width: 1024px) { + .delta-frame svg path, + .delta-frame svg line { + stroke-width: 0.4 !important; + } +} + +@media (min-width: 1025px) { + .delta-frame svg path, + .delta-frame svg line { + stroke-width: 0.3 !important; + } +} diff --git a/cpsquad/app/page.js b/cpsquad/app/page.js index 7b92eab..4e7d4c1 100644 --- a/cpsquad/app/page.js +++ b/cpsquad/app/page.js @@ -9,10 +9,7 @@ export default function Home() { return (
{/* Hero Section */} -
+

CP SQUAD_ @@ -38,32 +35,24 @@ export default function Home() {

{/* About Section */} -
+

ABOUT US_

- We're coders, enthusiasts, geeks. We're CP Squad - a community - dedicated to building competitive programming skills and fostering a - culture of continuous learning. + We're coders, enthusiasts, geeks. We're CP Squad - a community dedicated to + building competitive programming skills and fostering a culture of continuous learning.

- Fueled by a passion for programming and problem-solving, our club - doesn't just build skills, we delve deeper into algorithms, data - structures, and competitive programming strategies. + Fueled by a passion for programming and problem-solving, our club doesn't just + build skills, we delve deeper into algorithms, data structures, and competitive programming strategies.

{/* Features Section */} -
+

WHAT WE DO_ @@ -72,22 +61,19 @@ export default function Home() { {[ { title: "Competitive Programming", - description: - "Regular contests, practice sessions, and algorithm workshops to sharpen your coding skills.", - icon: "💻", + description: "Regular contests, practice sessions, and algorithm workshops to sharpen your coding skills.", + icon: "💻" }, { title: "Community Events", - description: - "Hackathons, coding competitions, and collaborative learning sessions with peers.", - icon: "🚀", + description: "Hackathons, coding competitions, and collaborative learning sessions with peers.", + icon: "🚀" }, { title: "Skill Development", - description: - "Learn from industry experts, improve problem-solving abilities, and build your portfolio.", - icon: "📚", - }, + description: "Learn from industry experts, improve problem-solving abilities, and build your portfolio.", + icon: "📚" + } ].map((feature, index) => (

- - {/* Blogs Section */} -
-
-

- OUR BLOGS_ -

-
- -
- {blogdata.slice(0, 3).map((item, id) => ( - - ))} -
- -
- -
- -
); }