Implement Contact, Header, start Footer

src/components/Footer.astro

@@ -0,0 +1,100 @@
+---
+function getCurrentYear() {
+    return new Date().getFullYear();
+}
+---
+
+<footer>
+    {/* Footer nav */}
+    <nav>
+        {/* Explore */}
+        <div class="explore">
+            <span>Explore</span>
+            <ul>
+                <li>Home</li>
+                <li>Blog</li>
+            </ul>
+        </div>
+
+        {/* Follow us */}
+        <div class="follow">
+            <span>Reach out to us</span>
+            <ul>
+                <li>+43 670 4011 885</li>
+                <li>office@tideshiftdigital.com</li>
+            </ul>
+
+            {/* Socials */}
+            <ul class="socials">
+                <li>icon</li>
+                <li>icon</li>
+                <li>icon</li>
+            </ul>
+        </div>
+
+        {/* Legal */}
+        <div class="legal">
+            <span>Legal</span>
+            <ul>
+                <li>Privacy Policy</li>
+                <li>Imprint</li>
+            </ul>
+        </div>
+    </nav>
+
+    {/* Copyright */}
+    <div class="info">
+        <span>&copy; {getCurrentYear()} Tideshift Digital e.U.</span>
+
+        <span>Made with ❤️ in Vienna</span>
+
+        <div>
+            <span>Vienna, 12:09 CET</span>
+            <span>⛅ 12C</span>
+        </div>
+    </div>
+    
+    {/* Typemark */}
+    <div></div>
+</footer>
+
+<style>
+    footer {
+        max-width: var(--max-content-width);
+        margin-inline: auto;
+        padding-block: 8rem 5.5rem;
+        padding-inline: 5rem;
+    }
+
+    nav, .info {
+        display: flex;
+        justify-content: space-between;
+        gap: 2remm;
+    }
+
+    ul {
+        list-style: none;
+    }
+
+    .explore {
+
+    }
+
+    .follow {
+
+    }
+
+    .socials {
+        display: flex;
+        align-items: center;
+        gap: 2rem;
+    }
+
+    .legal {
+
+    }
+
+    .info {
+        align-items: center;
+    }
+</style>

src/components/GlobalStyles.astro

@@ -14,13 +14,16 @@
     --fs-page-title: clamp(3rem, 5.5vw + 1rem, 8rem);
 
     --leading-title: 1.1;
+    --ledaing-subtitle: 1.2;
     --leading-paragraph: 1.5;
+    --tracking-tight: -0.0625rem;
     --tracking-narrow: -0.09375rem;
 
     --base-grid: repeat(12, 1fr);
     --max-content-width: 1920px;
 
     --clr-light-400: hsl(0 10% 100%);
+    --clr-light-500: hsl(from var(--clr-light-400) h s calc(l - 10));
     --clr-dark-400: hsl(0 17.6% 3.3%);
     --clr-ts-warm-red-400: hsl(3 94% 60%);
 
@@ -88,4 +91,8 @@
     background-clip: text;
     color: transparent;
   }
+
+  p {
+    color: var(--clr-light-500);
+  }
 </style>

src/components/Header.astro

@@ -1,13 +1,71 @@
 ---
-
+import ArrowUpRight from "./icons/ArrowUpRight.astro";
+import MenuIcon from "./icons/MenuIcon.astro";
 ---
 
 <header>
-  <!-- Logo -->
+  {/* Logo */}
+  <div class="logo"></div>
 
-  <!-- Contact Us -->
+  {/* Contact Link */}
+  <a class="contact">
+    <span>Contact us</span>
+    <ArrowUpRight class="icon" />
+  </a>
 
-  <!-- Menu Button -->
+  {/* Menu Button */}
+  <button>
+    <MenuIcon class="menu-icon" />
+  </button>
 </header>
 
