skycel
e19c60c19b
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>
55 lines
1.9 KiB
PHP
55 lines
1.9 KiB
PHP
<?php
|
|
/**
|
|
* Page d'accueil
|
|
*/
|
|
|
|
require_once __DIR__ . '/includes/functions.php';
|
|
|
|
$pageTitle = 'Accueil';
|
|
$pageDescription = 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
|
|
$currentPage = 'home';
|
|
|
|
include_template('header', compact('pageTitle', 'pageDescription'));
|
|
include_template('navbar', compact('currentPage'));
|
|
?>
|
|
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
</section>
|
|
</main>
|
|
|
|
<?php include_template('footer'); ?>
|