From feadc1929dba84cd6c2b2c46fecca6a3278ddbea Mon Sep 17 00:00:00 2001 From: jzf21 Date: Thu, 24 Oct 2024 11:00:01 +0530 Subject: [PATCH] change about contact --- src/app/components/About/About.css | 24 ++--- src/app/components/Contact/ContactCard.css | 97 +++++++++---------- src/app/components/Contact/ContactCard.jsx | 5 +- src/app/components/Contact/ContactPage.jsx | 4 +- src/app/components/Intro.jsx | 25 +++++ .../components/WhyParticipate/InfoCard.jsx | 3 +- .../WhyParticipate/WhyParticipate.jsx | 6 ++ src/app/page.js | 3 +- 8 files changed, 98 insertions(+), 69 deletions(-) create mode 100644 src/app/components/Intro.jsx diff --git a/src/app/components/About/About.css b/src/app/components/About/About.css index 30eab41..738d5b3 100644 --- a/src/app/components/About/About.css +++ b/src/app/components/About/About.css @@ -4,14 +4,14 @@ .about-container { width: 70%; - height: 60%; + height: 70%; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 20px; - background: #1e1e1e; - border-radius: 30px; + background: #1e1e1e36; + backdrop-filter: blur(10px); } .about-title-container { width: 20%; @@ -28,8 +28,8 @@ #fd95ff 283.83deg, #2c1b77 463.3deg ); */ - background-color: #1e1e1e; - border-radius: 30px; + background-color: transparent; + text-align: center; } @@ -57,18 +57,18 @@ overflow: hidden; background: conic-gradient( from 127.56deg at 128.67% 74.06%, - #fd95ff -76.17deg, - #2c1b77 103.3deg, - #fd95ff 283.83deg, - #2c1b77 463.3deg + #fd95ffd3 -76.17deg, + #3821a2c8 103.3deg, + #f798f9d7 283.83deg, + #2c1b77b7 463.3deg ); - border-radius: 30px; + backdrop-filter: blur(10px); font-size: 1.3rem; transition: background 0.5s ease-in-out; } .title { - font-size: 2rem; + font-size: 2.3rem; font-weight: 700; margin: 1rem 0; } @@ -86,7 +86,7 @@ } } -@media screen and (max-width: 480px) { +@media screen and (max-width: 768px) { .about-container { width: 100%; height: 100%; diff --git a/src/app/components/Contact/ContactCard.css b/src/app/components/Contact/ContactCard.css index dc78da3..5ace4fe 100644 --- a/src/app/components/Contact/ContactCard.css +++ b/src/app/components/Contact/ContactCard.css @@ -1,81 +1,78 @@ .card-container { - height: 450px; - width: 350px; - background: rgba(30, 30, 58, 0.452); - box-shadow: 0 8px 32px 0 rgba(51, 56, 133, 0.459); - /* backdrop-filter: blur(10.5px); */ - /* -webkit-backdrop-filter: blur(10.5px); */ - border-radius: 30px; - border: 1.5px solid #fff; - display: flex; - justify-content: center; - gap: 60px; - flex-direction: column; - align-items: center; - transition: 0.3s ease-in-out; + height: 400px; + width: 350px; + background: rgba(26, 26, 43, 0.37); + /* box-shadow: 0 8px 32px 0 rgba(51, 56, 133, 0.459); */ + /* backdrop-filter: blur(10.5px); */ + /* -webkit-backdrop-filter: blur(10.5px); */ +backdrop-filter: blur(10.5px); + border: 1.5px solid #ffffffc7; + display: flex; + justify-content: center; + gap: 30px; + flex-direction: column; + align-items: center; + transition: 0.3s ease-in-out; } .card-container:hover { - border-radius: 30px; - box-shadow: 5px 8px 10px 0 rgba(31, 38, 135, 0.37); - scale: 1.01; + scale: 1.01; } .logoimg { - height: 170px; - width: 170px; - overflow: visible; - background-size: cover; - clip-path: circle(50%); - image-rendering: crisp-edges; + height: 170px; + width: 170px; + overflow: visible; + background-size: cover; + clip-path: circle(50%); + image-rendering: crisp-edges; } .logowrapper { - margin-top: 20px; - box-shadow: 0px 0px 70px #ffffff73; - border-radius: 50%; - transition: 0.3s ease-in-out; + margin-top: 20px; + + border-radius: 50%; + transition: 0.3s ease-in-out; } .text-field { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - margin: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin: 0; } .text-field h2 { - font-size: 27px; + font-size: 27px; } .text-field p { - opacity: 0.7; + opacity: 0.7; } .socials { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-around; - width: 70%; - font-size: 25px; - opacity: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + width: 70%; + font-size: 25px; + opacity: 0; } .socials a { - color: #ffffff; - opacity: 0.8; + color: #ffffff; + opacity: 0.8; } .socials a:hover { - color: #ffffff; - opacity: 1; - scale: 1.05; - text-decoration: none; + color: #ffffff; + opacity: 1; + scale: 1.05; + text-decoration: none; } -.card-container:hover .logowrapper{ - box-shadow: 0px 0px 90px #ffffff73; +.card-container:hover .logowrapper { + box-shadow: 0px 0px 20px #ffffff3e; } - diff --git a/src/app/components/Contact/ContactCard.jsx b/src/app/components/Contact/ContactCard.jsx index 32e1921..65a8cd7 100644 --- a/src/app/components/Contact/ContactCard.jsx +++ b/src/app/components/Contact/ContactCard.jsx @@ -46,9 +46,8 @@ const ContactCard = ({details}) => { <> setIsHovered(true)} diff --git a/src/app/components/Contact/ContactPage.jsx b/src/app/components/Contact/ContactPage.jsx index a08eaca..1b9e6bf 100644 --- a/src/app/components/Contact/ContactPage.jsx +++ b/src/app/components/Contact/ContactPage.jsx @@ -67,8 +67,8 @@ export default function Contact (){ return ( <>
-

Contact Us

-

We’d love to hear from you! Whether you have questions, feedback, or just want to chat, feel free to reach out to us. Your thoughts and inquiries are valuable to us, and we’re here to help in any way we can.

+

Contact Us

+

We’d love to hear from you! Whether you have questions, feedback, or just want to chat, feel free to reach out to us. Your thoughts and inquiries are valuable to us, and we’re here to help in any way we can.

{contactDetails.map((cd, index) => ( diff --git a/src/app/components/Intro.jsx b/src/app/components/Intro.jsx new file mode 100644 index 0000000..a59a862 --- /dev/null +++ b/src/app/components/Intro.jsx @@ -0,0 +1,25 @@ + +import React from "react"; + + +const Intro = () => { + return ( +
+
+
+

+ Hack for Tomorrow is a vibrant hackathon that empowers young + innovators to create impactful solutions. Join us to collaborate, + learn, and showcase your skills in a dynamic, tech-driven environment. +

+
+
+ ); + +}; + +export default Intro; diff --git a/src/app/components/WhyParticipate/InfoCard.jsx b/src/app/components/WhyParticipate/InfoCard.jsx index 84fe663..903ba06 100644 --- a/src/app/components/WhyParticipate/InfoCard.jsx +++ b/src/app/components/WhyParticipate/InfoCard.jsx @@ -2,12 +2,13 @@ const InfoCard = ({ title, text, gradient = "from-[#3b48f9] to-[#a73ffa]", + color="text-white" }) => { return (
-

+

{title}

diff --git a/src/app/components/WhyParticipate/WhyParticipate.jsx b/src/app/components/WhyParticipate/WhyParticipate.jsx index 2874cb1..2f0256f 100644 --- a/src/app/components/WhyParticipate/WhyParticipate.jsx +++ b/src/app/components/WhyParticipate/WhyParticipate.jsx @@ -11,26 +11,31 @@ const WhyParticipate = () => { title: "Build and Learn", text: "Dive into intense coding sessions, tackle real-world problems, and enhance your skills. Hackathons provide a unique opportunity to learn new technologies and apply them in innovative projects.", gradient: "from-[#3b48f9] to-[#a73ffa]", + color: "text-white", }, { title: "Network", text: "Connect with industry professionals, and potential employers. Hackathons are a melting pot of talent, offering invaluable networking opportunities that can shape your career.", gradient: "from-[#5f72be] to-[#06e1ae]", + color: "text-white", }, { title: "Mentor Support", text: "Gain insights and guidance from experienced mentors. They'll be there to help you overcome challenges, refine your ideas, and maximize your learning experience throughout the hackathon.", gradient: "from-[#5bd8fa] to-[#00f982]", + color: "text-black", }, { title: "Goodies and Swag", text: "Take home cool branded merchandise and tech gadgets. Hackathons often provide participants with exclusive swag, giving you lasting mementos of your innovative journey.", gradient: "from-[#5f72be] to-[#06e1ae]", + color: "text-white", }, { title: "Cash Prizes", text: "Compete for substantial cash rewards and other prizes. Hack for Tommorow offers significant prize pools, giving you the chance to fund your projects or kickstart your entrepreneurial dreams.", gradient: "from-[#3b48f9] to-[#a73ffa]", + color: "text-white", }, ]; const cardWidth = 350; // Adjust this value based on your desired card width @@ -87,6 +92,7 @@ const WhyParticipate = () => { title={card.title} text={card.text} gradient={card.gradient} + color={card.color} />
diff --git a/src/app/page.js b/src/app/page.js index b7477dc..78745c9 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -10,6 +10,7 @@ import AccordionImageGallery from "./components/ImageGallery"; import WhyParticipate from "./components/WhyParticipate/WhyParticipate"; import FAQ from "./components/FAQ/FAQ"; import Contact from "./components/Contact/ContactPage"; +import Intro from "./components/Intro"; export default function Home() { return ( @@ -19,7 +20,7 @@ export default function Home() { {/* */} - +