footer and font fix, animations and spacings done right

ComputerSocietyVITC · Mar 18, 2024 · 3d4d499 · 3d4d499
1 parent 51ea683
commit 3d4d499
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 25 deletions.
diff --git a/src/components/countdown.tsx b/src/components/countdown.tsx
@@ -61,7 +61,7 @@ export default function Countdown({
 
 	return (
 		<section>
-			<section className="mt-12 grid grid-rows-2 justify-items-center font-offbittrialbold text-[150px] space-y-[-50px]">
+			<section className="mt-8 grid grid-rows-2 justify-items-center font-offbittrialbold text-[150px] space-y-[-50px]">
 				<section className="grid grid-cols-4 justify-items-center gap-16">
 					<p className="">{timeLeft.days}</p>
 					<p>{timeLeft.hours}</p>

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -64,7 +64,7 @@ const Footer = () => {
 							Contacts
 						</a>
 					</div>
-					<div className="mt-3 w-full lg:w-3/12 pl-4 order-2 lg:order-3">
+					<div className="mt-3 w-full lg:w-3/12 order-2 lg:order-3">
 						<div className="text-lg lg:text-base text-white inline-block mb-3">
 							Address
 							<div id="underlineGradient" />
@@ -73,9 +73,10 @@ const Footer = () => {
 							href="https://goo.gl/maps/C9UE9JLWnBAfQPKe7"
 							target="_blank"
 							rel="noreferrer"
-							className="my-3 block text-white hover:text-gray-200 text-base lg:text-sm lg:pr-32"
+							className="my-3 block text-white hover:text-gray-200 text-base lg:text-sm lg:pr-16"
 						>
-							Kelambakkam - Vandalur Rd, Rajan Nagar, Chennai, Tamil Nadu 600127
+							Kelambakkam - Vandalur Rd, Rajan Nagar, Chennai, Tamil Nadu -
+							600127
 						</a>
 						<br />
 						<div className="text-lg lg:text-base text-white inline-block mb-3">
@@ -92,7 +93,7 @@ const Footer = () => {
 						</a>
 					</div>
 					<div className="mt-3 w-full lg:w-3/12 order-3 lg:order-4">
-						<div className="text-lg lg:text-base text-white inline-block my-4 lg:my-0 lg:mb-10 pl-4 lg:pl-0">
+						<div className="text-lg lg:text-base text-white inline-block lg:my-0 lg:pb-4 pl-6 lg:pl-0">
 							Social Media
 							<div id="underlineGradient" />
 						</div>

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
 import * as React from "react";
 
 const Navbar = ({
@@ -11,8 +10,8 @@ const Navbar = ({
 }): JSX.Element => {
 	return (
 		<>
-			<section className="fixed top-0 left-0 w-full bg-inherit shadow-md z-50">
-				<nav className="justify-center flex font-semibold text-[20px]">
+			<section className="top-0 left-0 w-full bg-inherit shadow-md z-50">
+				<nav className="justify-center flex font-normal text-[20px]">
 					<Link href="/">
 						<section
 							className={

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -9,7 +9,7 @@ import { motion } from "framer-motion";
 
 const montserrat = Montserrat({
 	subsets: ["latin"],
-	variable: "--font-monsterrat",
+	variable: "--font-montserrat",
 });
 
 const loadingAnimation = {
@@ -30,15 +30,26 @@ export default function App({ Component, pageProps }: AppProps) {
 	const router = useRouter();
 	return (
 		<>
-			<section className="bg-[#03091E] text-[#EAEAEA] overflow-hidden">
+			<section
+				className={`bg-[#03091E] text-[#EAEAEA] ${montserrat.className}`}
+			>
+				<motion.section
+					initial={{ opacity: 0, scale: 0.8 }}
+					animate={{ opacity: 1, scale: 1 }}
+					transition={{
+						duration: 2,
+						delay: 2,
+						ease: "easeInOut",
+					}}
+				>
+					<Navbar buttons={buttons} active={router.pathname} />
+				</motion.section>
 				<motion.section
 					className="bg-[#03091E]"
 					initial="initial"
 					animate="animate"
 					variants={loadingAnimation}
 				>
-					<Navbar buttons={buttons} active={router.pathname} />
-					<section className="py-8" />
 					<Component {...pageProps} />
 					<Footer />
 				</motion.section>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,12 +6,12 @@ export default function Home() {
 		initial: {
 			opacity: 0,
 			scale: 0.8,
-			transition: { duration: 5, ease: "easeInOut" },
+			transition: { duration: 1, ease: "easeInOut" },
 		},
 		animate: {
 			opacity: 1,
 			scale: 1,
-			transition: { duration: 5, ease: "easeInOut" },
+			transition: { duration: 1, ease: "easeInOut" },
 		},
 	};
 
@@ -29,14 +29,23 @@ export default function Home() {
 				animate="animate"
 				variants={loadingAnimation}
 			>
-				<motion.section className="mt-10 font-offbittrialdot text-[75px] sm:text-6xl md:text-8xl gap-4 pr-72 space-y-[-20px]">
+				<motion.section className="mt-10 font-offbittrialdot text-[75px] sm:text-6xl md:text-8xl gap-4 pr-72 space-y-[-20px] pt-6">
 					<section className="flex gap-5">
 						<p className="text-left text-[#EAEAEA]">IEEE</p>
 						<p className="text-[#CF1259]"> COMPUTER SOCIETY</p>
 					</section>
 					<p className="text-left text-[#7161EF]">WELCOMES YOU...</p>
 				</motion.section>
-				<motion.section className="font-glitch text-[10rem] sm:text-6xl md:text-8xl gap-4 w-screen flex justify-center">
+				<motion.section
+					initial={{ opacity: 0, scale: 0.2 }}
+					animate={{ opacity: 1, scale: 1 }}
+					transition={{
+						duration: 3,
+						delay: 0.3,
+						ease: "easeInOut",
+					}}
+					className="font-glitch text-[10rem] sm:text-6xl md:text-8xl gap-4 w-screen flex justify-center"
+				>
 					<p className="text-[#7161EF] hack-shadow">Hack</p>
 					<p className="text-[#CF1259] hub-shadow">Hub</p>
 					<p className="text-white text-8xl md:text-6xl sm:text-4xl relative top-28 -left-16 my-2">
@@ -48,14 +57,24 @@ export default function Home() {
 					<p className="text-[#CF1259]">FLAGSHIP</p>
 					<p className="text-[#EAEAEA]">Hackathon</p>
 				</motion.section>
-				<Countdown
-					year={2024}
-					month={3}
-					date={31}
-					hour={8}
-					minutes={0}
-					seconds={0}
-				/>
+				<motion.section
+					initial={{ opacity: 0, scale: 0.2 }}
+					animate={{ opacity: 1, scale: 1 }}
+					transition={{
+						duration: 2,
+						delay: 2,
+						ease: "easeInOut",
+					}}
+				>
+					<Countdown
+						year={2024}
+						month={3}
+						date={31}
+						hour={8}
+						minutes={0}
+						seconds={0}
+					/>
+				</motion.section>
 			</motion.section>
 		</>
 	);

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -60,6 +60,8 @@ body {
 
 #underlineGradient {
 	height: 1px;
+	margin-left: 3px;
+	margin-right: 3px;
 	background: linear-gradient(90deg, #cf1259 2.29%, #7161ef 98.62%);
 	border-radius: 50px;
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -16,7 +16,6 @@ const config: Config = {
         "offbittrialbold": ["OffBitTrialBold", "sans-serif"],
         "offbittrial": ["OffBitTrial", "sans-serif"],
         "offbittrialdot": ["OffBitTrialDot", "sans-serif"],
-        "montserrat": ["var(--font-monsterrat)", "sans-serif"],
 
       },
       screens: {