current state

package.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.3"
+    "sass": "^1.77.2"
   },
   "devDependencies": {
     "eslint": "^8",

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

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,227 @@
+$rosa: #F07C7C;
+$blau: #417DCD;
+
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+// @media (prefers-color-scheme: dark) {
+//   html {
+//     color-scheme: dark;
+//   }
+// }
+
+h2{
+  font-size: 2rem;
+  font-weight: 900;
+  margin-bottom: 2rem;
+  text-align: left;
+  width: 100%;
+  font-family: 'Onest', sans-serif;
+  letter-spacing: 0.5rem;
+  line-height: 2.5rem;
+}
+
+p{
+  font-size: 1rem;
+  line-height: 1.8rem;
+  margin-bottom: 1rem;
+
+}
+
+.bold{
+  
+  font-weight: 900;
+  font-family: 'Onest', sans-serif;
+  font-size: 1.2rem;
+  line-height: 2rem;
+}
+
+.list{
+  margin: 2rem 0 4rem 4rem;
+  list-style: none;
+  text-align: left;
+
+  li{
+    margin: 1rem 0;
+    position: relative;
+
+    &::before{
+      content: "";
+      position: absolute;
+      width: 3rem;
+      height: 5px;
+      background-color: black;
+      left: -4rem;
+      top: 0.6rem;
+    }
+  }
+}
+
+
+.main{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 8rem;
+
+  @media screen and (max-width: 768px){
+    padding: 0 2rem;
+    
+  }
+
+  section{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+
+    img{
+      width: 50%;
+      height: auto;
+
+      @media screen and (max-width: 768px){
+        width: 100%;
+      height: auto;
+        
+      }
+    }
+
+    &#what-we-do{
+      margin: 15rem 0;
+      display: flex;
+      font-size: 1rem;
+      line-height: 1.8rem;
+
+      p{
+        column-count: 3;
+        column-gap: 3rem;
+        margin-bottom: 3rem;
+
+        @media screen and (max-width: 768px){
+          column-count: 1;
+          column-gap: 0;
+          
+        }
+
+        .blau{
+          color: $blau;
+        }
+
+        .inline_headline{
+          font-weight: 900;
+          font-size: 2rem;
+          margin-bottom: 1rem;
+          display: block;
+          font-family: 'Onest', sans-serif;
+          color: $rosa;
+          margin-top: 2rem;
+          letter-spacing: 0.5rem;
+          line-height: 2.5rem;
+        }
+      }
+    }
+
+    &#who-is-artmadillo{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-evenly;
+      align-items: flex-start;
+
+      @media screen and (max-width: 768px){
+        flex-direction: column ;
+      }
+
+      .col{
+        width:33%;
+
+        @media screen and (max-width: 768px){
+          width:100%;
+        }
+      }
+      
+      .main__verena{
+        width:100%;
+      }
+
+      .main__spacemandillo{
+        width:150%;
+      }
+
+      .LinkedInLink{
+        color: $blau;
+        font-weight: 900;
+        font-family: 'Onest', sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 1rem;
+
+        .linkedin{
+          width: 2rem;
+          height: auto;
+          margin-right: 0.5rem;
+        }
+      }
+
+      .col2{
+        padding-left: 1rem;
+        padding-right: 2rem;
+
+        @media screen and (max-width: 768px){
+          padding-left: 0rem;
+          padding-right: 0rem;
+        }
+
+      }
+
+      .col3{
+        padding-left: 2rem;
+        text-align: right;
+        
+        @media screen and (max-width: 768px){
+          padding-left: 0rem;
+          padding-right: 0rem;
+        }
+
+        .main__artmandillo{
+          margin-bottom: 8rem;
+        }
+
+        p{
+          text-align: left;
+        }
+      }
+
+    }
+  }
+
+  &__logo{
+    display: block;
+    margin: 0 auto;
+    width: 35rem;
+    height: auto;
+    margin-top: 10rem;
+  }
+}

