feat: Created coming soon page and logo for resources page

Author: CodeMaster17

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import NotFound from './pages/Error/NotFound';
 import ProblemSet from './pages/ProblemSet';
 import { SignUpForm } from './pages/Auth/SignUpForm';
 import { useEffect, useState } from 'react';
+import ResourcesPage from './pages/Resources/ResourcesPage';
 
 
 function App() {
@@ -30,6 +31,7 @@ function App() {
         <Router>
           <Routes>
             <Route path="/" element={<Home />} />
+            <Route path="/resources" element={<ResourcesPage />} />
             <Route path="/auth/signin" element={<SignInForm />} />
             <Route path="/auth/signup" element={<SignUpForm />} />
             <Route path="/codingarena/:id" element={<CodingArena />} />

frontend/src/components/Logo.tsx

@@ -0,0 +1,40 @@
+interface ILogoProps {
+    variant: "small" | "medium" | "large"
+}
+const Logo = ({ variant }: ILogoProps) => {
+    if (variant === "small") {
+        return (
+
+            <h1 className="text-4xl sm:text-5xl md:text-2xl font-bold">
+                <span className="bg-gradient-to-r from-purple-400 to-blue-400 text-transparent bg-clip-text">
+                    Pathfiller
+                </span>
+            </h1>
+
+        )
+    }
+    else if (variant === "medium") {
+        return (
+            <div className="inline-block p-4 rounded-2xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 backdrop-blur-sm">
+                <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold">
+                    <span className="bg-gradient-to-r from-purple-400 to-blue-400 text-transparent bg-clip-text">
+                        Pathfiller
+                    </span>
+                </h1>
+            </div>
+        )
+    }
+    if (variant === "large") {
+        return (
+            <div className="inline-block p-4 rounded-2xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 backdrop-blur-sm">
+                <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold">
+                    <span className="bg-gradient-to-r from-purple-400 to-blue-400 text-transparent bg-clip-text">
+                        Pathfiller
+                    </span>
+                </h1>
+            </div>
+        )
+    }
+}
+
+export default Logo

frontend/src/components/Navbar/HeaderBrainwave.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { navigation } from "@/constants/heroIcons";
 import { useState } from "react";
 import { HamburgerMenu } from "./HeaderHelper";
+import Logo from "../Logo";
 
 const HeaderBrainwave = () => {
     const pathname = useLocation();
@@ -33,10 +34,8 @@ const HeaderBrainwave = () => {
             className={`fixed top-0 left-0 w-full z-50  border-b border-n-6 lg:bg-n-8/90 lg:backdrop-blur-sm ${openNavigation ? "bg-n-8" : "bg-n-8/90 backdrop-blur-sm"
                 }`}
         >
-            <div className="flex items-center px-5 lg:px-7.5 xl:px-10 max-lg:py-4">
-                <a className="block w-[12rem] xl:mr-8" href="/">
-                    <p className="text-white h5">Pathfiller</p>
-                </a>
+            <div className="flex items-center px-5 lg:px-7.5 xl:px-8 max-lg:py-4">
+                <Logo variant="small" />
 
                 <nav
                     className={`${openNavigation ? "flex" : "hidden"

frontend/src/constants/heroIcons.ts

@@ -63,6 +63,11 @@ export const navigation = [
     url: "/auth/signin",
     onlyMobile: true,
   },
+  {
+    id: "6",
+    title: "Resources",
+    url: "/resources",
+  },
 ];
 
 export const heroIcons = [homeSmile, file02, searchMd, plusSquare];

frontend/src/pages/CominSoon/BackgroundPattern.tsx

@@ -0,0 +1,9 @@
+
+export function BackgroundPattern() {
+    return (
+        <div className="absolute inset-0 opacity-10">
+            <div className="absolute transform rotate-45 w-96 h-96 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full blur-3xl -top-48 -left-48"></div>
+            <div className="absolute transform -rotate-45 w-96 h-96 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full blur-3xl -bottom-48 -right-48"></div>
+        </div>
+    );
+}

frontend/src/pages/CominSoon/ComingSoon.tsx

@@ -0,0 +1,31 @@
+import Logo from "@/components/Logo"
+import { BackgroundPattern } from "./BackgroundPattern"
+
+const ComingSoon = () => {
+    return (
+        <div className="min-h-screen bg-[#080D27] flex items-center justify-center p-4">
+            <div className="w-full max-w-2xl relative">
+                <BackgroundPattern />
+
+                {/* Content */}
+                <div className="relative z-10 text-center space-y-8 py-12">
+                    {/* Logo */}
+                    <Logo variant={"large"} />
+
+                    {/* Main Text */}
+                    <div className="space-y-4">
+                        <h2 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-white">
+                            Something amazing is coming
+                        </h2>
+                        <p className="text-gray-400 max-w-lg mx-auto px-4">
+                            We're working hard to bring you a new way to learn and practice coding.
+                            Join our waitlist to be the first to know when we launch.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ComingSoon

frontend/src/pages/Resources/ResourcesPage.tsx

@@ -0,0 +1,13 @@
+import ProblemNavbar from "@/components/common/Navbar"
+import ComingSoon from "../CominSoon/ComingSoon"
+
+const ResourcesPage = () => {
+    return (
+        <>
+            <ProblemNavbar />
+            <ComingSoon />
+        </>
+    )
+}
+
+export default ResourcesPage