Add Hero

app/page.tsx

@@ -1,5 +1,6 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
+import Hero from 'components/hero';
 import Footer from 'components/layout/footer';
 import { Suspense } from 'react';
 
@@ -15,6 +16,7 @@ export const metadata = {
 export default async function HomePage() {
   return (
     <>
+      <Hero />
       <ThreeItemGrid />
       <Suspense>
         <Carousel />

components/hero.tsx

@@ -0,0 +1,109 @@
+import Image from 'next/image';
+import backgroundImage from '../images/home-page-02-sale-full-width.jpg';
+
+const testimonials = [
+  {
+    id: 1,
+    quote:
+      'Min ordre ankom super hurtigt. Produktet er endnu bedre, end jeg havde håbet. Meget tilfreds kunde her!',
+    attribution: 'Sarah Peters, New Orleans'
+  },
+  {
+    id: 2,
+    quote:
+      'Jeg måtte returnere et køb, der ikke passede. Hele processen var så simpel, at jeg endte med at bestille to nye varer!',
+    attribution: 'Kelly McPherson, Chicago'
+  },
+  {
+    id: 3,
+    quote:
+      'Nu hvor jeg er på ferie for sommeren, vil jeg sandsynligvis bestille et par flere skjorter. Det er bare så bekvemt, og jeg ved, at kvaliteten altid vil være der.',
+    attribution: 'Chris Paul, Phoenix'
+  }
+];
+
+const Hero = () => {
+  return (
+    <div className="relative overflow-hidden bg-white">
+      {/* Dekorativ baggrundsbillede og gradient */}
+      <div aria-hidden="true" className="absolute inset-0">
+        <div className="absolute inset-0 mx-auto max-w-7xl overflow-hidden xl:px-8">
+          <Image
+            width={500}
+            height={200}
+            src={backgroundImage}
+            alt=""
+            className="h-full w-full object-cover object-center"
+            priority={true}
+          />
+        </div>
+        <div className="absolute inset-0 bg-white bg-opacity-75" />
+        <div className="absolute inset-0 bg-gradient-to-t from-white via-white" />
+      </div>
+
+      {/* Tilbud */}
+      <section
+        aria-labelledby="tilbud-heading"
+        className="relative mx-auto flex max-w-7xl flex-col items-center px-4 pt-32 text-center sm:px-6 lg:px-8"
+      >
+        <div className="mx-auto max-w-2xl lg:max-w-none">
+          <h2
+            id="tilbud-heading"
+            className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl"
+          >
+            Få 25% rabat under vores engangssalg
+          </h2>
+          <p className="mx-auto mt-4 max-w-xl text-xl text-gray-600">
+            De fleste af vores produkter er begrænsede udgivelser, som ikke kommer tilbage. Få dine
+            yndlingsvarer, mens de er på lager.
+          </p>
+          <a
+            href="#"
+            className="mt-6 inline-block w-full rounded-md border border-transparent bg-gray-900 px-8 py-3 font-medium text-white hover:bg-gray-800 sm:w-auto"
+          >
+            Få adgang til vores engangssalg
+          </a>
+        </div>
+      </section>
+
+      {/* Anmeldelser */}
+      <section
+        aria-labelledby="anmeldelser-heading"
+        className="relative mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8 lg:py-32"
+      >
+        <div className="mx-auto max-w-2xl lg:max-w-none">
+          <h2 id="anmeldelser-heading" className="text-2xl font-bold tracking-tight text-gray-900">
+            Hvad siger folk?
+          </h2>
+
+          <div className="mt-16 space-y-16 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:space-y-0">
+            {testimonials.map((testimonial) => (
+              <blockquote key={testimonial.id} className="sm:flex lg:block">
+                <svg
+                  width={24}
+                  height={18}
+                  viewBox="0 0 24 18"
+                  aria-hidden="true"
+                  className="flex-shrink-0 text-gray-300"
+                >
+                  <path
+                    d="M0 18h8.7v-5.555c-.024-3.906 1.113-6.841 2.892-9.68L6.452 0C3.188 2.644-.026 7.86 0 12.469V18zm12.408 0h8.7v-5.555C21.083 8.539 22.22 5.604 24 2.765L18.859 0c-3.263 2.644-6.476 7.86-6.451 12.469V18z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <div className="mt-8 sm:ml-6 sm:mt-0 lg:ml-0 lg:mt-10">
+                  <p className="text-lg text-gray-600">{testimonial.quote}</p>
+                  <cite className="mt-4 block font-semibold not-italic text-gray-900">
+                    {testimonial.attribution}
+                  </cite>
+                </div>
+              </blockquote>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Hero;