Skip to content

Hb4 #124

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

Open
owlpharoah wants to merge 2 commits into
base: hb4
Choose a base branch
from
Open

Hb4 #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c97596
MailList Component
owlpharoah Dec 26, 2025
6bb6e20
support for redirects
owlpharoah Dec 26, 2025
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
1 change: 1 addition & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,4 @@ body {
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}

12 changes: 11 additions & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Geist, Geist_Mono, Kanit, Poppins } from "next/font/google";
import "./globals.css";

export const poppins = Poppins({
subsets: ["latin"],
weight: ["400", "500", "600"],
});

export const kanit = Kanit({
weight: "800",
subsets: ["latin"],
display: "swap",
});
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
Expand Down
62 changes: 4 additions & 58 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,11 @@
import Image from "next/image";

import MailingList from '../components/MailingList/index.jsx'

export default function Home() {
return (
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
To get started, edit the page.tsx file.
</h1>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
center.
</p>
</div>
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
<a
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
/>
Deploy Now
</a>
<a
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>
</div>
</main>
<div>
<MailingList />
</div>
);
}
139 changes: 139 additions & 0 deletions components/MailingList/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
import { kanit, poppins } from "@/app/layout";
import Image from "next/image";

const MailingList = () => {
return (
<div className="w-full min-h-screen relative bg-[linear-gradient(206deg,_#4E0088_13.13%,_#180029_86.33%)] overflow-hidden flex flex-col items-center justify-center py-20">
<div className="absolute top-[-50px] md:top-[-180px] left-[-20%] md:left-[-40px] w-[80vw] md:w-[620px] aspect-square z-0 opacity-60 md:opacity-100 pointer-events-none">
<Image
src="/MailingList/lightning_left.svg"
alt="lightning-effect"
fill
className="object-contain"
/>
</div>

<div className="absolute top-[-50px] md:top-[-190px] right-[-20%] md:right-[-10px] w-[80vw] md:w-[620px] aspect-square z-0 opacity-60 md:opacity-100 pointer-events-none">
<Image
src="/MailingList/lightning_right.svg"
alt="lightning-effect"
fill
className="object-contain"
/>
</div>

<div className="absolute top-0 md:top-[-90px] left-[5%] md:left-[100px] z-10 pt-10 md:pt-16 pointer-events-none">
<div className="relative w-[120px] h-[120px] md:w-[210px] md:h-[210px] rotate-[-147]">
<Image
src="/MailingList/siren.svg"
alt="soundhorn-svg"
fill
className="object-contain origin-center"
/>
</div>
</div>

<div className="absolute top-[100px] md:top-[50px] left-1/2 -translate-x-1/2 md:translate-x-0 md:left-[93px] z-20 w-[90%] md:w-[800px] h-[150px] md:h-[240px] pointer-events-none">
<Image
src="/MailingList/join_newsletter.svg"
alt="Join Our Newsletter"
fill
className="object-contain rotate-[-4deg] drop-shadow-[0_2.878px_0_rgba(0,0,0,0.25)]"
/>
</div>

<div className={`mt-[180px] md:mt-[250px] w-full flex flex-col items-center px-4 md:px-6 relative z-30 ${kanit.className}`}>
<div className="relative w-full max-w-[850px]">
<div className="relative w-full z-20 bg-[linear-gradient(97deg,_#570089_-1.22%,_#A200FF_49.96%,_#210035_142.76%)] border-[4px] md:border-[11px] border-white rounded-[20px] p-2 md:p-3 shadow-2xl">
<div className="absolute top-0 left-0 -translate-x-[40%] -translate-y-[35%] w-[200px] md:w-[clamp(370px,8vw,100px)] aspect-[2.2/1] z-30 pointer-events-none transform rotate-[-33.74]">
<Image
src="/MailingList/bandaid.svg"
alt="Decoration"
fill
className="object-contain drop-shadow-md"
/>
</div>

<div className="flex flex-col items-center w-full pt-1 pb-4 md:px-4">
<div className="relative w-[280px] h-[60px] md:w-[600px] md:h-[120px] mb-1">
<Image
src="/MailingList/join_maillist.svg"
alt="Be a part of our mailing list"
fill
className="object-contain"
/>
</div>

<div className="bg-white rounded-[24px] w-full py-8 px-5 md:py-12 md:px-10 flex flex-col md:flex-row justify-between items-center gap-8 md:gap-6 shadow-[0_10px_0_0_rgba(0,0,0,0.25)]">
<ul className="space-y-4 flex-1 w-full">
{[
"Be the first ones to register for HackByte 4.0",
"Get updates about your application status",
"Get notified for exciting events!"
].map((text, i) => (
<li key={i} className="flex">
<div className="mr-3 flex-shrink-0">
<Image src="/MailingList/bullet_p.svg" width={20} height={20} alt="bullet" className="w-4 h-4 md:w-5 md:h-5" />
</div>
<span className={`text-[#6b21a8] text-base md:text-xl leading-tight ${poppins.className} ${i === 2 ? "font-black" : "font-light"}`}>
{text}
</span>
</li>
))}
</ul>

<div className="flex-shrink-0 relative w-[100px] h-[70px] mr-5 md:w-[140px] md:h-[100px]">
<Image
src="/hb4_warpped.svg"
alt="HB 4.0 Logo"
fill
className="object-contain scale-150"
/>
</div>
</div>
</div>
</div>
</div>

<div className="w-full max-w-[850px] mt-8 relative">
<div className="relative rounded-full p-[5px] bg-[#7A00D4] shadow-[0_10px_0_rgba(0,0,0,0.35)]">
<div className="relative flex items-center bg-white rounded-full h-14 md:h-20 pl-6 md:pl-8 pr-[120px] md:pr-[160px]">
<input
type="email"
placeholder="Enter your email here"
className={`
w-full bg-transparent outline-none
text-base md:text-lg
text-gray-700
placeholder:text-gray-400
font-light
${kanit.className}
`}
/>

<button
className="
absolute right-2
h-10 md:h-16
px-6 md:px-10
rounded-full
bg-[linear-gradient(104deg,_#FFEC1A_24.89%,_#FFE60B_56.78%,_#FFE41A_108.63%)]
text-[#2B0040]
font-extrabold
text-sm md:text-lg
transition-transform
active:scale-90
shadow-[0_4px_0_rgba(0,0,0,0.25)]
"
>
Subscribe
</button>
</div>
</div>
</div>
</div>
</div>
)
}

export default MailingList
16 changes: 15 additions & 1 deletion next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,21 @@
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
/* config options here */
async redirects() {
return [
{
source: "/aftermovie",
destination: "https://www.youtube.com/watch?v=xKLlWAJvdDQ",
permanent: false,
},
{
source: "/prospectus",
destination:
"https://drive.google.com/file/d/1Zu56vhpSGQQDViqBLSbrVxeTxNf2F9Wl/view",
permanent: false,
},
];
},
};

export default nextConfig;
21 changes: 6 additions & 15 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading