first commit

package.json

@@ -9,9 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "cheerio": "^1.0.0-rc.12",
+    "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.4"
+    "sass": "^1.69.7"
   },
   "devDependencies": {
     "eslint": "^8",

src/app/Home.scss

@@ -0,0 +1,371 @@
+$red: #E40521;
+$redTrans: rgba(228, 5, 33, 0.8);
+$grey: #3C3A42;
+$white: #FFFFFF;
+$lightgrey: #D9D9D9;
+$paginationGrey: #707070;
+$footer: #F2F2F2;
+
+// Breakpoints
+
+@mixin breakpoint($class) {
+    @if $class == xs {
+      @media (max-width: 575px) {
+        @content;
+      }
+    } @else if $class == sm {
+      @media (min-width: 576px) {
+        @content;
+      }
+    } @else if $class == md {
+      @media (min-width: 767px) {
+        @content;
+      }
+    } @else if $class == lg {
+      @media (min-width: 992px) {
+        @content;
+      }
+    } @else if $class == xl {
+      @media (min-width: 1200px) {
+        @content;
+      }
+    } @else if $class == xxl {
+      @media (min-width: 1680px) {
+        @content;
+      }
+    } @else if $class == uhd {
+      @media (min-width: 2400px) {
+        @content;
+      }
+    } @else {
+      @warn "Breakpoint mixin supports: xs, sm, md, lg, xl, xxl, uhd :" + $class;
+    }
+  }
+  
+  // Use breakpoints like this:
+  // aside.primary {
+  //   float: right;
+  //   width: 350px;
+  //   @include breakpoint(sm) {
+  //     float: none;
+  //     width: 100%;
+  //   }
+  // }
+  
+  $columns: 12;
+  @mixin regular-grid {
+    @for $i from 1 through $columns {
+      &-#{$i} {
+        flex: 0 0 100% / $columns * $i;
+      }
+    }
+  }
+  
+  @mixin offset-grid {
+    @for $i from 1 through $columns {
+      &-#{$i} {
+        margin-left: 100% / $columns * $i;
+      }
+    }
+  }
+  
+  .grid {
+    display: flex;
+    flex-wrap: wrap;
+  
+    .col {
+      &-offset {
+        &-xs {
+          @include offset-grid;
+        }
+        &-sm {
+          @include breakpoint(sm) {
+            @include offset-grid;
+            &-reset {
+              margin-left: inherit;
+            }
+          }
+        }
+        &-md {
+          @include breakpoint(md) {
+            @include offset-grid;
+            &-reset {
+              margin-left: inherit;
+            }
+          }
+        }
+        &-lg {
+          @include breakpoint(lg) {
+            @include offset-grid;
+            &-reset {
+              margin-left: inherit;
+            }
+          }
+        }
+        &-xl {
+          @include breakpoint(xl) {
+            @include offset-grid;
+            &-reset {
+              margin-left: inherit;
+            }
+          }
+        }
+      }
+  
+      &-xs {
+        @include regular-grid;
+      }
+      &-sm {
+        @include breakpoint(sm) {
+          @include regular-grid;
+        }
+      }
+      &-md {
+        @include breakpoint(md) {
+          @include regular-grid;
+        }
+      }
+      &-lg {
+        @include breakpoint(lg) {
+          @include regular-grid;
+        }
+      }
+      &-xl {
+        @include breakpoint(xl) {
+          @include regular-grid;
+        }
+      }
+    }
+  }
+  
+
+header{
+    padding: 1rem 3rem;
+
+    @media screen and (max-width: 768px){
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        
+    }
+    .logo{
+        width: 258px;
+        height: auto;
+    }
+}
+
+.hero{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 2rem;
+
+    &__text{
+        text-align: center;
+        font-family: 'Toyota Type', sans-serif;
+        font-weight: 300;
+        margin-bottom: 2rem;
+
+        h2{
+            font-size: 2rem;
+            font-weight: 700;
+        }
+        h3{
+            font-size: 1.5rem;
+            font-weight: 300;
+        }
+    }
+}
+
+
+.guide{
+    display: flex;
+    height: 66%;
+
+    @media screen and (max-width: 768px){
+        flex-direction: column;
+        height: auto;
+        
+    }
+    &__card{
+        flex-grow: 1;
+        width: 33.3333%;
+        position: relative;
+
+        transition: all 0.5s ease-in-out;
+
+        @media screen and (max-width: 768px){
+            width: 100%;
+            
+        }
+
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        &:hover{
+            flex-grow: 6;
+            width: 90%;
+
+            @media screen and (max-width: 768px){
+                width: 100%;
+                
+            }
+        }
+
+        &__text{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 1rem 2rem;
+            color: #fff;
+            font-size: 1rem;
+            font-weight: 300;
+            text-transform: uppercase;
+            font-family: 'Toyota Type', sans-serif;
+            background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
+
+            h3{
+                font-size: 1.5rem;
+                font-weight: 700;
+                margin-bottom: 1rem;
+            }
+        }
+
+        &::after{
+            /* a white circle with a chevron pointing right */
+            content: '❯';
+            position: absolute;
+            font-size: 2rem;
+            top: 1rem;
+            right: 3rem;
+            width: 3rem;
+            height: 3rem;
+            background-color: #fff;
+            border-radius: 50%;
+            transform: translate(50%, 50%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: all 0.5s ease-in-out;
+
+        }
+    }
+}
+
+.Footer{
+    background-color: $footer;
+    padding: 2rem 10vw;
+    margin-top: 3rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "logo"
+                         "navi"
+                         "spalte1"
+                         "spalte2";
+    color: $paginationGrey;
+
+    @include breakpoint(md) {
+        padding: 5rem 10vw;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto auto;
+        grid-template-areas: "logo navi" "spalte1 spalte2";
+    }
+
+    @include breakpoint(xl) {
+        padding: 5rem 10vw;
+        grid-template-columns: 230px 2fr 1fr 1fr;
+        grid-template-rows: auto;
+        grid-template-areas: "logo navi spalte1 spalte2";
+    }
+
+    .logo{
+        grid-area: logo;
+        width: 230px;
+        height: auto;
+        text-align: left;
+
+        @include breakpoint(md) {
+            text-align: center;
+        }
+
+        img{
+            width: 223px;
+        }
+
+        .copyright{
+            font-weight: bold;
+            margin-bottom: 2rem;
+
+
+        }
+
+        .siteLinks a{
+            display: block;
+            background-color: $red;
+            text-transform: uppercase;
+            text-decoration: none;
+            color:#fff;
+            font-size: 0.7rem;
+            font-weight: bold;
+            text-align: center;
+            margin: 0.5rem 0;
+
+            @include breakpoint(md) {
+                margin: 0.5rem;
+            }
+        }
+    }
+
+    .navLinks{
+        grid-area: navi;
+        width: 100%;
+
+        padding: 2rem 0;
+        
+        columns: 2;
+        @include breakpoint(md) {
+            padding: 0 0 0 5vw;
+        }
+
+        .navItem{
+            display: block;
+            height: auto;
+            margin: 1em 0;
+
+            &:first-child{
+                margin-top: 0;
+            }
+        }
+    }
+
+    .spalte{
+        height: 100%;
+        padding: 2rem 0;
+
+        @include breakpoint(md) {
+            padding: 0 0 0 3vw;
+            margin-top: 5rem;
+        }
+
+        @include breakpoint(xl) {
+            margin-top: 0;
+        }
+
+        h3{
+            margin:0;
+        }
+    }
+
+    .column1{
+        grid-area: spalte1;
+    }
+
+    .column2{
+        grid-area: spalte2;
+    }
+}

src/app/globals.css

@@ -1,107 +0,0 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

src/app/globals.scss

@@ -0,0 +1,11 @@
+*{
+  box-sizing: border-box;
+}
+
+html, body{
+  background-color: #fff;
+  margin: 0;
+  padding: 0;
+  height: 100dvh;
+  font-family: 'Toyota Type', sans-serif;
+}

src/app/layout.js

@@ -1,5 +1,6 @@
 import { Inter } from 'next/font/google'
-import './globals.css'
+import './globals.scss'
+import '@/styles/index.scss'
 
 const inter = Inter({ subsets: ['latin'] })
 

src/app/page.js

@@ -1,95 +1,105 @@
-import Image from 'next/image'
+import GetImage from "@/components/GetImage/GetImage";
-import styles from './page.module.css'
+import React from "react";
+import "./Home.scss";
 
-export default function Home() {
+const Home = () => {
   return (
-    <main className={styles.main}>
+    <>
-      <div className={styles.description}>
+      <header>
-        <p>
+        <img
-          Get started by editing&nbsp;
+          src="https://cms.camping.autohaus-dinig.de/uploads/TD_Autohaus_weiss_b44cfad12a.svg"
-          <code className={styles.code}>src/app/page.js</code>
+          alt="Autohaus Dinig"
-        </p>
+          className="logo"
-        <div>
+        />
-          <a
+      </header>
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+      <div className="hero">
-            target="_blank"
+        <div className="hero__text">
-            rel="noopener noreferrer"
+          <h2>Willkommen bei Ihrem Autohaus</h2>
-          >
+          <h3>Entdecken Sie unsere Angebote</h3>
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
         </div>
       </div>
-
+      <div className="guide">
-      <div className={styles.center}>
+        <a className="guide__card" href="https://autohaus.toyota.de/dinig/">
-        <Image
+          <GetImage source="auto" />
-          className={styles.logo}
+          <div className="guide__card__text">
-          src="/next.svg"
+            <h3>Autohaus Dinig</h3>
-          alt="Next.js Logo"
+            <p>Willkommen bei Ihrem lokalen Toyota Partner</p>
-          width={180}
+          </div>
-          height={37}
+        </a>
-          priority
+        <a className="guide__card" href="https://camping.autohaus-dinig.de/">
-        />
+          <GetImage source="camper" />
+          <div className="guide__card__text">
+            <h3>Dinig Camping</h3>
+            <p>Entdecken Sie unsere Camper für jeden Anlass</p>
+          </div>
+        </a>
+        {/* <div className="guide__card">
+          <GetImage source="offroad" />
+        </div> */}
       </div>
-
+      <footer className="Footer">
-      <div className={styles.grid}>
+        <div className="logo">
-        <a
+          <div className="copyright">© 2024 Autohaus Dinig</div>
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          <img
-          className={styles.card}
+            src="https://cms.camping.autohaus-dinig.de/uploads/logo_nachbau_dinig_2x_35e1383373.png"
-          target="_blank"
+            alt="logo_nachbau_dinig@2x.png"
-          rel="noopener noreferrer"
+          />
-        >
+          <div className="siteLinks">
-          <h2>
+            <a href="https://autohaus.toyota.de/dinig/">Toyota Dinig</a>
-            Docs <span>-&gt;</span>
+          </div>
-          </h2>
+        </div>
-          <p>Find in-depth information about Next.js features and API.</p>
+        <nav className="navLinks">
-        </a>
+          <a
-
+            className="navItem"
-        <a
+            href="https://autohaus.toyota.de/dinig/impressum/"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          >
-          className={styles.card}
+            Impressum
-          target="_blank"
+          </a>
-          rel="noopener noreferrer"
+          <a
-        >
+            className="navItem"
-          <h2>
+            href="https://autohaus.toyota.de/dinig/datenschutz/"
-            Learn <span>-&gt;</span>
+          >
-          </h2>
+            Datenschutz
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
+          </a>
-        </a>
+        </nav>
-
+        <div className="spalte column1">
-        <a
+          <h3 id="hier-finden-sie-uns">Hier finden Sie uns:</h3>
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
           <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
+            Autohaus Dinig GmbH &amp; Co. KG
+            <br />
+            Industriegebiet 4<br />
+            55606 Hochstetten-Dhaun{" "}
           </p>
-        </a>
+          <h3 id="kontakt">Kontakt</h3>
-      </div>
+          <p>
-    </main>
+            Tel: 06752/2864
-  )
+            <br />
-}
+            Fax: 06752/6971
+            <br />
+            E-Mail:{" "}
+            <a href="mailto:lead@toyota-dinig.de">lead@toyota-dinig.de</a>
+          </p>
+        </div>
+        <div className="spalte column2">
+          <h3 id="öffnungszeiten">Öffnungszeiten</h3>
+          <p>
+            <strong>Verkauf</strong>
+            <br />
+            Mo - Fr: 09.00 - 18.00 Uhr
+            <br />
+            Sa: 09.00 - 13.00 Uhr{" "}
+          </p>
+          <p>
+            <strong>Kundendienst</strong>
+            <br />
+            Mo - Fr: 07.30 - 18.00 Uhr
+            <br />
+            Sa: 08.00 - 12.00 Uhr{" "}
+          </p>
+        </div>
+      </footer>
+    </>
+  );
+};
+
+export default Home;

