naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX enhancements: refined footer layout, dashboard sidebar fixes, header tweaks, and theme alignment

Browse Source
This commit is contained in:
ectasy663
2026-08-05 13:07:36 +05:30
parent 6760a21a7e
commit 54f60d097e
13 changed files with 152 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AI/AITutorChat.tsx
View File

@@ -60,7 +60,7 @@ export function AITutorChat() {
return (
<Button
onClick={() => setIsOpen(true)}
className="fixed bottom-6 right-6 h-14 w-14 rounded-full shadow-[0_0_20px_-5px_var(--color-primary)] flex items-center justify-center z-50 bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 transition-transform hover:scale-105"
className="fixed bottom-6 right-6 h-14 w-14 rounded-full flex items-center justify-center z-50 bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 transition-transform hover:scale-105"
>
<Bot size={28} />
</Button>
@@ -68,7 +68,7 @@ export function AITutorChat() {
}
return (
<Card className={`fixed right-0 md:right-6 bottom-0 md:bottom-6 border-border bg-background/95 backdrop-blur-xl shadow-2xl z-50 flex flex-col overflow-hidden transition-all duration-300 ease-in-out
<Card className={`fixed right-0 md:right-6 bottom-0 md:bottom-6 border-border bg-background/95 backdrop-blur-xl z-50 flex flex-col overflow-hidden transition-all duration-300 ease-in-out
${isExpanded ? 'w-full md:w-[600px] h-full md:h-[80vh] rounded-none md:rounded-2xl' : 'w-full md:w-[400px] h-[600px] rounded-t-2xl md:rounded-2xl'}
`}>
<CardHeader className="p-4 border-b border-border bg-secondary/30 flex flex-row items-center justify-between space-y-0 shrink-0">

44
src/components/AdminThemeToggle.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client"
import { useState, useEffect } from "react"
import { Moon, Sun } from "lucide-react"
export function AdminThemeToggle() {
const [isDark, setIsDark] = useState(true) // admin defaults to dark
useEffect(() => {
// Admin uses its own separate localStorage key, defaults to dark
const savedTheme = localStorage.getItem('admin-theme');
if (savedTheme === 'light') {
document.documentElement.classList.remove('dark');
setIsDark(false);
} else {
// Default to dark for admin
document.documentElement.classList.add('dark');
setIsDark(true);
}
}, [])
const toggleTheme = () => {
if (isDark) {
document.documentElement.classList.remove('dark')
localStorage.setItem('admin-theme', 'light');
setIsDark(false)
} else {
document.documentElement.classList.add('dark')
localStorage.setItem('admin-theme', 'dark');
setIsDark(true)
}
}
return (
<button
onClick={toggleTheme}
className="p-2 rounded-xl hover:bg-secondary/80 transition-colors border border-transparent hover:border-border text-muted-foreground hover:text-foreground"
aria-label="Toggle Admin Dark Mode"
title={isDark ? "Switch to Light Mode" : "Switch to Dark Mode"}
>
{isDark ? <Sun size={18} /> : <Moon size={18} />}
</button>
)
}

70
src/components/Landing/PublicLayout.tsx
View File

@@ -1,7 +1,7 @@
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ThemeToggle } from "@/components/ThemeToggle"
export function PublicLayout({ children }: { children: React.ReactNode }) {
return (
<div className="min-h-screen bg-background text-foreground overflow-x-hidden selection:bg-primary/20 relative">
@@ -24,6 +24,7 @@ export function PublicLayout({ children }: { children: React.ReactNode }) {
<Link href="/about" className="hover:text-foreground transition-colors">About Us</Link>
</div>
<div className="flex items-center gap-4">
<ThemeToggle />
<Link href="/login" className="text-sm font-bold hover:text-primary transition-colors hidden sm:block">Log in</Link>
<Link href="/signup">
<Button className="rounded-full font-bold px-6 shadow-[0_0_15px_-5px_var(--color-primary)] hover:shadow-[0_0_25px_-5px_var(--color-primary)] transition-all">Get Started</Button>
@@ -40,56 +41,31 @@ export function PublicLayout({ children }: { children: React.ReactNode }) {
{/* Global Footer (Static) */}
<footer className="relative z-10 bg-background/90 backdrop-blur-md border-t border-border pt-16 pb-8">
<div className="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<div className="md:col-span-1 space-y-4">
<div className="relative h-12 w-64 mb-6">
<Image
src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left dark:hidden"
/>
<Image
src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg"
alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left hidden dark:block"
/>
</div>
<p className="text-sm text-muted-foreground font-medium leading-relaxed">
PragatiVeer is India's AI-powered daily practice platform for JEE and NEET aspirants. It is a product of Gyannetra Pvt Ltd.
</p>
</div>
<div>
<h4 className="font-bold mb-6 tracking-tight text-foreground">Product</h4>
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
<li><Link href="/#features" className="hover:text-primary transition-colors">Features</Link></li>
<li><Link href="/#pricing" className="hover:text-primary transition-colors">Pricing</Link></li>
</ul>
</div>
<div>
<h4 className="font-bold mb-6 tracking-tight text-foreground">Company</h4>
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
<li><Link href="/about" className="hover:text-primary transition-colors">About Us</Link></li>
<li><Link href="/contact" className="hover:text-primary transition-colors">Contact</Link></li>
</ul>
</div>
<div>
<h4 className="font-bold mb-6 tracking-tight text-foreground">Legal</h4>
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
<li><Link href="/terms" className="hover:text-primary transition-colors">Terms & Conditions</Link></li>
<li><Link href="/privacy" className="hover:text-primary transition-colors">Privacy Policy</Link></li>
<li><Link href="/refund" className="hover:text-primary transition-colors">Refund Policy</Link></li>
<li><Link href="/cancellation" className="hover:text-primary transition-colors">Cancellation Policy</Link></li>
<li><Link href="/disclaimer" className="hover:text-primary transition-colors">Disclaimer</Link></li>
</ul>
<div className="flex flex-col items-center max-w-2xl mx-auto mb-16 space-y-6">
<div className="relative h-24 w-[28rem] mb-2">
<Image
src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
alt="PragatiVeer" fill className="object-contain dark:hidden"
/>
<Image
src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg"
alt="PragatiVeer" fill className="object-contain hidden dark:block"
/>
</div>
<p className="text-sm text-muted-foreground font-medium leading-relaxed text-center w-full">
PragatiVeer is India's AI-powered daily practice platform for JEE and NEET aspirants. It is a product of Gyannetra Pvt Ltd.
</p>
</div>
<div className="border-t border-border pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div className="border-t border-border pt-8 flex flex-col md:flex-row items-center justify-between gap-6">
<p className="text-sm text-muted-foreground font-medium">© {new Date().getFullYear()} PragatiVeer. All rights reserved.</p>
{/* <div className="flex items-center gap-2 text-sm text-muted-foreground font-medium">
Made with <div className="size-2 rounded-full bg-primary animate-pulse"></div> by AI Agents
</div> */}
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-muted-foreground font-medium">
<Link href="/terms" className="hover:text-primary transition-colors">Terms & Conditions</Link>
<Link href="/privacy" className="hover:text-primary transition-colors">Privacy Policy</Link>
<Link href="/refund" className="hover:text-primary transition-colors">Refund Policy</Link>
<Link href="/cancellation" className="hover:text-primary transition-colors">Cancellation Policy</Link>
<Link href="/disclaimer" className="hover:text-primary transition-colors">Disclaimer</Link>
</div>
</div>
</div>
</footer>

3
src/components/ThemeToggle.tsx
View File

@@ -7,8 +7,9 @@ export function ThemeToggle() {
const [isDark, setIsDark] = useState(false)
useEffect(() => {
// Default is light; only go dark if explicitly saved as 'dark'
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark');
setIsDark(true);
} else {

2
src/components/TierBadge.tsx
View File

@@ -14,7 +14,7 @@ export function TierBadge({ tier }: TierBadgeProps) {
}
return (
<Badge className="text-xs font-semibold uppercase tracking-wider bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20 hover:bg-[#00F0FF]/20 transition-colors shadow-[0_0_10px_-2px_#00F0FF]">
<Badge className="text-xs font-semibold uppercase tracking-wider bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 border-cyan-500/20 hover:bg-cyan-500/20 transition-colors shadow-none dark:shadow-[0_0_10px_-2px_#00F0FF]">
AI Coach
</Badge>
)

2
src/components/ui/card.tsx
View File

@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
<div
ref={ref}
className={cn(
"rounded-2xl border border-border bg-background text-foreground shadow-sm transition-all duration-300 hover:shadow-md",
"rounded-2xl border border-border bg-background text-foreground transition-all duration-300",
className
)}
{...props}