img and content

src/components/contact/contact.astro

@@ -1,95 +1,24 @@
 ---
 import ContentSection from "~/components/content-section.astro";
-import type { CompatibilityItem } from "~/types";
-
-const frameworks: Array<CompatibilityItem> = [
-  {
-    title: "React",
-    icon: "frameworks/react",
-    url: "https://reactjs.org/",
-  },
-  {
-    title: "Preact",
-    icon: "frameworks/preact",
-    url: "https://preactjs.com/",
-  },
-  {
-    title: "Svelte",
-    icon: "frameworks/svelte",
-    url: "https://svelte.dev/",
-  },
-  {
-    title: "Vue",
-    icon: "frameworks/vue",
-    url: "https://vuejs.org/",
-  },
-  {
-    title: "Solid",
-    icon: "frameworks/solid",
-    url: "https://www.solidjs.com/",
-  },
-  {
-    title: "Lit",
-    icon: "frameworks/lit",
-    url: "https://lit.dev/",
-  },
-];
-
-const platforms: Array<CompatibilityItem> = [
-  {
-    title: "Netlify",
-    icon: "platforms/netlify",
-    url: "https://www.netlify.com/",
-  },
-  {
-    title: "Vercel",
-    icon: "platforms/vercel",
-    url: "https://vercel.com/",
-  },
-  {
-    title: "Cloudflare",
-    icon: "fa-brands:cloudflare",
-    url: "https://pages.cloudflare.com/",
-  },
-  {
-    title: "Render",
-    icon: "platforms/render",
-    url: "https://render.com/",
-  },
-  {
-    title: "GitHub",
-    icon: "fa-brands:github",
-    url: "https://pages.github.com/",
-  },
-  {
-    title: "GitLab",
-    icon: "fa-brands:gitlab",
-    url: "https://docs.gitlab.com/ee/user/project/pages/",
-  },
-];
 ---
 
 <ContentSection title="Contact" id="contact">
   <Fragment slot="lead">
-    Astro <span class="text-primary">plays nice</span>. Bring your own UI{" "}
-    <span class="text-primary">framework</span>
-     and deploy to your favorite <span class="text-primary">platform</span>.
+    Vous pouvez nous <span class="text-primary">contacter</span> pour un devis <span class="text-primary">gratuit</span>, complet et détaillé intégrant le matériel et la main d'oeuvre nécessaire vous proposant la meilleure solution selon votre besoin et budget vous sera transmis rapidement. 
   </Fragment>
   <div class="py-8 lg:py-16 px-4 mx-auto max-w-screen-md w-full">
-    <form action="#" class="space-y-8">
+    <form action="mailto:[email protected]" method="get" enctype="text/plain" class="space-y-8">
+
       <div>
-          <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label>
-          <input type="email" id="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" placeholder="[email protected]" required>
-      </div>
-      <div>
-          <label for="subject" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Subject</label>
-          <input type="text" id="subject" class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" placeholder="Let us know how we can help you" required>
+          <label for="subject" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Sujet</label>
+          <input type="text" id="subject" name="subject" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" required>
       </div>
       <div class="sm:col-span-2">
-          <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your message</label>
-          <textarea id="message" rows="6" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Leave a comment..."></textarea>
+          <label for="body" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Message</label>
+          <textarea id="body" name="body" rows="6" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"></textarea>
       </div>
-      <button type="submit" class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Send message</button>
+      <button class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Envoyer</button>
     </form>
 </div>
 </ContentSection>
+

src/components/content-section.astro

@@ -19,7 +19,7 @@ const { title, id } = Astro.props;
       {title}
     </h2>
   </div>
-  <p class="max-w-xl text-center font-extrabold text-2xl">
+  <p class="max-w-3xl text-center font-extrabold text-2xl">
     <slot name="lead" />
   </p>
   <slot />

src/components/gallery/gallery.astro