src/components/GetImage/GetImage.jsx

@@ -0,0 +1,76 @@
+import { load } from "cheerio";
+
+const getAutoHtml = async () => {
+  const response = await fetch("https://autohaus.toyota.de/dinig/");
+  const htmlString = await response.text();
+  return htmlString;
+};
+
+const getCamperHtml = async () => {
+  const response = await fetch("https://camping.autohaus-dinig.de/");
+  const htmlString = await response.text();
+  return htmlString;
+};
+
+const getOffroadHtml = async () => {
+  const response = await fetch("https://offroad.autohaus-dinig.de/");
+  const htmlString = await response.text();
+  return htmlString;
+};
+
+const GetImage = async ({ source }) => {
+
+  let image; 
+  if (source === "auto") {
+    let getWebsiteHtml = getAutoHtml;
+
+    const html = await getWebsiteHtml();
+    const $ = load(html);
+
+    // the URL of the picture we need is placed in the data-src attribute of the img tag inside the a picture tag
+    image = $(".a-media-image").find("img").attr("data-src");
+
+  } else if (source === "camper") {
+    let getWebsiteHtml = getCamperHtml;
+
+    const html = await getWebsiteHtml();
+    const $ = load(html);
+
+    //get a list of all pictures inside .Slider__Image 
+    const pictures = $(".Slider__Image").find("img");
+
+    //if there are multiple pictures, we need to get the second one
+    if (pictures.length > 1) {
+      image = pictures[1].attribs.src;
+    } else {
+      image = pictures[0].attribs.src;
+    }
+
+
+  } else if (source === "offroad") {
+    let getWebsiteHtml = getOffroadHtml;
+
+    const html = await getWebsiteHtml();
+    const $ = load(html);
+
+    //get a list of all pictures inside .Slider__Image 
+    const pictures = $(".Slider__Image").find("img");
+
+    //if there are multiple pictures, we need to get the second one
+    if (pictures.length > 1) {
+      image = pictures[1].attribs.src;
+    } else {
+      image = pictures[0].attribs.src;
+    }
+
+  }
+
+
+  return (
+    <>
+      <img src={image} alt="Guide Image" />
+    </>
+  );
+};
+
+export default GetImage;