-<style></style>
+<style>
+  header {
+    display: grid;
+    grid-template-columns: var(--base-grid);
+    align-items: center;
+    padding: 2.5rem;
+    position: fixed;
+    top: 0;
+    inset-inline: 0;
+  }
+
+  .logo {
+    width: 200px;
+    height: 50px;
+    background-color: salmon;
+
+    grid-column: 1 / 3;
+  }
+
+  .contact {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    grid-column: -2 / -4;
+    justify-self: end;
+    font-size: 1.5rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-tight);
+  }
+
+  .icon {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  button {
+    grid-column: -1 / -2;
+    background-color: transparent;
+    border: none;
+
+  }
+
+  .menu-icon {
+    display: inline-block;
+    width: 3.125rem:
+    height: 3.125rem:
+  }
+</style>

src/components/icons/ArrowUpRight.astro

@@ -1,24 +1,57 @@
-<svg width="116.333" xmlns="http://www.w3.org/2000/svg" height="116.333" id="screenshot-6b8effdb-5f0e-80dd-8007-372a7199e59d" viewBox="2743.833 5322.833 116.333 116.333" style="-webkit-print-color-adjust::exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1">
+---
+const { class: classname, ...rest } = Astro.props;
+---
+
+<svg
+  class={classname}
+  width="116.333"
+  xmlns="http://www.w3.org/2000/svg"
+  height="116.333"
+  id="screenshot-6b8effdb-5f0e-80dd-8007-372a7199e59d"
+  viewBox="2743.833 5322.833 116.333 116.333"
+  style="-webkit-print-color-adjust::exact"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  fill="none"
+  version="1.1"
+  {...rest}
+>
   <g id="shape-6b8effdb-5f0e-80dd-8007-372a7199e59d">
     <g class="fills" id="fills-6b8effdb-5f0e-80dd-8007-372a7199e59d">
-      <path d="M2772.833251953125,5410.16650390625L2831.166748046875,5351.83349609375M2772.833251953125,5351.83349609375L2831.166748046875,5351.83349609375L2831.166748046875,5410.16650390625" width="24" class="feather feather-arrow-up-right" height="24">
+      <path
+        d="M2772.833251953125,5410.16650390625L2831.166748046875,5351.83349609375M2772.833251953125,5351.83349609375L2831.166748046875,5351.83349609375L2831.166748046875,5410.16650390625"
+        width="24"
+        class="feather feather-arrow-up-right"
+        height="24"
+      >
       </path>
     </g>
-    <g width="24" class="strokes" height="24" id="strokes-ca8ef29e-b397-80a6-8007-8fe0358bb517-6b8effdb-5f0e-80dd-8007-372a7199e59d">
+    <g
+      width="24"
+      class="strokes"
+      height="24"
+      id="strokes-ca8ef29e-b397-80a6-8007-8fe0358bb517-6b8effdb-5f0e-80dd-8007-372a7199e59d"
+    >
       <g class="stroke-shape">
         <defs>
-          <linearGradient id="stroke-color-gradient-render-1748-0" x1="0.5" y1="0" x2="0.5" y2="1" gradientTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)">
+          <linearGradient
-            <stop offset="0" stop-color="#ffffff" stop-opacity="1">
+            id="stroke-color-gradient-render-1748-0"
-            </stop>
+            x1="0.5"
-            <stop offset="0.5" stop-color="#ffffff" stop-opacity="0.7">
+            y1="0"
-            </stop>
+            x2="0.5"
-            <stop offset="1" stop-color="#ffffff" stop-opacity="0.5">
+            y2="1"
-            </stop>
+            gradientTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+          >
+            <stop offset="0" stop-color="#ffffff" stop-opacity="1"> </stop>
+            <stop offset="0.5" stop-color="#ffffff" stop-opacity="0.7"> </stop>
+            <stop offset="1" stop-color="#ffffff" stop-opacity="0.5"> </stop>
           </linearGradient>
         </defs>
-        <path d="M2772.833251953125,5410.16650390625L2831.166748046875,5351.83349609375M2772.833251953125,5351.83349609375L2831.166748046875,5351.83349609375L2831.166748046875,5410.16650390625" style="fill:none;fill-opacity:none;stroke-width:12;stroke:url(#stroke-color-gradient-render-1748-0)">
+        <path
+          d="M2772.833251953125,5410.16650390625L2831.166748046875,5351.83349609375M2772.833251953125,5351.83349609375L2831.166748046875,5351.83349609375L2831.166748046875,5410.16650390625"
+          style="fill:none;fill-opacity:none;stroke-width:12;stroke:url(#stroke-color-gradient-render-1748-0)"
+        >
         </path>
       </g>
     </g>
   </g>
