wkadmin/the-tip-top-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve hero section responsive design for mobile

Browse Source 
- Reduced title sizes on mobile (text-3xl to text-7xl progressive)
- Reduced subtitle sizes on mobile (text-2xl to text-6xl progressive)
- Adjusted description text size for better mobile readability
- Reduced button padding and font size on mobile

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-12-05 13:07:41 +01:00
parent c5f0d6b14c
commit e64de7c41a
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/page.tsx
View File

@ -55,13 +55,13 @@ export default function HomePage() {
<div className="w-full relative z-10">
<div className="w-full text-center px-4">
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-primary-500 mb-6 leading-tight drop-shadow-sm tracking-wide">
<h1 className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-primary-500 mb-4 md:mb-6 leading-tight drop-shadow-sm tracking-wide">
Jeu Concours - Thé Tip Top
</h1>
<p className="text-5xl md:text-6xl lg:text-7xl font-semibold text-primary-300 mb-6 leading-relaxed tracking-wide">
<p className="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-semibold text-primary-300 mb-4 md:mb-6 leading-relaxed tracking-wide">
Célébrons l'ouverture de notre 10<sup>ème</sup> boutique à <span className="text-primary-500 font-bold">Nice</span>
</p>
<p className="text-xl md:text-2xl lg:text-3xl text-gray-500 mb-10 leading-relaxed tracking-wide">
<p className="text-base sm:text-lg md:text-2xl lg:text-3xl text-gray-500 mb-8 md:mb-10 leading-relaxed tracking-wide px-2">
Participez à notre concours - 100% des participants gagnent un lot !
</p>
@ -71,7 +71,7 @@ export default function HomePage() {
{/* Anneau qui pulse autour du bouton */}
<span className="absolute inset-0 rounded-full border-4 border-primary-500 animate-ping opacity-60"></span>
<button className="relative bg-primary-500 hover:bg-primary-600 text-white font-bold text-xl md:text-2xl px-16 py-6 md:px-20 md:py-7 rounded-full shadow-[0_0_25px_rgba(11,96,41,0.6)] hover:shadow-[0_0_40px_rgba(11,96,41,0.8)] transition-all duration-300 hover:scale-105">
<button className="relative bg-primary-500 hover:bg-primary-600 text-white font-bold text-lg sm:text-xl md:text-2xl px-10 py-4 sm:px-16 sm:py-6 md:px-20 md:py-7 rounded-full shadow-[0_0_25px_rgba(11,96,41,0.6)] hover:shadow-[0_0_40px_rgba(11,96,41,0.8)] transition-all duration-300 hover:scale-105">
Jouer maintenant
</button>
</div>