tideshift/tideshift-website
1
0
Fork 0
Code Activity

Implement Contact, Header, start Footer

Browse Source
This commit is contained in:
Michael Rieger
2026-02-13 12:57:06 +01:00
parent b0dec274bd
commit 21d5e9eb5e
10 changed files with 401 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.astro
+100
View File
@@ -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
+7
View File
@@ -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
+63 -5
View File
@@ -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
+45 -12
View File
@@ -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)">
<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
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)"
>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

src/components/icons/MenuIcon.astro
+158
View File
@@ -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
+2 -2
View File
@@ -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
+17 -7
View File
@@ -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%; */
/* height: 100%; */
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
grid-column: 5 / -1;
grid-column: 6 / -1;
align-content: center;
}
h2 {
grid-column: 1 / -1;
font-size: 4.75rem;
line-height: var(--leading-title);
max-width: 13ch;
font-size: 3rem;
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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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 {