Skip to content

feat: add Theme changer button in navBar for dark/white mode in every pages #41

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
ItsAbhinavM wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add Theme changer button in navBar for dark/white mode in every pages #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 9 additions & 9 deletions src/components/Experience.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Button from "./ui/Button"

const Experience = () => {
return (
<section className="py-20 bg-black">
<section className="py-20 bg-background">
<div className="container mx-auto px-6">
<motion.div
initial={{ opacity: 0, y: 30 }}
Expand All @@ -13,7 +13,7 @@ const Experience = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-5xl lg:text-6xl font-bold text-white mb-6">
<h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6">
Experience <br />
Fitness Like <span className="text-lime-400">Never Before</span>
</h2>
Expand All @@ -30,20 +30,20 @@ const Experience = () => {
>
<div className="bg-gray-900 p-8 rounded-xl border border-gray-800">
<h3 className="text-2xl font-bold text-white mb-4">Nutritional Excellence</h3>
<p className="text-gray-300 mb-6">
<p className="text-muted-foreground mb-6">
Personalized nutrition plans designed by certified nutritionists to fuel your fitness journey and
optimize your results.
</p>
<Button className="bg-lime-400 hover:bg-lime-500 text-black font-semibold">Explore Plans</Button>
<Button className="bg-lime-400 hover:bg-lime-500 text-foreground font-semibold">Explore Plans</Button>
</div>

<div className="bg-gray-900 p-8 rounded-xl border border-gray-800">
<h3 className="text-2xl font-bold text-white mb-4">Smart Range</h3>
<p className="text-gray-300 mb-6">
<p className="text-muted-foreground mb-6">
Advanced fitness tracking technology that monitors your progress and adapts your workouts for maximum
efficiency.
</p>
<Button className="bg-lime-400 hover:bg-lime-500 text-black font-semibold">Learn More</Button>
<Button className="bg-lime-400 hover:bg-lime-500 text-foreground font-semibold">Learn More</Button>
</div>
</motion.div>

Expand All @@ -62,14 +62,14 @@ const Experience = () => {
className="w-full h-64 object-cover rounded-xl"
/>
<div className="bg-lime-400 p-6 rounded-xl">
<h4 className="text-black font-bold text-lg mb-2">Premium Equipment</h4>
<p className="text-black/80 text-sm">State-of-the-art fitness technology</p>
<h4 className="text-foreground font-bold text-lg mb-2">Premium Equipment</h4>
<p className="text-foreground/80 text-sm">State-of-the-art fitness technology</p>
</div>
</div>
<div className="space-y-6 mt-8">
<div className="bg-gray-900 p-6 rounded-xl border border-gray-800">
<h4 className="text-white font-bold text-lg mb-2">Smart Tracking</h4>
<p className="text-gray-400 text-sm">Advanced progress monitoring</p>
<p className="text-muted-foreground text-sm">Advanced progress monitoring</p>
</div>
<img
src="https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=300&h=400&fit=crop"
Expand Down
8 changes: 4 additions & 4 deletions src/components/Expertise.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const trainers = [

const Expertise = () => {
return (
<section className="py-20 bg-black">
<section className="py-20 bg-background">
<div className="container mx-auto px-6">
<motion.div
initial={{ opacity: 0, y: 30 }}
Expand All @@ -33,11 +33,11 @@ const Expertise = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-5xl lg:text-6xl font-bold text-white mb-6">
<h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6">
Your Fitness <span className="text-lime-400">Goals</span>, <br />
Their <span className="text-lime-400">Expertise</span>
</h2>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
Meet our team of certified professionals dedicated to your success
</p>
</motion.div>
Expand Down Expand Up @@ -65,7 +65,7 @@ const Expertise = () => {
</div>
</div>
</div>
<h3 className="text-2xl font-bold text-white mb-2">{trainer.name}</h3>
<h3 className="text-2xl font-bold text-foreground mb-2">{trainer.name}</h3>
<p className="text-lime-400 font-semibold">{trainer.specialty}</p>
</motion.div>
))}
Expand Down
22 changes: 11 additions & 11 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,17 @@ const socialLinks = [

const Footer = () => {
return (
<footer className="bg-black border-t border-gray-800">
<footer className="bg-background border-t border-gray-800">
<div className="container mx-auto px-6 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
{/* Brand */}
<div className="lg:col-span-2">
<Link to="/" className="flex items-center space-x-2 mb-6">
<div className="text-2xl font-bold text-white">
<div className="text-2xl font-bold text-foreground">
<span className="text-lime-400">Fit</span>olution
</div>
</Link>
<p className="text-gray-400 mb-6 max-w-md leading-relaxed">
<p className="text-muted-foreground mb-6 max-w-md leading-relaxed">
Transform your body and mind with our revolutionary fitness programs designed for the modern athlete.
</p>

Expand All @@ -54,19 +54,19 @@ const Footer = () => {
className="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-lime-400 transition-colors duration-300 group"
aria-label={social.label}
>
<social.icon className="w-5 h-5 text-gray-400 group-hover:text-black" />
<social.icon className="w-5 h-5 text-muted-foreground group-hover:text-black" />
</a>
))}
</div>
</div>

{/* Company Links */}
<div>
<h3 className="text-white font-semibold mb-4">Company</h3>
<h3 className="text-foreground font-semibold mb-4">Company</h3>
<ul className="space-y-2">
{footerLinks.company.map((link) => (
<li key={link.name}>
<a href={link.href} className="text-gray-400 hover:text-lime-400 transition-colors duration-300">
<a href={link.href} className="text-muted-foreground hover:text-lime-400 transition-colors duration-300">
{link.name}
</a>
</li>
Expand All @@ -76,11 +76,11 @@ const Footer = () => {

{/* Support Links */}
<div>
<h3 className="text-white font-semibold mb-4">Support</h3>
<h3 className="text-foreground font-semibold mb-4">Support</h3>
<ul className="space-y-2">
{footerLinks.support.map((link) => (
<li key={link.name}>
<a href={link.href} className="text-gray-400 hover:text-lime-400 transition-colors duration-300">
<a href={link.href} className="text-muted-foreground hover:text-lime-400 transition-colors duration-300">
{link.name}
</a>
</li>
Expand All @@ -90,11 +90,11 @@ const Footer = () => {

{/* Connect Links */}
<div>
<h3 className="text-white font-semibold mb-4">Connect</h3>
<h3 className="text-foreground font-semibold mb-4">Connect</h3>
<ul className="space-y-2">
{footerLinks.connect.map((link) => (
<li key={link.name}>
<a href={link.href} className="text-gray-400 hover:text-lime-400 transition-colors duration-300">
<a href={link.href} className="text-muted-foreground hover:text-lime-400 transition-colors duration-300">
{link.name}
</a>
</li>
Expand All @@ -105,7 +105,7 @@ const Footer = () => {

{/* Bottom Section */}
<div className="border-t border-gray-800 mt-12 pt-8 text-center">
<p className="text-gray-400 text-sm">© {new Date().getFullYear()} Fitolution. All rights reserved.</p>
<p className="text-muted-foreground text-sm">© {new Date().getFullYear()} Fitolution. All rights reserved.</p>
</div>
</div>
</footer>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Button from "./ui/Button"

const Hero = () => {
return (
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black pt-20">
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-background pt-20">
{/* Background Elements */}
<div className="absolute inset-0">
{/* Floating Green Circles */}
Expand Down Expand Up @@ -59,7 +59,7 @@ const Hero = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="text-6xl lg:text-8xl font-bold text-white mb-8 leading-tight"
className="text-6xl lg:text-8xl font-bold text-foreground mb-8 leading-tight"
>
Sculpt <span className="text-lime-400">Your</span> Body,
<br />
Expand All @@ -70,7 +70,7 @@ const Hero = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
className="text-xl text-gray-300 mb-8 max-w-lg leading-relaxed"
className="text-xl text-muted-foreground mb-8 max-w-lg leading-relaxed"
>
Transform your body and mind with our revolutionary fitness programs designed for the modern athlete.
</motion.p>
Expand All @@ -87,7 +87,7 @@ const Hero = () => {
<Button
size="lg"
variant="outline"
className="border-white text-white hover:bg-white hover:text-black px-8 py-4 text-lg bg-transparent"
className="border-white text-foreground hover:bg-white hover:text-black px-8 py-4 text-lg bg-transparent"
>
Learn More
</Button>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Inspiration.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const features = [

const Inspiration = () => {
return (
<section className="py-20 bg-black">
<section className="py-20 bg-background">
<div className="container mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
{/* Left Content */}
Expand All @@ -23,11 +23,11 @@ const Inspiration = () => {
transition={{ duration: 0.8 }}
viewport={{ once: true }}
>
<h2 className="text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
<h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6 leading-tight">
Inspired to <br />
Inspire Your <span className="text-lime-400">Best Self</span>
</h2>
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
<p className="text-xl text-muted-foreground mb-8 leading-relaxed">
Join thousands who have transformed their lives through our comprehensive fitness programs and expert
guidance.
</p>
Expand All @@ -45,7 +45,7 @@ const Inspiration = () => {
<div className="w-6 h-6 bg-lime-400 rounded-full flex items-center justify-center">
<Check className="w-4 h-4 text-black" />
</div>
<span className="text-gray-300">{feature}</span>
<span className="text-muted-foreground">{feature}</span>
</motion.div>
))}
</div>
Expand Down
46 changes: 35 additions & 11 deletions src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { motion } from "framer-motion"
import { Link, useLocation } from "react-router-dom"
import { Menu, X } from "lucide-react"
import Button from "./ui/Button"
import useTheme from "../hooks/theme"
import { Moon, Sun } from "lucide-react"

const navItems = [
{ name: "Home", href: "/" },
Expand All @@ -18,7 +20,7 @@ const Navbar = () => {
const [isOpen, setIsOpen] = useState(false)
const [scrolled, setScrolled] = useState(false)
const location = useLocation()

const {theme,toggleTheme}= useTheme()
useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 50)
Expand All @@ -33,14 +35,14 @@ const Navbar = () => {
animate={{ y: 0 }}
transition={{ duration: 0.5 }}
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
scrolled ? "bg-black/95 backdrop-blur-sm" : "bg-transparent"
scrolled ? "bg-white/95 dark:bg-black/95 backdrop-blur-sm" : "bg-transparent"
}`}
>
<div className="container mx-auto px-6">
<div className="flex items-center justify-between h-20">
{/* Logo */}
<Link to="/" className="flex items-center space-x-2">
<div className="text-2xl font-bold text-white">
<div className="text-2xl font-bold text-foreground">
<span className="text-lime-400">Fit</span>olution
</div>
</Link>
Expand All @@ -51,7 +53,7 @@ const Navbar = () => {
<Link
key={item.name}
to={item.href}
className={`text-white hover:text-lime-400 transition-colors duration-300 relative ${
className={`text-foreground hover:text-lime-400 transition-colors duration-300 relative ${
location.pathname === item.href ? "text-lime-400" : ""
}`}
>
Expand All @@ -61,14 +63,24 @@ const Navbar = () => {
</div>

<div className="hidden lg:flex items-center space-x-4">
<Button variant="ghost" className="text-white hover:text-lime-400">
<Button variant="ghost" className="text-foreground hover:text-lime-400">
Sign In
</Button>
<Button className="bg-lime-400 hover:bg-lime-500 text-black font-semibold px-6">Get Started</Button>
<Button
onClick={toggleTheme}
className="p-2 rounded-full hover:bg-accent transition-colors"
aria-label="Toggle Theme">
{theme === "dark" ? (
<Sun className="w-6 h-6 text-lime-400" />
) : (
<Moon className="w-6 h-6 text-gray-800" />
)}
</Button>
</div>

{/* Mobile Menu Button */}
<button onClick={() => setIsOpen(!isOpen)} className="lg:hidden text-white">
<button onClick={() => setIsOpen(!isOpen)} className="lg:hidden text-foreground">
{isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
</button>
</div>
Expand All @@ -79,25 +91,37 @@ const Navbar = () => {
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
className="lg:hidden bg-black border-t border-gray-800"
className="lg:hidden bg-background border-t border-border"
>
<div className="py-4 space-y-4">
{navItems.map((item) => (
<Link
key={item.name}
to={item.href}
onClick={() => setIsOpen(false)}
className={`block px-4 py-2 text-white hover:text-lime-400 transition-colors duration-300 ${
className={`block px-4 py-2 text-foreground hover:text-lime-400 transition-colors duration-300 ${
location.pathname === item.href ? "text-lime-400" : ""
}`}
>
{item.name}
</Link>
))}
<div className="px-4 space-y-2">
<Button variant="ghost" className="w-full text-white hover:text-lime-400">
Sign In
</Button>
<div className="flex items-center gap-3">
<Button variant="ghost" className="w-full text-foreground hover:text-lime-400">
Sign In
</Button>
<Button
onClick={toggleTheme}
className="p-2 rounded-full hover:bg-accent transition-colors"
aria-label="Toggle Theme">
{theme === "dark" ? (
<Sun className="w-6 h-6 text-lime-400" />
) : (
<Moon className="w-6 h-6 text-gray-800" />
)}
</Button>
</div>
<Button className="w-full bg-lime-400 hover:bg-lime-500 text-black font-semibold">Get Started</Button>
</div>
</div>
Expand Down
14 changes: 5 additions & 9 deletions src/components/Services.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const services = [
const Services = () => {
const [modal,setModal] = useState();
return (
<section className="py-20 bg-black">
<section className="py-20 bg-background">
<div className="container mx-auto px-6">
<motion.div
initial={{ opacity: 0, y: 30 }}
Expand All @@ -70,11 +70,11 @@ const Services = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-5xl lg:text-6xl font-bold text-white mb-6">
<h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6">
Discover <br />
What Sets Us <span className="text-lime-400">Apart</span>
</h2>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
Experience the difference with our comprehensive approach to fitness and wellness
</p>
</motion.div>
Expand All @@ -90,15 +90,11 @@ const Services = () => {
className="bg-gray-900 p-8 rounded-xl border border-gray-800 hover:border-lime-400 transition-all duration-300 group"
>
<div className="w-16 h-16 bg-lime-400 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
<service.icon className="w-8 h-8 text-black" />
<service.icon className="w-8 h-8 text-foreground" />
</div>
<h3 className="text-xl font-bold text-white mb-4">{service.title}</h3>
<p className="text-gray-400 mb-6 leading-relaxed">{service.description}</p>
{/* <Button className="bg-lime-400 hover:bg-lime-500 text-black font-semibold w-full">Learn More</Button> */}
<div onClick={()=>setModal(service)} className="border border-gray-900 hover:border-lime-400 w-fit p-2 ">

<button className="text-white">Learn More</button>
</div>
<Button className="bg-lime-400 hover:bg-lime-500 text-foreground font-semibold w-full">Learn More</Button>
</motion.div>
))}
</div>
Expand Down
Loading