-</svg>
+</svg>

src/components/icons/MenuIcon.astro

@@ -0,0 +1,158 @@
+---
+const { class: classname, ...rest } = Astro.props;
+---
+
+<svg
+    class={classname}
+    width="50"
+    xmlns="http://www.w3.org/2000/svg"
+    height="50"
+    id="screenshot-8003f86b-8663-8006-8007-347270f3a7f8"
+    viewBox="3016 382.207 50 50"
+    style="-webkit-print-color-adjust::exact"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    version="1.1"
+    {...rest}
+>
+    <g
+        id="shape-8003f86b-8663-8006-8007-347270f3a7f8"
+        style="fill:#000000"
+        width="24"
+        class="feather feather-menu"
+        height="24"
+        rx="0"
+        ry="0"
+    >
+        <g id="shape-8003f86b-8663-8006-8007-347270f3a7f9" style="display:none">
+            <g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7f9">
+                <rect
+                    rx="0"
+                    ry="0"
+                    x="3016"
+                    y="382.206611570248"
+                    transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)"
+                    width="50"
+                    height="50"
+                    fill="none"
+                    stroke-linejoin="round"
+                    style="fill:none"
+                >
+                </rect>
+            </g>
+            <g
+                fill="none"
+                stroke-linejoin="round"
+                id="strokes-b7b76088-9f6d-80d6-8007-90ef313788eb-8003f86b-8663-8006-8007-347270f3a7f9"
+                class="strokes"
+            >
+                <g
+                    class="inner-stroke-shape"
+                    transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)"
+                >
+                    <defs>
+                        <clipPath
+                            id="inner-stroke-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
+                        >
+                            <use
+                                href="#stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
+                            >
+                            </use>
+                        </clipPath>
+                        <rect
+                            rx="0"
+                            ry="0"
+                            x="3016"
+                            y="382.206611570248"
+                            width="50"
+                            height="50"
+                            style="fill:none;fill-opacity:none;stroke-width:6;stroke:#ffffff;stroke-opacity:1"
+                            id="stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
+                        >
+                        </rect>
+                    </defs>
+                    <use
+                        href="#stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
+                        clip-path="url('#inner-stroke-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0')"
+                    >
+                    </use>
+                </g>
+            </g>
+        </g>
+        <g id="shape-8003f86b-8663-8006-8007-347270f3a7fa">
+            <g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fa">
+                <path
+                    d="M3059.75,407.20648193359375L3022.25,407.20648193359375"
+                    fill="none"
+                    stroke-linejoin="round"
+                    style="fill:none"
+                >
+                </path>
+            </g>
+            <g
+                fill="none"
+                stroke-linejoin="round"
+                id="strokes-b7b76088-9f6d-80d6-8007-90ef3137fa64-8003f86b-8663-8006-8007-347270f3a7fa"
+                class="strokes"
+            >
+                <g class="stroke-shape">
+                    <path
+                        d="M3059.75,407.20648193359375L3022.25,407.20648193359375"
+                        style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
+                    >
+                    </path>
+                </g>
+            </g>
+        </g>
+        <g id="shape-8003f86b-8663-8006-8007-347270f3a7fb">
+            <g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fb">
+                <path
+                    d="M3059.75,419.70648193359375L3038,419.70648193359375"
+                    fill="none"
+                    stroke-linejoin="round"
+                    style="fill:none"
+                >
+                </path>
+            </g>
+            <g
+                fill="none"
+                stroke-linejoin="round"
+                id="strokes-b7b76088-9f6d-80d6-8007-90ef31382957-8003f86b-8663-8006-8007-347270f3a7fb"
+                class="strokes"
+            >
+                <g class="stroke-shape">
+                    <path
+                        d="M3059.75,419.70648193359375L3038,419.70648193359375"
+                        style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
+                    >
+                    </path>
+                </g>
+            </g>
+        </g>
+        <g id="shape-8003f86b-8663-8006-8007-347270f3a7fc">
+            <g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fc">
+                <path
+                    d="M3059.75,394.70648193359375L3028.5,394.70648193359375"
+                    fill="none"
+                    stroke-linejoin="round"
+                    style="fill:none"
+                >
+                </path>
+            </g>
+            <g
+                fill="none"
+                stroke-linejoin="round"
+                id="strokes-b7b76088-9f6d-80d6-8007-90ef31382958-8003f86b-8663-8006-8007-347270f3a7fc"
+                class="strokes"
+            >
+                <g class="stroke-shape">
+                    <path
+                        d="M3059.75,394.70648193359375L3028.5,394.70648193359375"
+                        style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
+                    >
+                    </path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/landing/AboutSection.astro

