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

feat: add GTM + improve mobile hero section

Browse Source 
- Added Google Tag Manager (GTM-WN8H6RTC) script and noscript
- Added padding-top on mobile hero to avoid header overlap
- Reduced subtitle text size on mobile for better readability
- Added Inscription/Connexion buttons on mobile for non-authenticated users

🤖 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:30:26 +01:00
parent e64de7c41a
commit 4dcc091b53
2 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/layout.tsx
View File

@ -5,7 +5,10 @@ import { Toaster } from "react-hot-toast";
import LayoutClient from "./layout-client";
import { Providers } from "./providers";
// Google Analytics 4
const GA_TRACKING_ID = "G-E272LVVQRD";
// Google Tag Manager
const GTM_ID = "GTM-WN8H6RTC";
export const metadata: Metadata = {
metadataBase: new URL(process.env.NEXT_PUBLIC_FRONTEND_URL || 'https://dsp5-archi-o24a-15m-g3.fr'),
@ -42,6 +45,22 @@ export default function RootLayout({ children }: { children: React.ReactNode })
return (
<html lang="fr">
<head>
{/* Google Tag Manager */}
<Script id="google-tag-manager" strategy="afterInteractive">
{`
(function(w,d,s,l,i){
w[l]=w[l]||[];
w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),
dl = l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${GTM_ID}');
`}
</Script>
{/* Google Analytics 4 */}
<Script
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
strategy="afterInteractive"
@ -56,6 +75,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
</Script>
</head>
<body className="min-h-screen flex flex-col bg-gray-50">
{/* Google Tag Manager (noscript) */}
<noscript>
<iframe
src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
/>
</noscript>
<Providers>
<LayoutClient>{children}</LayoutClient>
</Providers>

23
app/page.tsx
View File

@ -51,21 +51,22 @@ export default function HomePage() {
<TeaIconsBackground animationKey={animationKey} />
{/* Hero Section - Bannière principale */}
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 md:pt-0">
<div className="w-full relative z-10">
<div className="w-full text-center px-4">
<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-2xl sm:text-3xl md:text-5xl lg:text-6xl font-semibold text-primary-300 mb-4 md:mb-6 leading-relaxed tracking-wide">
<p className="text-xl sm:text-2xl md:text-5xl lg:text-6xl font-semibold text-primary-300 mb-4 md:mb-6 leading-snug md: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-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>
<div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
{/* Bouton principal */}
<div className="flex flex-col gap-4 justify-center items-center px-4">
<Link href={isAuthenticated ? ROUTES.GAME : "/register"}>
<div className="relative inline-block">
{/* Anneau qui pulse autour du bouton */}
@ -76,6 +77,22 @@ export default function HomePage() {
</button>
</div>
</Link>
{/* Boutons Inscription/Connexion pour mobile (non-authentifié) */}
{!isAuthenticated && (
<div className="flex flex-row gap-3 mt-4 md:hidden">
<Link href={ROUTES.REGISTER}>
<button className="bg-white text-primary-600 font-bold text-base px-6 py-3 rounded-lg border-2 border-primary-500 shadow-md hover:bg-primary-50 transition-all">
Inscription
</button>
</Link>
<Link href={ROUTES.LOGIN}>
<button className="bg-primary-100 text-primary-700 font-bold text-base px-6 py-3 rounded-lg border-2 border-primary-300 shadow-md hover:bg-primary-200 transition-all">
Connexion
</button>
</Link>
</div>
)}
</div>
</div>
</div>