Contact page implemented

This commit is contained in:
2026-07-09 21:45:47 +02:00
parent 192772f0c2
commit 53c3bb2aff
2 changed files with 697 additions and 1 deletions
+210
View File
@@ -14,6 +14,9 @@
--color-red-500: oklch(63.7% 0.237 25.331);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-red-700: oklch(50.5% 0.213 27.518);
--color-amber-300: oklch(87.9% 0.169 91.605);
--color-amber-400: oklch(82.8% 0.189 84.429);
--color-amber-500: oklch(76.9% 0.188 70.08);
--color-amber-600: oklch(66.6% 0.179 58.318);
--color-yellow-500: oklch(79.5% 0.184 86.047);
--color-green-100: oklch(96.2% 0.044 156.743);
@@ -28,6 +31,11 @@
--color-emerald-600: oklch(59.6% 0.145 163.225);
--color-emerald-700: oklch(50.8% 0.118 165.612);
--color-emerald-800: oklch(43.2% 0.095 166.913);
--color-cyan-300: oklch(86.5% 0.127 207.078);
--color-cyan-400: oklch(78.9% 0.154 211.53);
--color-cyan-500: oklch(71.5% 0.143 215.221);
--color-cyan-800: oklch(45% 0.085 224.283);
--color-cyan-950: oklch(30.2% 0.056 229.695);
--color-sky-600: oklch(58.8% 0.158 241.966);
--color-blue-100: oklch(93.2% 0.032 255.585);
--color-blue-200: oklch(88.2% 0.059 254.128);
@@ -41,8 +49,11 @@
--color-slate-50: oklch(98.4% 0.003 247.858);
--color-slate-100: oklch(96.8% 0.007 247.896);
--color-slate-200: oklch(92.9% 0.013 255.508);
--color-slate-400: oklch(70.4% 0.04 256.788);
--color-slate-500: oklch(55.4% 0.046 257.417);
--color-slate-700: oklch(37.2% 0.044 257.287);
--color-slate-800: oklch(27.9% 0.041 260.031);
--color-slate-900: oklch(20.8% 0.042 265.755);
--color-gray-50: oklch(98.5% 0.002 247.839);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
@@ -101,6 +112,8 @@
--animate-bounce: bounce 1s infinite;
--blur-xs: 4px;
--blur-sm: 8px;
--blur-lg: 16px;
--blur-xl: 24px;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
@@ -256,6 +269,9 @@
}
}
@layer utilities {
.pointer-events-none {
pointer-events: none;
}
.visible {
visibility: visible;
}
@@ -277,6 +293,9 @@
.-top-1 {
top: calc(var(--spacing) * -1);
}
.-top-12 {
top: calc(var(--spacing) * -12);
}
.top-0 {
top: 0;
}
@@ -298,6 +317,9 @@
.-right-8 {
right: calc(var(--spacing) * -8);
}
.-right-16 {
right: calc(var(--spacing) * -16);
}
.right-0 {
right: 0;
}
@@ -313,12 +335,18 @@
.-bottom-8 {
bottom: calc(var(--spacing) * -8);
}
.-bottom-16 {
bottom: calc(var(--spacing) * -16);
}
.bottom-0 {
bottom: 0;
}
.bottom-8 {
bottom: calc(var(--spacing) * 8);
}
.-left-12 {
left: calc(var(--spacing) * -12);
}
.left-0 {
left: 0;
}
@@ -391,6 +419,9 @@
.mt-auto {
margin-top: auto;
}
.mr-0\.5 {
margin-right: calc(var(--spacing) * 0.5);
}
.mr-3 {
margin-right: calc(var(--spacing) * 3);
}
@@ -505,6 +536,12 @@
.h-24 {
height: calc(var(--spacing) * 24);
}
.h-32 {
height: calc(var(--spacing) * 32);
}
.h-44 {
height: calc(var(--spacing) * 44);
}
.h-\[18px\] {
height: 18px;
}
@@ -610,6 +647,12 @@
.w-28 {
width: calc(var(--spacing) * 28);
}
.w-32 {
width: calc(var(--spacing) * 32);
}
.w-44 {
width: calc(var(--spacing) * 44);
}
.w-48 {
width: calc(var(--spacing) * 48);
}
@@ -640,6 +683,9 @@
.max-w-\[85\%\] {
max-width: 85%;
}
.max-w-\[120px\] {
max-width: 120px;
}
.max-w-\[140px\] {
max-width: 140px;
}
@@ -785,6 +831,13 @@
.gap-\[6px\] {
gap: 6px;
}
.space-y-0\.5 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-1 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
@@ -1027,9 +1080,21 @@
.border-\[\#fbd897\] {
border-color: #fbd897;
}
.border-\[\#fca5a5\] {
border-color: #fca5a5;
}
.border-\[\#fde5e8\] {
border-color: #fde5e8;
}
.border-amber-300 {
border-color: var(--color-amber-300);
}
.border-amber-500\/30 {
border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
}
}
.border-blue-100 {
border-color: var(--color-blue-100);
}
@@ -1042,6 +1107,12 @@
.border-current {
border-color: currentcolor;
}
.border-cyan-800\/40 {
border-color: color-mix(in srgb, oklch(45% 0.085 224.283) 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-cyan-800) 40%, transparent);
}
}
.border-emerald-100 {
border-color: var(--color-emerald-100);
}
@@ -1084,6 +1155,12 @@
.border-red-500 {
border-color: var(--color-red-500);
}
.border-slate-700 {
border-color: var(--color-slate-700);
}
.border-slate-800 {
border-color: var(--color-slate-800);
}
.border-transparent {
border-color: transparent;
}
@@ -1207,6 +1284,15 @@
.bg-\[\#ffffff14\] {
background-color: #ffffff14;
}
.bg-amber-400\/80 {
background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
}
}
.bg-black {
background-color: var(--color-black);
}
.bg-black\/30 {
background-color: color-mix(in srgb, #000 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1222,12 +1308,27 @@
.bg-blue-500 {
background-color: var(--color-blue-500);
}
.bg-blue-500\/10 {
background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
}
}
.bg-blue-950\/60 {
background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-blue-950) 60%, transparent);
}
}
.bg-cyan-500\/10 {
background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-cyan-500) 10%, transparent);
}
}
.bg-cyan-950 {
background-color: var(--color-cyan-950);
}
.bg-emerald-50 {
background-color: var(--color-emerald-50);
}
@@ -1276,6 +1377,9 @@
.bg-slate-100 {
background-color: var(--color-slate-100);
}
.bg-slate-900 {
background-color: var(--color-slate-900);
}
.bg-transparent {
background-color: transparent;
}
@@ -1310,6 +1414,10 @@
--tw-gradient-position: to bottom right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
--tw-gradient-position: to top right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1317,6 +1425,10 @@
.bg-\[url\(\'data\:image\/svg\+xml\,\%3csvg_xmlns\=\%27http\:\/\/www\.w3\.org\/2000\/svg\%27_viewBox\=\%270_0_24_24\%27_fill\=\%27none\%27_stroke\=\%27currentColor\%27_stroke-width\=\%272\%27\%3e\%3cline_x1\=\%273\%27_y1\=\%276\%27_x2\=\%2721\%27_y2\=\%276\%27\/\%3e\%3cline_x1\=\%273\%27_y1\=\%2712\%27_x2\=\%2721\%27_y2\=\%2712\%27\/\%3e\%3cline_x1\=\%273\%27_y1\=\%2718\%27_x2\=\%2721\%27_y2\=\%2718\%27\/\%3e\%3c\/svg\%3e\'\)\] {
background-image: url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_24_24%27_fill=%27none%27_stroke=%27currentColor%27_stroke-width=%272%27%3e%3cline_x1=%273%27_y1=%276%27_x2=%2721%27_y2=%276%27/%3e%3cline_x1=%273%27_y1=%2712%27_x2=%2721%27_y2=%2712%27/%3e%3cline_x1=%273%27_y1=%2718%27_x2=%2721%27_y2=%2718%27/%3e%3c/svg%3e');
}
.from-\[\#0c1e36\] {
--tw-gradient-from: #0c1e36;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-\[\#00a3a1\] {
--tw-gradient-from: #00a3a1;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1329,11 +1441,20 @@
--tw-gradient-from: #0066b3;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-white {
--tw-gradient-from: var(--color-white);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.via-\[\#0066b3\] {
--tw-gradient-via: #0066b3;
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-\[\#162e4e\] {
--tw-gradient-via: #162e4e;
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.to-\[\#00a3a1\] {
--tw-gradient-to: #00a3a1;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1342,6 +1463,14 @@
--tw-gradient-to: #0066b3;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-\[\#091729\] {
--tw-gradient-to: #091729;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-\[\#fafcfe\] {
--tw-gradient-to: #fafcfe;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.bg-\[length\:20px\] {
background-size: 20px;
}
@@ -1363,6 +1492,9 @@
.p-0\.5 {
padding: calc(var(--spacing) * 0.5);
}
.p-1 {
padding: var(--spacing);
}
.p-1\.5 {
padding: calc(var(--spacing) * 1.5);
}
@@ -1694,6 +1826,10 @@
--tw-tracking: 0.02em;
letter-spacing: 0.02em;
}
.tracking-\[0\.2em\] {
--tw-tracking: 0.2em;
letter-spacing: 0.2em;
}
.tracking-\[0\.04em\] {
--tw-tracking: 0.04em;
letter-spacing: 0.04em;
@@ -1758,6 +1894,9 @@
.text-\[\#5a6577\] {
color: #5a6577;
}
.text-\[\#7f1d1d\] {
color: #7f1d1d;
}
.text-\[\#8a96a8\] {
color: #8a96a8;
}
@@ -1815,6 +1954,12 @@
.text-blue-400 {
color: var(--color-blue-400);
}
.text-cyan-300 {
color: var(--color-cyan-300);
}
.text-cyan-400 {
color: var(--color-cyan-400);
}
.text-emerald-500 {
color: var(--color-emerald-500);
}
@@ -1869,6 +2014,18 @@
.text-sky-600 {
color: var(--color-sky-600);
}
.text-slate-100 {
color: var(--color-slate-100);
}
.text-slate-200 {
color: var(--color-slate-200);
}
.text-slate-400 {
color: var(--color-slate-400);
}
.text-slate-500 {
color: var(--color-slate-500);
}
.text-slate-700 {
color: var(--color-slate-700);
}
@@ -1912,6 +2069,9 @@
.opacity-85 {
opacity: 85%;
}
.opacity-90 {
opacity: 90%;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1956,6 +2116,14 @@
--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.blur-lg {
--tw-blur: blur(var(--blur-lg));
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.blur-xl {
--tw-blur: blur(var(--blur-xl));
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.brightness-75 {
--tw-brightness: brightness(75%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2080,6 +2248,10 @@
--tw-outline-style: none;
outline-style: none;
}
.select-all {
-webkit-user-select: all;
user-select: all;
}
.select-none {
-webkit-user-select: none;
user-select: none;
@@ -2397,6 +2569,13 @@
}
}
}
.hover\:bg-\[\#990d20\] {
&:hover {
@media (hover: hover) {
background-color: #990d20;
}
}
}
.hover\:bg-\[\#008280\] {
&:hover {
@media (hover: hover) {
@@ -2547,6 +2726,22 @@
}
}
}
.hover\:from-\[\#002244\] {
&:hover {
@media (hover: hover) {
--tw-gradient-from: #002244;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:to-\[\#003b71\] {
&:hover {
@media (hover: hover) {
--tw-gradient-to: #003b71;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:text-\[\#1f2a3a\] {
&:hover {
@media (hover: hover) {
@@ -2624,6 +2819,16 @@
display: flex;
}
}
.sm\:w-auto {
@media (width >= 40rem) {
width: auto;
}
}
.sm\:flex-none {
@media (width >= 40rem) {
flex: none;
}
}
.sm\:grid-cols-2 {
@media (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2789,6 +2994,11 @@
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.lg\:grid-cols-\[1\.8fr_1\.2fr\] {
@media (width >= 64rem) {
grid-template-columns: 1.8fr 1.2fr;
}
}
.lg\:grid-cols-\[1fr_1fr_1fr_1fr_auto\] {
@media (width >= 64rem) {
grid-template-columns: 1fr 1fr 1fr 1fr auto;