src/app/layout.js

@@ -1,17 +1,25 @@
-import { Inter } from "next/font/google";
-import "./globals.css";
+import { Onest, Sanchez } from "next/font/google";
+import "./globals.scss";
+import Header from "@/components/Header/Header";
+import Footer from "@/components/Footer/Footer";
 
-const inter = Inter({ subsets: ["latin"] });
+
+const onest = Onest({ subsets: ["latin"] });
+const sanchez = Sanchez({ subsets: ["latin"], weight: "400"});
 
 export const metadata = {
-  title: "Create Next App",
+  title: "ARTMADILLO - Savage Strategy Design",
   description: "Generated by create next app",
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={`${onest.className} ${sanchez.className}`}>
+      <Header />
+        {children}
+      <Footer />
+      </body>
     </html>
   );
 }

src/app/page.js

@@ -1,95 +1,69 @@
+import Button from "@/components/Button/Button";
 import Image from "next/image";
-import styles from "./page.module.css";
+import Link from "next/link";
 
 export default function Home() {
   return (
-    <main className={styles.main}>
-      <div className={styles.description}>
+    <main className="main">
+      <section id="top">
+        <Image src="/artmadillo_logo.png" alt="Next.js logo" width={1134} height={846} className="main__logo" />
+        <Button link="/#what-we-do" desc="WHAT DO WE DO?" />
+      </section>  
+      <section id="what-we-do">
+      <h2>WHAT WE DO</h2>
         <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.js</code>
+          Artmadillo is a company that exclusively focuses on providing digital strategies, ideas, and concepts for businesses. Our aim is to accelerate the process of digital transformation by helping companies in Ireland and Germany develop innovative solutions. We recognize the need for companies to have strong strategies in place before implementing digital initiatives, which is why our services primarily revolve around strategy development.<br /><br />
+          In Germany and other European markets only very few entrepeneurs found businesses to soley focus on providing strategic ideas. With Irish Trade Marks Act of 1996 and Related Rights Act of 2000 only Ireland is offering a prosperous landscape to embark, protect and realize great innovations and ideas. This is why any idea-driven business must act and grow from the beautiful shores of Ireland.<br /><br />
+          If you recently felt like you lost control over your digital projects, got stuck and are spending more and more time on briefings, <span className="blau">this is exactly from where we can take you.</span>
+          <span className="inline_headline">THIS IS THE THING</span>
+          Our competitive advantage stems from our exclusive focus on digital strategies, ideas, and concepts. By honing in on this specific niche, we are able to offer specialized expertise and insights that set us apart from traditional service providers. Additionally, our familiarity with Irish law, particularly the Irish Trade Marks Act of 1996 and the Copyright and Related Rights Act of 2000, allows us to provide enhanced protection for our clients' ideas.
         </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
+        <Button link="/#who-is-artmadillo" desc="WHO IS ARTMADILLO?" />
+      </section>
+      <section id="who-is-artmadillo">
+        <div className="col1 col">
+          <Image src="/verena_menzel.jpg" alt="Verena Menzel" width={1585} height={2169} className="main__verena" />
+          <Link href="https://www.linkedin.com/in/verena-menzel-2b787478/" target='_blank' className="LinkedInLink"><Image src="/linkedin.png" alt='LinkedIn' width={52} height={52} className='linkedin' />CHECK ME OUT ON LINKEDIN</Link>
+          <Image src="/businessplanartmadillo1.png" alt="Artmadillo" width={996} height={1086} className="main__spacemandillo" />
         </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          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>
+        <div className="col2 col">
+          <h2>HELLO, IT'S ME.</h2>
           <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          My name is Verena and here comes the thing: being no older than 29 years of age ;-) I have spent the last twenty or so years to drive digital transformation within different roles and many business fields. Most of what I did before was somehow related to what you might call:
+          </p>
+          <ul className="list">
+            <li>Digital Strategy //</li>
+            <li>User Experience Design //</li>
+            <li>User Interface Design //</li>
+            <li>Customer Journey Design // </li>
+            <li>Service Design // </li>
+            <li>Workshop Moderation //</li>
+          </ul>
+          <p className="bold">
+          IF YOU'D ASK ME WHAT I DO, I WOULDN'T ANSWER WITH THE TERMS ABOVE. EVEN THOUGH PARTLY HELPFUL TO UNDERSTAND, I CONSIDER THEM TO BE EMPTY BUZZWORDS.
           </p>
-        </a>
-      </div>
+        </div>
+        <div className="col3 col">
+        <Image src="/businessplanartmadillo2.png" alt="Artmadillo" width={290} height={508} className="main__artmandillo" />
+        <p>
+        How can I say that? <br />How many senior-level-people in marketing and software development do you believe can wrap up each of this terms in one sentence? Few. So how should my clients be considered to know what exactly they buy when ordering a Customer Journey Mapping? Yes, they will have a vague imagination of what to get. Still it is hard to fully satisfy (and perhaps amaze) your clients with no more than a vague idea of what you do. <br /><br />This is what I would say I do:
+        </p>
+        <p className="bold">
+        I PRAGMATICALLY HELP MY CLIENTS OF ALL BUSINESSFIELDS TO MAKE SAVAGE DIGITAL STUFF. NO MATTER IF IT IS A WEBSITE, AN APP OR WHATEVER SERVICE.
+        </p>
+        <p>
+        Therefore some of my skills are:
+        </p>
+        <ul className="list">
+            <li>Digital Strategy //</li>
+            <li>User Experience Design //</li>
+            <li>User Interface Design //</li>
+            <li>Customer Journey Design // </li>
+            <li>Service Design // </li>
+            <li>Workshop Moderation //</li>
+          </ul>
+        </div>
+      </section>
     </main>
   );
 }

