Skip to content

Commit

Permalink
Update home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@FazCodeFR
FazCodeFR committed Sep 7, 2024
1 parent b3a891e commit b501d9c
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 76 deletions.
174 changes: 100 additions & 74 deletions src/app/components/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,91 +15,117 @@ <h1 class="font-display text-2xl font-bold tracking-tight text-slate-900 sm:text
</a>
</div>
</div>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class="text-base font-semibold leading-7">Comment ça marche ?</h2>
<p class="mt-2 text-lg tracking-tight text-gray-900 sm:text-lg">Tout ce que vous devez savoir pour adopter votre nouveau compagnon</p>
<p class="mt-6 text-lg leading-8 text-gray-600">Un processus simple et sécurisé en quatre étapes pour accueillir un chat dans votre vie.</p>
</div>

<!-- Première étape : Découvrez -->
<div class="flex relative pt-10 pb-20 sm:items-center md:w-2/3 mx-auto mt-16 sm:mt-20 lg:mt-24">
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-8 h-8 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-orange-700 text-white relative z-10 title-font font-medium text-sm">1</div>
<div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
<div class="flex-shrink-0">
<img src="../../assets/home/decouvre.png" alt="Description of the image" class="w-48 h-48 object-contain"> <!-- Image agrandie sans bordure ronde -->
</div>
<div class="flex-grow sm:pl-6 mt-6 sm:mt-0">
<h2 class="font-medium title-font text-gray-900 mb-1 text-xl">Découvrez</h2>
<p class="leading-relaxed">Plongez dans l’histoire unique de chaque chat. Apprenez à connaître leurs petites habitudes, leurs besoins et laissez-vous séduire par celui qui saura combler votre cœur.</p>
</div>
</div>
</div>

<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class="text-base font-semibold leading-7">Comment ça marche ?</h2>
<p class="mt-2 text-lg tracking-tight text-gray-900 sm:text-lg">Tout ce que vous devez savoir pour adopter votre nouveau compagnon</p>
<p class="mt-6 text-lg leading-8 text-gray-600">Un processus en quatre étapes pour accueillir un chat dans votre vie. Simple, rapide et sûr.</p>
<!-- Deuxième étape : Contactez -->
<div class="flex relative pb-20 sm:items-center md:w-2/3 mx-auto">
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
<div class="relative pl-16">
<dt class="text-xl font-semibold leading-7 text-gray-900">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg text-orange-700">
<!-- Icon for Découvrez -->
1
</div>
Découvrez
</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Parcourez notre galerie de chats adorables, tous en quête d'un nouveau départ. Utilisez nos filtres pour trouver un compagnon qui correspond à votre mode de vie et à vos préférences.</dd>
</div>
<div class="relative pl-16">
<dt class="text-xl font-semibold leading-7 text-gray-900">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg text-orange-700">
<!-- Icon for Apprenez -->
2
</div>
Apprenez
</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Chaque chat a son histoire. Découvrez leur personnalité, leur passé et leurs besoins spécifiques pour voir si vous êtes le match parfait.</dd>
</div>
<div class="relative pl-16">
<dt class="text-xl font-semibold leading-7 text-gray-900">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg text-orange-700">
<!-- Icon for Rencontrez -->
3
</div>
Rencontrez
</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Une fois que vous avez trouvé un ou plusieurs candidats, contactez l'organisation concernée via notre plateforme pour organiser une rencontre.</dd>
</div>
<div class="relative pl-16">
<dt class="text-xl font-semibold leading-7 text-gray-900">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg text-orange-700">
<!-- Icon for Adoptez -->
4
</div>
Adoptez
</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Trouvez votre compagnon de vie et commencez votre parcours ensemble, avec le soutien et les conseils de notre communauté.</dd>
</div>
</dl>
<div class="flex-shrink-0 w-8 h-8 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-orange-700 text-white relative z-10 title-font font-medium text-sm">2</div>
<div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
<div class="flex-shrink-0">
<img src="../../assets/home/contact.png" alt="Description of the image" class="w-48 h-48 object-contain"> <!-- Image agrandie sans bordure ronde -->
</div>
<div class="flex-grow sm:pl-6 mt-6 sm:mt-0">
<h2 class="font-medium title-font text-gray-900 mb-1 text-xl">Contactez</h2>
<p class="leading-relaxed">Entrez en contact avec l'association qui veille sur le chat. Posez toutes vos questions, découvrez-en plus sur sa personnalité, et préparez-vous à une belle rencontre.</p>
</div>
</div>
</div>

<!-- Troisième étape : Rencontrez -->
<div class="flex relative pb-20 sm:items-center md:w-2/3 mx-auto">
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-8 h-8 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-orange-700 text-white relative z-10 title-font font-medium text-sm">3</div>
<div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
<div class="flex-shrink-0">
<img src="../../assets/home/rencontre.png" alt="Description of the image" class="w-48 h-48 object-contain"> <!-- Image agrandie sans bordure ronde -->
</div>
<div class="flex-grow sm:pl-6 mt-6 sm:mt-0">
<h2 class="font-medium title-font text-gray-900 mb-1 text-xl">Rencontrez</h2>
<p class="leading-relaxed">Venez rencontrer votre futur compagnon ! Prenez rendez-vous avec l'association et assurez-vous que le courant passe entre vous, que ses petites manies s’accordent à votre mode de vie.</p>
</div>
</div>
</div>

