Merge pull request #29 from sam-shervin/master

footer changes
ComputerSocietyVITC · Mar 23, 2024 · cc1ecf4 · cc1ecf4
2 parents 5523d8d + 9c06cb2
commit cc1ecf4
Show file tree

Hide file tree

Showing 8 changed files with 290 additions and 92 deletions.
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -12,56 +12,59 @@ import devto from "../assets/socialmedia/devto.png";
 const Footer = () => {
 	return (
 		<div className="relative z-0 mx-32">
-			<section className="h-0.5 bg-gradient-to-r from-[#CF1259] to-[#7161EF] my-4 " />
+			<section
+				id="contact"
+				className="h-0.5 bg-gradient-to-r from-[#CF1259] to-[#7161EF] my-4 "
+			/>
 			<footer className="font-montserrat">
-				<div className="pb-6 text-gray-800 flex flex-wrap justify-left text-left items-center">
-					<div className="pt-8 lg:pt-4 w-11/12 lg:mx-0 sm:w-2/3 lg:w-3/12 order-4 lg:order-1">
+				<div className="pb-6 text-gray-800 flex flex-wrap lg:flex-nowrap justify-left text-left items-center">
+					<div className="pt-8 lg:pt-4 w-11/12 sm:w-2/3 lg:w-[30rem] order-4 lg:order-1">
 						<img
 							src={comsocLogowhite.src}
 							alt="IEEE CS VITC Logo"
-							className="ml-4 lg:ml-20"
+							className="items-center justify-center"
 						/>
 					</div>
-					<div className="mt-3 w-full lg:w-3/12 py-6 lg:py-0 pl-28 hidden lg:block order-1 lg:order-2">
+					<div className="mt-3 w-full lg:w-3/12 py-6 lg:py-0 hidden lg:block order-1 lg:order-2">
 						<div className="text-lg lg:text-base text-white inline-block mb-3">
 							Menu
 							<div id="underlineGradient" />
 						</div>
 						<a
-							href="/"
+							href="#"
 							className="my-3 block text-white hover:text-gray-200 text-sm"
 						>
 							Home
 						</a>
 						<a
-							href="/Team"
+							href="#about"
 							className="my-3 block text-white hover:text-gray-200 text-sm"
 						>
-							The Team
+							About
 						</a>
 						<a
-							href="/Events"
+							href="#domains"
 							className="my-3 block text-white hover:text-gray-200 text-sm"
 						>
-							Events
+							Domains
 						</a>
 						<a
-							href="/Project"
+							href="#timeline"
 							className="my-3 block text-white hover:text-gray-200 text-sm"
 						>
-							Project
+							Timeline
 						</a>
 						<a
-							href="/Blogs"
+							href="#sponsors"
 							className="my-3 block text-white hover:text-gray-200 text-sm"
 						>
-							Blogs
+							Sponsors
 						</a>
 						<a
-							href="/Contacts"
+							href="#faqs"
 							className="my-3 block text-white hover:text-gray-200 text-sm"
 						>
-							Contacts
+							FAQs
 						</a>
 					</div>
 					<div className="mt-3 w-full lg:w-3/12 order-2 lg:order-3">

diff --git a/src/components/pages/FAQ.tsx b/src/components/pages/FAQ.tsx
@@ -0,0 +1,50 @@
+import { motion } from "framer-motion";
+import { Space_Grotesk, Space_Mono } from "next/font/google";
+
+const spaceGrotesk = Space_Grotesk({
+	subsets: ["latin"],
+	variable: "--font-space-grotesk",
+});
+
+const spaceMono = Space_Mono({
+	subsets: ["latin"],
+	variable: "--font-space-mono",
+	weight: "400",
+});
+
+export default function FAQ(): JSX.Element {
+	return (
+		<>
+			<motion.section
+				id="faqs"
+				className="relative mt-10 w-full flex py-20 font-bold text-[5rem] min-h-screen"
+			>
+				<motion.img
+					initial={{ opacity: 1 }}
+					animate={{ opacity: [1, 0.7, 0.3, 0.5, 0, 0.5, 0.3, 0.7, 1] }} // Animate opacity from 1 to 0
+					transition={{ duration: 1, repeat: Infinity, yoyo: Infinity }} // Set transition duration and repeat infinitely
+					src="/dots_full_red.svg"
+					className="absolute left-[0rem] top-[0rem] w-[18rem] z-0"
+				></motion.img>
+				<motion.img
+					initial={{ opacity: 1 }}
+					animate={{ opacity: [1, 0.7, 0.3, 0.5, 0, 0.5, 0.3, 0.7, 1] }} // Animate opacity from 1 to 0
+					transition={{ duration: 0.8, repeat: Infinity, yoyo: Infinity }} // Set transition duration and repeat infinitely
+					src="/dots_full_white.svg"
+					className="absolute left-[3rem] top-[-4rem] w-[22rem] z-0"
+				></motion.img>
+
+				<div className="p-4 flex flex-col w-[80%] mx-auto items-center justify-center z-10">
+					<section className={`flex py-4 ${spaceGrotesk.className}`}>
+						<section className="text-custom_white">FAQs</section>
+					</section>
+					<section
+						className={`text-[1.2rem] font-normal self-start ${spaceMono.className}`}
+					>
+						ADD FAQs
+					</section>
+				</div>
+			</motion.section>
+		</>
+	);
+}
diff --git a/src/components/pages/about.tsx b/src/components/pages/about.tsx
@@ -0,0 +1,42 @@
+import { motion } from "framer-motion";
+import { Space_Grotesk, Space_Mono } from "next/font/google";
+
+const spaceGrotesk = Space_Grotesk({
+	subsets: ["latin"],
+	variable: "--font-space-grotesk",
+});
+
+const spaceMono = Space_Mono({
+	subsets: ["latin"],
+	variable: "--font-space-mono",
+	weight: "400",
+});
+
+export default function About(): JSX.Element {
+	return (
+		<>
+			<div className="w-[70%] ml-24 p-4 z-10">
+				<section className={`flex py-4 ${spaceGrotesk.className}`}>
+					<section className="text-custom_white">About &nbsp;</section>
+					<section className="text-custom_purple">Hack</section>
+					<section className="text-custom_red">Hub</section>
+				</section>
+
+				<section
+					className={`text-[1.2rem] font-normal self-start ${spaceMono.className}`}
+				>
+					Welcome to IEEE Computer Society VIT Chennai, where innovation meets
+					impact. This event is a vibrant arena for budding technologists,
+					professionals, and students to collaborate, create, and compete in the
+					spirit of advancing technology. As part of IEEE CompSoc's student
+					chapter, our commitment to technological breakouts, our hackathon
+					challenges makes participants think critically and creatively. We
+					provide a platform for you to turn your disruptive ideas into
+					prototypes, and lastly prizes and recognition await. Join us for an
+					exhilarating journey of learning, innovation, and competition. Unleash
+					your potential with IEEE CompSoc.
+				</section>
+			</div>
+		</>
+	);
+}
diff --git a/src/components/pages/domains.tsx b/src/components/pages/domains.tsx
@@ -0,0 +1,52 @@
+import { motion } from "framer-motion";
+import { Space_Grotesk, Space_Mono } from "next/font/google";
+
+const spaceGrotesk = Space_Grotesk({
+	subsets: ["latin"],
+	variable: "--font-space-grotesk",
+});
+
+const spaceMono = Space_Mono({
+	subsets: ["latin"],
+	variable: "--font-space-mono",
+	weight: "400",
+});
+
+export default function Domain(): JSX.Element {
+	return (
+		<>
+			<motion.section
+				id="domains"
+				className="relative mt-10 w-full flex py-20 font-bold text-[5rem] min-h-screen"
+			>
+				<motion.img
+					initial={{ opacity: 1 }}
+					animate={{ opacity: [1, 0.7, 0.3, 0.5, 0, 0.5, 0.3, 0.7, 1] }} // Animate opacity from 1 to 0
+					transition={{ duration: 1, repeat: Infinity, yoyo: Infinity }} // Set transition duration and repeat infinitely
+					src="/dots_full_red.svg"
+					className="absolute left-[0rem] top-[0rem] w-[18rem] z-0"
+				></motion.img>
+				<motion.img
+					initial={{ opacity: 1 }}
+					animate={{ opacity: [1, 0.7, 0.3, 0.5, 0, 0.5, 0.3, 0.7, 1] }} // Animate opacity from 1 to 0
+					transition={{ duration: 0.8, repeat: Infinity, yoyo: Infinity }} // Set transition duration and repeat infinitely
+					src="/dots_full_white.svg"
+					className="absolute left-[1rem] top-[2rem] w-[22rem] z-0"
+				></motion.img>
+
+				<div className="p-4 flex flex-col w-[80%] mx-auto items-center justify-center z-10">
+					<section className={`flex py-4 ${spaceGrotesk.className}`}>
+						<section className="text-custom_white">
+							Domains of the Hackathon
+						</section>
+					</section>
+					<section
+						className={`text-[1.2rem] font-normal self-start ${spaceMono.className}`}
+					>
+						ADD DOMAINS
+					</section>
+				</div>
+			</motion.section>
+		</>
+	);
+}
diff --git a/src/components/pages/sponsors.tsx b/src/components/pages/sponsors.tsx
@@ -0,0 +1,50 @@
+import { motion } from "framer-motion";
+import { Space_Grotesk, Space_Mono } from "next/font/google";
+
+const spaceGrotesk = Space_Grotesk({
+	subsets: ["latin"],
+	variable: "--font-space-grotesk",
+});
+
+const spaceMono = Space_Mono({
+	subsets: ["latin"],
+	variable: "--font-space-mono",
+	weight: "400",
+});
+
+export default function Sponsors(): JSX.Element {
+	return (
+		<>
+			<motion.section
+				id="sponsors"
+				className="relative mt-10 w-full flex py-20 font-bold text-[5rem] min-h-screen"
+			>
+				<motion.img
+					initial={{ opacity: 1 }}
+					animate={{ opacity: [1, 0.7, 0.3, 0.5, 0, 0.5, 0.3, 0.7, 1] }} // Animate opacity from 1 to 0
+					transition={{ duration: 1, repeat: Infinity, yoyo: Infinity }} // Set transition duration and repeat infinitely
+					src="/dots_full_red.svg"
+					className="absolute left-[0rem] top-[0rem] w-[18rem] z-0"
+				></motion.img>
+				<motion.img
+					initial={{ opacity: 1 }}
+					animate={{ opacity: [1, 0.7, 0.3, 0.5, 0, 0.5, 0.3, 0.7, 1] }} // Animate opacity from 1 to 0
+					transition={{ duration: 0.8, repeat: Infinity, yoyo: Infinity }} // Set transition duration and repeat infinitely
+					src="/dots_full_white.svg"
+					className="absolute left-[3rem] top-[-4rem] w-[22rem] z-0"
+				></motion.img>
+
+				<div className="p-4 flex flex-col w-[80%] mx-auto items-center justify-center z-10">
+					<section className={`flex py-4 ${spaceGrotesk.className}`}>
+						<section className="text-custom_white">Sponsors</section>
+					</section>
+					<section
+						className={`text-[1.2rem] font-normal self-start ${spaceMono.className}`}
+					>
+						ADD SPONSORS
+					</section>
+				</div>
+			</motion.section>
+		</>
+	);
+}
diff --git a/src/components/pages/timeline.tsx b/src/components/pages/timeline.tsx
@@ -0,0 +1,52 @@
+import { motion } from "framer-motion";
+import { Space_Grotesk, Space_Mono } from "next/font/google";
+
+const spaceGrotesk = Space_Grotesk({
+	subsets: ["latin"],
+	variable: "--font-space-grotesk",
+});
+
+const spaceMono = Space_Mono({
+	subsets: ["latin"],
+	variable: "--font-space-mono",
+	weight: "400",
+});
+
+export default function Timeline(): JSX.Element {
+	return (
+		<>
+			<motion.section
+				id="timeline"
+				className="relative mt-10 w-full flex py-20 font-bold text-[5rem] min-h-screen"
+			>
+				<motion.img
+					initial={{ opacity: 1 }}
+					animate={{ opacity: [1, 0.7, 0.3, 0.5, 0, 0.5, 0.3, 0.7, 1] }} // Animate opacity from 1 to 0
+					transition={{ duration: 1, repeat: Infinity, yoyo: Infinity }} // Set transition duration and repeat infinitely
+					src="/dots_full_red.svg"
+					className="absolute left-[0rem] top-[0rem] w-[18rem] z-0"
+				></motion.img>
+				<motion.img
+					initial={{ opacity: 1 }}
+					animate={{ opacity: [1, 0.7, 0.3, 0.5, 0, 0.5, 0.3, 0.7, 1] }} // Animate opacity from 1 to 0
+					transition={{ duration: 0.8, repeat: Infinity, yoyo: Infinity }} // Set transition duration and repeat infinitely
+					src="/dots_full_white.svg"
+					className="absolute left-[3rem] top-[-4rem] w-[22rem] z-0"
+				></motion.img>
+
+				<div className="p-4 flex flex-col w-[80%] mx-auto items-center justify-center z-10">
+					<section className={`flex py-4 ${spaceGrotesk.className}`}>
+						<section className="text-custom_white">
+							Timeline of the Hackathon
+						</section>
+					</section>
+					<section
+						className={`text-[1.2rem] font-normal self-start ${spaceMono.className}`}
+					>
+						ADD Timeline
+					</section>
+				</div>
+			</motion.section>
+		</>
+	);
+}
diff --git a/src/components/scroller.ts b/src/components/scroller.ts
@@ -0,0 +1,13 @@
+
+
+const scrollToElement = (elementId: string) => {
+    const element = document.getElementById(elementId);
+    if (element) {
+        const offsetTop = element.offsetTop;
+        window.scrollTo({
+            top: offsetTop,
+            behavior: "smooth" // Smooth scrolling
+        });
+    }
+};
+export default scrollToElement;