From 592f7cad2fc72adcdc4e58f3d7c4d225c1894fb8 Mon Sep 17 00:00:00 2001 From: Ankit-codes87 Date: Sun, 30 Nov 2025 17:32:59 +0530 Subject: [PATCH] Added Solvify Homepage and Navbar --- app/globals.css | 59 +++++-- app/layout.tsx | 46 +++-- app/page.tsx | 184 ++++++++++++++++++-- components/HomePage.tsx | 365 ++++++++++++++++++++++++++++++++++++++- components/LogoIntro.tsx | 48 +---- components/Navbar.tsx | 143 ++++++++++++++- package-lock.json | 55 +++++- package.json | 4 +- public/solvify-logo.png | Bin 0 -> 73961 bytes 9 files changed, 812 insertions(+), 92 deletions(-) create mode 100644 public/solvify-logo.png diff --git a/app/globals.css b/app/globals.css index 9159b88..6520da4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,65 @@ @import "tailwindcss"; :root { - --background: #ffffff; - --foreground: #171717; + --background: #050505; + --foreground: #ffffff; + --solvify-yellow: #FFD700; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } + --font-mono: var(--font-mono); } body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; + overflow-x: hidden; +} + +/* Custom Font Utilities */ +.font-bebas { + font-family: var(--font-bebas), sans-serif; +} + +.font-montserrat { + font-family: var(--font-montserrat), sans-serif; +} + +.font-titillium { + font-family: var(--font-titillium), sans-serif; +} + +/* --- BACKGROUND PATTERN (Removed for clean state) --- */ +/* ---------------------------------------------------- */ + +/* Animations */ +@keyframes drawStroke { + 0% { stroke-dashoffset: 700px; } + 100% { stroke-dashoffset: 0px; } +} + +@keyframes glitch { + 0% { transform: translate(0); } + 20% { transform: translate(-2px, 2px); } + 40% { transform: translate(-2px, -2px); } + 60% { transform: translate(2px, 2px); } + 80% { transform: translate(2px, -2px); } + 100% { transform: translate(0); } +} + +.animate-glitch { + animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +.animate-fadeIn { + animation: fadeIn 1s ease-out forwards; } \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index becd2c3..b914712 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,42 +1,58 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Bebas_Neue, Montserrat, Titillium_Web } from "next/font/google"; import "./globals.css"; -import Navbar from "@/components/Navbar"; -import Footer from "@/components/Footer" +// import Navbar from "@/components/Navbar"; // Removed from here +// import Footer from "@/components/Footer"; // REMOVED: Must be rendered conditionally in page.tsx import LogoIntro from "@/components/LogoIntro"; -const geistSans = Geist({ - variable: "--font-geist-sans", +// 1. Headline Font: Bebas Neue +const bebasNeue = Bebas_Neue({ + weight: "400", subsets: ["latin"], + variable: "--font-bebas", }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +// 2. Subtitle Font: Montserrat +const montserrat = Montserrat({ subsets: ["latin"], + variable: "--font-montserrat", +}); + +// 3. Terminal Font: Titillium Web +const titillium = Titillium_Web({ + weight: ["400", "600", "700"], + subsets: ["latin"], + variable: "--font-titillium", }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Solvify - Bridging Gaps", + description: "The official website of Solvify Club", }; +// This component MUST return the and tags. export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( + // Mandatory Root Tags + {/* LogoIntro is rendered first. It is fixed and hides the entire screen until the animation is complete. */} -
- - {children} -