Skip to content

refactor: improve text visibility, button, and supports light/dark mode #56

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
ianmacalinao5 wants to merge 1 commit into
base: main
Choose a base branch
from
+380 −337
Open

refactor: improve text visibility, button, and supports light/dark mode #56

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
47 changes: 25 additions & 22 deletions frontend/src/components/home/about-section/AboutCTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,29 @@
import { Button } from "@/components/ui/button";

export default function AboutCTA() {
return (
<div className="text-center">
<h3 className='CTA text-3xl font-bold mb-6 font-["Outfit"]'>
Ready to Join the Fun?
</h3>
<p className='CTA text-gray-400 mb-8 text-lg max-w-2xl mx-auto font-["Roboto"]'>
Start playing today and become part of a thriving community of
developers and gamers.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button className="CTA px-8 py-3 text-lg cursor-pointer bg-linear-to-r hover:text-white hover:from-indigo-500 hover:to-purple-500 transition-all duration-200 hover:scale-[1.03] hover:shadow-[0_0_25px_rgba(99,102,241,0.6)]">
Join Now
</Button>
<Button
variant="outline"
className="CTA px-8 py-3 text-lg text-white border-white hover:bg-white/10 cursor-pointer"
>
Explore Games
</Button>
</div>
</div>
);
return (
<div className="text-center">
<h3 className='CTA text-3xl font-bold mb-6 font-["Outfit"] text-gray-900 dark:text-white'>
Ready to Join the Fun?
</h3>

<p className='CTA mb-8 text-lg max-w-2xl mx-auto font-["Roboto"] text-gray-600 dark:text-gray-400'>
Start playing today and become part of a thriving community of
developers and gamers.
</p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button className="CTA px-8 py-3 text-lg font-semibold tracking-wide bg-linear-to-r from-indigo-500 via-purple-500 to-indigo-500 bg-size-[200%_100%] transition-all duration-500 hover:bg-position-[100%_0] hover:shadow-[0_0_30px_rgba(99,102,241,0.45)] hover:-translate-y-0.5 active:translate-y-px">
Join Now
</Button>

<Button
variant="outline"
className="CTA px-8 py-3 text-lg font-medium border-gray-300 dark:border-white/20 text-gray-900 dark:text-white bg-white/80 dark:bg-white/5 backdrop-blur-sm transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:-translate-y-px hover:shadow-md"
>
Explore Games
</Button>
</div>
</div>
);
}
27 changes: 14 additions & 13 deletions frontend/src/components/home/about-section/AboutHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
export default function AboutHeader() {
return (
<div className="text-center mb-20">
<h2 className='about-title text-4xl md:text-5xl lg:text-6xl font-bold mb-6 font-["Outfit"]'>
About{" "}
<span className="bg-linear-to-r from-purple-500 to-cyan-400 inline-block text-transparent bg-clip-text">
Codev Play
</span>
</h2>
<p className='about-title text-lg md:text-xl text-gray-400 max-w-2xl mx-auto font-["Roboto"]'>
A vibrant community where coders play, learn, and build together
</p>
</div>
);
return (
<div className="text-center mb-20">
<h2 className='about-title text-4xl md:text-5xl lg:text-6xl font-bold mb-6 font-["Outfit"] text-foreground'>
About{" "}
<span className="bg-linear-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">
Codev Play
</span>
</h2>

<p className='about-title text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto font-["Roboto"]'>
A vibrant community where coders play, learn, and build together
</p>
</div>
);
}
123 changes: 72 additions & 51 deletions frontend/src/components/home/about-section/AboutText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,74 @@
export default function AboutText() {
return (
<div className="flex flex-col gap-6">
<div>
<h3 className='content text-2xl md:text-3xl font-bold mb-4 font-["Outfit"]'>
Our Mission
</h3>
<p className='content text-gray-300 leading-7 text-lg font-["Roboto"]'>
Codev Play is a platform designed for developers and enthusiasts who
want to explore gaming, competitive coding, and collaborative
development. We believe that learning should be fun, and building
should never be a solo journey.
</p>
</div>
<div>
<h3 className='content text-2xl md:text-3xl font-bold mb-4 font-["Outfit"]'>
What We Offer
</h3>
<ul className='space-y-3 text-gray-300 text-lg font-["Roboto"]'>
<li className="content flex items-start gap-3">
<span className="text-purple-400 text-2xl mt-1">🎮</span>
<span>
<strong className="text-white">Classic Games Reimagined</strong> —
Play Tic-Tac-Toe, Chess, Snake, and more with real players in real
time
</span>
</li>
<li className="content flex items-start gap-3">
<span className="text-cyan-400 text-2xl mt-1">⚡</span>
<span>
<strong className="text-white">Competitive Fun</strong> — Track
your stats, climb the leaderboards, and showcase your skills
</span>
</li>
<li className="content flex items-start gap-3">
<span className="text-purple-400 text-2xl mt-1">👥</span>
<span>
<strong className="text-white">Community First</strong> — Connect
with developers, form friendships, and collaborate on projects
</span>
</li>
<li className="content flex items-start gap-3">
<span className="text-cyan-400 text-2xl mt-1">🚀</span>
<span>
<strong className="text-white">Learn & Grow</strong> — Improve
your coding and strategic thinking through gameplay
</span>
</li>
</ul>
</div>
</div>
);
return (
<div className="flex flex-col gap-10">
<div>
<h3 className='content text-2xl md:text-3xl font-bold mb-4 font-["Outfit"] text-foreground'>
Our Mission
</h3>

<p className='content text-muted-foreground leading-7 text-lg font-["Roboto"]'>
Codev Play is a platform designed for developers and
enthusiasts who want to explore gaming, competitive coding,
and collaborative development. We believe that learning
should be fun, and building should never be a solo journey.
</p>
</div>

<div>
<h3 className='content text-2xl md:text-3xl font-bold mb-4 font-["Outfit"] text-foreground'>
What We Offer
</h3>

<ul className='space-y-4 text-muted-foreground text-lg font-["Roboto"]'>
<li className="content flex items-start gap-3">
<span className="text-purple-500 text-2xl mt-1">
🎮
</span>
<span>
<strong className="text-foreground">
Classic Games Reimagined
</strong>{" "}
— Play Tic-Tac-Toe, Chess, Snake, and more with real
players in real time
</span>
</li>

<li className="content flex items-start gap-3">
<span className="text-cyan-500 text-2xl mt-1">⚡</span>
<span>
<strong className="text-foreground">
Competitive Fun
</strong>{" "}
— Track your stats, climb the leaderboards, and
showcase your skills
</span>
</li>

<li className="content flex items-start gap-3">
<span className="text-purple-500 text-2xl mt-1">
👥
</span>
<span>
<strong className="text-foreground">
Community First
</strong>{" "}
— Connect with developers, form friendships, and
collaborate on projects
</span>
</li>

<li className="content flex items-start gap-3">
<span className="text-cyan-500 text-2xl mt-1">🚀</span>
<span>
<strong className="text-foreground">
Learn & Grow
</strong>{" "}
— Improve your coding and strategic thinking through
gameplay
</span>
</li>
</ul>
</div>
</div>
);
}
104 changes: 58 additions & 46 deletions frontend/src/components/home/about-section/AboutVisual.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,61 @@
export default function AboutVisual() {
return (
<div className="relative h-125 hidden lg:flex items-center justify-center">
<div className="content absolute inset-0 bg-linear-to-t from-purple-500/20 to-cyan-400/10 rounded-2xl blur-3xl"></div>
<div className="relative z-10 grid grid-cols-2 gap-4">
<div className="space-y-4">
<div
data-tilt
data-tilt-reverse
data-tilt-scale="1.1"
className="content bg-white/5 backdrop-blur-md border border-white/10 rounded-xl p-6 text-center hover:border-purple-500/50 hover:bg-white/10 hover:shadow-[0_0_20px_rgba(168,85,247,0.4)] cursor-default"
>
<div className="text-6xl mb-2">🎯</div>
<p className="text-sm font-semibold">Strategic</p>
</div>
<div
data-tilt
data-tilt-reverse
data-tilt-scale="1.1"
className="content bg-white/5 backdrop-blur-md border border-white/10 rounded-xl p-6 text-center hover:border-cyan-400/50 hover:bg-white/10 hover:shadow-[0_0_20px_rgba(34,211,238,0.4)] cursor-default"
>
<div className="text-6xl mb-2">⚙️</div>
<p className="text-sm font-semibold">Technical</p>
</div>
return (
<div className="relative h-125 hidden lg:flex items-center justify-center">
<div className="content absolute inset-0 bg-linear-to-t from-purple-500/20 to-cyan-400/10 rounded-2xl blur-3xl" />

<div className="relative z-10 grid grid-cols-2 gap-4">
<div className="space-y-4">
<div
data-tilt
data-tilt-reverse
data-tilt-scale="1.1"
className="content rounded-xl p-6 text-center transition-all duration-300 bg-white/70 dark:bg-white/5 backdrop-blur-md border border-gray-300 dark:border-white/10 hover:border-purple-500/60 hover:bg-white/90 dark:hover:bg-white/10 hover:shadow-[0_0_25px_rgba(168,85,247,0.35)]"
>
<div className="text-6xl mb-2">🎯</div>
<p className="text-sm font-semibold text-gray-800 dark:text-gray-200">
Strategic
</p>
</div>

<div
data-tilt
data-tilt-reverse
data-tilt-scale="1.1"
className="content rounded-xl p-6 text-center transition-all duration-300 bg-white/70 dark:bg-white/5 backdrop-blur-md border border-gray-300 dark:border-white/10 hover:border-cyan-400/60 hover:bg-white/90 dark:hover:bg-white/10 hover:shadow-[0_0_25px_rgba(34,211,238,0.35)]"
>
<div className="text-6xl mb-2">⚙️</div>
<p className="text-sm font-semibold text-gray-800 dark:text-gray-200">
Technical
</p>
</div>
</div>

<div className="space-y-4 mt-6">
<div
data-tilt
data-tilt-reverse
data-tilt-scale="1.1"
className="content rounded-xl p-6 text-center transition-all duration-300 bg-white/70 dark:bg-white/5 backdrop-blur-md border border-gray-300 dark:border-white/10 hover:border-purple-500/60 hover:bg-white/90 dark:hover:bg-white/10 hover:shadow-[0_0_25px_rgba(168,85,247,0.35)]"
>
<div className="text-6xl mb-2">🌍</div>
<p className="text-sm font-semibold text-gray-800 dark:text-gray-200">
Global
</p>
</div>

<div
data-tilt
data-tilt-reverse
data-tilt-scale="1.1"
className="content rounded-xl p-6 text-center transition-all duration-300 bg-white/70 dark:bg-white/5 backdrop-blur-md border border-gray-300 dark:border-white/10 hover:border-cyan-400/60 hover:bg-white/90 dark:hover:bg-white/10 hover:shadow-[0_0_25px_rgba(34,211,238,0.35)]"
>
<div className="text-6xl mb-2">💡</div>
<p className="text-sm font-semibold text-gray-800 dark:text-gray-200">
Innovative
</p>
</div>
</div>
</div>
</div>
<div className="space-y-4 mt-6">
<div
data-tilt
data-tilt-reverse
data-tilt-scale="1.1"
className="content bg-white/5 backdrop-blur-md border border-white/10 rounded-xl p-6 text-center hover:border-purple-500/50 hover:bg-white/10 hover:shadow-[0_0_20px_rgba(168,85,247,0.4)] cursor-default"
>
<div className="text-6xl mb-2">🌍</div>
<p className="text-sm font-semibold">Global</p>
</div>
<div
data-tilt
data-tilt-reverse
data-tilt-scale="1.1"
className="content bg-white/5 backdrop-blur-md border border-white/10 rounded-xl p-6 text-center hover:border-cyan-400/50 hover:bg-white/10 hover:shadow-[0_0_20px_rgba(34,211,238,0.4)] cursor-default"
>
<div className="text-6xl mb-2">💡</div>
<p className="text-sm font-semibold">Innovative</p>
</div>
</div>
</div>
</div>
);
);
}
24 changes: 14 additions & 10 deletions frontend/src/components/home/about-section/FeatureCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import { FeatureCardProps } from "@/types/home";

