diff --git a/src/assets/comsocLogowhite.png b/src/assets/comsocLogowhite.png new file mode 100644 index 0000000..829cc49 Binary files /dev/null and b/src/assets/comsocLogowhite.png differ diff --git a/src/assets/comsocLogowhite.svg b/src/assets/comsocLogowhite.svg new file mode 100644 index 0000000..d3f0126 --- /dev/null +++ b/src/assets/comsocLogowhite.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/socialmedia/devto.png b/src/assets/socialmedia/devto.png new file mode 100644 index 0000000..e81ac5d Binary files /dev/null and b/src/assets/socialmedia/devto.png differ diff --git a/src/assets/socialmedia/discord.png b/src/assets/socialmedia/discord.png new file mode 100644 index 0000000..5b6094f Binary files /dev/null and b/src/assets/socialmedia/discord.png differ diff --git a/src/assets/socialmedia/github.png b/src/assets/socialmedia/github.png new file mode 100644 index 0000000..a6de6a9 Binary files /dev/null and b/src/assets/socialmedia/github.png differ diff --git a/src/assets/socialmedia/instagram.png b/src/assets/socialmedia/instagram.png new file mode 100644 index 0000000..2b5dfbd Binary files /dev/null and b/src/assets/socialmedia/instagram.png differ diff --git a/src/assets/socialmedia/linkedin.png b/src/assets/socialmedia/linkedin.png new file mode 100644 index 0000000..1d1b9d3 Binary files /dev/null and b/src/assets/socialmedia/linkedin.png differ diff --git a/src/assets/socialmedia/telegram.png b/src/assets/socialmedia/telegram.png new file mode 100644 index 0000000..094e53b Binary files /dev/null and b/src/assets/socialmedia/telegram.png differ diff --git a/src/assets/socialmedia/twitter.png b/src/assets/socialmedia/twitter.png new file mode 100644 index 0000000..9f83fdd Binary files /dev/null and b/src/assets/socialmedia/twitter.png differ diff --git a/src/assets/socialmedia/youtube.png b/src/assets/socialmedia/youtube.png new file mode 100644 index 0000000..d4f41b2 Binary files /dev/null and b/src/assets/socialmedia/youtube.png differ diff --git a/src/components/countdown.tsx b/src/components/countdown.tsx index c65c50c..d1d1ddb 100644 --- a/src/components/countdown.tsx +++ b/src/components/countdown.tsx @@ -61,8 +61,8 @@ export default function Countdown({ return (
-
-
+
+

{timeLeft.days}

{timeLeft.hours}

{timeLeft.minutes}

diff --git a/src/components/footer.tsx b/src/components/footer.tsx new file mode 100644 index 0000000..94a8f75 --- /dev/null +++ b/src/components/footer.tsx @@ -0,0 +1,213 @@ +import React from "react"; +import comsocLogowhite from "../assets/comsocLogowhite.svg"; +import instagram from "../assets/socialmedia/instagram.png"; +import github from "../assets/socialmedia/github.png"; +import linkedin from "../assets/socialmedia/linkedin.png"; +import discord from "../assets/socialmedia/discord.png"; +import youtube from "../assets/socialmedia/youtube.png"; +import twitter from "../assets/socialmedia/twitter.png"; +import telegram from "../assets/socialmedia/telegram.png"; +import devto from "../assets/socialmedia/devto.png"; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/src/components/header.tsx b/src/components/header.tsx index b80dae4..1a52ef2 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,42 +1,45 @@ import Link from "next/link"; -import { useRouter } from "next/router"; import * as React from "react"; const Navbar = ({ - buttons, - active, + buttons, + active, }: { - buttons: string[]; - active: string; + buttons: string[]; + active: string; }): JSX.Element => { - return ( - <> - -
- - ); + return ( + <> +
+ +
+
+ + ); }; export default Navbar; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 9b0c105..60b3fa6 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,17 +1,58 @@ +import Footer from "@hackhub/components/footer"; import Navbar from "@hackhub/components/header"; import "@hackhub/styles/globals.css"; import "@hackhub/styles/shadows.css"; import type { AppProps } from "next/app"; import { useRouter } from "next/router"; +import { Montserrat } from "next/font/google"; +import { motion } from "framer-motion"; + +const montserrat = Montserrat({ + subsets: ["latin"], + variable: "--font-montserrat", +}); + +const loadingAnimation = { + initial: { + opacity: 0, + scale: 0.8, + transition: { duration: 3, ease: "easeInOut" }, + }, + animate: { + opacity: 1, + scale: 1, + transition: { duration: 3, ease: "easeInOut" }, + }, +}; export default function App({ Component, pageProps }: AppProps) { const buttons = ["Team", "Project", "Contacts", "Events", "Blogs"]; const router = useRouter(); return ( <> -
- - +
+ + + + + +
+
); diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 5b039b3..4d218b9 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,20 +1,20 @@ import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { - return ( - - - - -
- - - - ); + return ( + + + + +
+ + + + ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4339216..97bcbeb 100644 --- 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: 3, ease: "easeInOut" }, + transition: { duration: 1, ease: "easeInOut" }, }, animate: { opacity: 1, scale: 1, - transition: { duration: 3, ease: "easeInOut" }, + transition: { duration: 1, ease: "easeInOut" }, }, }; @@ -29,17 +29,26 @@ export default function Home() { animate="animate" variants={loadingAnimation} > - +

IEEE

COMPUTER SOCIETY

WELCOMES YOU...

 - +

Hack

Hub

-

+

24

@@ -48,14 +57,24 @@ export default function Home() {

FLAGSHIP

Hackathon

 - + + + ); diff --git a/src/styles/globals.css b/src/styles/globals.css index eddc357..bbbf34c 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -3,57 +3,65 @@ @tailwind utilities; :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); } @font-face { - font-family: "Glitch"; - src: url("../fonts/glitchside.otf"); + font-family: "Glitch"; + src: url("../fonts/glitchside.otf"); } @font-face { - font-family: "OffbitTrialDot"; - src: url("../fonts/Offbittrial//OffBitTrial-DotBold.woff"); + font-family: "OffbitTrialDot"; + src: url("../fonts/Offbittrial//OffBitTrial-DotBold.woff"); } @font-face { - font-family: "OffbitTrialBold"; - src: url("../fonts/Offbittrial/OffBitTrial-101Bold.woff"); + font-family: "OffbitTrialBold"; + src: url("../fonts/Offbittrial/OffBitTrial-101Bold.woff"); } @font-face { - font-family: "OffbitTrial"; - src: url("../fonts/Offbittrial/OffBitTrial-101.woff"); + font-family: "OffbitTrial"; + src: url("../fonts/Offbittrial/OffBitTrial-101.woff"); } .background-polka { - background-image: url("../assets/polkabg.png"); - background-blend-mode: overlay; + background-image: url("../assets/polkabg.png"); + background-blend-mode: overlay; } .gradient-text { - background-image: linear-gradient(to right, #CF1259, #7161EF); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - } \ No newline at end of file + background-image: linear-gradient(to right, #cb356e, #897bec); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +#underlineGradient { + height: 1px; + margin-left: 3px; + margin-right: 3px; + background: linear-gradient(90deg, #cf1259 2.29%, #7161ef 98.62%); + border-radius: 50px; +}