src/styles/base/_breakpoints.scss

@@ -0,0 +1,132 @@
+// Breakpoints
+
+@mixin breakpoint($class) {
+    @if $class == xs {
+      @media (max-width: 575px) {
+        @content;
+      }
+    } @else if $class == sm {
+      @media (min-width: 576px) {
+        @content;
+      }
+    } @else if $class == md {
+      @media (min-width: 767px) {
+        @content;
+      }
+    } @else if $class == lg {
+      @media (min-width: 992px) {
+        @content;
+      }
+    } @else if $class == xl {
+      @media (min-width: 1200px) {
+        @content;
+      }
+    } @else if $class == xxl {
+      @media (min-width: 1680px) {
+        @content;
+      }
+    } @else if $class == uhd {
+      @media (min-width: 2400px) {
+        @content;
+      }
+    } @else {
+      @warn "Breakpoint mixin supports: xs, sm, md, lg, xl, xxl, uhd :" + $class;
+    }
+  }
+  
+  // Use breakpoints like this:
+  // aside.primary {
+  //   float: right;
+  //   width: 350px;
+  //   @include breakpoint(sm) {
+  //     float: none;
+  //     width: 100%;
+  //   }
+  // }
+  
+  $columns: 12;
+  @mixin regular-grid {
+    @for $i from 1 through $columns {
+      &-#{$i} {
+        flex: 0 0 100% / $columns * $i;
+      }
+    }
+  }
+  
+  @mixin offset-grid {
+    @for $i from 1 through $columns {
+      &-#{$i} {
+        margin-left: 100% / $columns * $i;
+      }
+    }
+  }
+  
+  .grid {
+    display: flex;
+    flex-wrap: wrap;
+  
+    .col {
+      &-offset {
+        &-xs {
+          @include offset-grid;
+        }
+        &-sm {
+          @include breakpoint(sm) {
+            @include offset-grid;
+            &-reset {
+              margin-left: inherit;
+            }
+          }
+        }
+        &-md {
+          @include breakpoint(md) {
+            @include offset-grid;
+            &-reset {
+              margin-left: inherit;
+            }
+          }
+        }
+        &-lg {
+          @include breakpoint(lg) {
+            @include offset-grid;
+            &-reset {
+              margin-left: inherit;
+            }
+          }
+        }
+        &-xl {
+          @include breakpoint(xl) {
+            @include offset-grid;
+            &-reset {
+              margin-left: inherit;
+            }
+          }
+        }
+      }
+  
+      &-xs {
+        @include regular-grid;
+      }
+      &-sm {
+        @include breakpoint(sm) {
+          @include regular-grid;
+        }
+      }
+      &-md {
+        @include breakpoint(md) {
+          @include regular-grid;
+        }
+      }
+      &-lg {
+        @include breakpoint(lg) {
+          @include regular-grid;
+        }
+      }
+      &-xl {
+        @include breakpoint(xl) {
+          @include regular-grid;
+        }
+      }
+    }
+  }
+  

