From 42898179207c94f883e5015fbf7bb2d08526ba11 Mon Sep 17 00:00:00 2001 From: Sherin Thomas Date: Tue, 20 Jan 2026 17:19:15 +0530 Subject: [PATCH 1/2] Fix responsiveness of landing page --- frontend/src/components/miniCompo/CTA.jsx | 18 +-- .../src/components/miniCompo/Features.jsx | 24 ++-- frontend/src/components/miniCompo/Hero.jsx | 134 +++++++++--------- 3 files changed, 88 insertions(+), 88 deletions(-) diff --git a/frontend/src/components/miniCompo/CTA.jsx b/frontend/src/components/miniCompo/CTA.jsx index 2f3769a..ad6f22a 100644 --- a/frontend/src/components/miniCompo/CTA.jsx +++ b/frontend/src/components/miniCompo/CTA.jsx @@ -4,25 +4,25 @@ import { useNavigate } from "react-router-dom"; export default function CTASection() { const navigate = useNavigate(); return ( -
+
-
+
-
+
{[...Array(5)].map((_, i) => ( - + ))}
-

+

READY TO ANSWER
THE CALL?

-

+

Join hundreds of creative minds building the future, one line of code at a time.

-
diff --git a/frontend/src/components/miniCompo/Features.jsx b/frontend/src/components/miniCompo/Features.jsx index c251eff..0af0e5f 100644 --- a/frontend/src/components/miniCompo/Features.jsx +++ b/frontend/src/components/miniCompo/Features.jsx @@ -5,48 +5,48 @@ export default function FeaturesSection() { { title: "COMMUNITY", desc: "Connect with passionate coders and grow together.", - icon: , + icon: , bg: "bg-[#F5E6D3] dark:bg-[#2C1810]", }, { title: "INNOVATION", desc: "Explore cutting-edge technologies and build amazing things.", - icon: , + icon: , bg: "bg-[#F5E6D3] dark:bg-[#2C1810]", }, { title: "ACHIEVEMENT", desc: "Participate in hackathons and showcase your skills.", - icon: , + icon: , bg: "bg-[#F5E6D3] dark:bg-[#2C1810]", }, ]; return ( -
+
- -
-

+ +
+

WHY JOIN US?

-
+
{features.map((f, i) => (
-
+
{f.icon}
-

+

{f.title}

-

+

{f.desc}

diff --git a/frontend/src/components/miniCompo/Hero.jsx b/frontend/src/components/miniCompo/Hero.jsx index 289f673..a68e9e5 100644 --- a/frontend/src/components/miniCompo/Hero.jsx +++ b/frontend/src/components/miniCompo/Hero.jsx @@ -23,109 +23,109 @@ export default function HeroSection() { }, []); return ( -
-
+
+
{/* Left Side */} -
-
- - +
+
+ + WHERE CODE MEETS CREATIVITY
-

+

CODE.
CREATE.
- + CONQUER.

-

+

Join a vibrant community of creative coders who turn ideas into reality.

-
- - +
{/* Right Side - Code Terminal */} -
-
+
- {/* Window Buttons */} -
-
-
-
-
- - {/* Text */} -
+
+
+
+
+ + {/* Text */} +
- {/* Comment */} -
+ > + {/* Comment */} +
// Welcome to Call of Code -
- - {/* Class line */} -
- class CodingClub {'{'} -
- -
- mission = - "Inspire & Create"; -
- -
- members = ∞; -
- -
- passion = MAX; -
- - {/* Dynamic snippet box */} -
+ class CodingClub {'{'} +
+ +
+ mission = + "Inspire & Create"; +
+ +
+ members = ∞; +
+ +
+ passion = MAX; +
+ + {/* Dynamic snippet box */} +
- {codeSnippets[currentSnippet]} -
+ > + {codeSnippets[currentSnippet]} +
-
{'}'}
-
-
+
{'}'}
+
+
{/* Decorative elements */} -
-
+
+
From 9c8f0ba171ec8a2509b8a1382c25539695c576b3 Mon Sep 17 00:00:00 2001 From: Sherin Thomas Date: Thu, 22 Jan 2026 15:58:14 +0530 Subject: [PATCH 2/2] Fix responsiveness of navbar --- frontend/src/App.jsx | 24 +-- frontend/src/components/miniCompo/Footer.jsx | 24 +-- frontend/src/components/miniCompo/Hero.jsx | 38 ++-- frontend/src/components/miniCompo/Navbar.jsx | 207 +++++++++++++++---- 4 files changed, 211 insertions(+), 82 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index fcba206..65f929f 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,7 +1,6 @@ import "./App.css"; -import { Navigate, Route , Routes } from "react-router-dom"; +import { Navigate, Route, Routes } from "react-router-dom"; import { Toaster } from "react-hot-toast"; -import ThemeToggle from "./components/common/ThemeToggle"; import Home from "./pages/LandingPage"; import DsaDashboard from "./pages/DsaDashboard"; import InterviewExp from "./pages/InterviewExp"; @@ -16,19 +15,18 @@ function App() { <> - - } /> - } > - } /> - } /> - } /> - } /> - }> - } /> - + } /> + } > + } /> + } /> + } /> + } /> + }> + } /> - } /> + + } /> ); diff --git a/frontend/src/components/miniCompo/Footer.jsx b/frontend/src/components/miniCompo/Footer.jsx index 4c42287..3bb0c1a 100644 --- a/frontend/src/components/miniCompo/Footer.jsx +++ b/frontend/src/components/miniCompo/Footer.jsx @@ -21,28 +21,24 @@ export default function Footer() { " > {/* Header */} -
-

+
+

< CALL OF CODE />

-

+

A platform where coders unite to learn, build, and collaborate.

{/* CARDS */} -
+
{/* About Us */}

About Us

-

- Call Of Code is your go-to platform for coding tutorials, -
- challenges, and resources. Join us to explore the world -
- of programming and technology. +

+ Call Of Code is your go-to platform for coding tutorials, challenges, and resources. Join us to explore the world of programming and technology.

@@ -51,7 +47,7 @@ export default function Footer() { className={CARD_CLASS} >

Quick Links

-
    +
      {[ { href: "#about", text: "About Us" }, { href: "/interviewExp", text: "Interviews" }, @@ -78,11 +74,11 @@ export default function Footer() { {/* FOLLOW US */}

      Follow Us

      -
      +
      {[ { Icon: FaInstagram, @@ -103,7 +99,7 @@ export default function Footer() { onMouseEnter={() => setHoverIndex(index)} onMouseLeave={() => setHoverIndex(null)} className={` - relative p-3 text-2xl sm:text-3xl border-4 rounded-md transition-all duration-150 bg-[#F5E6D3] text-[#2C1810] border-[#F5E6D3] shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] dark:bg-[#3B2418] dark:text-[#F5E6D3] dark:border-[#3B2418] dark:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] ${hoverIndex===index?"translate-x-[4px] translate-y-[4px] hover:shadow-[10px_10px_0px_0px_rgba(193,80,46,1)] dark:hover:shadow-[10px_10px_0px_0px_rgba(193,80,46,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] dark:active:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] active:translate-x-0.5 active:translate-y-0.5":""} + relative p-2.5 sm:p-3 text-xl sm:text-2xl md:text-3xl border-4 rounded-md transition-all duration-150 bg-[#F5E6D3] text-[#2C1810] border-[#F5E6D3] shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] sm:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] dark:bg-[#3B2418] dark:text-[#F5E6D3] dark:border-[#3B2418] dark:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] sm:dark:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] ${hoverIndex === index ? "hover:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] sm:hover:shadow-[10px_10px_0px_0px_rgba(193,80,46,1)] dark:hover:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] sm:dark:hover:shadow-[10px_10px_0px_0px_rgba(193,80,46,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[4px_4px_0px_0px_rgba(193,80,46,1)] sm:active:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] dark:active:shadow-[4px_4px_0px_0px_rgba(193,80,46,1)] sm:dark:active:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] active:translate-x-0.5 active:translate-y-0.5" : ""} `} > diff --git a/frontend/src/components/miniCompo/Hero.jsx b/frontend/src/components/miniCompo/Hero.jsx index a68e9e5..1744f5f 100644 --- a/frontend/src/components/miniCompo/Hero.jsx +++ b/frontend/src/components/miniCompo/Hero.jsx @@ -23,7 +23,7 @@ export default function HeroSection() { }, []); return ( -
      +
      {/* Left Side */}
      @@ -60,18 +60,18 @@ export default function HeroSection() {
      {/* Right Side - Code Terminal */} -
      +
      {/* Window Buttons */} -
      +
      @@ -80,52 +80,52 @@ export default function HeroSection() { {/* Text */}
      {/* Comment */} -
      +
      // Welcome to Call of Code
      {/* Class line */} -
      +
      class CodingClub {'{'}
      -
      +
      mission = "Inspire & Create";
      -
      +
      members = ∞;
      -
      +
      passion = MAX;
      {/* Dynamic snippet box */}
      {codeSnippets[currentSnippet]}
      -
      {'}'}
      +
      {'}'}
      - {/* Decorative elements */} -
      -
      + {/* Decorative elements - hidden on very small screens to prevent overflow */} +
      +
      diff --git a/frontend/src/components/miniCompo/Navbar.jsx b/frontend/src/components/miniCompo/Navbar.jsx index 5e33b9a..258374a 100644 --- a/frontend/src/components/miniCompo/Navbar.jsx +++ b/frontend/src/components/miniCompo/Navbar.jsx @@ -1,13 +1,18 @@ +import { useState } from "react"; import { useAuth } from "@/context/AuthContext"; import { useMembers } from "@/hooks/useMember"; -import { Code2, LogOut, User } from "lucide-react"; +import { useTheme } from "@/context/ThemeContext"; +import { Code2, LogOut, User, Menu, X, Sun, Moon } from "lucide-react"; import { Link, useNavigate, useLocation } from "react-router-dom"; export default function Navbar() { const navigate = useNavigate(); const location = useLocation(); - const {accessToken} = useAuth(); - const {logout} = useMembers(); + const { accessToken } = useAuth(); + const { logout } = useMembers(); + const { theme, toggleTheme } = useTheme(); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + // Helper to check if the current path matches the link const isActive = (path) => location.pathname === path || location.pathname.startsWith(path + '/'); @@ -17,29 +22,33 @@ export default function Navbar() { // NEW ACTIVE STYLE: Dark Brown/Beige inverted, no shadow ("pressed" look) const activeStyle = "px-6 py-2 font-black border-4 border-black dark:border-[#F5E6D3] bg-[#C1502E] text-[#F5E6D3] dark:bg-[#C1502E] dark:text-[#F5E6D3] translate-x-[4px] translate-y-[4px] shadow-none transition-all duration-150"; + // Mobile menu link style - optimized for mobile + const mobileLinkStyle = "w-full px-4 py-2.5 font-black text-base border-4 border-black dark:border-[#F5E6D3] bg-[#C1502E] text-[#F5E6D3] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(245,230,211,1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(245,230,211,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] dark:active:shadow-[1px_1px_0px_0px_rgba(245,230,211,1)] active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150"; - + const closeMobileMenu = () => setIsMobileMenuOpen(false); return ( ); } \ No newline at end of file