From c859b75817e9f6937be7203b21e7050b29cc3f5c Mon Sep 17 00:00:00 2001 From: Niya Shiyas Date: Sun, 17 Nov 2024 20:05:18 +0530 Subject: [PATCH] several changes --- src/app/page.js | 4 +- src/components/About/About.css | 72 ++-- src/components/About/About.jsx | 127 ++++-- src/components/BlobAnimation.jsx | 2 +- src/components/Contact/ContactCard.css | 18 +- src/components/Footer.jsx | 17 +- src/components/Timeline/Timeline.jsx | 2 +- src/components/WhyParticipate/InfoCard.jsx | 29 +- .../WhyParticipate/WhyParticipate.css | 405 +++++++++--------- .../WhyParticipate/WhyParticipate.jsx | 123 +++--- src/components/prizes/prizes.css | 68 ++- src/components/prizes/prizes.jsx | 41 +- 12 files changed, 452 insertions(+), 456 deletions(-) diff --git a/src/app/page.js b/src/app/page.js index 33c8ec7..992b07e 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -17,7 +17,7 @@ import TimelineSection from "../components/Timeline/Timeline"; export default function Home() { return ( - <> +
@@ -36,6 +36,6 @@ export default function Home() {
- +
); } diff --git a/src/components/About/About.css b/src/components/About/About.css index 8935c87..6423378 100644 --- a/src/components/About/About.css +++ b/src/components/About/About.css @@ -175,8 +175,7 @@ } } */ - -.about-container{ +.about-container { background-color: #000; height: 100vh; width: 100vw; @@ -189,27 +188,27 @@ min-height: fit-content; } -.abouth1{ - font-family: 'neue'; +.abouth1 { + font-family: "neue"; font-size: 3.5rem; margin-bottom: -60px; z-index: 30; } -.top-left{ +.top-left { position: absolute; top: 0; left: 0; } -.bottom-right{ +.bottom-right { position: absolute; bottom: 0; right: 0; width: 100vw; } -.circle1{ +.circle1 { position: absolute; bottom: -500px; height: 1000px; @@ -219,7 +218,7 @@ animation: rotate 15s linear infinite; } -.circle2{ +.circle2 { position: absolute; bottom: -400px; height: 800px; @@ -229,7 +228,7 @@ animation: rotate 20s linear infinite; } -.circle3{ +.circle3 { position: absolute; bottom: -200px; height: 400px; @@ -239,13 +238,13 @@ animation: rotate 25s linear infinite; } -svg{ +svg { backdrop-filter: blur(10px); width: 90%; height: 90%; } -.details-container{ +.details-container { width: 80%; height: 80%; display: flex; @@ -253,7 +252,7 @@ svg{ align-items: center; } -.abtp{ +.abtp { position: absolute; width: 60%; font-size: 1.5rem; @@ -271,87 +270,84 @@ svg{ } @media (max-width: 1390px) { - .abtp{ + .abtp { font-size: 1.2rem; } } @media (max-width: 1300px) { + .details-container { + width: 100%; + height: 85%; + } - .details-container{ - width: 100%; - height: 85%; - } - - .abtp{ - font-size: 1.3rem; - width: 80%; - } - + .abtp { + font-size: 1.3rem; + width: 80%; + } } @media (max-width: 900px) { - .circle1{ + .circle1 { height: 800px; width: auto; bottom: -400px; left: -400px; } - .circle2{ + .circle2 { height: 600px; width: auto; bottom: -300px; left: -300px; } - .abtp{ + .abtp { font-size: 1.1rem; width: 80%; } - .abouth1{ + .abouth1 { font-size: 2.5rem; } } @media (max-width: 768px) { - svg{ + svg { display: none; } - .circle1{ + .circle1 { height: 600px; width: auto; bottom: -300px; left: -300px; } - .circle2{ + .circle2 { height: 500px; width: auto; bottom: -250px; left: -250px; } - } @media (max-width: 530px) { - .circle1{ + .circle1 { height: 450px; width: auto; bottom: -225px; left: -225px; } - .circle2{ + .circle2 { height: 300px; width: auto; bottom: -150px; left: -150px; } - .circle3{ + .circle3 { height: 100px; width: auto; bottom: -50px; @@ -360,18 +356,18 @@ svg{ } @media (max-width: 420px) { - .circle1{ + .circle1 { display: none; } - .abtp{ + .abtp { font-size: 0.9rem; width: 80%; } } @media (max-height: 550px) { - .abtp{ + .abtp { font-size: 1rem; } -} \ No newline at end of file +} diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx index f40dd8b..8afdace 100644 --- a/src/components/About/About.jsx +++ b/src/components/About/About.jsx @@ -1,61 +1,98 @@ "use client"; import "./About.css"; -import Image from 'next/image' -import { useState } from "react"; -import top_left from '../../assets/backgrounds/about/topleft.png' -import bottom_right from '../../assets/backgrounds/about/bottomright.png' -import circle1 from '../../assets/backgrounds/about/circle1.png' -import circle2 from '../../assets/backgrounds/about/circle2.png' -import circle3 from '../../assets/backgrounds/about/circle3.png' +import Image from "next/image"; +import {useState} from "react"; +import top_left from "../../assets/backgrounds/about/topleft.png"; +import bottom_right from "../../assets/backgrounds/about/bottomright.png"; +import circle1 from "../../assets/backgrounds/about/circle1.png"; +import circle2 from "../../assets/backgrounds/about/circle2.png"; +import circle3 from "../../assets/backgrounds/about/circle3.png"; const About = () => { - return ( <>
- - - - - -

ABOUT

+ + + + + +

+ ABOUT +

- - + - + - - - - - - - - - - - - + + + + + + + + + + + + -

Welcome to Hack for Tomorrow, the hackathon where young innovators come together to create cool, impactful solutions. Whether you're a coding whiz, a design genius, or just someone with a big idea, this is the place to bring your skills to the table and make something amazing happen.



At Hack for Tomorrow, it's all about collaborating, learning, and showing off what you can do. You'll meet awesome people, work on exciting projects, and maybe even change the world—no big deal, right? Plus, it's a great way to dive into the latest tech, sharpen your skills, and have a ton of fun while you're at it.

+

+ Level up your coding skills and slay real-world challenges! Whether + you're a seasoned developer or a coding newbie, HFT is the place to + collaborate with like-minded tech enthusiasts to build + groundbreaking solutions. +
+ Join us for a 24-hour coding marathon filled with caffeine, food, + and endless possibilities. So, gather your squad and let's code a + better tomorrow at Hack for Tomorrow! +

diff --git a/src/components/BlobAnimation.jsx b/src/components/BlobAnimation.jsx index 85f0254..181c09a 100644 --- a/src/components/BlobAnimation.jsx +++ b/src/components/BlobAnimation.jsx @@ -295,7 +295,7 @@ const BlobAnimation = () => { data-aos-duration="1100" > astro diff --git a/src/components/Contact/ContactCard.css b/src/components/Contact/ContactCard.css index f1d2a6a..8550076 100644 --- a/src/components/Contact/ContactCard.css +++ b/src/components/Contact/ContactCard.css @@ -90,7 +90,6 @@ justify-content: start; width: 70%; font-size: 25px; - opacity: 0; } .socials a { @@ -99,9 +98,7 @@ } .socials a:hover { - color: #858383; - opacity: 1; - scale: 1.05; + color: #e8d4d4; text-decoration: none; } .social-linkedin { @@ -113,7 +110,16 @@ .social-mail { scale: 0.9; } +.social-linkedin:hover { + scale: 1.1; +} +.social-phone:hover { + scale: 0.9; +} +.social-mail:hover { + scale: 0.95; +} -.card-container:hover .logowrapper { +/* .card-container:hover .logowrapper { box-shadow: 0px 0px 20px #ffffff3e; -} +} */ diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index d1f3a3d..da3672c 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -6,8 +6,8 @@ import MECLogo from "@/assets/logos/mec@official.svg"; import ExcelLogo from "@/assets/logos/excel@2024.svg"; import excel from "@/assets/Footer/excel.svg"; -import { FaInstagram, FaFacebookF, FaLinkedinIn } from "react-icons/fa"; -import { FaXTwitter } from "react-icons/fa6"; +import {FaInstagram, FaFacebookF, FaLinkedinIn} from "react-icons/fa"; +import {FaXTwitter} from "react-icons/fa6"; const Footer = () => { const FooterSocials = [ @@ -33,8 +33,8 @@ const Footer = () => { }, ]; return ( -