About Page - Copy this React, Tailwind Component to your project

@import url('https://fonts.googleapis.com/css2?family=Mokoto+Sans&display=swap'); @font face { font family: 'CustomFont'; src: url('./fonts.otf') format('opentype'); } @font face { font family: 'TrueFont'; src: url('./fonts2.ttf') format('opentype'); } /* Content Styles / .main content { padding: 20px; / Adjust as needed / min height: 100vh; / Ensures the content area takes at least the full height of the viewport */ box sizing: border box; } /* Footer Styles */ footer { background color: black; color: white; text align: center; padding: 20px; width: 100%; } body { font family: 'Mokoto Sans', sans serif; background image: url('./bg.png'); background size: auto; } .font2 { font family: 'TrueFont', sans serif; } .logotext { font family: 'CustomFont', sans serif; } @media (max width: 768px) { .logotext { font size: 2.5rem; /* Smaller size for tablets */ } } @media (max width: 480px) { .logotext { font size: 2rem; /* Even smaller size for mobile devices */ } } .header button { display: inline block; padding: 10px 20px; font size: 16px; font weight: bold; text transform: uppercase; color: #ffffff; background color: #6d28d9; /* Purple color */ border radius: 8px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; text decoration: none; } .events_anime:hover{ background color: #390391; /* Darker purple on hover */ box shadow: 0 6px 10px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); transform: translateY( 6px); } .header button:hover { background color: #5b21b6; /* Darker purple on hover */ box shadow: 0 6px 10px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); transform: translateY( 3px); } .header button:active { background color: #4c1d95; /* Even darker purple on click */ box shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); transform: translateY(1px); } /* Header Styles */ .header { background: rgba(0, 0, 0, 0.8); } /* Logo Styles / .logo img { max height: 40px; / Adjust logo size / } / Team card styling */ .team card { border radius: 1rem; padding: 2rem; background size: cover; background position: center; text align: center; color: white; transition: transform 0.3s ease, box shadow 0.3s ease; } .team card:hover { transform: scale(1.05); box shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .team image { border radius: 1rem; max width: 100%; height: auto; } /* Sponsor card styling */ .sponsor card { border radius: 1rem; padding: 2rem; background size: cover; background position: center; text align: center; color: white; transition: transform 0.3s ease, box shadow 0.3s ease; } .sponsor card:hover { transform: scale(1.05); box shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .sponsor image { border radius: 1rem; max width: 100%; height: auto; } /* Typing effect container */ .typing animation container { display: flex; justify content: center; align items: center; width: 100%; max width: 800px; margin top: 20px; } /* Header Styles */ .header { background: rgba(0, 0, 0, 0.8); } /* Logo Styles */ .logo { color: #ffffff; text decoration: none; } /* Navigation Styles */ .nav { display: flex; justify content: space between; align items: center; } .menu { display: flex; list style: none; } .menu dropdown { display: none; list style: none; padding: 10px; border radius: 8px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.3); } .menu dropdown a { display: block; padding: 10px; text decoration: none; color: white; text align: center; } .menu dropdown a:hover { background: #6d28d9; } /* 3D Button Styles / .header button { display: inline block; padding: 10px 20px; font size: 16px; font weight: bold; text transform: uppercase; color: #ffffff; background color: #6d28d9; / Purple color */ border radius: 8px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; text decoration: none; } .header button:hover { background color: #5b21b6; /* Darker purple on hover */ box shadow: 0 6px 10px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); transform: translateY( 3px); } .header button:active { background color: #4c1d95; /* Even darker purple on click */ box shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); transform: translateY(1px); } /* Responsive Styles */ @media (max width: 1024px) { /* Large screens */ .header { padding: 4px 6px; } .menu { display: none; } .menu toggle { display: block; } } @media (max width: 768px) { /* Medium screens */ .header { padding: 2px 4px; } } @media (max width: 640px) { /* Small screens */ .header { padding: 1px 2px; } .header button { padding: 8px 16px; /* Adjust button size */ font size: 14px; } } /* 3D Button Styles / .header button { display: inline block; padding: 10px 20px; font size: 16px; font weight: bold; text transform: uppercase; color: #ffffff; background color: #6d28d9; / Purple color */ border radius: 8px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; text decoration: none; } .header button:hover { background color: #5b21b6; /* Darker purple on hover */ box shadow: 0 6px 10px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); transform: translateY( 3px); } .header button:active { background color: #4c1d95; /* Even darker purple on click */ box shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); transform: translateY(1px); } /* Responsive Styles */ @media (max width: 1024px) { /* Large screens */ .header { padding: 4px 6px; } .menu { display: none; } .menu toggle { display: block; } } @media (max width: 768px) { /* Medium screens */ .header { padding: 2px 4px; } } @media (max width: 640px) { /* Small screens */ .header { padding: 1px 2px; } .header button { padding: 8px 16px; /* Adjust button size */ font size: 14px; } } /* Responsive Styles */ @media (max width: 1024px) { /* Large screens */ .header { padding: 4px 6px; } .menu { display: none; } .menu toggle { display: block; } } @media (max width: 768px) { /* Medium screens */ .header { padding: 2px 4px; } .logo img { max height: 30px; /* Adjust logo size */ } } @media (max width: 640px) { /* Small screens */ .header { padding: 1px 2px; } .logo img { max height: 25px; /* Adjust logo size */ } .header button { padding: 8px 16px; /* Adjust button size */ font size: 14px; } } /* Enhanced Cool Button */ .mokoto text { font family: 'Mokoto Sans', sans serif; } .cool button { display: inline block; background: linear gradient(135deg, #6b00b6, #3a0652); color: white; padding: 16px 32px; font size: 1.5rem; border radius: 9999px; box shadow: 0 4px 15px rgba(0, 0, 0, 0.5); transition: all 0.3s ease in out; } /* Logo styling / header img { height: 100%; / Adjust height as needed / width: auto / Maintain aspect ratio */ } .cool button:hover { transform: scale(1.1) rotate(2deg); box shadow: 0 8px 25px rgba(0, 0, 0, 0.7); background: linear gradient(135deg, #6b00b6, #4b0082); } .cool button:active { transform: scale(0.95); box shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } /* Scroll Animations for hero text */ .animate fade in { opacity: 0; animation: fadeIn 2s ease forwards; } @keyframes fadeIn { to { opacity: 1; } } /* Ensure the hero section aligns items in a column and centers them */ .hero { display: flex; flex direction: column; align items: center; justify content: center; text align: center; } /* Typing effect container / .typing animation container { display: flex; justify content: center; align items: center; width: 100%; / Make sure it takes full width of its container / max width: 800px; / Adjust as needed / margin top: 20px; / Adjust spacing */ } /* Typing effect styling / .typing animation { display: inline block; border right: 2px solid white; / Blinking cursor effect / white space: nowrap; overflow: hidden; font size: 1.5rem; / Adjust font size if needed */ animation: blinkCursor 0.7s step end infinite; } @keyframes blinkCursor { from { border right color: white; } to { border right color: transparent; } } .typing animation { animation: blinkCursor 0.7s step end infinite; } /* Event cards hover effect */ .event card { background: #6200ea; color: white; padding: 20px; border radius: 10px; box shadow: 0 4px 15px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease, box shadow 0.3s ease; } .event card:hover { transform: translateY( 10px); box shadow: 0 8px 20px rgba(0, 0, 0, 0.6); } /* FAQ Section */ .faq item { margin bottom: 16px; border bottom: 1px solid rgba(255, 255, 255, 0.2); } .faq question { font size: 1.5rem; cursor: pointer; padding: 8px 0; } /* Typing effect container / .typing animation { display: inline block; border right: 2px solid white; / Blinking cursor */ white space: nowrap; overflow: hidden; } /* Cursor blinking effect */ @keyframes blinkCursor { from { border right color: white; } to { border right color: transparent; } } .typing animation { animation: blinkCursor 0.7s step end infinite; } /* FAQ Section Continued */ .faq answer { display: none; padding: 8px 0; font size: 1rem; } .faq item.active .faq answer { display: block; } /* AOS animation offsets */ [data aos="fade up"] { opacity: 0; transform: translateY(20px); } [data aos="fade up"].aos animate { opacity: 1; transform: translateY(0); } [data aos="fade up"] { transition: opacity 0.6s ease out, transform 0.6s ease out; } /* Responsive adjustments */ @media (max width: 768px) { .event card { padding: 15px; font size: 0.9rem; } .cool button { padding: 12px 24px; font size: 1.2rem; } } /* Enhanced Cool Button */ .cool button { display: inline block; position: relative; background: linear gradient(135deg, #6b00b6, #8e2de2); color: white; padding: 16px 32px; font size: 1.5rem; border radius: 9999px; text transform: uppercase; font weight: bold; border: 2px solid transparent; transition: background 0.5s, box shadow 0.5s, transform 0.3s; overflow: hidden; } .cool button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: rgba(255, 255, 255, 0.1); border radius: 50%; transition: width 0.5s, height 0.5s; transform: translate( 50%, 50%); z index: 0; } .cool button:hover::before { width: 400%; height: 400%; } .cool button:hover { background: linear gradient(135deg, #4b0082, #6b00b6); box shadow: 0 12px 30px rgba(0, 0, 0, 0.6); transform: scale(1.05); } .cool button:active { transform: scale(0.95); box shadow: 0 6px 15px rgba(0, 0, 0, 0.4); } /* Text shadow for better visibility */ .cool button { text shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } /* Responsive adjustments */ @media (max width: 768px) { .cool button { padding: 12px 24px; font size: 1.2rem; } } make the about page for CodeJam