Portfolio-Skycel/index.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>

    <!-- Section Navigation Rapide -->
    <section class="section bg-surface">
        <div class="container-content">
            <div class="section-header">
                <h2 class="section-title">Explorez mon portfolio</h2>
                <p class="section-subtitle">
                    Découvrez mes réalisations, compétences et parcours
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
                <!-- Carte Projets -->
                <a href="/projets" class="card-interactive group">
                    <div class="card-body text-center">
                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                            <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                            </svg>
                        </div>
                        <h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Projets</h3>
                        <p class="text-text-secondary">
                            Découvrez mes réalisations web avec démonstrations et explications techniques.
                        </p>
                    </div>
                </a>

                <!-- Carte Compétences -->
                <a href="/competences" class="card-interactive group">
                    <div class="card-body text-center">
                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                            <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                            </svg>
                        </div>
                        <h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Compétences</h3>
                        <p class="text-text-secondary">
                            Technologies maîtrisées et outils utilisés, avec preuves à l'appui.
                        </p>
                    </div>
                </a>

                <!-- Carte Me Découvrir -->
                <a href="/a-propos" class="card-interactive group">
                    <div class="card-body text-center">
                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                            <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                        </div>
                        <h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Me Découvrir</h3>
                        <p class="text-text-secondary">
                            Mon parcours, mes motivations et ce qui me passionne au-delà du code.
                        </p>
                    </div>
                </a>
            </div>
        </div>
    </section>
</main>

<?php include_template('footer'); ?>