📊 FOXART

📜 Table des matières

• 📖 Description
• 🔗 Technologies
• 📂 Architecture du projet
• 🚀 Installation et exécution
• 📌 Améliorations possibles
• 👤 Skies-Land - Jonathan Araldi
• 📷 Image de preview

📖 Description

Cours suivie pour la réalisation de ce projet Remote Monkey

Foxart est une landing page avec un design moderne intégrant :

• Une section Hero accueillante, avec un jeu de couleurs intenses, des images et des effets lumineux subtils.
• Une section branding et une section features, optimisées pour une mise en page structurée.
• Des Call-to-Actions stratégiques et des illustrations flottantes pour aérer la composition visuelle.

Ce projet a été réalisé en suivant un cours YouTube pour approfondir les techniques de développement front-end avec React.js et Tailwind CSS. Le code a été optimisé pour un responsive design, assurant une expérience fluide sur divers formats d’écran.

🔎 Accès au projet : Foxart

🔗 Technologies

• Vite.js
• React.js
• Tailwind CSS
• Firebase

📂 Architecture du projet

src/
│   App.jsx                     # Composant principal de l'application
│   index.css                    # Fichier CSS global
│   main.jsx                     # Point d'entrée React
│
├── assets/                      # Ressources graphiques du projet
│   ├── branding/                # Logos des différentes marques
│   ├── bullet-points/           # Icônes des éléments de fonctionnalités
│   ├── hero/                    # Illustrations pour la section Hero
│   ├── ico/                     # Icônes générales du projet
│   ├── elipse-blue-blur.png     # Effet visuel pour l'arrière-plan
│   ├── grid.png                 # Image de grille pour le design
│   └── index.js                 # Point d'entrée des assets
│
├── components/                  # Composants réutilisables
│   ├── Branding.jsx             # Composant pour la section Branding
│   ├── BulletPoints.jsx         # Composant pour les bullet points
│   ├── Button.jsx               # Composant bouton réutilisable
│   ├── CallToAction.jsx         # Bouton d'appel à l'action
│   ├── Container.jsx            # Conteneur de mise en page
│   ├── Features.jsx             # Section des fonctionnalités
│   ├── Footer.jsx               # Pied de page
│   ├── Header.jsx               # En-tête du site
│   ├── Headings.jsx             # Titres et sous-titres réutilisables
│   ├── Hero.jsx                 # Section Hero de la landing page
│   ├── Pricing.jsx              # Section des tarifs
│   ├── theme/                   # Composants liés au thème
│   │   ├── Header.jsx
│   │   └── Hero.jsx
│   └── constants/               # Constantes globales
│       └── index.js

🚀 Installation et exécution

1 - Cloner le projet

  git clone https://github.com/Skies-Land/Foxart.git

2 - Installer les dépendances

  npm install

3 - Lancer l'application

  npm run dev

📌 Améliorations possibles

• ✅ Ajout d’animation pour rendre l’apparition des sections plus dynamique.
• ✅ Intégration d’un formulaire de contact connecté à Firebase pour capturer des leads.

👤 Skies-Land - Jonathan Araldi

• Portfolio | LinkedIn | GitHub

📷 Image de preview