Skip to content

Issue 2 : UI Issue: Green Background on Dark Theme Looks Visually Harsh #44

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

Issue 2 : UI Issue: Green Background on Dark Theme Looks Visually Harsh #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3122910
CTASection.jsx
pranjaljain45 Aug 8, 2025
2b178d3
About.jsx
pranjaljain45 Aug 8, 2025
73c2092
Services.jsx
pranjaljain45 Aug 8, 2025
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
25 changes: 16 additions & 9 deletions src/components/CTASection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,38 @@ import Input from "./ui/Input"

const CTASection = () => {
return (
<section className="py-20 bg-lime-400">
<div className="container mx-auto px-6">
<section className="py-20 bg-gradient-to-br from-[#0f1f1b] via-[#143529] to-[#1a2e22] text-white">
<div className="max-w-6xl mx-auto px-6 sm:px-10 md:px-16">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center"
>
<h2 className="text-5xl lg:text-6xl font-bold text-black mb-6">
Connect Engage <br />
<span className="text-gray-800">Transform</span>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
Connect <span className="text-green-400">Engage </span>
<span className="text-green-500">Transform</span>
</h2>
<p className="text-xl text-black/80 mb-8 max-w-2xl mx-auto">

<p className="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
Join our community and start your transformation journey today
</p>

<div className="max-w-md mx-auto flex gap-4">
<div className="max-w-lg mx-auto flex flex-col sm:flex-row gap-4">

<Input
type="email"
placeholder="Enter your email"
className="bg-white border-0 text-black placeholder:text-gray-500 flex-1"
className="bg-transparent border border-white/50 text-white placeholder:text-gray-400 rounded-md px-4 py-3 flex-1 transition-all duration-300 focus:outline-none focus:ring-0 focus:placeholder:text-gray-500"
/>
<Button className="bg-black hover:bg-gray-800 text-white px-8">Join Now</Button>


<Button className="bg-green-700 hover:bg-emerald-900 text-white px-6 py-3 rounded-md font-semibold transition duration-300">
Join Now
</Button>
</div>

</motion.div>
</div>
</section>
Expand Down
61 changes: 30 additions & 31 deletions src/pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const AboutUs = () => {
return (
<div className="bg-black text-white">

{/* Hero Section */}
{/* Hero Section */}
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black pt-20">
{/* Background Floating Elements */}
<div className="absolute inset-0">
Expand Down Expand Up @@ -144,19 +144,19 @@ const AboutUs = () => {
transition={{ duration: 0.8, delay: 0.4 }}
className="text-xl text-gray-300 mb-8 max-w-lg leading-relaxed"
>
Transforming lives through fitness since 2019. We're more than just a gym –
Transforming lives through fitness since 2019. We're more than just a gym –
we're your partners in achieving a healthier, stronger, and more confident you.
</motion.p>

<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
className="flex flex-col sm:flex-row gap-4"
>
<Button
size="lg"
className="bg-lime-400 hover:bg-lime-500 text-lime-500 font-semibold px-8 py-4 text-lg"
size="lg"
className="bg-lime-400 hover:bg-lime-500 text-lime-500 font-semibold px-8 py-4 text-lg"
> Our Story </Button>

<Button
Expand All @@ -182,7 +182,7 @@ const AboutUs = () => {
alt="Man doing weight lifting"
className="w-full max-w-md h-auto object-cover rounded-lg"
/>
</div>
</div>
</motion.div>
</div>
</div>
Expand Down Expand Up @@ -222,17 +222,17 @@ const AboutUs = () => {
Who We <span className="text-lime-400">Are</span>
</h2>
<p className="text-xl text-gray-300 mb-6 leading-relaxed">
Fitolution was born from a simple belief: everyone deserves access to quality fitness
guidance and a supportive community. Founded in 2019 by a team of passionate fitness
professionals, we started with a vision to revolutionize how people approach their
Fitolution was born from a simple belief: everyone deserves access to quality fitness
guidance and a supportive community. Founded in 2019 by a team of passionate fitness
professionals, we started with a vision to revolutionize how people approach their
health and wellness journey.
</p>
<p className="text-lg text-gray-300 mb-6 leading-relaxed">
What began as a small local gym has evolved into a comprehensive fitness platform
What began as a small local gym has evolved into a comprehensive fitness platform
that combines cutting-edge technology with personalized training approaches.
</p>
<p className="text-lg text-gray-300 leading-relaxed">
Today, Fitolution continues to innovate, offering both in-person and digital
Today, Fitolution continues to innovate, offering both in-person and digital
solutions to make fitness accessible, enjoyable, and sustainable for everyone.
</p>
</motion.div>
Expand Down Expand Up @@ -269,8 +269,8 @@ const AboutUs = () => {
Our <span className="text-lime-400">Mission</span>
</h2>
<p className="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed">
To empower individuals to transform their lives through fitness, providing expert
guidance, state-of-the-art facilities, and a supportive community that makes
To empower individuals to transform their lives through fitness, providing expert
guidance, state-of-the-art facilities, and a supportive community that makes
achieving health goals both achievable and enjoyable.
</p>
</motion.div>
Expand Down Expand Up @@ -335,7 +335,7 @@ const AboutUs = () => {
</section>

{/* Team Section */}
<section className="py-20 bg-black">
<section className="py-20 bg-black">
<div className="container mx-auto px-6">
<motion.div
initial={{ opacity: 0, y: 30 }}
Expand Down Expand Up @@ -368,7 +368,7 @@ const AboutUs = () => {
alt={member.name}
className="w-24 h-24 rounded-full mx-auto object-cover"
/>

</div>
<h3 className="text-xl font-semibold text-white mb-2">{member.name}</h3>
<p className="text-lime-400 font-medium mb-2">{member.role}</p>
Expand All @@ -381,40 +381,39 @@ const AboutUs = () => {
</section>

{/* CTA Section - Matching your existing style */}
<section className="py-20 bg-lime-400">
<div className="container mx-auto px-6">

<section className="py-20 bg-gradient-to-br from-[#0f1f1b] via-[#143529] to-[#1a2e22] text-white">
<div className="container mx-auto px-4 md:px-6">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center"
>
<h2 className="text-5xl lg:text-6xl font-bold text-black mb-6">
Ready to Start <br />
<span className="text-gray-800">Your Journey?</span>
<h2 className="text-4xl md:text-5xl font-bold mb-4 leading-tight">
Ready to Start Your Journey?
</h2>
<p className="text-xl text-black/80 mb-8 max-w-2xl mx-auto">
Join thousands of members who have transformed their lives with Fitolution.
<p className="text-base md:text-lg text-white/80 mb-6 max-w-2xl mx-auto leading-relaxed">
Join thousands who have transformed their lives with Fitolution.
Your healthiest, strongest self is waiting.
</p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button className="bg-black hover:bg-gray-800 text-white px-8 py-4 text-lg">
<div className="flex flex-col sm:flex-row gap-4 justify-center mt-6">
<button className="bg-green-500 hover:bg-green-400 text-black px-6 py-3 text-base font-semibold rounded-md transition duration-300 transform hover:scale-105">
Start Your Journey
</Button>
<Button
variant="outline"
className="border-black text-black hover:bg-black hover:text-white px-8 py-4 text-lg bg-white"
>
</button>

<button className="bg-green-500 hover:bg-green-400 text-black px-6 py-3 text-base font-semibold rounded-md transition duration-300 transform hover:scale-105">
View Programs
</Button>
</button>
</div>
</motion.div>
</div>
</section>

</div>
)
}

export default AboutUs
export default AboutUs
52 changes: 29 additions & 23 deletions src/pages/Services.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
"use client";
import { motion } from "framer-motion";
import { Dumbbell, Users, Clock, Target, Zap, Heart } from "lucide-react";
import Button from "../components/ui/Button";
import Card from "../components/ui/Card";
"use client"
import { motion } from "framer-motion"
import { Dumbbell, Users, Clock, Target, Zap, Heart } from "lucide-react"
import Button from "../components/ui/Button"
import Card from "../components/ui/Card"

const services = [
{
Expand Down Expand Up @@ -47,7 +47,7 @@ const services = [
features: ["Keycard access", "Security cameras", "Emergency support", "Flexible hours"],
image: "https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=500&h=300&fit=crop",
},
];
]

const containerVariants = {
hidden: { opacity: 0 },
Expand All @@ -57,7 +57,7 @@ const containerVariants = {
staggerChildren: 0.1,
},
},
};
}

const itemVariants = {
hidden: { opacity: 0, y: 20 },
Expand All @@ -68,22 +68,22 @@ const itemVariants = {
duration: 0.5,
},
},
};
}

const Services = () => {
return (
<div className="min-h-screen bg-black overflow-x-hidden pt-20">
<div className="min-h-screen bg-black pt-20">
{/* Hero Section */}
<section className="relative py-20 overflow-x-hidden">
<section className="relative py-20 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-lime-400/20 to-green-400/20" />
<div className="max-w-screen-xl w-full mx-auto px-4 relative z-10">
<div className="container mx-auto px-4 relative z-10">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center max-w-4xl mx-auto"
>
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 break-words">
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
Our <span className="text-lime-400">Services</span>
</h1>
<p className="text-xl text-gray-300 mb-8">
Expand All @@ -94,8 +94,8 @@ const Services = () => {
</section>

{/* Services Grid */}
<section className="py-20 overflow-x-hidden">
<div className="max-w-screen-xl w-full mx-auto px-4">
<section className="py-20">
<div className="container mx-auto px-4">
<motion.div
variants={containerVariants}
initial="hidden"
Expand Down Expand Up @@ -137,27 +137,33 @@ const Services = () => {
</section>

{/* CTA Section */}
<section className="py-20 bg-gradient-to-r from-lime-400 to-green-400 overflow-x-hidden">
<div className="max-w-screen-xl w-full mx-auto px-4 text-center">
<section className="py-20 bg-gradient-to-br from-[#0f1f1b] via-[#143529] to-[#1a2e22] text-white">
<div className="container mx-auto px-4 text-center">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
>
<h2 className="text-4xl font-bold text-black mb-6">Ready to Start Your Fitness Journey?</h2>
<p className="text-xl text-black/80 mb-8 max-w-2xl mx-auto">

<h2 className="text-4xl md:text-5xl font-bold mb-4 leading-tight">
Ready to Start Your Journey?
</h2>

<p className="text-base md:text-lg text-white/80 mb-6 max-w-2xl mx-auto leading-relaxed">
Join thousands of members who have transformed their lives with our expert guidance and world-class
facilities.
</p>
<Button size="lg" className="bg-black text-lime-400 hover:bg-gray-800 px-8 py-3 text-lg">

<button className="bg-green-500 hover:bg-green-400 text-black px-6 py-3 text-base font-semibold rounded-md transition duration-300 transform hover:scale-105">
Get Started Today
</Button>
</button>

</motion.div>
</div>
</section>
</div>
);
};
)
}

export default Services;
export default Services