From 1f8ac950939b0e0b76b018ab7c9ed1b70ccc4861 Mon Sep 17 00:00:00 2001 From: yashpatil641 Date: Sat, 27 Dec 2025 21:44:32 +0530 Subject: [PATCH] hero section --- app/globals.css | 27 ++- app/layout.tsx | 11 +- app/page.tsx | 4 +- components/sections/hero-section.tsx | 196 +++++++++++++++++++++ components/sections/stats-section.tsx | 7 +- public/Main Page Broken Effect.svg | 48 +++++ public/corner_cracks.svg | 21 +++ public/discord.svg | 3 + public/exclamation_marks.svg | 55 ++++++ public/hb4_logo.svg | 245 ++++++++++++++++++++++++++ public/insta.svg | 3 + public/linkdin.svg | 3 + public/main_page_bg.svg | 28 +++ public/mlh-badge.svg | 63 +++++++ public/next.svg | 1 - public/orange_flare.svg | 21 +++ public/stats-upper-2.svg | 83 +++++++++ public/tpc_and_iiit_logo.svg | 25 +++ public/vercel.svg | 1 - public/x.svg | 3 + 20 files changed, 838 insertions(+), 10 deletions(-) create mode 100644 components/sections/hero-section.tsx create mode 100644 public/Main Page Broken Effect.svg create mode 100644 public/corner_cracks.svg create mode 100644 public/discord.svg create mode 100644 public/exclamation_marks.svg create mode 100644 public/hb4_logo.svg create mode 100644 public/insta.svg create mode 100644 public/linkdin.svg create mode 100644 public/main_page_bg.svg create mode 100644 public/mlh-badge.svg delete mode 100644 public/next.svg create mode 100644 public/orange_flare.svg create mode 100644 public/stats-upper-2.svg create mode 100644 public/tpc_and_iiit_logo.svg delete mode 100644 public/vercel.svg create mode 100644 public/x.svg diff --git a/app/globals.css b/app/globals.css index a2dc41e..35b5a15 100644 --- a/app/globals.css +++ b/app/globals.css @@ -22,5 +22,30 @@ body { background: var(--background); color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + font-family: var(--font-geist-sans), system-ui, -apple-system, "Segoe UI", + Roboto, Arial, sans-serif; } + +.font-kanit { + font-family: var(--font-kanit), var(--font-geist-sans), sans-serif; +} + +.text-stroke-brand-thick { + -webkit-text-stroke: 10px #62009B; + paint-order: stroke fill; +} + +.text-stroke-white-thick { + -webkit-text-stroke: 10px #ffffff; + paint-order: stroke fill; +} + +.text-stroke-white-medium { + -webkit-text-stroke: 4px #ffffff; + paint-order: stroke fill; +} + +.text-stroke-white-thin { + -webkit-text-stroke: 2px #ffffff; + paint-order: stroke fill; +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..316cec0 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Geist, Geist_Mono, Kanit } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ @@ -12,6 +12,13 @@ const geistMono = Geist_Mono({ subsets: ["latin"], }); +const kanit = Kanit({ + weight: ["400", "700"], + style: ["normal", "italic"], + subsets: ["latin"], + variable: "--font-kanit", +}); + export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", @@ -25,7 +32,7 @@ export default function RootLayout({ return ( {children} diff --git a/app/page.tsx b/app/page.tsx index d9776bd..29040aa 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,8 +1,10 @@ +import Hero from "@/components/sections/hero-section" import StatsSection from "@/components/sections/stats-section" export default function Home() { return ( -
+
+
) diff --git a/components/sections/hero-section.tsx b/components/sections/hero-section.tsx new file mode 100644 index 0000000..1428669 --- /dev/null +++ b/components/sections/hero-section.tsx @@ -0,0 +1,196 @@ +import Image from "next/image"; +import Link from "next/link"; + +const Hero = () => { + return ( +
+ +
+ MLH badge +
+ +
+ Decorative corner cracks +
+ +
+ Orange flare decoration +
+ +
+
+ + LinkedIn + + + Instagram + + + X + + + Discord + +
+

+ Our Theme +

+

+ Patch The Reality +

+
+ +
+ HackByte 4 logo +
+ +
+ Broken effect background +
+ +
+ Background texture +
+ +
+ + REGISTER NOW + +
+ Exclamation marks decoration +
+
+ +
+
When:
+
3-5 April,2026
+
+
@
+
+ IIITDM Jabalpur +
+
+
+ +
+
+ + LinkedIn + + + Instagram + + + X + + + Discord + +
+ +
+ TPC and IIITDM Jabalpur logos +
+
+ +
+ ); +}; + +export default Hero; diff --git a/components/sections/stats-section.tsx b/components/sections/stats-section.tsx index e396f30..5f58d32 100644 --- a/components/sections/stats-section.tsx +++ b/components/sections/stats-section.tsx @@ -1,4 +1,3 @@ -import React from "react" import Image from "next/image" async function StatsSection() { @@ -26,10 +25,10 @@ async function StatsSection() { ] return ( -
-
+
+
glass design + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/corner_cracks.svg b/public/corner_cracks.svg new file mode 100644 index 0000000..fefe808 --- /dev/null +++ b/public/corner_cracks.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/discord.svg b/public/discord.svg new file mode 100644 index 0000000..0cf7079 --- /dev/null +++ b/public/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/exclamation_marks.svg b/public/exclamation_marks.svg new file mode 100644 index 0000000..6f651d3 --- /dev/null +++ b/public/exclamation_marks.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/hb4_logo.svg b/public/hb4_logo.svg new file mode 100644 index 0000000..4363848 --- /dev/null +++ b/public/hb4_logo.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/insta.svg b/public/insta.svg new file mode 100644 index 0000000..7ee246d --- /dev/null +++ b/public/insta.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/linkdin.svg b/public/linkdin.svg new file mode 100644 index 0000000..af22099 --- /dev/null +++ b/public/linkdin.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/main_page_bg.svg b/public/main_page_bg.svg new file mode 100644 index 0000000..43cff3b --- /dev/null +++ b/public/main_page_bg.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/mlh-badge.svg b/public/mlh-badge.svg new file mode 100644 index 0000000..c71886a --- /dev/null +++ b/public/mlh-badge.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/orange_flare.svg b/public/orange_flare.svg new file mode 100644 index 0000000..c097dd0 --- /dev/null +++ b/public/orange_flare.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/stats-upper-2.svg b/public/stats-upper-2.svg new file mode 100644 index 0000000..636c218 --- /dev/null +++ b/public/stats-upper-2.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/tpc_and_iiit_logo.svg b/public/tpc_and_iiit_logo.svg new file mode 100644 index 0000000..6a8692e --- /dev/null +++ b/public/tpc_and_iiit_logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index 7705396..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/x.svg b/public/x.svg new file mode 100644 index 0000000..8d9d7a3 --- /dev/null +++ b/public/x.svg @@ -0,0 +1,3 @@ + + +