🏠 Feature: Page d'accueil Hero + CTA mobile amélioré
Stories 2.2 & 2.3: - Hero section avec nom, titre, accroche et CTA - Typographie responsive (text-4xl → text-display) - Animations fade-in avec délais progressifs - CTA mobile full-width avec séparateur visuel - Boutons "Découvrir mes projets" et "En savoir plus" Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
81
index.php
81
index.php
@@ -1,57 +1,54 @@
|
||||
<?php
|
||||
// index.php - Page Canary
|
||||
/**
|
||||
* Page d'accueil
|
||||
*/
|
||||
|
||||
require_once __DIR__ . '/includes/functions.php';
|
||||
|
||||
include_template('header', [
|
||||
'pageTitle' => 'Portfolio en construction',
|
||||
'pageDescription' => 'Mon portfolio de développeur web arrive bientôt. Restez connectés !'
|
||||
]);
|
||||
$pageTitle = 'Accueil';
|
||||
$pageDescription = 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
|
||||
$currentPage = 'home';
|
||||
|
||||
include_template('navbar', [
|
||||
'currentPage' => 'home'
|
||||
]);
|
||||
include_template('header', compact('pageTitle', 'pageDescription'));
|
||||
include_template('navbar', compact('currentPage'));
|
||||
?>
|
||||
|
||||
<main class="min-h-screen flex items-center justify-center">
|
||||
<div class="container-content text-center py-20">
|
||||
<!-- Titre principal -->
|
||||
<h1 class="text-display text-text-primary mb-4 animate-fade-in">
|
||||
Portfolio <span class="text-primary">en construction</span>
|
||||
</h1>
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-[calc(100vh-5rem)] flex items-center justify-center">
|
||||
<div class="container-content text-center py-20">
|
||||
<!-- Intro -->
|
||||
<p class="text-primary font-medium mb-4 animate-fade-in">
|
||||
Bonjour, je suis
|
||||
</p>
|
||||
|
||||
<!-- Sous-titre -->
|
||||
<p class="text-xl text-text-secondary mb-8 max-w-2xl mx-auto animate-fade-in animation-delay-100">
|
||||
Je prépare quelque chose de génial pour vous.
|
||||
<br>Revenez bientôt pour découvrir mes projets !
|
||||
</p>
|
||||
<!-- Nom -->
|
||||
<h1 class="text-4xl sm:text-5xl lg:text-display font-bold text-text-primary mb-6 animate-fade-in animation-delay-100">
|
||||
Prénom <span class="text-primary">NOM</span>
|
||||
</h1>
|
||||
|
||||
<!-- Badge de test -->
|
||||
<div class="flex justify-center gap-4 mb-12 animate-fade-in animation-delay-200">
|
||||
<span class="badge">PHP</span>
|
||||
<span class="badge">Tailwind CSS</span>
|
||||
<span class="badge badge-primary">En cours</span>
|
||||
</div>
|
||||
<!-- Titre -->
|
||||
<p class="text-xl sm:text-2xl lg:text-heading text-text-secondary mb-6 animate-fade-in animation-delay-200">
|
||||
Développeur Web Full-Stack
|
||||
</p>
|
||||
|
||||
<!-- Card de test -->
|
||||
<div class="card max-w-md mx-auto animate-fade-in animation-delay-300">
|
||||
<div class="card-body">
|
||||
<h3 class="text-subheading mb-2">Infrastructure validée</h3>
|
||||
<p class="text-text-secondary mb-4">
|
||||
PHP, Tailwind CSS et le serveur fonctionnent correctement.
|
||||
</p>
|
||||
<div class="flex gap-4 justify-center">
|
||||
<span class="btn-primary">Bouton Primary</span>
|
||||
<span class="btn-secondary">Bouton Secondary</span>
|
||||
</div>
|
||||
<!-- Accroche -->
|
||||
<p class="text-lg text-text-secondary max-w-2xl mx-auto mb-10 animate-fade-in animation-delay-300">
|
||||
Je crée des expériences web modernes, performantes et accessibles.
|
||||
<br class="hidden sm:block">Chaque projet est une opportunité de montrer plutôt que de dire.
|
||||
</p>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in animation-delay-300">
|
||||
<a href="/projets" class="btn-primary">
|
||||
Découvrir mes projets
|
||||
</a>
|
||||
<a href="/a-propos" class="btn-secondary">
|
||||
En savoir plus
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test responsive -->
|
||||
<p class="text-text-muted text-sm mt-12">
|
||||
Testé sur mobile, tablette et desktop.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<?php include_template('footer'); ?>
|
||||
|
||||
@@ -68,12 +68,20 @@ $navLinks = [
|
||||
<div id="mobile-menu" class="lg:hidden hidden" aria-hidden="true">
|
||||
<ul class="py-4 space-y-2 border-t border-border">
|
||||
<?php foreach ($navLinks as $link): ?>
|
||||
<li>
|
||||
<a href="<?= $link['url'] ?>"
|
||||
class="block py-3 px-4 rounded-lg <?= $currentPage === $link['id'] ? 'bg-surface text-primary' : 'text-text-secondary hover:bg-surface hover:text-text-primary' ?> transition-colors">
|
||||
<?= $link['label'] ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php if (!empty($link['isCta'])): ?>
|
||||
<li class="pt-2 border-t border-border mt-2">
|
||||
<a href="<?= $link['url'] ?>" class="btn-primary w-full justify-center">
|
||||
<?= $link['label'] ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php else: ?>
|
||||
<li>
|
||||
<a href="<?= $link['url'] ?>"
|
||||
class="block py-3 px-4 rounded-lg <?= $currentPage === $link['id'] ? 'bg-surface text-primary' : 'text-text-secondary hover:bg-surface hover:text-text-primary' ?> transition-colors">
|
||||
<?= $link['label'] ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user