src/app/page.module.css

@@ -1,230 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-  text-wrap: balance;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: "";
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}

src/components/Button/Button.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Link from 'next/link';
+import './Button.scss';
+
+const Button = ({link, desc}) => {
+    return (
+        <Link href={link} className='Button'>
+            {desc}
+        </Link>
+    );
+};
+
+export default Button;

src/components/Button/Button.scss

@@ -0,0 +1,26 @@
+.Button{
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-color: black;
+    font-family: 'Onest', sans-serif;
+    font-weight: 900;
+    font-size: 1rem;
+    line-height: 1rem;
+    letter-spacing: 0.4rem;
+    color: white;
+    padding: 2rem 6rem;
+    transition: all 0.3s;
+
+    max-width: 100%;
+
+    @media screen and (max-width: 768px){
+        padding: 2rem 2rem;
+        font-size: 0.8rem;
+        letter-spacing: 0.2rem;
+    }
+
+    &:hover{
+        border-radius: 50px;
+    }
+}

src/components/Footer/Footer.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Image from 'next/image';
+import Button from '../Button/Button';
+import Link from 'next/link';
+import './Footer.scss';
+
+const Footer = () => {
+    return (
+        <footer className='Footer'>
+            <div className='slogan'>THANKS FOR <br />READING. <br />GET IN TOUCH.</div>
+            <div className='LogoButton'>
+                <Image src="/artmadillo_logo.png" alt="Logo" width={1134} height={846} className='Footer__logo'  />
+                <Button link="mailto:info@artmadillo.tech" desc="GET IN TOUCH" />
+            </div>  
+            <Image src="/businessplanartmadillo3.png" alt="Logo" width={585} height={638} className="spacemadillo" />
+            <div className='Footer__nav'>
+                <nav>
+                    <ul>
+                        <li><Link href="https://www.linkedin.com/in/verena-menzel-2b787478/" target='_blank'><Image src="/linkedin.png" alt='LinkedIn' width={52} height={52} className='linkedin' /></Link></li>
+                        {/* <li>Imprint</li>
+                        <li>Privacy Policy</li> */}
+                        <li><Link href="mailto:info@artmadillo.tech">Contact</Link></li>
+                    </ul>
+                </nav>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;

src/components/Footer/Footer.scss

@@ -0,0 +1,93 @@
+.Footer{
+    height: 100dvh;
+    padding: 0 8rem;
+    overflow-y: hidden;
+
+    display: grid;
+    grid-template-columns: 33% 33% 33%;
+    grid-template-rows: 1fr 1fr 1fr;
+
+    @media screen and (max-width: 768px){
+      padding: 0 2rem;
+      display: block;
+    }
+
+    .LogoButton{
+        grid-column: 2 / 2;
+        grid-row: 3 / 2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        img{
+            @media screen and (max-width: 768px){
+                width: 100%;
+                height: auto;
+              }
+        }
+    }
+
+    .spacemadillo{
+        grid-column: 3 / 3;
+        grid-row: 3 / 3;
+        margin-top: -10rem;
+
+        @media screen and (max-width: 768px){
+            width: 100%;
+            height: auto;
+            margin-top: 0rem;
+            margin-left: 2rem;
+          }
+    }
+
+    .slogan{
+        text-transform: uppercase;
+        font-family: 'Onest', sans-serif;
+        letter-spacing: 0.5rem;
+        font-size: 2rem;
+        width: 100%;
+    }
+
+    &__nav{
+        grid-row: 4/4;
+        grid-column: 1/4;
+        margin-top: -15rem;
+
+        .linkedin{
+            width: 2rem;
+            height: auto;
+            margin-top: 5px;
+        }
+
+        ul{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            list-style: none;
+            li{
+                margin-right: 2rem;
+                position: relative;
+                &::before{
+                    content: "|";
+                    margin-left: -1rem;
+                    margin-right: 1rem;
+                }
+                &:first-child{
+                    margin-right: 2rem;
+                    &::before{
+                        content: "";
+                        margin-left: 0;
+                        margin-right: 1rem;
+                    }
+                }
+            }
+        }
+
+    }
+
+    &__logo{
+        width: 30rem;
+        height: auto
+    }
+}

src/components/Header/Header.jsx

@@ -0,0 +1,39 @@
+'use client';
+import React, {useState, useEffect} from 'react';
+import './Header.scss';
+import Navi from './Navi';
+import Image from 'next/image';
+
+const Header = () => {
+
+    const [scrolled, setScrolled] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 100) {
+                setScrolled(true);
+            } else {
+                setScrolled(false);
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+
+
+
+    return (
+        <header className={`Header ${scrolled ? 'sticky' : ''}`}>
+            <span className='slogan'>You are here!<br />Great.</span>
+            {scrolled &&  <Image src="/artmadillo_logo.png" alt="Logo" width={113} height={84} className='Header__logo' />}
+            <Navi />
+        </header>
+    );
+};
+
+export default Header;

src/components/Header/Header.scss

@@ -0,0 +1,59 @@
+.Header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4rem 8rem 0 8rem;
+
+    @media screen and (max-width: 768px){
+      padding: 0 2rem;
+      
+    }
+
+    &.sticky{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background-color: white;
+        z-index: 1000;
+        box-shadow: 0 0.5rem 1rem rgba(#000, 0.1);
+        padding: 1.5rem 8rem;
+        
+        @media screen and (max-width: 768px){
+          display: flex;
+          justify-content: space-between;
+          padding: 1.5rem 2rem;
+        }
+        
+
+        .slogan{
+          display: none;
+        }
+
+        .Header__logo{
+          margin: 0 auto;
+          position: relative;
+          left: 35px;
+
+          @media screen and (max-width: 768px){
+            margin: initial;
+            position: initial;
+            left: 0;
+          }
+        }
+    }
+
+    .slogan{
+        text-transform: uppercase;
+        font-family: 'Onest', sans-serif;
+        letter-spacing: 0.5rem;
+        font-size: 2rem;
+
+        @media screen and (max-width: 768px){
+          font-size: 1rem;
+          max-width: 50%;
+          margin-top: 2rem;
+          
+        }
+    }
+}

src/components/Header/Navi.jsx

@@ -0,0 +1,35 @@
+"use client";
+import React, { useState } from "react";
+import Link from "next/link";
+import "./Navi.scss";
+
+const Navi = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <nav className="Navi">
+      <button onClick={() => setIsOpen(!isOpen)}>
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+      <div className={`Navi__overlay ${isOpen ? "active" : ""}`}>
+      <button onClick={() => setIsOpen(!isOpen)} className="close">✕</button>
+        <ul>
+          <li>
+            <Link href="/#what-we-do" onClick={() => setIsOpen(!isOpen)}>
+              WHAT WE DO
+            </Link>
+          </li>
+          <li>
+            <Link href="/#who-is-artmadillo" onClick={() => setIsOpen(!isOpen)}>WHO IS ARTMADILLO</Link>
+          </li>
+          <li>
+            <Link href="mailto:info@artmadillo.tech" onClick={() => setIsOpen(!isOpen)}>GET IN TOUCH</Link>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+};
+
+export default Navi;

src/components/Header/Navi.scss

@@ -0,0 +1,78 @@
+.Navi{
+    button{
+        border: none;
+        background-color: transparent;
+
+        span{
+            display: block;
+            height: 5px;
+            width: 4.375rem;
+            background-color: black;
+            margin: 0.5rem 0;
+
+            &:first-of-type{
+                margin-top: 0;
+            }
+            &:last-of-type{
+                background-color: #F07C7C;
+            }
+        }
+    }
+
+    &__overlay{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100vh;
+        background-color: rgba(#fff, 0.5);
+        z-index: 1000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s;
+        backdrop-filter: blur(10px);
+
+        &.active{
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .close{
+            position: absolute;
+            top: 4rem;
+            right: 8rem;
+            font-size: 5rem;
+            cursor: pointer;
+
+            @media screen and (max-width: 768px){
+                font-size: 3rem;
+                top: 2rem;
+                right: 2rem;
+              }
+        }
+
+        ul{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            list-style: none;
+            li{
+                margin: 2rem 0;
+                position: relative;
+                font-size: 3rem;
+                font-family: 'Onest', sans-serif;
+                letter-spacing: 0.5rem;
+                font-weight: 900;
+
+                @media screen and (max-width: 768px){
+                    font-size: 1rem;
+                  }
+            }
+        }
+    }
+}

yarn.lock

@@ -271,6 +271,14 @@ ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+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"
@@ -416,6 +424,11 @@ 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.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -431,7 +444,7 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.3:
+braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
@@ -474,6 +487,21 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  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"
@@ -1041,6 +1069,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.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
@@ -1088,7 +1121,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==
@@ -1215,6 +1248,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
+immutable@^4.0.0:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.6.tgz#6a05f7858213238e587fb83586ffa3b4b27f0447"
+  integrity sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -1272,6 +1310,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"
@@ -1330,7 +1375,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==
@@ -1637,6 +1682,11 @@ next@14.2.3:
     "@next/swc-win32-ia32-msvc" "14.2.3"
     "@next/swc-win32-x64-msvc" "14.2.3"
 
+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==
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -1786,7 +1836,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
-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==
@@ -1849,6 +1899,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.6"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859"
@@ -1943,6 +2000,15 @@ safe-regex-test@^1.0.3:
     es-errors "^1.3.0"
     is-regex "^1.1.4"
 
+sass@^1.77.2:
+  version "1.77.2"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.2.tgz#18d4ed2eefc260cdc8099c5439ec1303fd5863aa"
+  integrity sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
@@ -2014,7 +2080,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.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==