src/styles/base/_colors.scss

@@ -0,0 +1,7 @@
+$red: #E40521;
+$redTrans: rgba(228, 5, 33, 0.8);
+$grey: #3C3A42;
+$white: #FFFFFF;
+$lightgrey: #D9D9D9;
+$paginationGrey: #707070;
+$footer: #F2F2F2;

src/styles/base/_fonts.scss

@@ -0,0 +1,39 @@
+@font-face {
+    font-family: 'Toyota Type';    
+    font-weight: 300;
+    src: local(''),
+      url('../../statics/fonts/ToyotaType-Regular.woff2') format('woff2'),
+      /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../../statics/fonts/ToyotaType-Regular.woff2') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Toyota Type';    
+    font-weight: 300;
+    font-style: italic;
+    src: local(''),
+      url('../../statics/fonts/ToyotaType-Italic.woff2') format('woff2'),
+      /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../../statics/fonts/ToyotaType-Italic.woff2') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }  
+  
+  @font-face {
+    font-family: 'Toyota Type';    
+    font-weight: 700;
+    src: local(''),
+      url('../../statics/fonts/ToyotaType-Semibold.woff2') format('woff2'),
+      /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../../statics/fonts/ToyotaType-Semibold.woff2') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Toyota Type';    
+    font-weight: 700;
+    font-style: italic;
+    src: local(''),
+      url('../../statics/fonts/ToyotaType-SemiboldIt.woff2') format('woff2'),
+      /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../../statics/fonts/ToyotaType-SemiboldIt.woff2') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+    
+    

src/styles/base/_globals.scss

@@ -0,0 +1,30 @@
+$font-family-sans-serif: 'Toyota Type', sans-serif;
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: $font-family-sans-serif;
+  font-weight: 300;
+  color: #3C3A42;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+strong{
+  font-weight: 700;
+}
+
+.ExternalContent{
+  width: 100%;
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}

src/styles/base/_typography.scss

@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6{
+    margin-bottom: 1rem;
+}

src/styles/index.scss

@@ -0,0 +1,5 @@
+@import './base/breakpoints';
+@import './base/fonts';
+@import './base/colors';
+@import './base/globals';
+@import './base/typography';

yarn.lock

@@ -243,6 +243,14 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -368,6 +376,16 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -383,7 +401,7 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2:
+braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -424,6 +442,46 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+cheerio-select@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"
+  integrity sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==
+  dependencies:
+    boolbase "^1.0.0"
+    css-select "^5.1.0"
+    css-what "^6.1.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+
+cheerio@^1.0.0-rc.12:
+  version "1.0.0-rc.12"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
+  integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
+  dependencies:
+    cheerio-select "^2.1.0"
+    dom-serializer "^2.0.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    htmlparser2 "^8.0.1"
+    parse5 "^7.0.0"
+    parse5-htmlparser2-tree-adapter "^7.0.0"
+
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 client-only@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
@@ -455,6 +513,22 @@ cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.0.1"
+
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -523,6 +597,36 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 emoji-regex@^9.2.2:
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
@@ -536,6 +640,11 @@ enhanced-resolve@^5.12.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+entities@^4.2.0, entities@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 es-abstract@^1.22.1:
   version "1.22.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.3.tgz#48e79f5573198de6dee3589195727f4f74bc4f32"
@@ -918,6 +1027,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.1, function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
@@ -963,7 +1077,7 @@ get-tsconfig@^4.5.0:
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -1090,11 +1204,26 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+htmlparser2@^8.0.1:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    entities "^4.4.0"
+
 ignore@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
   integrity sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==
 
+immutable@^4.0.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
+  integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -1153,6 +1282,13 @@ is-bigint@^1.0.1:
   dependencies:
     has-bigints "^1.0.1"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
@@ -1199,7 +1335,7 @@ is-generator-function@^1.0.10:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -1488,6 +1624,18 @@ next@14.0.4:
     "@next/swc-win32-ia32-msvc" "14.0.4"
     "@next/swc-win32-x64-msvc" "14.0.4"
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -1598,6 +1746,21 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse5-htmlparser2-tree-adapter@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz#23c2cc233bcf09bb7beba8b8a69d46b08c62c2f1"
+  integrity sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==
+  dependencies:
+    domhandler "^5.0.2"
+    parse5 "^7.0.0"
+
+parse5@^7.0.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
+  integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
+  dependencies:
+    entities "^4.4.0"
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -1628,7 +1791,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -1686,6 +1849,13 @@ react@^18:
   dependencies:
     loose-envify "^1.1.0"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
@@ -1778,6 +1948,15 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
+sass@^1.69.7:
+  version "1.69.7"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.7.tgz#6e7e1c8f51e8162faec3e9619babc7da780af3b7"
+  integrity sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -1842,7 +2021,7 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==