-
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>
|
||||
800
uploads/frontier-algorithmics-v2.html
Normal file
800
uploads/frontier-algorithmics-v2.html
Normal file
@@ -0,0 +1,800 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Frontier Algorithmics – KI & Technology Consulting</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; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
color: var(--fa-navy);
|
||||
background: #fff;
|
||||
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: 200;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.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; transition:background 0.2s; }
|
||||
.fa-nav-cta:hover { background:var(--fa-blue); }
|
||||
|
||||
/* ── HERO ── */
|
||||
.fa-hero {
|
||||
min-height: 92vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
align-items: center;
|
||||
padding: 6rem 3.5rem 5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
/* Canvas background */
|
||||
#hero-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
z-index: 0;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.fa-hero-content { position:relative; z-index:2; 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); }
|
||||
|
||||
/* AI badge in hero */
|
||||
.fa-ai-badge {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
background: var(--fa-navy); color: #fff;
|
||||
font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
|
||||
padding: 0.45rem 1rem 0.45rem 0.7rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.fa-ai-dot {
|
||||
width: 7px; height: 7px; border-radius: 50%; background: var(--fa-blue);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%,100% { opacity:1; transform:scale(1); }
|
||||
50% { opacity:0.5; transform:scale(0.7); }
|
||||
}
|
||||
|
||||
.fa-hero h1 {
|
||||
font-family:'Syne',sans-serif;
|
||||
font-size: clamp(2.4rem, 3.8vw, 3.6rem);
|
||||
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; }
|
||||
|
||||
/* Hero right side – stat cards */
|
||||
.fa-hero-visual {
|
||||
position:relative; z-index:2;
|
||||
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:290px;
|
||||
}
|
||||
.fa-stat-card .num {
|
||||
font-family:'Syne',sans-serif; font-size:2rem; font-weight:800;
|
||||
letter-spacing:-0.5px; 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:rgba(238,243,251,0.9); color:var(--fa-navy);
|
||||
border:0.5px solid var(--fa-border); margin-right:2rem;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── TICKER / EXPERTISE BANNER ── */
|
||||
.fa-ticker-wrap {
|
||||
background: var(--fa-navy);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.fa-ticker-inner {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
animation: ticker 30s linear infinite;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
.fa-ticker-wrap:hover .fa-ticker-inner { animation-play-state: paused; }
|
||||
@keyframes ticker {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
.fa-ticker-item {
|
||||
display: flex; align-items: center; gap: 1.25rem;
|
||||
padding: 0 1.5rem;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 11px; font-weight: 600;
|
||||
letter-spacing: 2px; text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.45);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.fa-ticker-dot {
|
||||
width: 4px; height: 4px; border-radius: 50%;
|
||||
background: var(--fa-blue); flex-shrink: 0;
|
||||
}
|
||||
/* Fade edges */
|
||||
.fa-ticker-wrap::before,
|
||||
.fa-ticker-wrap::after {
|
||||
content: '';
|
||||
position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
.fa-ticker-wrap::before { left:0; background: linear-gradient(to right, var(--fa-navy), transparent); }
|
||||
.fa-ticker-wrap::after { right:0; background: linear-gradient(to left, var(--fa-navy), transparent); }
|
||||
|
||||
/* ── 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;
|
||||
}
|
||||
|
||||
/* AI indicator pill used inside cards */
|
||||
.fa-ai-pill {
|
||||
display:inline-flex; align-items:center; gap:5px;
|
||||
background: rgba(107,143,212,0.12);
|
||||
color: var(--fa-blue);
|
||||
font-size:10px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
|
||||
padding:3px 9px; margin-bottom:1rem;
|
||||
border: 0.5px solid rgba(107,143,212,0.3);
|
||||
}
|
||||
.fa-ai-pill-dot { width:5px; height:5px; border-radius:50%; background:var(--fa-blue); }
|
||||
|
||||
.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.6); border-color:rgba(255,255,255,0.15); }
|
||||
.fa-service-card:hover .fa-ai-pill { background:rgba(168,192,232,0.15); color:var(--fa-blue-light); border-color:rgba(168,192,232,0.3); }
|
||||
.fa-service-card:hover .fa-ai-pill-dot { background:var(--fa-blue-light); }
|
||||
.fa-sc-num {
|
||||
font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
|
||||
letter-spacing:2px; color:var(--fa-blue); margin-bottom:1rem; 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.75rem; 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.25rem; 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;
|
||||
}
|
||||
|
||||
/* ── KI HIGHLIGHT SECTION ── */
|
||||
.fa-ai-section {
|
||||
padding: 7rem 3.5rem;
|
||||
background: var(--fa-navy);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fa-ai-section::before {
|
||||
content: 'AI';
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 22rem;
|
||||
font-weight: 800;
|
||||
color: rgba(107,143,212,0.04);
|
||||
position: absolute;
|
||||
right: -2rem; bottom: -4rem;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
letter-spacing: -10px;
|
||||
}
|
||||
.fa-ai-content { position: relative; z-index: 1; }
|
||||
.fa-ai-tag {
|
||||
font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase;
|
||||
color:var(--fa-blue-light); margin-bottom:1rem;
|
||||
display:flex; align-items:center; gap:10px;
|
||||
}
|
||||
.fa-ai-tag::before { content:''; display:block; width:24px; height:1px; background:var(--fa-blue-light); }
|
||||
.fa-ai-content h2 {
|
||||
font-family:'Syne',sans-serif;
|
||||
font-size:clamp(1.8rem,2.8vw,2.6rem); font-weight:700;
|
||||
letter-spacing:-1px; line-height:1.1; color:#fff; margin-bottom:1.5rem;
|
||||
}
|
||||
.fa-ai-content h2 em { font-style:normal; color:var(--fa-blue-light); }
|
||||
.fa-ai-content p {
|
||||
font-size:15px; font-weight:300; line-height:1.8;
|
||||
color:rgba(255,255,255,0.5); margin-bottom:2.5rem; max-width:440px;
|
||||
}
|
||||
.fa-ai-capabilities {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
|
||||
background: rgba(107,143,212,0.15);
|
||||
border: 0.5px solid rgba(107,143,212,0.2);
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.fa-ai-cap {
|
||||
background: rgba(26,31,92,0.6);
|
||||
padding: 1.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.fa-ai-cap:hover { background: rgba(107,143,212,0.12); }
|
||||
.fa-ai-cap-icon {
|
||||
width: 32px; height: 32px;
|
||||
background: rgba(107,143,212,0.15);
|
||||
border: 0.5px solid rgba(107,143,212,0.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 0.85rem;
|
||||
font-size: 14px; color: var(--fa-blue-light);
|
||||
}
|
||||
.fa-ai-cap h4 {
|
||||
font-family:'Syne',sans-serif; font-size:13px; font-weight:700;
|
||||
color:#fff; margin-bottom:0.4rem; letter-spacing:-0.2px;
|
||||
}
|
||||
.fa-ai-cap p {
|
||||
font-size:12px; font-weight:300; line-height:1.6;
|
||||
color:rgba(255,255,255,0.4); margin-bottom:0;
|
||||
}
|
||||
|
||||
/* ── 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 > div > 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); }
|
||||
|
||||
/* ── RESPONSIVE ── */
|
||||
@media (max-width:900px) {
|
||||
.fa-hero, .fa-why, .fa-showcase, .fa-ai-section { 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-section-header { grid-template-columns:1fr; }
|
||||
.fa-why, .fa-showcase, .fa-ai-section { 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; }
|
||||
.fa-ai-capabilities { grid-template-columns:1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<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="#">KI & Daten</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>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="fa-hero">
|
||||
<canvas id="hero-canvas"></canvas>
|
||||
|
||||
<div class="fa-hero-content">
|
||||
<div class="fa-ai-badge">
|
||||
<div class="fa-ai-dot"></div>
|
||||
KI-getriebene Technologieberatung
|
||||
</div>
|
||||
<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 intelligenten KI-Agenten bis zur regulierten Medizinsoftware – wir verbinden modernste Algorithmen mit der Präzision, die kritische Systeme verlangen.</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">LLM</div>
|
||||
<div class="label">Agents · RAG · Fine-Tuning<br>Generative KI für Ihr Unternehmen</div>
|
||||
</div>
|
||||
<div class="fa-stat-card light">
|
||||
<div class="num">MDR</div>
|
||||
<div class="label">IEC 62304 · HL7 · FHIR · DICOM<br>Regulatorische Expertise</div>
|
||||
</div>
|
||||
<div class="fa-hero-badge">Seit Regensburg</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TICKER -->
|
||||
<div class="fa-ticker-wrap" aria-hidden="true">
|
||||
<div class="fa-ticker-inner" id="ticker">
|
||||
<!-- Items doubled for seamless loop -->
|
||||
<span class="fa-ticker-item">KI-Strategie<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">LLM-Agents<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Computer Vision<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Predictive Analytics<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">RAG-Systeme<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">App-Entwicklung<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Regulatory Affairs<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">HL7 / FHIR<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">DICOM<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Software-Architektur<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Agile Methoden<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Data Science<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">MLOps<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">MDR / IEC 62304<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Backend & APIs<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Technologieberatung<div class="fa-ticker-dot"></div></span>
|
||||
<!-- duplicate for seamless -->
|
||||
<span class="fa-ticker-item">KI-Strategie<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">LLM-Agents<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Computer Vision<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Predictive Analytics<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">RAG-Systeme<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">App-Entwicklung<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Regulatory Affairs<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">HL7 / FHIR<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">DICOM<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Software-Architektur<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Agile Methoden<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Data Science<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">MLOps<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">MDR / IEC 62304<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Backend & APIs<div class="fa-ticker-dot"></div></span>
|
||||
<span class="fa-ticker-item">Technologieberatung<div class="fa-ticker-dot"></div></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SERVICES -->
|
||||
<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">KI ist kein Add-on – sie ist der Antrieb hinter jedem unserer Leistungsbereiche. Wir decken den gesamten Projektzyklus ab, von der ersten Idee bis zur regulierten Lösung.</p>
|
||||
</div>
|
||||
<div class="fa-services-grid">
|
||||
<div class="fa-service-card">
|
||||
<div class="fa-sc-num">01</div>
|
||||
<div class="fa-ai-pill"><div class="fa-ai-pill-dot"></div>KI-Kern</div>
|
||||
<div class="fa-sc-title">Data Science & KI</div>
|
||||
<p class="fa-sc-desc">LLM-Agents, RAG-Systeme, Computer Vision und Predictive Analytics – von der Datenpipeline bis zum produktiven KI-System.</p>
|
||||
<div class="fa-sc-tags">
|
||||
<span>LLM / RAG</span><span>Agents</span><span>Computer Vision</span><span>Forecasting</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fa-service-card">
|
||||
<div class="fa-sc-num">02</div>
|
||||
<div class="fa-ai-pill"><div class="fa-ai-pill-dot"></div>KI-gestützt</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-ai-pill"><div class="fa-ai-pill-dot"></div>KI-integriert</div>
|
||||
<div class="fa-sc-title">App-Entwicklung</div>
|
||||
<p class="fa-sc-desc">Native und Cross-Platform Apps, Backend-Systeme und Web-Frontends – präzise implementiert, skalierbar gebaut, KI-ready von Anfang an.</p>
|
||||
<div class="fa-sc-tags">
|
||||
<span>Cross-Platform</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-ai-pill"><div class="fa-ai-pill-dot"></div>KI-Architektur</div>
|
||||
<div class="fa-sc-title">Software Engineering</div>
|
||||
<p class="fa-sc-desc">Systemarchitektur, Agile Methoden und technische Beratung für Projekte, bei denen Struktur über Erfolg oder Scheitern entscheidet.</p>
|
||||
<div class="fa-sc-tags">
|
||||
<span>Architektur</span><span>Scrum / SAFe</span><span>Tech Consulting</span><span>Reviews</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KI HIGHLIGHT -->
|
||||
<section class="fa-ai-section">
|
||||
<div class="fa-ai-content">
|
||||
<div class="fa-ai-tag">KI-Expertise</div>
|
||||
<h2>Intelligente Systeme,<br>die <em>echte Arbeit</em> leisten.</h2>
|
||||
<p>Wir entwickeln keine Demos – wir bauen KI-Systeme, die in produktiven Umgebungen funktionieren. Von autonomen Agenten bis zur regulierten medizinischen Bildanalyse.</p>
|
||||
<button class="fa-btn-primary" style="background:#fff; color:var(--fa-navy);">KI-Leistungen ansehen</button>
|
||||
</div>
|
||||
<div class="fa-ai-capabilities">
|
||||
<div class="fa-ai-cap">
|
||||
<div class="fa-ai-cap-icon">⬡</div>
|
||||
<h4>LLM-Agents & RAG</h4>
|
||||
<p>Autonome Agenten und retrieval-gestützte Systeme für komplexe Unternehmensanwendungen.</p>
|
||||
</div>
|
||||
<div class="fa-ai-cap">
|
||||
<div class="fa-ai-cap-icon">◎</div>
|
||||
<h4>Computer Vision</h4>
|
||||
<p>Bildanalyse und Objekterkennung – auch in regulierten Bereichen wie der Medizintechnik.</p>
|
||||
</div>
|
||||
<div class="fa-ai-cap">
|
||||
<div class="fa-ai-cap-icon">⟁</div>
|
||||
<h4>Predictive Analytics</h4>
|
||||
<p>Forecasting-Modelle und Anomalieerkennung auf Basis realer Produktionsdaten.</p>
|
||||
</div>
|
||||
<div class="fa-ai-cap">
|
||||
<div class="fa-ai-cap-icon">⊞</div>
|
||||
<h4>MLOps & Deployment</h4>
|
||||
<p>Vom Notebook zur skalierbaren Produktionsinfrastruktur – zuverlässig und wartbar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHY -->
|
||||
<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>KI mit Substanz, nicht mit Buzzwords</strong>
|
||||
<p>Wir implementieren LLM-Agents, RAG-Systeme und Computer-Vision-Lösungen, die in der Praxis funktionieren – nicht nur in der Demo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fa-point">
|
||||
<div class="fa-point-num">02</div>
|
||||
<div class="fa-point-text">
|
||||
<strong>Regulatorik trifft Technologie</strong>
|
||||
<p>Wir sind eine der wenigen Firmen, die KI-Expertise und regulatorisches Know-how (MDR, IEC 62304) unter einem Dach vereinen.</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>
|
||||
|
||||
<!-- KONTORION -->
|
||||
<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">App-Entwicklung</span>
|
||||
<span class="fa-k-pill">Backend</span>
|
||||
<span class="fa-k-pill">Cloud</span>
|
||||
<span class="fa-k-pill">KI-integriert</span>
|
||||
</div>
|
||||
<a class="fa-k-link" href="https://kontorion.eu" target="_blank">kontorion.eu besuchen →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<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 -->
|
||||
<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>
|
||||
|
||||
<script>
|
||||
// ── NETWORK / PARTICLE CANVAS ANIMATION ──
|
||||
(function() {
|
||||
const canvas = document.getElementById('hero-canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const NAVY = '26, 31, 92';
|
||||
const BLUE = '107, 143, 212';
|
||||
|
||||
let W, H, nodes, mouse = { x: -999, y: -999 };
|
||||
|
||||
function resize() {
|
||||
const rect = canvas.parentElement.getBoundingClientRect();
|
||||
W = canvas.width = rect.width;
|
||||
H = canvas.height = rect.height;
|
||||
}
|
||||
|
||||
function randBetween(a, b) { return a + Math.random() * (b - a); }
|
||||
|
||||
function initNodes(n) {
|
||||
nodes = [];
|
||||
for (let i = 0; i < n; i++) {
|
||||
nodes.push({
|
||||
x: randBetween(0, W),
|
||||
y: randBetween(0, H),
|
||||
vx: randBetween(-0.25, 0.25),
|
||||
vy: randBetween(-0.2, 0.2),
|
||||
r: randBetween(2, 5),
|
||||
// some nodes are "data nodes" (larger, labeled)
|
||||
isKey: Math.random() < 0.12,
|
||||
label: ['LLM','RAG','CV','AI','ML','API','MDR'][Math.floor(Math.random()*7)]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
|
||||
// Draw edges between nearby nodes
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
const dx = nodes[i].x - nodes[j].x;
|
||||
const dy = nodes[i].y - nodes[j].y;
|
||||
const dist = Math.sqrt(dx*dx + dy*dy);
|
||||
const maxDist = 130;
|
||||
if (dist < maxDist) {
|
||||
const alpha = (1 - dist / maxDist) * 0.18;
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = `rgba(${BLUE}, ${alpha})`;
|
||||
ctx.lineWidth = 0.6;
|
||||
ctx.moveTo(nodes[i].x, nodes[i].y);
|
||||
ctx.lineTo(nodes[j].x, nodes[j].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
// Mouse interaction lines
|
||||
const mdx = nodes[i].x - mouse.x;
|
||||
const mdy = nodes[i].y - mouse.y;
|
||||
const mdist = Math.sqrt(mdx*mdx + mdy*mdy);
|
||||
if (mdist < 160) {
|
||||
const alpha = (1 - mdist / 160) * 0.35;
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = `rgba(${BLUE}, ${alpha})`;
|
||||
ctx.lineWidth = 0.8;
|
||||
ctx.moveTo(nodes[i].x, nodes[i].y);
|
||||
ctx.lineTo(mouse.x, mouse.y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// Draw nodes
|
||||
for (const n of nodes) {
|
||||
// Glow halo
|
||||
const g = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 4);
|
||||
g.addColorStop(0, `rgba(${BLUE}, 0.12)`);
|
||||
g.addColorStop(1, `rgba(${BLUE}, 0)`);
|
||||
ctx.beginPath();
|
||||
ctx.arc(n.x, n.y, n.r * 4, 0, Math.PI * 2);
|
||||
ctx.fillStyle = g;
|
||||
ctx.fill();
|
||||
|
||||
// Core dot
|
||||
ctx.beginPath();
|
||||
ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
|
||||
if (n.isKey) {
|
||||
ctx.fillStyle = `rgba(${BLUE}, 0.75)`;
|
||||
} else {
|
||||
ctx.fillStyle = `rgba(${NAVY}, 0.35)`;
|
||||
}
|
||||
ctx.fill();
|
||||
|
||||
// Labels on key nodes
|
||||
if (n.isKey) {
|
||||
ctx.font = '600 9px "Syne", sans-serif';
|
||||
ctx.letterSpacing = '1px';
|
||||
ctx.fillStyle = `rgba(${BLUE}, 0.55)`;
|
||||
ctx.fillText(n.label, n.x + n.r + 4, n.y + 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
for (const n of nodes) {
|
||||
n.x += n.vx;
|
||||
n.y += n.vy;
|
||||
// Bounce off edges
|
||||
if (n.x < 0 || n.x > W) n.vx *= -1;
|
||||
if (n.y < 0 || n.y > H) n.vy *= -1;
|
||||
}
|
||||
}
|
||||
|
||||
function loop() {
|
||||
update();
|
||||
draw();
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
resize();
|
||||
initNodes(60);
|
||||
});
|
||||
|
||||
canvas.parentElement.addEventListener('mousemove', e => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
mouse.x = e.clientX - rect.left;
|
||||
mouse.y = e.clientY - rect.top;
|
||||
});
|
||||
canvas.parentElement.addEventListener('mouseleave', () => {
|
||||
mouse.x = -999; mouse.y = -999;
|
||||
});
|
||||
|
||||
resize();
|
||||
initNodes(60);
|
||||
loop();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
uploads/leonhard-niederwimmer-TrJaNu98XBA-unsplash.jpg
Normal file
BIN
uploads/leonhard-niederwimmer-TrJaNu98XBA-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
Reference in New Issue
Block a user