Skip to content

Responsiveness #63

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
Sherin-2711 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Responsiveness #63

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
4289817
Fix responsiveness of landing page
Sherin-2711 Jan 20, 2026
9c8f0ba
Fix responsiveness of navbar
Sherin-2711 Jan 22, 2026
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
24 changes: 11 additions & 13 deletions frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -16,19 +15,18 @@ function App() {
<>

<Toaster position="top-center" reverseOrder={false} />
<ThemeToggle />
<Routes>
<Route path="/signup" element={<AuthPage/>} />
<Route path="/" element={<MainLayout/>} >
<Route index element={<Navigate to="/home" />} />
<Route path="/home" element={<Home/>} />
<Route path="dsa" element={<DsaDashboard/>} />
<Route path="interviewExp" element={<InterviewExp/>} />
<Route element={<ProtectedRoute />}>
<Route path="profile" element={<ProfilePage/>} />
</Route>
<Route path="/signup" element={<AuthPage />} />
<Route path="/" element={<MainLayout />} >
<Route index element={<Navigate to="/home" />} />
<Route path="/home" element={<Home />} />
<Route path="dsa" element={<DsaDashboard />} />
<Route path="interviewExp" element={<InterviewExp />} />
<Route element={<ProtectedRoute />}>
<Route path="profile" element={<ProfilePage />} />
</Route>
<Route path="*" element={ <NotFound/>} />
</Route>
<Route path="*" element={<NotFound />} />
</Routes>
</>
);
Expand Down
18 changes: 9 additions & 9 deletions frontend/src/components/miniCompo/CTA.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,25 @@ import { useNavigate } from "react-router-dom";
export default function CTASection() {
const navigate = useNavigate();
return (
<section className="px-6 py-20">
<section className="px-4 sm:px-6 py-12 sm:py-16 md:py-20">
<div className="max-w-5xl mx-auto">
<div className="bg-[#C1502E] border-4 border-black p-16 shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] text-center relative overflow-hidden">
<div className="bg-[#C1502E] border-4 border-black p-6 sm:p-10 md:p-12 lg:p-16 shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] sm:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] md:shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] text-center relative overflow-hidden">
<div className="relative z-10">
<div className="flex justify-center gap-2 mb-6">
<div className="flex justify-center gap-1 sm:gap-2 mb-4 sm:mb-6">
{[...Array(5)].map((_, i) => (
<Star key={i} className="h-8 w-8 fill-[#F5E6D3] text-[#F5E6D3]" />
<Star key={i} className="h-5 w-5 sm:h-6 sm:w-6 md:h-8 md:w-8 fill-[#F5E6D3] text-[#F5E6D3]" />
))}
</div>
<h3 className="text-5xl md:text-6xl font-black text-[#F5E6D3] mb-6">
<h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[#F5E6D3] mb-4 sm:mb-6">
READY TO ANSWER<br />THE CALL?
</h3>
<p className="text-2xl font-bold text-[#F5E6D3]/90 mb-10 max-w-2xl mx-auto">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl font-bold text-[#F5E6D3]/90 mb-6 sm:mb-8 md:mb-10 max-w-2xl mx-auto px-2">
Join hundreds of creative minds building the future, one line of code at a time.
</p>
<button onClick={ () => ( navigate('/signup'))}
className="px-16 py-6 bg-[#F5E6D3] text-[#2C1810] text-2xl font-black border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] inline-flex items-center gap-4 transition-all duration-150 hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] active:translate-x-0.5 active:translate-y-0.5">
<button onClick={() => (navigate('/signup'))}
className="px-8 py-4 sm:px-12 sm:py-5 md:px-16 md:py-6 bg-[#F5E6D3] text-[#2C1810] text-lg sm:text-xl md:text-2xl font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] sm:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] inline-flex items-center gap-3 sm:gap-4 transition-all duration-150 hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] sm:hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] sm:active:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] active:translate-x-0.5 active:translate-y-0.5">
JOIN CALL OF CODE
<ArrowRight className="h-8 w-8" />
<ArrowRight className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8" />
</button>
</div>
</div>
Expand Down
24 changes: 12 additions & 12 deletions frontend/src/components/miniCompo/Features.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,48 @@ export default function FeaturesSection() {
{
title: "COMMUNITY",
desc: "Connect with passionate coders and grow together.",
icon: <Users className="h-10 w-10 text-[#2C1810] dark:text-[#2C1810]" />,
icon: <Users className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10 text-[#2C1810] dark:text-[#2C1810]" />,
bg: "bg-[#F5E6D3] dark:bg-[#2C1810]",
},
{
title: "INNOVATION",
desc: "Explore cutting-edge technologies and build amazing things.",
icon: <Zap className="h-10 w-10 text-[#2C1810] dark:text-[#2C1810]" />,
icon: <Zap className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10 text-[#2C1810] dark:text-[#2C1810]" />,
bg: "bg-[#F5E6D3] dark:bg-[#2C1810]",
},
{
title: "ACHIEVEMENT",
desc: "Participate in hackathons and showcase your skills.",
icon: <Trophy className="h-10 w-10 text-[#2C1810] dark:text-[#2C1810]" />,
icon: <Trophy className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10 text-[#2C1810] dark:text-[#2C1810]" />,
bg: "bg-[#F5E6D3] dark:bg-[#2C1810]",
},
];

return (
<section className="px-6 py-20 transition-colors duration-300">
<section className="px-4 sm:px-6 py-12 sm:py-16 md:py-20 transition-colors duration-300">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-16">
<h3 className="text-6xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-4 inline-block border-b-8 border-[#C1502E] dark:border-[#F5E6D3] pb-2">

<div className="text-center mb-10 sm:mb-12 md:mb-16">
<h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-4 inline-block border-b-4 sm:border-b-6 md:border-b-8 border-[#C1502E] dark:border-[#F5E6D3] pb-2">
Copy link

@coderabbitai coderabbitai bot Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Find Tailwind config files
fd -t f "tailwind\.config\.(js|ts|cjs|mjs)" -x cat {}

Repository: call-0f-code/codenest

Length of output: 47

🏁 Script executed:

# Check package.json for Tailwind version
cat package.json | grep -A 5 -B 5 "tailwindcss"

Repository: call-0f-code/codenest

Length of output: 47

🏁 Script executed:

# Read the Features.jsx file to see the actual code at line 30
head -40 frontend/src/components/miniCompo/Features.jsx | tail -20

Repository: call-0f-code/codenest

Length of output: 1004

🏁 Script executed:

# Search for all config-like files in root
ls -la | grep -i config

Repository: call-0f-code/codenest

Length of output: 47

🏁 Script executed:

# Search for tailwind references in the codebase
rg "borderWidth|border-b-6" --type js --type ts --max-count 5

Repository: call-0f-code/codenest

Length of output: 330

🏁 Script executed:

# Check if there's a tailwind config anywhere
find . -maxdepth 2 -name "*tailwind*" -o -name "*config*" | head -20

Repository: call-0f-code/codenest

Length of output: 206

🏁 Script executed:

# Search for tailwind config in frontend directory
fd -t f "tailwind" frontend/

Repository: call-0f-code/codenest

Length of output: 47

🏁 Script executed:

# Check vite.config.js for tailwind config
cat frontend/vite.config.js

Repository: call-0f-code/codenest

Length of output: 391

🏁 Script executed:

# Check package.json for tailwind dependency
cat package.json | grep -i tailwind

Repository: call-0f-code/codenest

Length of output: 47

🏁 Script executed:

# Search for borderWidth config across the project
rg "borderWidth" --type js --type ts

Repository: call-0f-code/codenest

Length of output: 47

🏁 Script executed:

# Check frontend package.json specifically
cat frontend/package.json | grep -A 2 -B 2 tailwind

Repository: call-0f-code/codenest

Length of output: 401

🏁 Script executed:

# Look for PostCSS config
fd -t f "postcss"

Repository: call-0f-code/codenest

Length of output: 47

🏁 Script executed:

# Find CSS entry files in frontend
find frontend/src -name "*.css" -type f

Repository: call-0f-code/codenest

Length of output: 108

🏁 Script executed:

# Check the main CSS file for Tailwind configuration
cat frontend/src/index.css 2>/dev/null || cat frontend/src/main.css 2>/dev/null || find frontend/src -name "*.css" -exec cat {} \;

Repository: call-0f-code/codenest

Length of output: 5065

border-b-6 is not a valid Tailwind CSS class in this project.

Tailwind CSS v4 provides border-b-0, border-b-1, border-b-2, border-b-4, and border-b-8 by default. The value border-b-6 is neither standard nor configured in your theme, so this class will be ignored at the sm breakpoint.

Use border-b-4 for the sm breakpoint, or switch to border-b-8 for a thicker border:

Suggested fix 
-          <h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[`#2C1810`] dark:text-[`#F5E6D3`] mb-4 inline-block border-b-4 sm:border-b-6 md:border-b-8 border-[`#C1502E`] dark:border-[`#F5E6D3`] pb-2">
+          <h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[`#2C1810`] dark:text-[`#F5E6D3`] mb-4 inline-block border-b-4 sm:border-b-4 md:border-b-8 border-[`#C1502E`] dark:border-[`#F5E6D3`] pb-2">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-4 inline-block border-b-4 sm:border-b-6 md:border-b-8 border-[#C1502E] dark:border-[#F5E6D3] pb-2">
<h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[`#2C1810`] dark:text-[`#F5E6D3`] mb-4 inline-block border-b-4 sm:border-b-4 md:border-b-8 border-[`#C1502E`] dark:border-[`#F5E6D3`] pb-2">
🤖 Prompt for AI Agents 
In `@frontend/src/components/miniCompo/Features.jsx` at line 30, The class string
on the h3 element uses an unsupported Tailwind class "border-b-6" which will be
ignored at the sm breakpoint; update the class list in the h3 element (the
heading with className including "text-3xl ... inline-block border-b-4
sm:border-b-6 md:border-b-8") to replace "sm:border-b-6" with a valid class such
as "sm:border-b-4" (or "sm:border-b-8" if you want a thicker border) so the
responsive border style works as intended.

WHY JOIN US?
</h3>
</div>

<div className="grid md:grid-cols-3 gap-8">
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-7 md:gap-8">
{features.map((f, i) => (
<div
key={i}
className={`${f.bg} border-4 border-black dark:border-[#F5E6D3] p-8 shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] hover:-translate-y-2 transition-all`}
className={`${f.bg} border-4 border-black dark:border-[#F5E6D3] p-4 sm:p-6 md:p-8 shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] sm:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] hover:-translate-y-2 transition-all`}
>
<div className="w-20 h-20 bg-[#C1502E] dark:bg-[#F5E6D3] border-4 border-black dark:border-[#F5E6D3] flex items-center justify-center mb-6">
<div className="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-[#C1502E] dark:bg-[#F5E6D3] border-4 border-black dark:border-[#F5E6D3] flex items-center justify-center mb-4 sm:mb-5 md:mb-6">
{f.icon}
</div>

<h4 className="text-3xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-3">
<h4 className="text-xl sm:text-2xl md:text-3xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-2 sm:mb-3">
{f.title}
</h4>

<p className="text-lg font-bold text-[#2C1810]/80 dark:text-[#F5E6D3]/80">
<p className="text-sm sm:text-base md:text-lg font-bold text-[#2C1810]/80 dark:text-[#F5E6D3]/80">
{f.desc}
</p>
</div>
Expand Down
24 changes: 10 additions & 14 deletions frontend/src/components/miniCompo/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,28 +21,24 @@ export default function Footer() {
"
>
{/* Header */}
<div className="text-center mb-12">
<h1 className="text-xl sm:text-3xl md:text-4xl font-black tracking-widest">
<div className="text-center mb-8 sm:mb-12 px-4">
<h1 className="text-2xl sm:text-3xl md:text-4xl font-black tracking-widest">
&lt; CALL OF CODE /&gt;
</h1>
<p className="text-xs sm:text-sm opacity-80 mt-2">
<p className="text-xs sm:text-sm opacity-80 mt-2 max-w-2xl mx-auto">
A platform where coders unite to learn, build, and collaborate.
</p>
</div>

{/* CARDS */}
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10 w-full max-w-6xl mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10 w-full max-w-6xl mx-auto">
{/* About Us */}
<div
className={CARD_CLASS}
>
<h2 className="text-lg sm:text-xl font-black mb-3">About Us</h2>
<p className="text-[10px] sm:text-xs md:text-sm leading-relaxed">
Call Of Code is your go-to platform for coding tutorials,
<br />
challenges, and resources. Join us to explore the world
<br />
of programming and technology.
<p className="text-xs sm:text-sm md:text-base leading-relaxed">
Call Of Code is your go-to platform for coding tutorials, challenges, and resources. Join us to explore the world of programming and technology.
</p>
</div>

Expand All @@ -51,7 +47,7 @@ export default function Footer() {
className={CARD_CLASS}
>
<h2 className="text-lg sm:text-xl font-black mb-3">Quick Links</h2>
<ul className="space-y-2 text-[10px] sm:text-xs md:text-sm">
<ul className="space-y-2 text-xs sm:text-sm md:text-base">
{[
{ href: "#about", text: "About Us" },
{ href: "/interviewExp", text: "Interviews" },
Expand All @@ -78,11 +74,11 @@ export default function Footer() {

{/* FOLLOW US */}
<div
className={CARD_CLASS}
className={CARD_CLASS}
>
<h2 className="text-lg sm:text-xl font-black mb-3">Follow Us</h2>

<div className="grid grid-cols-2 gap-5 place-items-center mt-2">
<div className="grid grid-cols-2 gap-4 sm:gap-5 place-items-center mt-2">
{[
{
Icon: FaInstagram,
Expand All @@ -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" : ""}
`}
>
<Icon />
Expand Down
Loading