@@ -14,18 +14,12 @@ const orderedSites = featuredSites.sort(
 
 <ContentSection title="Galerie" id="gallery">
   <Fragment slot="lead">
-    Astro is <span class="text-primary">versatile</span>.{" "}
-    <span class="text-primary">Explore</span> what's possible and get{" "}
-    <span class="text-primary">inspired</span>.
+    Nos dernieres <span class="text-primary">réalisations</span>.{" "}
   </Fragment>
   <div class="max-w-6xl space-y-2">
     <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       {orderedSites.map((site) => <ShowcaseCard site={site} />)}
     </div>
-    <p class="text-right text-sm">
-      <a class="text-primary" href="https://astro.build/showcase/">
-        ...and more &rarr;
-      </a>
-    </p>
+
   </div>
 </ContentSection>

src/components/hero-image.astro

@@ -1,14 +1,14 @@
 ---
 import { Image } from "astro:assets";
-import moonImage from "~/assets/moon.jpg";
+import footerImage from "~/assets/footer.jpg";
 
 const widths = [450, 800, 1200];
 const sizes = "100vw";
 ---
 
 <Image
   class="h-full w-full object-cover"
-  src={moonImage}
+  src={footerImage}
   widths={widths}
   sizes={sizes}
   alt="The ridged surface of the moon"

src/components/intro.astro

@@ -6,10 +6,7 @@ import ContentSection from "~/components/content-section.astro";
 <ContentSection title="Spécialiste de la pose de clim à Bordeaux" id="intro">
   <!-- <Icon slot="eyebrow" name="logomark" class="h-32" /> -->
   <Fragment slot="lead">
-    Vous pouvez nous contacter, un devis gratuit, complet et détaillé intégrant le matériel et la main d'oeuvre nécessaire vous proposant la meilleure solution selon votre besoin et budget vous sera transmis rapidement.
     Pour toute urgence de dépannage les délais sont relativement rapide (en moyenne sous 2h selon planning)
-    Notre entreprise assure la maintenance de tous les appareils que nous avons installé ou pas et dispose d'une panoplie de service lié au domaine de la climatisation et du chauffage à votre service.
-    <span class="text-primary">modern</span>
   </Fragment>
 
 </ContentSection>

src/components/layout/header.astro

@@ -12,7 +12,7 @@ const navItems: Array<NavItem> = [
 
 <header
   id="page-header"
-  class="absolute bottom-0 z-20 flex w-full items-center justify-between border-b border-transparent px-8 py-4 text-white"
+  class="absolute bottom-0 z-20 flex w-full items-center justify-between border-b border-transparent px-8 py-4 text-white fixed-header"
 >
   <a class="flex items-center gap-3 hover:!text-default" href="#">
     <h1 class="text-xl">Aclim Confort</h1>
@@ -107,10 +107,10 @@ const navItems: Array<NavItem> = [
   openNavButton.addEventListener("click", openMenu);
   closeNavButton.addEventListener("click", closeMenu);
 
-  document.addEventListener("scroll", () => {
-    const d = page.clientHeight - page.scrollTop - header.offsetHeight;
-    header.classList.toggle("fixed-header", d < 0);
-  });
+  // document.addEventListener("scroll", () => {
+  //   const d = page.clientHeight - page.scrollTop - header.offsetHeight;
+  //   header.classList.toggle("fixed-header", d < 0);
+  // });
 
   menu.addEventListener("click", (event) => {
     if ((event.target as HTMLElement).tagName === "A") {

src/components/services/features.astro

@@ -5,25 +5,25 @@ import type { FeatureItem } from "~/types";
 
 const features: Array<FeatureItem> = [
   {
-    title: "Bring Your Own Framework",
+    title: "Installation",
     description:
       "Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.",
     icon: "mdi:handshake",
   },
   {
-    title: "100% Static HTML, No JS",
+    title: "Dépannage",
     description:
       "Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.",
     icon: "mdi:feather",
   },
   {
-    title: "On-Demand Components",
+    title: "Entretien",
     description:
       "Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.",
     icon: "mdi:directions-fork",
   },
   {
-    title: "Broad Integration",
+    title: "Ventilation",
     description:
       "Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.",
     icon: "mdi:graph",
@@ -45,10 +45,7 @@ const features: Array<FeatureItem> = [
 
 <ContentSection title="Services" id="services">
   <Fragment slot="lead">
-    Astro comes <span class="text-primary">batteries included</span>. It takes
-    the best parts of
-    <span class="text-primary">state-of-the-art</span>
-     tools and adds its own <span class="text-primary">innovations</span>.
+    Notre entreprise assure la maintenance de <span class="text-primary">tous les appareils</span> que nous avons installé ou pas et dispose d'une panoplie de service lié au domaine de la climatisation et du chauffage à votre service.
   </Fragment>
   <ul class="grid max-w-6xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
     {

src/components/splash.astro

@@ -1,27 +1,22 @@
 ---
 import { Image } from "astro:assets";
 import { Icon } from "astro-icon";
-import astronautImage from "~/assets/astronaut.png";
 import HeroImage from "~/components/hero-image.astro";
-import Starfield from "~/components/starfield.astro";
-import GitHubCorner from "./github-corner.astro";
+import bgImage from "~/assets/bg.jpg";
+import consoleImage from "~/assets/clim.png";
 
 const widths = [450, 800];
 const sizes = "(min-width: 640px) 42vw, 67vw";
 ---
 
-<section class="relative h-full bg-black">
-  <Starfield />
-  <!-- <GitHubCorner /> -->
+<section  class="relative h-full ">
   <div id="splash-bg-fallback" class="absolute inset-0 hidden opacity-40">
     <HeroImage />
   </div>
   <div class="relative grid h-full place-items-center sm:grid-cols-2">
     <h2
       class="flex flex-col gap-2 self-end sm:gap-4 sm:self-auto sm:justify-self-end"
     >
-      <span class="text-8xl">💨</span>
-      <!-- <Icon name="logomark" class="h-24 text-white md:h-32" /> -->
       <div
         class="gradient-text text-center font-extrabold tracking-tighter text-8xl"
       >
@@ -34,14 +29,14 @@ const sizes = "(min-width: 640px) 42vw, 67vw";
       id="astronaut"
       class="w-2/3 max-w-3xl self-start sm:w-10/12 sm:self-auto sm:justify-self-start"
     >
-      <!-- <Image
+      <Image
         class="h-full w-full object-cover"
-        src={astronautImage}
+        src={consoleImage}
         widths={widths}
         sizes={sizes}
         loading="eager"
         alt="A floating astronaut in a space suit"
-      /> -->
+      />
     </div>
   </div>
 </section>
@@ -55,6 +50,8 @@ const sizes = "(min-width: 640px) 42vw, 67vw";
 </noscript>
 
 <style>
+
+
   @keyframes float {
     0% {
       transform: translate3d(0, 0, 0);