export default function FeatureCard({
icon,
title,
description,
icon,
title,
description,
}: FeatureCardProps) {
return (
<div className="feature bg-white/5 backdrop-blur-md border border-white/10 rounded-xl p-8 hover:border-purple-500/50 hover:bg-white/10 transition-all duration-300 group hover:shadow-[0_0_20px_rgba(168,85,247,0.4)]">
<div className="text-5xl mb-4">{icon}</div>
<h3 className='text-xl font-bold mb-3 font-["Outfit"]'>{title}</h3>
<p className='text-gray-400 leading-6 font-["Roboto"]'>{description}</p>
</div>
);
return (
<div className="feature rounded-xl p-8 transition-all duration-300 group backdrop-blur-md bg-white/70 dark:bg-white/5 border border-gray-300 dark:border-white/10 hover:border-purple-500/60 hover:bg-white/90 dark:hover:bg-white/10 hover:shadow-[0_0_25px_rgba(168,85,247,0.35)]">
<div className="text-5xl mb-4">{icon}</div>
<h3 className='text-xl font-bold mb-3 font-["Outfit"] text-gray-900 dark:text-white'>
{title}
</h3>
<p className='leading-6 font-["Roboto"] text-gray-600 dark:text-gray-400'>
{description}
</p>
</div>
);
}
Loading