-
This commit is contained in:
cemGr
834
uploads/frontier-algorithmics-homepage.html
Normal file
834
uploads/frontier-algorithmics-homepage.html
Normal file
@@ -0,0 +1,834 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Frontier Algorithmics – Homepage Prototyp</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--fa-navy: #1A1F5C;
|
||||
--fa-navy-deep: #0F1340;
|
||||
--fa-blue: #6B8FD4;
|
||||
--fa-blue-light: #A8C0E8;
|
||||
--fa-blue-pale: #EEF3FB;
|
||||
--fa-off-white: #F7F8FC;
|
||||
--fa-mid: #6B7280;
|
||||
--fa-border: rgba(26,31,92,0.1);
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
color: var(--fa-navy);
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav.fa-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 3.5rem;
|
||||
border-bottom: 0.5px solid var(--fa-border);
|
||||
background: rgba(255,255,255,0.97);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.fa-logo-area { display: flex; align-items: center; gap: 12px; }
|
||||
.fa-logo-mark {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
color: var(--fa-blue);
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
.fa-logo-divider { width: 1px; height: 30px; background: var(--fa-border); }
|
||||
.fa-logo-text {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: var(--fa-navy);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2.5px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.fa-nav-links { display: flex; gap: 2.25rem; list-style: none; }
|
||||
.fa-nav-links a {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--fa-navy);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.3px;
|
||||
opacity: 0.65;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.fa-nav-links a:hover { opacity: 1; }
|
||||
.fa-nav-cta {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: var(--fa-navy);
|
||||
border: none;
|
||||
padding: 0.6rem 1.4rem;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.5px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.fa-nav-cta:hover { background: var(--fa-blue); }
|
||||
|
||||
/* HERO */
|
||||
.fa-hero {
|
||||
min-height: 90vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
align-items: center;
|
||||
padding: 6rem 3.5rem 5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.fa-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
right: -150px;
|
||||
width: 650px;
|
||||
height: 650px;
|
||||
border-radius: 50%;
|
||||
background: var(--fa-blue-pale);
|
||||
z-index: 0;
|
||||
}
|
||||
.fa-hero-content { position: relative; z-index: 1; padding-right: 4rem; }
|
||||
.fa-eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--fa-blue);
|
||||
margin-bottom: 1.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.fa-eyebrow::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 1px;
|
||||
background: var(--fa-blue);
|
||||
}
|
||||
.fa-hero h1 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: clamp(2.5rem, 4vw, 3.8rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
color: var(--fa-navy);
|
||||
letter-spacing: -2px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.fa-hero h1 em { font-style: normal; color: var(--fa-blue); }
|
||||
.fa-hero-sub {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: var(--fa-mid);
|
||||
max-width: 460px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.fa-hero-actions { display: flex; align-items: center; gap: 1.75rem; }
|
||||
.fa-btn-primary {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: var(--fa-navy);
|
||||
border: none;
|
||||
padding: 0.9rem 2.25rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.fa-btn-primary:hover { background: var(--fa-blue); }
|
||||
.fa-btn-ghost {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--fa-navy);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.fa-btn-ghost:hover { opacity: 1; }
|
||||
.fa-hero-visual {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.fa-stat-card {
|
||||
background: var(--fa-navy);
|
||||
color: #fff;
|
||||
padding: 1.75rem 2.25rem;
|
||||
width: 280px;
|
||||
}
|
||||
.fa-stat-card .num {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -1px;
|
||||
color: var(--fa-blue-light);
|
||||
line-height: 1;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.fa-stat-card .label {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.fa-stat-card.light {
|
||||
background: var(--fa-blue-pale);
|
||||
color: var(--fa-navy);
|
||||
border: 0.5px solid var(--fa-border);
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.fa-stat-card.light .num { color: var(--fa-navy); }
|
||||
.fa-stat-card.light .label { opacity: 0.55; color: var(--fa-navy); }
|
||||
.fa-hero-badge {
|
||||
background: var(--fa-blue);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
padding: 0.55rem 1.1rem;
|
||||
align-self: flex-start;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
/* TRUST BAR */
|
||||
.fa-trust {
|
||||
background: var(--fa-navy);
|
||||
padding: 1.4rem 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
}
|
||||
.fa-trust-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.3);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.fa-trust-items { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
|
||||
.fa-trust-item {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.4);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.fa-trust-dot {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background: var(--fa-blue);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* SERVICES */
|
||||
.fa-services {
|
||||
padding: 7rem 3.5rem;
|
||||
background: var(--fa-off-white);
|
||||
}
|
||||
.fa-section-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 4.5rem;
|
||||
align-items: end;
|
||||
}
|
||||
.fa-section-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--fa-blue);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.fa-section-tag::before { content: ''; display: block; width: 24px; height: 1px; background: var(--fa-blue); }
|
||||
.fa-section-header h2 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: clamp(2rem, 3vw, 2.8rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -1.2px;
|
||||
color: var(--fa-navy);
|
||||
}
|
||||
.fa-section-desc {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: var(--fa-mid);
|
||||
max-width: 420px;
|
||||
align-self: end;
|
||||
}
|
||||
.fa-services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1px;
|
||||
background: var(--fa-border);
|
||||
border: 0.5px solid var(--fa-border);
|
||||
}
|
||||
.fa-service-card {
|
||||
background: #fff;
|
||||
padding: 2.25rem 2rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.25s;
|
||||
position: relative;
|
||||
}
|
||||
.fa-service-card:hover { background: var(--fa-navy); }
|
||||
.fa-service-card:hover .fa-sc-num { color: var(--fa-blue-light); }
|
||||
.fa-service-card:hover .fa-sc-title,
|
||||
.fa-service-card:hover .fa-sc-desc { color: rgba(255,255,255,0.85); }
|
||||
.fa-service-card:hover .fa-sc-tags span {
|
||||
color: rgba(255,255,255,0.7);
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
.fa-sc-num {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
color: var(--fa-blue);
|
||||
margin-bottom: 1.75rem;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
.fa-sc-title {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--fa-navy);
|
||||
margin-bottom: 0.85rem;
|
||||
line-height: 1.25;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
.fa-sc-desc {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
color: var(--fa-mid);
|
||||
margin-bottom: 1.5rem;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
.fa-sc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
|
||||
.fa-sc-tags span {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--fa-navy);
|
||||
border: 0.5px solid var(--fa-border);
|
||||
padding: 2px 8px;
|
||||
opacity: 0.7;
|
||||
transition: color 0.25s, border-color 0.25s;
|
||||
}
|
||||
|
||||
/* WHY */
|
||||
.fa-why {
|
||||
padding: 7rem 3.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6rem;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
}
|
||||
.fa-why-visual { position: relative; }
|
||||
.fa-why-block {
|
||||
background: var(--fa-navy);
|
||||
padding: 3.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
.fa-why-block-quote {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.3px;
|
||||
color: #fff;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.fa-why-block-quote em { font-style: normal; color: var(--fa-blue-light); }
|
||||
.fa-why-block-sub {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.75;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
.fa-accent-bar {
|
||||
position: absolute;
|
||||
bottom: -1.75rem;
|
||||
right: -1.75rem;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background: var(--fa-blue-pale);
|
||||
border: 0.5px solid var(--fa-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
.fa-accent-bar .city {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--fa-navy);
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.fa-accent-bar .tagline {
|
||||
font-size: 9px;
|
||||
color: var(--fa-mid);
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.fa-why-content h2 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: clamp(1.8rem, 2.8vw, 2.4rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.8px;
|
||||
line-height: 1.15;
|
||||
color: var(--fa-navy);
|
||||
margin-bottom: 2.75rem;
|
||||
}
|
||||
.fa-points { display: flex; flex-direction: column; gap: 1.75rem; }
|
||||
.fa-point { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; }
|
||||
.fa-point-num {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--fa-blue);
|
||||
letter-spacing: 1px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.fa-point-text strong {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--fa-navy);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.fa-point-text p {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
color: var(--fa-mid);
|
||||
}
|
||||
|
||||
/* KONTORION */
|
||||
.fa-showcase {
|
||||
padding: 7rem 3.5rem;
|
||||
background: var(--fa-off-white);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.fa-showcase-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--fa-mid);
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
.fa-showcase h2 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: clamp(1.7rem, 2.5vw, 2.2rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.8px;
|
||||
line-height: 1.15;
|
||||
color: var(--fa-navy);
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.fa-showcase p {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: var(--fa-mid);
|
||||
margin-bottom: 2.25rem;
|
||||
max-width: 430px;
|
||||
}
|
||||
.fa-kontorion-card {
|
||||
background: var(--fa-navy);
|
||||
padding: 3rem;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fa-kontorion-card::before {
|
||||
content: 'K';
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 16rem;
|
||||
font-weight: 800;
|
||||
color: rgba(107,143,212,0.06);
|
||||
position: absolute;
|
||||
right: -1.5rem;
|
||||
top: -2rem;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.fa-k-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--fa-blue-light);
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.fa-k-title {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #fff;
|
||||
}
|
||||
.fa-k-desc {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.75;
|
||||
color: rgba(255,255,255,0.5);
|
||||
margin-bottom: 1.75rem;
|
||||
max-width: 310px;
|
||||
}
|
||||
.fa-k-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 2rem; }
|
||||
.fa-k-pill {
|
||||
font-size: 10px;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--fa-blue-light);
|
||||
border: 0.5px solid rgba(107,143,212,0.35);
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.fa-k-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||
padding-bottom: 3px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.fa-k-link:hover { border-color: rgba(255,255,255,0.6); }
|
||||
|
||||
/* CTA */
|
||||
.fa-cta {
|
||||
background: var(--fa-navy);
|
||||
padding: 7rem 3.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
}
|
||||
.fa-cta h2 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: clamp(1.8rem, 3vw, 2.8rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -1.2px;
|
||||
line-height: 1.08;
|
||||
color: #fff;
|
||||
}
|
||||
.fa-cta h2 em { font-style: normal; color: var(--fa-blue-light); }
|
||||
.fa-cta-sub {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: rgba(255,255,255,0.4);
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
.fa-cta-actions { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-end; }
|
||||
.fa-btn-white {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--fa-navy);
|
||||
background: #fff;
|
||||
border: none;
|
||||
padding: 0.9rem 2.25rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.fa-btn-white:hover { background: var(--fa-blue-light); }
|
||||
.fa-cta-loc {
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,0.25);
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
footer.fa-footer {
|
||||
background: var(--fa-navy-deep);
|
||||
padding: 2rem 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.fa-footer-left {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.2);
|
||||
}
|
||||
.fa-footer-links { display: flex; gap: 1.75rem; }
|
||||
.fa-footer-links a {
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.2);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.5px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.fa-footer-links a:hover { color: rgba(255,255,255,0.6); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.fa-hero, .fa-why, .fa-showcase, .fa-services-grid, .fa-section-header {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.fa-hero { min-height: auto; padding: 4rem 1.5rem; }
|
||||
.fa-hero-content { padding-right: 0; }
|
||||
.fa-hero-visual { display: none; }
|
||||
.fa-services-grid { grid-template-columns: 1fr 1fr; }
|
||||
.fa-why, .fa-showcase { padding: 4rem 1.5rem; gap: 3rem; }
|
||||
.fa-services { padding: 4rem 1.5rem; }
|
||||
.fa-cta { grid-template-columns: 1fr; padding: 4rem 1.5rem; }
|
||||
.fa-cta-actions { align-items: flex-start; }
|
||||
nav.fa-nav { padding: 1rem 1.5rem; }
|
||||
.fa-nav-links { display: none; }
|
||||
footer.fa-footer { padding: 1.5rem; flex-direction: column; gap: 1rem; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="fa-nav">
|
||||
<div class="fa-logo-area">
|
||||
<div class="fa-logo-mark">FA</div>
|
||||
<div class="fa-logo-divider"></div>
|
||||
<div class="fa-logo-text">Frontier<br>Algorithmics</div>
|
||||
</div>
|
||||
<ul class="fa-nav-links">
|
||||
<li><a href="#">Leistungen</a></li>
|
||||
<li><a href="#">Branchen</a></li>
|
||||
<li><a href="#">Kontorion</a></li>
|
||||
<li><a href="#">Über uns</a></li>
|
||||
<li><a href="#">DE / EN</a></li>
|
||||
</ul>
|
||||
<button class="fa-nav-cta">Kontakt</button>
|
||||
</nav>
|
||||
|
||||
<section class="fa-hero">
|
||||
<div class="fa-hero-content">
|
||||
<div class="fa-eyebrow">Regensburg · Bayern · International</div>
|
||||
<h1>Komplexe Systeme.<br><em>Klare Lösungen.</em><br>Echter Fortschritt.</h1>
|
||||
<p class="fa-hero-sub">Von der Architektur zur Zulassung – wir verbinden tiefe technische Kompetenz mit strategischer Beratung für Data Science, Medizintechnik und Softwareentwicklung.</p>
|
||||
<div class="fa-hero-actions">
|
||||
<button class="fa-btn-primary">Leistungen entdecken</button>
|
||||
<button class="fa-btn-ghost">Kontorion ansehen ↗</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fa-hero-visual">
|
||||
<div class="fa-stat-card">
|
||||
<div class="num">MDR</div>
|
||||
<div class="label">IEC 62304 · ISO 13485<br>Regulatorische Expertise</div>
|
||||
</div>
|
||||
<div class="fa-stat-card light">
|
||||
<div class="num">HL7</div>
|
||||
<div class="label">FHIR · DICOM · Interoperabilität<br>Medizinische Standards</div>
|
||||
</div>
|
||||
<div class="fa-hero-badge">Seit Regensburg</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="fa-trust">
|
||||
<span class="fa-trust-label">Expertise in</span>
|
||||
<div class="fa-trust-items">
|
||||
<span class="fa-trust-item">Data Science</span>
|
||||
<div class="fa-trust-dot"></div>
|
||||
<span class="fa-trust-item">Medical Software</span>
|
||||
<div class="fa-trust-dot"></div>
|
||||
<span class="fa-trust-item">Flutter</span>
|
||||
<div class="fa-trust-dot"></div>
|
||||
<span class="fa-trust-item">Backend & Frontend</span>
|
||||
<div class="fa-trust-dot"></div>
|
||||
<span class="fa-trust-item">Regulatory Affairs</span>
|
||||
<div class="fa-trust-dot"></div>
|
||||
<span class="fa-trust-item">Architecture</span>
|
||||
<div class="fa-trust-dot"></div>
|
||||
<span class="fa-trust-item">Consulting</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="fa-services">
|
||||
<div class="fa-section-header">
|
||||
<div>
|
||||
<div class="fa-section-tag">Was wir tun</div>
|
||||
<h2>Vier Disziplinen.<br>Ein Partner.</h2>
|
||||
</div>
|
||||
<p class="fa-section-desc">Wir decken den gesamten Lebenszyklus komplexer Softwareprojekte ab – von der ersten Anforderungsanalyse bis zur regulatorischen Zulassung.</p>
|
||||
</div>
|
||||
<div class="fa-services-grid">
|
||||
<div class="fa-service-card">
|
||||
<div class="fa-sc-num">01</div>
|
||||
<div class="fa-sc-title">Data Science & KI</div>
|
||||
<p class="fa-sc-desc">Datengetriebene Entscheidungen durch ML-Modelle, Predictive Analytics und intelligente Datenpipelines – von der Rohdatenanalyse bis zum produktiven System.</p>
|
||||
<div class="fa-sc-tags">
|
||||
<span>Machine Learning</span>
|
||||
<span>Analytics</span>
|
||||
<span>Pipelines</span>
|
||||
<span>Visualisierung</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fa-service-card">
|
||||
<div class="fa-sc-num">02</div>
|
||||
<div class="fa-sc-title">Regulatorik</div>
|
||||
<p class="fa-sc-desc">Medizinproduktesoftware nach MDR, ISO 13485 und IEC 62304 – von der technischen Dokumentation bis zur erfolgreichen Zulassung.</p>
|
||||
<div class="fa-sc-tags">
|
||||
<span>MDR</span>
|
||||
<span>HL7 / FHIR</span>
|
||||
<span>DICOM</span>
|
||||
<span>IEC 62304</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fa-service-card">
|
||||
<div class="fa-sc-num">03</div>
|
||||
<div class="fa-sc-title">Softwareentwicklung</div>
|
||||
<p class="fa-sc-desc">Cross-Platform, Backend und Web – präzise implementiert mit Flutter, modernen Frameworks und sauberem, wartbarem Code.</p>
|
||||
<div class="fa-sc-tags">
|
||||
<span>Flutter</span>
|
||||
<span>Backend</span>
|
||||
<span>Frontend</span>
|
||||
<span>APIs</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fa-service-card">
|
||||
<div class="fa-sc-num">04</div>
|
||||
<div class="fa-sc-title">Software Engineering</div>
|
||||
<p class="fa-sc-desc">Systemarchitektur und technische Beratung für Projekte, bei denen Struktur über Erfolg oder Scheitern entscheidet.</p>
|
||||
<div class="fa-sc-tags">
|
||||
<span>Architektur</span>
|
||||
<span>Planung</span>
|
||||
<span>Beratung</span>
|
||||
<span>Reviews</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="fa-why">
|
||||
<div class="fa-why-visual">
|
||||
<div class="fa-why-block">
|
||||
<div class="fa-why-block-quote">„Wir bauen nicht nur Software – wir tragen <em>Verantwortung</em> für das System dahinter."</div>
|
||||
<div class="fa-why-block-sub">Frontier Algorithmics verbindet Ingenieursdenken mit unternehmerischer Verantwortung. Regensburg ist unser Zuhause – Europa und darüber hinaus unser Markt.</div>
|
||||
</div>
|
||||
<div class="fa-accent-bar">
|
||||
<div class="city">RGN</div>
|
||||
<div class="tagline">Bayern · DE</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fa-why-content">
|
||||
<h2>Warum Frontier<br>Algorithmics?</h2>
|
||||
<div class="fa-points">
|
||||
<div class="fa-point">
|
||||
<div class="fa-point-num">01</div>
|
||||
<div class="fa-point-text">
|
||||
<strong>Technische Tiefe, keine Buzzwords</strong>
|
||||
<p>Wir sprechen die Sprache der Ingenieure und der Entscheider – ohne etwas zu versprechen, das wir nicht liefern können.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fa-point">
|
||||
<div class="fa-point-num">02</div>
|
||||
<div class="fa-point-text">
|
||||
<strong>End-to-End aus einer Hand</strong>
|
||||
<p>Von der Anforderung bis zur Zulassung. Keine Reibungsverluste durch Schnittstellen zu Dritten.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fa-point">
|
||||
<div class="fa-point-num">03</div>
|
||||
<div class="fa-point-text">
|
||||
<strong>Beweis statt Versprechen: Kontorion</strong>
|
||||
<p>Wir haben ein eigenes Produkt entwickelt und am Markt platziert. Wir denken wie Unternehmer, nicht wie Dienstleister.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="fa-showcase">
|
||||
<div>
|
||||
<div class="fa-showcase-label">Eigenes Produkt · Referenz</div>
|
||||
<h2>Kontorion – entwickelt von Frontier Algorithmics</h2>
|
||||
<p>Kontorion ist der Beweis unserer Leistungsfähigkeit: ein vollständig intern entwickeltes Produkt, das zeigt, wie wir Ideen in skalierbare, marktreife Software überführen – von der ersten Zeile Code bis zum Live-Betrieb.</p>
|
||||
<button class="fa-btn-primary">Mehr über Kontorion</button>
|
||||
</div>
|
||||
<div class="fa-kontorion-card">
|
||||
<div class="fa-k-label">Produkt · kontorion.eu</div>
|
||||
<div class="fa-k-title">Kontorion</div>
|
||||
<p class="fa-k-desc">Von der Idee zur fertigen Plattform – entwickelt und betrieben von unserem Team in Regensburg.</p>
|
||||
<div class="fa-k-pills">
|
||||
<span class="fa-k-pill">Flutter</span>
|
||||
<span class="fa-k-pill">Backend</span>
|
||||
<span class="fa-k-pill">Cloud</span>
|
||||
<span class="fa-k-pill">Produkt</span>
|
||||
</div>
|
||||
<a class="fa-k-link" href="https://kontorion.eu" target="_blank">kontorion.eu besuchen →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="fa-cta">
|
||||
<div>
|
||||
<h2>Bereit, das <em>nächste<br>komplexe Projekt</em> anzugehen?</h2>
|
||||
<p class="fa-cta-sub">Wir hören zu, bevor wir reden. Kein Proposal ohne Verständnis.</p>
|
||||
</div>
|
||||
<div class="fa-cta-actions">
|
||||
<button class="fa-btn-white">Gespräch anfragen</button>
|
||||
<div class="fa-cta-loc">Regensburg · Bayern · International</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="fa-footer">
|
||||
<div class="fa-footer-left">© 2025 Frontier Algorithmics · Regensburg</div>
|
||||
<div class="fa-footer-links">
|
||||
<a href="#">Impressum</a>
|
||||
<a href="#">Datenschutz</a>
|
||||
<a href="#">LinkedIn</a>
|
||||
<a href="#">kontorion.eu</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user