@@ -67,7 +67,7 @@ import { Picture } from "astro:assets";
         grid-column: -1 / -6;
 
         font-size: 1.125rem;
-        line-height: var(--leading-text);
+        line-height: var(--leading-paragraph);
 
         * + * {
             margin-top: 1.25rem;
@@ -101,7 +101,7 @@ import { Picture } from "astro:assets";
             grid-row: 1;
             max-width: 43ch;
             font-size: 2rem;
-            line-height: var(--leading-text);
+            line-height: var(--leading-paragraph);
         }
     }
 </style>

src/components/landing/ContactSection.astro

@@ -39,7 +39,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
 
     picture {
         display: block;
-        /* width: 100%; */
+        width: 100%;
         /* height: 100%; */
         max-height: 500px;
         grid-column: 1 / 5;
@@ -49,22 +49,30 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
     }
 
     .image {
-        /* width: 100%; */
+        width: 100%;
-        /* height: 100%; */
+        height: 100%;
         object-fit: cover;
     }
 
     .content {
-        grid-column: 5 / -1;
+        grid-column: 6 / -1;
+        align-content: center;
     }
 
     h2 {
-        grid-column: 1 / -1;
+        max-width: 13ch;
-        font-size: 4.75rem;
+        font-size: 3rem;
-        line-height: var(--leading-title);
+        line-height: var(--leading-subtitle);
         letter-spacing: var(--tracking-narrow);
     }
 
+    p {
+        max-width: 38ch;
+        margin-top: 2rem;
+        font-size: 1.5rem;
+        line-height: var(--leading-paragraph);
+    }
+
     .link {
         display: flex;
         align-items: center;
@@ -72,6 +80,8 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
         gap: 2rem;
         grid-column: 1 / -1;
 
+        margin-top: 12rem; 
+
         font-size: 6.25rem;
         font-weight: 600;
         text-transform: uppercase;

src/components/landing/ServicesSection.astro

@@ -81,7 +81,7 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
 
             max-width: 32ch;
             font-size: 1.5rem;
-            line-height: var(--leading-text);
+            line-height: var(--leading-paragraph);
         }
     }
 

src/components/landing/ValuesSection.astro

@@ -89,7 +89,7 @@ function formatIndex(index: number) {
     p {
         margin-top: 1.875rem;
         font-size: 1.5rem;
-        line-height: var(--leading-text);
+        line-height: var(--leading-paragraph);
     }
 
     span {

src/layouts/BaseLayout.astro

@@ -1,8 +1,7 @@
 ---
-// import GlobalStyles from "../components/GlobalStyles.astro";
+import Footer from "../components/Footer.astro";
-// import Header from "../components/Header.astro";
-
 import GlobalStyles from "../components/GlobalStyles.astro";
+import Header from "../components/Header.astro";
 import PlausibleAnalytics from "../components/PlausibleAnalytics.astro";
 
 const { pageTitle } = Astro.props;
@@ -53,7 +52,12 @@ const title = pageTitle
   </head>
   <body>
     <GlobalStyles />
+
+    <Header />
+
     <slot />
+
+    <Footer />
   </body>
 </html>