First design of frontpage

src/app/components/AuctionProcess.tsx

@@ -0,0 +1,64 @@
+import { FaUserCircle, FaGavel, FaPhoneAlt, FaArrowRight, FaFileInvoice, FaHandshake, } from 'react-icons/fa';
+import { PiArrowRightThin } from 'react-icons/pi';
+
+const AuctionProcess: React.FC = () => {
+  return (
+    <div className="flex items-center justify-center py-40 my-auto mx-auto">
+      {/* User Icon and Text */}
+      <div className="flex flex-col items-center mr-10">
+        <FaUserCircle className="text-7xl" />
+        <p className="font-bold mt-10">Du som privat</p>
+        <p className='w-48 text-center'>opretter en auktion på din bil og sætter din ønskede pris. Denne pris kan ikke ses af forhandlere</p>
+      </div>
+
+      {/* Arrow */}
+      <div className='flex items-center mx-4'>
+        <PiArrowRightThin className="text-5xl" />
+      </div>
+
+      {/* Briefcase Icon and Text */}
+      <div className="flex flex-col items-center mr-10 ml-10">
+        <FaGavel className="text-7xl" />
+        <p className="font-bold mt-10">Jer som forhandlere</p>
+        <p className='w-48 text-center'>Forhandlere har muligheden for at byde på biler opstillet af private</p>
+      </div>
+
+      {/* Arrow */}
+      <div className='flex items-center mx-4'>
+        <PiArrowRightThin className="text-5xl" />
+      </div>
+
+      {/* Phone Icon and Text */}
+      <div className="flex flex-col items-center ml-10 mr-10">
+        <FaPhoneAlt className="text-7xl" />
+        <p className="font-bold mt-10">Vi sørger for kontakten</p>
+        <p className='w-48 text-center'>Når et bud matcher eller nærmer sig den ønskede pris træder vi til for at oprette kontakten mellem jer</p>
+      </div>
+
+      {/* Arrow */}
+      <div className='flex items-center mx-4'>
+        <PiArrowRightThin className="text-5xl" />
+      </div>
+
+      {/* Phone Icon and Text */}
+      <div className="flex flex-col items-center ml-10 mr-10">
+        <FaHandshake className="text-7xl" />
+        <p className="font-bold mt-10">Afhentning aftales</p>
+        <p className='w-48 text-center'>Når i er blevet enige om salg af bil bliver en afhentning sat på plads</p>
+      </div>
+      {/* Arrow */}
+      <div className='flex items-center mx-4'>
+        <PiArrowRightThin className="text-5xl" />
+      </div>
+
+      {/* Phone Icon and Text */}
+      <div className="flex flex-col items-center ml-10 mr-10">
+        <FaFileInvoice className="text-7xl" />
+        <p className="font-bold mt-10">Faktura sendes</p>
+        <p className='w-48 text-center'>Når afhentningen af på plads sender vi faktura ud om betaling. Når fakturaen er betalt fratrækker vi gebyret og sender pengene til sælger</p>
+      </div>
+    </div>
+  );
+};
+
+export default AuctionProcess;

src/app/components/Hero.tsx

@@ -0,0 +1,9 @@
+import { FaUserCircle, FaBriefcase, FaPhoneAlt, FaArrowRight } from 'react-icons/fa';
+
+const Hero: React.FC = () => {
+    return (
+        <div></div>
+    );
+};
+
+export default Hero;

src/app/components/footer.tsx

@@ -0,0 +1,21 @@
+// components/Footer.tsx
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="bg-gray-800 text-white p-4 mt-10">
+      <div className="container mx-auto flex justify-between items-center">
+        <p className="text-sm">&copy; {new Date().getFullYear()} My Website. All rights reserved.</p>
+        <nav>
+          <ul className="flex space-x-4">
+            <li><a href="/privacy" className="hover:text-gray-400">Privacy Policy</a></li>
+            <li><a href="/terms" className="hover:text-gray-400">Terms of Service</a></li>
+            <li><a href="/contact" className="hover:text-gray-400">Contact Us</a></li>
+          </ul>
+        </nav>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/app/components/header.tsx

@@ -0,0 +1,36 @@
+// components/Header.tsx
+import React from 'react';
+import Link from 'next/link';
+
+const Header: React.FC = () => {
+  return (
+    <header className="bg-gray-800 text-white p-4">
+      <div className="container max-w-1920 mx-auto flex justify-between items-center">
+        <h1 className="text-xl font-bold">
+          <Link href="/">Scrap</Link>
+        </h1>
+        <nav>
+          <ul className="flex space-x-4">
+            <li>
+              <Link href="/" className="hover:text-gray-400">
+                Home
+              </Link>
+            </li>
+            <li>
+              <Link href="/about" className="hover:text-gray-400">
+                About
+              </Link>
+            </li>
+            <li>
+              <Link href="/contact" className="hover:text-gray-400">
+                Contact
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/app/globals.css

@@ -2,18 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   color: var(--foreground);
   background: var(--background);

src/app/layout.tsx

@@ -1,35 +1,29 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./globals.css";
+import { Open_Sans } from 'next/font/google';
+import Footer from "./components/footer";
+import Header from "./components/header";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+const openSans = Open_Sans({ subsets: ['latin'] });
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+export const metadata = {
+  title: 'My Website',
+  description: 'Website description here',
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className={openSans.className}>
+        <div className="flex flex-col min-h-screen">
+          <Header />
+          <main className="flex-grow">
+            {children}
+          </main>
+          <Footer />
+        </div>
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;

src/app/page.tsx

@@ -1,101 +1,25 @@
-import Image from "next/image";
+import AuctionProcess from "./components/AuctionProcess";
+import { FaArrowDownLong } from "react-icons/fa6";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+  <main>
+    <section className="bg-hero-image bg-center max-w-1920 max-h-1080 h-800px mx-auto rounded justify-center items-center text-center flex flex-col gap-y-16 border-solid border-b-black ">
+      <div className="grid w-full h-full bg-[rgba(0,0,0,0.5)] place-items-center">
+        <div>
+          <h1 className="text-6xl font-bold text-white">Skal du af med din bil?</h1>
+          <p className="mt-4 text-lg text-white">Her hos scrap specialisere vi os i at hjælpe dig med at finde et nyt hjem til din brugte bil</p>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      </div>
+    </section>
+    <div className="text-center text-3xl mt-14 border-b border-b-black max-w-1920 max-h-1080 mx-auto pb-16">
+      <p className="text-bold">Hvordan fungere det?</p>
+      <p>klik her!</p>
+      <FaArrowDownLong className="text-7xl mx-auto mt-10" />
     </div>
+    <section>
+      <AuctionProcess />
+    </section>
+  </main>
   );
-}
+}