Merge pull request #29 from ajgil/28-customers-page

28 customers page

src/components/sections/landing/HeroSection.astro

@@ -1,6 +1,6 @@
 ---
 // Import the necessary dependencies
-import { Image } from "astro:assets";
+//import { Image } from "astro:assets";
 import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro";
 import SecondaryCTA from "@components/ui/buttons/SecondaryCTA.astro";
 import { YouTube } from '@astro-community/astro-embed-youtube';

src/pages/customers.astro

@@ -1,6 +1,85 @@
 ---
-import MainLayout from '@/layouts/MainLayout.astro';
+import MainLayout from "@/layouts/MainLayout.astro";
+import { Image } from "astro:assets";
+import  Asolare from "@images/customers/asolare.jpg";
+import  Cinquanta from "@images/customers/cinquanta.jpg";
+import  Dimitra from "@images/customers/dimitra.jpg";
+import  Genesia from "@images/customers/genesia.jpg";
+import  Margaret from "@images/customers/margaret-Ann.jpg";
+import  Modus from "@images/customers/modus.jpg";
+import  Nechida from "@images/customers/nechida.jpeg";
+import Pandion from "@images/customers/pandion.jpg";
+import Supernova from "@images/customers/supernova.jpg";
+import Taipan from "@images/customers/taipan.png";
+import Slow from "@images/customers/slow-motion.jpg";
 ---
+
 <MainLayout>
-
-</MainLayout>
+    <!-- Clients -->
+    <div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+        <!-- Title -->
+        <div class="mx-auto mb-6 text-center sm:w-1/2 md:mb-12 xl:w-1/3">
+            <h2
+                class="text-xl font-semibold text-gray-800 dark:text-neutral-200 md:text-2xl md:leading-tight"
+            >
+                Nuestros clientes
+            </h2>
+        </div>
+        <!-- End Title -->
+       <embed src="https://digitalsailing.notion.site/38388c8eb22e4fcb9e8071d48be5ff39?v=229e99da87374b70906d1a95e03364c2&pvs=4" style="width:100%; height:50vw;">
+       <!--
+        <iframe src="https://digitalsailing.notion.site/38388c8eb22e4fcb9e8071d48be5ff39?v=229e99da87374b70906d1a95e03364c2&pvs=4" width="100%" height="50vw;" />
+     -->
+
+        <!-- Grid -->
+       <!--
+        <div
+            class="grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:gap-6"
+        >
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                
+                <Image src={Asolare} alt="" height={300}width={300}>
+                
+            </div>
+
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                <Image src={Cinquanta} alt=""></Image>
+            </div>
+
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                <Image src={Dimitra} alt="" />
+            </div>
+
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                <Image src={Genesia} alt="" />
+            </div>
+
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                <Image src={Margaret} alt="" />
+            </div>
+
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                <Image src={Modus} alt="" />
+            </div>
+
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                <Image src={Nechida} alt="" />
+            </div>
+
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                <Image src={Pandion} alt="" />
+            </div>
+
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                <Image src={Slow} alt="" />
+            </div>
+
+            <div class="rounded-lg bg-gray-100 p-4 dark:bg-neutral-800 md:p-7">
+                <Image src={Supernova} alt="" />
+            </div>
+        </div>
+         -->
+        <!-- End Grid -->
+    </div>
+    <!-- End Clients -->
+</MainLayout>