Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added loader! #54

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat: Added loader! #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
072f3a1
added loader
prateekjha1204 Feb 8, 2024
e05f938
changed css to tailwind of loader component
prateekjha1204 Feb 9, 2024
5e0a4c6
fixed loader
prateekjha1204 Feb 10, 2024
4ccf404
Merge branch 'master' into prateek
prateekjha1204 Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions app/Home/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import Navbar from "@/components/Navbar";
import { Button } from "@/components/ui/button";
import { ArrowTopRightIcon } from "@radix-ui/react-icons";
import hackbyteLogo from "@/public/hackbyteLogo.png";
import Image from "next/image";

export default function Home() {
return (
<>
<div
className="flex flex-col justify-around min-h-screen
bg-cover bg-no-repeat p-4 md:px-12 md:py-8"
style={{
backgroundImage: "url(/background.webp)",
backgroundAttachment: "fixed",
backgroundPositionY: "bottom",
}}
>
<Navbar />
<div className="flex flex-wrap justify-between items-center gap-4 lg:gap-0">
<div className="flex flex-col items-start w-full lg:w-1/2">
{/* <p
className="text-[#FAF8ED] text-[1.25rem] font-medium uppercase
lg:text-[1.5rem]"
>
This year&apos;s theme :{" "}
</p> */}
<p
className="text-[#FAF8ED] text-[2.375rem] font-medium leading-[1.2]
lg:leading-[1.1] lg:text-[3rem]"
>
This year&apos;s theme <br /> unveils in April ...
</p>
</div>
<div className="flex flex-col items-start gap-3 w-full lg:items-end lg:w-1/2">
<p
className="text-[#FAF8ED] text-[1.25rem] font-medium text-left
lg:text-right lg:text-[1.5rem]"
>
— Round 1 kicks off at
<br /> 5 April 2024, IIIT Jabalpur
</p>
<Button
size="sm"
className="bg-[#FAF8ED] text-black text-[1.125rem] font-medium uppercase
p-6 rounded-none hover:bg-[#FAF8ED] hover:text-black"
style={{
boxShadow:
"0px 1px 1px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(103, 110, 118, 0.16), 0px 2px 5px 0px rgba(103, 110, 118, 0.08)",
}}
>
Explore Challenge
<ArrowTopRightIcon className="w-5 h-5 ml-1" />
</Button>
</div>
</div>

<div className="flex items-center justify-center my-12 xl:my-4">
<Image
src={hackbyteLogo}
alt="HackByte Logo"
className="max-w-[32rem] min-w-[15rem] w-[75%] 2xl:max-w-[40rem]"
priority
/>
</div>

<div className="flex items-center justify-between gap-4 mt-8 xl:mt-4">
<div className="flex flex-col items-start gap-2">
<p
className="text-[#FAF8ED] text-[1rem] font-[600]
md:text-[1.125rem]"
>
HackByte: Empower Your Digital Odyssey!
</p>
<div className="flex items-stretch">
<div
className="flex justify-center items-center py-2 md:py-2.5 px-4 md:px-6"
style={{ border: "1.275px solid #FAF8ED" }}
>
<div className="flex justify-center items-center gap-4">
<img
src="/tpcLogo.svg"
alt="TPC Logo"
className="w-[4rem] h-[2.125rem]"
/>
<p className="text-[#FAF8ED] text-[0.75rem] font-[600]">
Organised by
<br className="hidden md:block" /> The Programming Club of
IIITDMJ
</p>
</div>
</div>
<div
className="flex justify-center items-center py-2 md:py-2.5 px-4 md:px-6"
style={{ border: "1.275px solid #FAF8ED" }}
>
<div className="flex justify-center items-center">
<img
src="/iiitdmjLogo.svg"
alt="IIITDMJ Logo"
className="w-[5.5rem] h-[2rem]"
/>
</div>
</div>
</div>
</div>
<div className="hidden lg:flex lg:flex-col lg:items-end lg:max-w-[24rem] xl:max-w-md">
<p className="text-[#FAF8ED] text-[1rem] xl:text-[1.125rem] font-[600] text-right">
HackByte: Empower Your Digital Odyssey!
</p>
<p className="text-[#FAF8ED] text-[1rem] xl:text-[1.125rem] font-normal text-right uppercase">
Embark on an enriching voyage with HackByte, where the fusion of
tech expertise and boundless innovation unfolds.
</p>
</div>
</div>
</div>
</>
);
}
128 changes: 11 additions & 117 deletions app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1,13 @@
import Navbar from "@/components/Navbar";
import { Button } from "@/components/ui/button";
import { ArrowTopRightIcon } from "@radix-ui/react-icons";
import hackbyteLogo from "@/public/hackbyteLogo.png";
import Image from "next/image";
import React from "react";
import dynamic from "next/dynamic";
import Loading from "@/components/Loader";

export default function Home() {
return (
<div
className="flex flex-col justify-around min-h-screen
bg-cover bg-no-repeat p-4 md:px-12 md:py-8"
style={{
backgroundColor: "#000",
backgroundImage: "url(/background.webp)",
backgroundAttachment: "fixed",
backgroundPositionY: "bottom",
}}
>
<Navbar />
<div className="flex flex-wrap justify-between items-center gap-4 lg:gap-0">
<div className="flex flex-col items-start w-full lg:w-1/2">
{/* <p
className="text-[#FAF8ED] text-[1.25rem] font-medium uppercase
lg:text-[1.5rem]"
>
This year&apos;s theme :{" "}
</p> */}
<p
className="text-[#FAF8ED] text-[2.375rem] font-medium leading-[1.2]
lg:leading-[1.1] lg:text-[3rem]"
>
This year&apos;s theme <br /> unveils in April ...
</p>
</div>
<div className="flex flex-col items-start gap-3 w-full lg:items-end lg:w-1/2">
<p
className="text-[#FAF8ED] text-[1.25rem] font-medium text-left
lg:text-right lg:text-[1.5rem]"
>
— Round 1 kicks off at
<br /> 5 April 2024, IIIT Jabalpur
</p>
<Button
size="sm"
className="bg-[#FAF8ED] text-black text-[1.125rem] font-medium uppercase
p-6 rounded-none hover:bg-[#FAF8ED] hover:text-black"
style={{
boxShadow:
"0px 1px 1px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(103, 110, 118, 0.16), 0px 2px 5px 0px rgba(103, 110, 118, 0.08)",
}}
>
Explore Challenge
<ArrowTopRightIcon className="w-5 h-5 ml-1" />
</Button>
</div>
</div>
const Home = dynamic(() => import("../app/Home"), {
loading: () => <Loading />,
ssr: false,
});
const HomePage = () => {
return <Home />;
};

<div className="flex items-center justify-center my-12 xl:my-4">
<Image
src={hackbyteLogo}
alt="HackByte Logo"
className="max-w-[32rem] min-w-[15rem] w-[75%] 2xl:max-w-[40rem]"
priority
/>
</div>

<div className="flex items-center justify-between gap-4 mt-8 xl:mt-4">
<div className="flex flex-col items-start gap-2">
<p
className="text-[#FAF8ED] text-[1rem] font-[600]
md:text-[1.125rem]"
>
HackByte: Empower Your Digital Odyssey!
</p>
<div className="flex items-stretch">
<div
className="flex justify-center items-center py-2 md:py-2.5 px-4 md:px-6"
style={{ border: "1.275px solid #FAF8ED" }}
>
<div className="flex justify-center items-center gap-4">
<img
src="/tpcLogo.svg"
alt="TPC Logo"
className="w-[4rem] h-[2.125rem]"
/>
<p className="text-[#FAF8ED] text-[0.75rem] font-[600]">
Organised by
<br className="hidden md:block" /> The Programming Club of
IIITDMJ
</p>
</div>
</div>
<div
className="flex justify-center items-center py-2 md:py-2.5 px-4 md:px-6"
style={{ border: "1.275px solid #FAF8ED" }}
>
<div className="flex justify-center items-center">
<img
src="/iiitdmjLogo.svg"
alt="IIITDMJ Logo"
className="w-[5.5rem] h-[2rem]"
/>
</div>
</div>
</div>
</div>
<div className="hidden lg:flex lg:flex-col lg:items-end lg:max-w-[24rem] xl:max-w-md">
<p className="text-[#FAF8ED] text-[1rem] xl:text-[1.125rem] font-[600] text-right">
HackByte: Empower Your Digital Odyssey!
</p>
<p className="text-[#FAF8ED] text-[1rem] xl:text-[1.125rem] font-normal text-right uppercase">
Embark on an enriching voyage with HackByte, where the fusion of
tech expertise and boundless innovation unfolds.
</p>
</div>
</div>
</div>
);
}
export default HomePage;
23 changes: 23 additions & 0 deletions components/Loader/index.jsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Utilize Tailwind CSS wherever possible, avoiding the use of plain CSS.

Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
const Loading = () => {
const elements = ["N", "I", "D", "A", "O", "L"];
return (
<div className="relative bg-black h-screen ">
<div className=" fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ">
<div className=" absolute w-[600px] h-[36px] left-1/2 top-[40%] -ml-[300px] overflow-visible select-none cursor-default ">
{elements.map((element, index) => (
<div
key={index}
className=" absolute w-[48px] h-[56px] opacity-0 font-semibold animate-move rotate-180 text-[#006eff] font-sans "
style={{
animationDelay: `${200 * index}ms`,
}}
>
{element}
</div>
))}
</div>
</div>
</div>
);
};
export default Loading;
24 changes: 19 additions & 5 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{js,jsx}',
'./components/**/*.{js,jsx}',
'./app/**/*.{js,jsx}',
'./src/**/*.{js,jsx}',
"./pages/**/*.{js,jsx}",
"./components/**/*.{js,jsx}",
"./app/**/*.{js,jsx}",
"./src/**/*.{js,jsx}",
],
prefix: "",
theme: {
Expand Down Expand Up @@ -66,12 +66,26 @@ module.exports = {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
move: {
"0%": { left: "0", opacity: "0" },
"35%": { left: "41%", transform: "rotate(0deg)", opacity: "1" },
"65%": { left: "59%", transform: "rotate(0deg)", opacity: "1" },
"100%": { left: "100%", transform: "rotate(-180deg)", opacity: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
move: "move 2s linear infinite",
},
animationDelay: {
200: "200ms",
400: "400ms",
800: "800ms",
1000: "1000ms",
1200: "1200ms",
},
},
},
plugins: [require("tailwindcss-animate")],
}
};