<!-- Quatrième étape : Adoptez -->
<div class="flex relative pb-10 sm:items-center md:w-2/3 mx-auto">
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-8 h-8 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-orange-700 text-white relative z-10 title-font font-medium text-sm">4</div>
<div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
<div class="flex-shrink-0">
<img src="../../assets/home/adopter.png" alt="Description of the image" class="w-48 h-48 object-contain"> <!-- Image agrandie sans bordure ronde -->
</div>
<div class="flex-grow sm:pl-6 mt-6 sm:mt-0">
<h2 class="font-medium title-font text-gray-900 mb-1 text-xl">Adoptez
<fa-icon style="color: fuchsia;" [icon]="faHeart" aria-label="Coeur" title="Coeur" class="ml-1"> </fa-icon>
</h2>
<p class="leading-relaxed">Le moment est enfin arrivé : ouvrez votre maison et votre cœur à votre nouveau compagnon. Nous serons toujours là pour vous soutenir dans cette belle aventure.</p>
</div>
</div>
</div>

</div>
</section>





<div class="bg-white py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Notre mission</h2>
<div class="mt-6 flex flex-col gap-x-8 gap-y-20 lg:flex-row">
<div class="lg:w-full lg:max-w-2xl lg:flex-auto">
<p class="text-xl leading-8 text-gray-600">Notre engagement est de lutter contre l'abandon des chats et de promouvoir l'adoption responsable. À travers notre plateforme, nous aspirons à créer des liens durables entre les chats abandonnés et les familles désireuses d'accueillir un nouveau membre. Nous œuvrons pour une société où chaque chat trouve un foyer aimant et sécurisé.</p>
<p class="mt-10 max-w-xl text-base leading-7 text-gray-700">Nous collaborons étroitement avec des refuges et des associations pour offrir une seconde chance à ces animaux. En fournissant des informations complètes et transparentes, nous facilitons le processus d'adoption pour rendre chaque transition aussi douce que possible, tant pour les chats que pour leurs futurs propriétaires.</p>
</div>
<div class="lg:flex lg:flex-auto lg:justify-center">
<dl class="w-64 space-y-8 xl:w-80">
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base leading-7 text-gray-600">Chats abandonnés chaque année</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">100,000</dd> <!-- Hypothetical data -->
</div>
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base leading-7 text-gray-600">Chats adoptés via notre plateforme</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">5,000</dd> <!-- Hypothetical data -->
</div>
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base leading-7 text-gray-600">Partenaires refuges et associations</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">200</dd> <!-- Hypothetical data -->
</div>
</dl>
</div>
<div class="bg-white py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<h2 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">Notre mission : Donner une nouvelle vie aux chats abandonnés</h2>
<div class="mt-6 flex flex-col gap-x-8 gap-y-20 lg:flex-row">
<div class="lg:w-full lg:max-w-2xl lg:flex-auto">
<p class="text-xl leading-8 text-gray-600">Nous nous engageons à offrir une seconde chance aux chats abandonnés. En collaborant avec des refuges et des associations, nous aidons ces animaux à trouver un foyer aimant et sécurisé. Nous aspirons à créer des liens durables entre les familles et ces nouveaux compagnons.</p>
<p class="mt-8 max-w-xl text-lg leading-7 text-gray-700">Grâce à notre plateforme, l'adoption devient simple, transparente et responsable. Ensemble, nous pouvons changer des vies. Chaque adoption est un acte de compassion et un pas vers une société plus humaine.</p>
</div>
<div class="lg:flex lg:flex-auto lg:justify-center">
<dl class="w-64 space-y-8 xl:w-80">
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base leading-7 text-gray-600">Chats abandonnés chaque année</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">100,000</dd> <!-- Hypothetical data -->
</div>
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base leading-7 text-gray-600">Chats adoptés via notre plateforme</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">235</dd> <!-- Hypothetical data -->
</div>
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base leading-7 text-gray-600">Partenaires refuges et associations</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">120</dd> <!-- Hypothetical data -->
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
5 changes: 3 additions & 2 deletions src/app/components/home/home.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
import { faPaw } from '@fortawesome/free-solid-svg-icons';
import { faFaceGrinHearts, faHeart, faPaw } from '@fortawesome/free-solid-svg-icons';
import { ToastrService } from 'ngx-toastr';

@Component({
Expand All @@ -9,7 +9,8 @@ import { ToastrService } from 'ngx-toastr';
})
export class HomeComponent {
faPaw = faPaw;

faFaceGrinHearts = faFaceGrinHearts;
faHeart = faHeart;
constructor(private toastr: ToastrService) {}

showSuccess() {
Expand Down
Binary file added src/assets/home/adopter.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/home/contact.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/home/decouvre.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/home/rencontre.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b501d9c

Please sign in to comment.