feat(landing): public marketing homepage at / (+ legal placeholders)
Public www landing page (your design) as a self-contained Blade view at / — own
CSS/JS, system fonts (no CDN, R14), hero, marquee, typewriter, product mock with
scroll-zoom, security section, honest comparison, pricing gallery, FAQ, CTA. It is
intentionally outside the app token/component system (marketing page, not control
panel). Wired a sign-in link to route('login').
Robustness/a11y hardening from the Codex (R15) loop:
- reduced-motion: pin hero/reveal elements to their visible end state.
- <noscript> fallback so reveal content is visible without JS.
- login link kept visible on mobile (moved out of the hidden nav group).
- stats render their real values in HTML (correct without JS).
- footer legal links now resolve to real /legal/* routes (placeholder pages).
- reconciled contradictory data-migration pricing (add-on from €390).
48 Pest tests green; R12 browser: landing 0 console errors. Codex (R15) clean.
NOTE: the /legal/* pages (Impressum, Datenschutz, AGB) are placeholders — real
legal content must be supplied before this homepage goes public.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
feat/portal-design
nexxo
parent
1aa7535fc4
commit
b032d8808b
|
|
@ -0,0 +1,597 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CluPilot Cloud — Ihre firmeneigene Cloud</title>
|
||||
@verbatim
|
||||
<style>
|
||||
:root{
|
||||
--bg:#ffffff; --bg2:#f5f5f7; --ink:#1d1d1f; --muted:#86868b;
|
||||
--line:#e8e8ed; --accent:#f97316; --accent2:#fbbf24;
|
||||
--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
html{scroll-behavior:smooth}
|
||||
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
a{color:inherit;text-decoration:none}
|
||||
button{font:inherit;cursor:pointer;border:none;background:none}
|
||||
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
|
||||
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
|
||||
|
||||
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:100}
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:90;height:50px;background:rgba(255,255,255,.65);backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px);border-bottom:1px solid rgba(0,0,0,.05);transition:box-shadow .3s}
|
||||
nav.sc{box-shadow:0 10px 30px rgba(0,0,0,.08)}
|
||||
.nv{max-width:1100px;margin:0 auto;height:100%;display:flex;align-items:center;gap:30px;padding:0 24px;font-size:.85rem}
|
||||
.brand{font-weight:700}.brand em{font-style:normal;color:var(--accent)}
|
||||
.nl{display:flex;gap:28px;margin-left:auto;color:#424245;align-items:center}
|
||||
.nl a{transition:color .2s}.nl a:hover{color:var(--accent)}
|
||||
.ncta{background:var(--accent);color:#fff;padding:6px 16px;border-radius:99px;font-weight:600;transition:transform .2s,background .2s}
|
||||
.ncta:hover{background:#ea6a0a;transform:scale(1.05)}
|
||||
.nlogin{color:#424245;font-weight:500;transition:color .2s}
|
||||
.nlogin:hover{color:var(--accent)}
|
||||
@media(max-width:720px){.nl{display:none}.nlogin{margin-left:auto}}
|
||||
|
||||
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:120px 24px 40px;position:relative;overflow:hidden}
|
||||
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;pointer-events:none;animation:drift 13s ease-in-out infinite;z-index:0}
|
||||
.o1{width:520px;height:520px;background:#ffd9bd;top:-160px;left:-140px}
|
||||
.o2{width:460px;height:460px;background:#fff0dc;bottom:-140px;right:-120px;animation-delay:-6.5s}
|
||||
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,40px) scale(1.12)}66%{transform:translate(-50px,60px) scale(.92)}}
|
||||
.hero>:not(.orb){position:relative;z-index:1}
|
||||
.pill{display:inline-flex;gap:8px;align-items:center;font-size:.82rem;font-weight:600;color:var(--accent);background:#fff;border:1px solid #ffdcc2;box-shadow:0 4px 18px rgba(249,115,22,.12);padding:7px 16px;border-radius:99px;margin-bottom:28px;opacity:0;animation:up .8s .1s cubic-bezier(.2,.7,.2,1) forwards}
|
||||
h1{font-size:clamp(2.7rem,8vw,5.4rem);line-height:1.03;letter-spacing:-.035em;font-weight:700;max-width:900px}
|
||||
h1 .w{display:inline-block;opacity:0;transform:translateY(50px) rotate(2deg);animation:word .9s cubic-bezier(.2,.7,.2,1) forwards}
|
||||
h1 .grad{background:linear-gradient(92deg,var(--accent),#fb923c,var(--accent2),var(--accent));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:word .9s cubic-bezier(.2,.7,.2,1) forwards,flow 6s 1s linear infinite}
|
||||
@keyframes word{to{opacity:1;transform:none}}
|
||||
@keyframes flow{to{background-position:250% 0}}
|
||||
@keyframes up{to{opacity:1;transform:none}}
|
||||
.sub{font-size:clamp(1.05rem,2.4vw,1.4rem);color:var(--muted);max-width:640px;margin:26px 0 0;line-height:1.5;opacity:0;animation:up .8s .9s cubic-bezier(.2,.7,.2,1) forwards}
|
||||
.ctas{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;justify-content:center;opacity:0;animation:up .8s 1.1s cubic-bezier(.2,.7,.2,1) forwards}
|
||||
.btn{padding:14px 30px;border-radius:99px;font-weight:600;font-size:1.02rem;display:inline-block;transition:transform .25s,box-shadow .25s,background .25s;position:relative;overflow:hidden}
|
||||
.bf{background:var(--accent);color:#fff;box-shadow:0 10px 30px rgba(249,115,22,.35)}
|
||||
.bf:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 40px rgba(249,115,22,.45)}
|
||||
.bf::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:sheen 3.5s 2s ease-in-out infinite}
|
||||
@keyframes sheen{0%{left:-80%}35%,100%{left:140%}}
|
||||
.bl{color:var(--accent)}.bl:hover{text-decoration:underline}
|
||||
.scroll-hint{margin-top:60px;color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;opacity:0;animation:up .8s 1.5s forwards}
|
||||
.scroll-hint::after{content:"";display:block;width:1.5px;height:42px;background:linear-gradient(var(--accent),transparent);margin:10px auto 0;animation:stretch 1.8s ease-in-out infinite}
|
||||
@keyframes stretch{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
|
||||
|
||||
.marq{border-block:1px solid var(--line);padding:18px 0;overflow:hidden;background:#fff}
|
||||
.mtrack{display:flex;gap:56px;width:max-content;animation:marq 26s linear infinite}
|
||||
.marq:hover .mtrack{animation-play-state:paused}
|
||||
.mtrack span{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;color:#424245;white-space:nowrap}
|
||||
.mtrack svg{width:17px;height:17px;color:var(--accent)}
|
||||
@keyframes marq{to{transform:translateX(-50%)}}
|
||||
|
||||
.zoomsec{padding:130px 24px 110px;text-align:center;background:linear-gradient(180deg,#fff,#fbfbfd)}
|
||||
.k{font-size:.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px}
|
||||
h2{font-size:clamp(2rem,5.5vw,3.6rem);letter-spacing:-.03em;line-height:1.08;font-weight:700}
|
||||
.lead{color:var(--muted);font-size:1.15rem;line-height:1.55;max-width:600px;margin:18px auto 0}
|
||||
.mock{max-width:860px;margin:64px auto 0;will-change:transform;transform:scale(.82) translateY(40px);transition:transform .1s linear}
|
||||
.win{background:#fff;border-radius:22px;box-shadow:0 40px 100px rgba(0,0,0,.16);border:1px solid var(--line);overflow:hidden;text-align:left}
|
||||
.wbar{display:flex;gap:7px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);background:#fafafa}
|
||||
.wdot{width:11px;height:11px;border-radius:50%}
|
||||
.wurl{margin-left:14px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:.76rem;color:var(--muted);padding:5px 14px;flex:1;max-width:340px}
|
||||
.wbody{padding:26px 28px;display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
|
||||
@media(max-width:680px){.wbody{grid-template-columns:1fr}}
|
||||
.wcard{border:1px solid var(--line);border-radius:16px;padding:18px 20px}
|
||||
.wcard small{color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
|
||||
.wrow{display:flex;align-items:center;gap:12px;margin-top:14px}
|
||||
.wlogo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#1d1d1f,#48484a);color:#fff;display:grid;place-items:center;font-weight:700}
|
||||
.wrow b{font-size:.95rem}.wrow small{display:block;text-transform:none;letter-spacing:0;font-weight:400}
|
||||
.wbar2{height:9px;border-radius:99px;background:var(--bg2);margin-top:16px;overflow:hidden}
|
||||
.wbar2 i{display:block;height:100%;width:47%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% 100%;animation:flow 3s linear infinite}
|
||||
.wlist{display:flex;flex-direction:column;gap:11px;margin-top:14px}
|
||||
.wli{display:flex;gap:10px;align-items:center;font-size:.85rem}
|
||||
.wli .ok{width:19px;height:19px;border-radius:50%;background:#e9f8ef;color:#30b15c;display:grid;place-items:center;font-size:.7rem;font-weight:700}
|
||||
|
||||
.dark{background:#000;color:#f5f5f7;padding:140px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.glow{position:absolute;width:820px;height:820px;left:50%;top:-380px;transform:translateX(-50%);background:radial-gradient(circle,rgba(249,115,22,.34),transparent 62%);animation:breathe 6s ease-in-out infinite;pointer-events:none}
|
||||
@keyframes breathe{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.12)}}
|
||||
.dark h2{color:#fff;max-width:760px;margin:0 auto}
|
||||
.dark .lead{color:#a1a1a6}
|
||||
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1100px;margin:70px auto 0;text-align:left}
|
||||
@media(max-width:960px){.dgrid{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:560px){.dgrid{grid-template-columns:1fr}}
|
||||
.dc{background:#111114;border:1px solid #232328;border-radius:20px;padding:28px 24px;transition:transform .35s,border-color .35s,background .35s}
|
||||
.dc:hover{transform:translateY(-8px);border-color:rgba(249,115,22,.5);background:#141419}
|
||||
.dic{width:46px;height:46px;border-radius:13px;background:rgba(249,115,22,.14);display:grid;place-items:center;margin-bottom:18px;transition:transform .35s}
|
||||
.dc:hover .dic{transform:scale(1.15) rotate(-6deg)}
|
||||
.dic svg{width:22px;height:22px;color:var(--accent)}
|
||||
.dc h3{font-size:1.02rem;color:#fff;margin-bottom:7px}
|
||||
.dc p{color:#a1a1a6;font-size:.88rem;line-height:1.55}
|
||||
.stats{display:flex;gap:56px;justify-content:center;flex-wrap:wrap;margin-top:80px}
|
||||
.st b{font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:-.03em;background:linear-gradient(92deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
|
||||
.st small{display:block;color:#a1a1a6;margin-top:6px;font-size:.86rem}
|
||||
|
||||
.gal{padding:120px 0;background:var(--bg2);overflow:hidden}
|
||||
.gh{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:flex-end;gap:20px}
|
||||
.gnav{margin-left:auto;display:flex;gap:12px}
|
||||
.gbtn{width:46px;height:46px;border-radius:50%;background:#e0e0e5;display:grid;place-items:center;transition:background .2s,transform .2s;color:#1d1d1f}
|
||||
.gbtn:hover{background:#d4d4da;transform:scale(1.08)}
|
||||
.gbtn:active{transform:scale(.92)}
|
||||
.gbtn svg{width:19px;height:19px}
|
||||
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:56px max(24px,calc((100vw - 1100px)/2 + 24px)) 34px;scrollbar-width:none}
|
||||
.rail::-webkit-scrollbar{display:none}
|
||||
.gc{scroll-snap-align:start;flex:0 0 min(400px,86vw);background:#fff;border-radius:28px;padding:40px 34px;box-shadow:0 8px 30px rgba(0,0,0,.07);display:flex;flex-direction:column;min-height:520px;position:relative;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
|
||||
.gc:hover{transform:translateY(-10px) scale(1.015);box-shadow:0 30px 70px rgba(0,0,0,.14)}
|
||||
.gc.hot{background:linear-gradient(160deg,#1d1d1f,#000);color:#f5f5f7}
|
||||
.gc .who{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
|
||||
.gc h3{font-size:1.7rem;letter-spacing:-.02em;margin:10px 0 4px}
|
||||
.gc .pr{font-size:2.6rem;font-weight:700;letter-spacing:-.03em;margin:18px 0 2px}
|
||||
.gc .pr small{font-size:1rem;color:var(--muted);font-weight:400}
|
||||
.gc.hot .pr small{color:#a1a1a6}
|
||||
.gc .set{font-size:.78rem;color:var(--muted);margin-bottom:24px}
|
||||
.gc.hot .set{color:#a1a1a6}
|
||||
.gc ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
|
||||
.gc li{display:flex;gap:11px;font-size:.92rem;align-items:flex-start;line-height:1.4}
|
||||
.gc li svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:2px}
|
||||
.gc .btn{margin-top:auto;text-align:center;font-size:.95rem;padding:12px 22px}
|
||||
.gc:not(.hot) .btn{border:1.5px solid var(--ink);color:var(--ink)}
|
||||
.gc:not(.hot) .btn:hover{background:var(--ink);color:#fff}
|
||||
.gc.hot .btn{background:var(--accent);color:#fff}
|
||||
.hotbadge{position:absolute;top:26px;right:26px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;padding:5px 13px;border-radius:99px;letter-spacing:.05em;animation:bpulse 2.4s ease-in-out infinite}
|
||||
@keyframes bpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
|
||||
.allin{max-width:1100px;margin:0 auto;padding:0 24px;color:var(--muted);font-size:.88rem}
|
||||
|
||||
.faq{padding:120px 24px;text-align:center}
|
||||
.fwrap{max-width:740px;margin:50px auto 0;text-align:left}
|
||||
details{border-bottom:1px solid var(--line);padding:24px 4px}
|
||||
details:first-of-type{border-top:1px solid var(--line)}
|
||||
summary{display:flex;align-items:center;font-weight:600;font-size:1.05rem;cursor:pointer;list-style:none;transition:color .2s}
|
||||
summary:hover{color:var(--accent)}
|
||||
summary::-webkit-details-marker{display:none}
|
||||
summary::after{content:"+";margin-left:auto;font-size:1.6rem;font-weight:300;color:var(--accent);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
|
||||
details[open] summary::after{transform:rotate(135deg)}
|
||||
details p{color:var(--muted);line-height:1.65;padding:16px 4px 6px;font-size:.96rem;animation:up .5s cubic-bezier(.2,.7,.2,1)}
|
||||
|
||||
.cta{padding:130px 24px;text-align:center;background:linear-gradient(160deg,#fff7f0,#fff);position:relative;overflow:hidden}
|
||||
.cta>:not(.orb){position:relative;z-index:1}
|
||||
.cta .orb{opacity:.4}
|
||||
footer{background:var(--bg2);padding:44px 24px;font-size:.82rem;color:var(--muted)}
|
||||
.fo{max-width:1100px;margin:0 auto;display:flex;gap:14px 30px;flex-wrap:wrap;align-items:center}
|
||||
.fo .right{margin-left:auto;display:flex;gap:22px}
|
||||
.fo a:hover{color:var(--ink)}
|
||||
|
||||
.featrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:860px;margin:44px auto 0}
|
||||
.featrow span{background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 17px;font-size:.86rem;font-weight:500;box-shadow:0 3px 12px rgba(0,0,0,.04);transition:transform .25s,border-color .25s,box-shadow .25s}
|
||||
.featrow span:hover{transform:translateY(-3px) scale(1.03);border-color:var(--accent);box-shadow:0 10px 24px rgba(249,115,22,.14)}
|
||||
.modline{margin:22px auto 0;color:var(--muted);font-size:.9rem;max-width:720px;line-height:1.6}
|
||||
.modline b{color:var(--ink)}
|
||||
|
||||
.who4{padding:120px 24px;text-align:center;background:#fff}
|
||||
.type{color:var(--accent);border-right:3px solid var(--accent);padding-right:6px;white-space:nowrap}
|
||||
.type.blink{animation:caret 1s steps(1) infinite}
|
||||
@keyframes caret{50%{border-color:transparent}}
|
||||
|
||||
.how{padding:130px 24px;background:var(--bg2);text-align:center}
|
||||
.tl{max-width:1000px;margin:76px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;text-align:left}
|
||||
.tline{position:absolute;top:27px;left:9%;right:9%;height:2px;background:#dcdce1;z-index:0;border-radius:99px;overflow:hidden}
|
||||
.tline i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1.8s .2s cubic-bezier(.2,.7,.2,1)}
|
||||
.tl.in .tline i{width:100%}
|
||||
.tstep{position:relative;z-index:1;padding:0 12px}
|
||||
.tnum{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid #dcdce1;display:grid;place-items:center;font-weight:700;font-size:1.1rem;color:var(--muted);margin-bottom:18px;transform:scale(.4);opacity:0;transition:all .55s cubic-bezier(.2,.6,.3,1.5)}
|
||||
.tl.in .tnum{transform:scale(1);opacity:1;border-color:var(--accent);color:var(--accent);box-shadow:0 10px 26px rgba(249,115,22,.2)}
|
||||
.tl.in .tstep:nth-child(3) .tnum{transition-delay:.55s}
|
||||
.tl.in .tstep:nth-child(4) .tnum{transition-delay:1.1s}
|
||||
.tstep h3{font-size:1.12rem;letter-spacing:-.01em;margin-bottom:8px}
|
||||
.tstep p{color:var(--muted);font-size:.93rem;line-height:1.55}
|
||||
@media(max-width:820px){.tl{grid-template-columns:1fr;gap:34px}.tline{display:none}}
|
||||
|
||||
.golive{max-width:540px;margin:70px auto 0;background:#fff;border-radius:26px;padding:32px 34px;box-shadow:0 24px 64px rgba(0,0,0,.09);text-align:left}
|
||||
.golive h3{font-size:1.05rem;margin-bottom:6px}
|
||||
.golive>p{color:var(--muted);font-size:.85rem;margin-bottom:14px}
|
||||
.gl{display:flex;gap:13px;align-items:center;padding:10px 0;font-size:.94rem;opacity:.3;transition:opacity .45s}
|
||||
.gl .gck{width:23px;height:23px;border-radius:50%;border:1.5px solid #dcdce1;flex:none;display:grid;place-items:center;transition:all .35s cubic-bezier(.2,.6,.3,1.5)}
|
||||
.gl.on{opacity:1}
|
||||
.gl.on .gck{background:#30b15c;border-color:#30b15c;transform:scale(1.05)}
|
||||
.gl.on .gck::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-1px)}
|
||||
.gl time{margin-left:auto;font-family:ui-monospace,monospace;font-size:.74rem;color:var(--muted)}
|
||||
.gdone{margin-top:16px;text-align:center;font-weight:700;color:#30b15c;font-size:.95rem;opacity:0;transform:scale(.85);transition:all .5s cubic-bezier(.2,.6,.3,1.4)}
|
||||
.gdone.on{opacity:1;transform:none}
|
||||
|
||||
.cmp{padding:130px 24px;text-align:center;background:#fff}
|
||||
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1020px;margin:64px auto 0;text-align:left;align-items:stretch}
|
||||
@media(max-width:860px){.cgrid{grid-template-columns:1fr}}
|
||||
.cc{border:1px solid var(--line);border-radius:24px;padding:30px 28px;background:#fff;transition:transform .35s,box-shadow .35s}
|
||||
.cc:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.08)}
|
||||
.cc.winr{border:2px solid var(--accent);box-shadow:0 26px 64px rgba(249,115,22,.16);position:relative}
|
||||
.cc.winr::before{content:"Unsere Empfehlung";position:absolute;top:-13px;left:26px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;padding:5px 13px;border-radius:99px;letter-spacing:.04em}
|
||||
.cc h3{font-size:1.08rem;margin-bottom:4px}
|
||||
.cc .cs{font-size:.8rem;color:var(--muted);margin-bottom:18px}
|
||||
.cc ul{list-style:none}
|
||||
.cc li{display:flex;gap:10px;padding:8px 0;font-size:.88rem;line-height:1.4;align-items:flex-start;opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s}
|
||||
.cc.in li{opacity:1;transform:none}
|
||||
.cc.in li:nth-child(1){transition-delay:.1s}.cc.in li:nth-child(2){transition-delay:.22s}
|
||||
.cc.in li:nth-child(3){transition-delay:.34s}.cc.in li:nth-child(4){transition-delay:.46s}
|
||||
.cc li b{font-weight:700;flex:none;width:18px;text-align:center}
|
||||
.neg b{color:#d70015}.pos b{color:#30b15c}
|
||||
|
||||
.rv{opacity:0;transform:translateY(44px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
|
||||
.rv.in{opacity:1;transform:none;filter:none}
|
||||
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}
|
||||
@media(prefers-reduced-motion:reduce){
|
||||
.rv{opacity:1;transform:none;filter:none}
|
||||
.mock{transform:none!important}
|
||||
/* entrance animations are disabled above, so pin these to their final visible state */
|
||||
.pill,h1 .w,h1 .grad,.sub,.ctas,.scroll-hint,.gl{opacity:1!important;transform:none!important}
|
||||
}
|
||||
</style>
|
||||
@endverbatim
|
||||
{{-- Without JS the scroll-reveal elements never get revealed — show them. --}}
|
||||
<noscript><style>.rv,.cc li,.tnum,.gl{opacity:1!important;transform:none!important}.mock{transform:none!important}</style></noscript>
|
||||
</head>
|
||||
<body>
|
||||
<div id="progress" aria-hidden="true"></div>
|
||||
|
||||
<nav id="nav">
|
||||
<div class="nv">
|
||||
<a class="brand" href="#top">Clu<em>Pilot</em> Cloud</a>
|
||||
<div class="nl">
|
||||
<a href="#produkt">Produkt</a><a href="#sicherheit">Sicherheit</a><a href="#pakete">Pakete</a><a href="#faq">FAQ</a>
|
||||
</div>
|
||||
<a class="nlogin" href="{{ route('login') }}">Anmelden</a>
|
||||
<a class="ncta" href="#pakete">Jetzt starten</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="hero" id="top">
|
||||
<div class="orb o1"></div><div class="orb o2"></div>
|
||||
<div class="pill">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 2 3 7v6c0 5 4 8 9 9 5-1 9-4 9-9V7l-9-5z"/></svg>
|
||||
EU-Serverstandort · AV-Vertrag inklusive · Persönlich betreut aus Österreich
|
||||
</div>
|
||||
<h1>
|
||||
<span class="w" style="animation-delay:.15s">Ihre</span>
|
||||
<span class="w" style="animation-delay:.25s">firmeneigene</span>
|
||||
<span class="w" style="animation-delay:.35s">Cloud.</span><br>
|
||||
<span class="w grad" style="animation-delay:.55s">Ohne eigene IT.</span>
|
||||
</h1>
|
||||
<p class="sub">Sichere Dateiablage und Zusammenarbeit für Ihr Unternehmen — fertig eingerichtet, täglich gesichert, persönlich betreut.</p>
|
||||
<div class="ctas">
|
||||
<a class="btn bf" href="#pakete">Pakete ansehen</a>
|
||||
<a class="btn bl" href="#kontakt">Beratung anfragen ›</a>
|
||||
</div>
|
||||
<div class="scroll-hint">Scrollen</div>
|
||||
</header>
|
||||
|
||||
<div class="marq" aria-hidden="true">
|
||||
<div class="mtrack" id="mtrack">
|
||||
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>AV-Vertrag inklusive</span>
|
||||
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Tägliche verschlüsselte Backups</span>
|
||||
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Monatlicher Wiederherstellungstest</span>
|
||||
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Eigene isolierte Instanz</span>
|
||||
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Serverstandort EU</span>
|
||||
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Support auf Deutsch</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="who4">
|
||||
<p class="k rv">Für wen?</p>
|
||||
<h2 class="rv">Gebaut für <span class="type blink" id="type">Steuerberater.</span></h2>
|
||||
<p class="lead rv d1">Eine Cloud, die sich Ihrer Branche anpasst — nicht umgekehrt. Mit Ordnerstrukturen, Zugriffsrechten und Vorlagen, die zu Ihrem Arbeitsalltag passen, statt zu einem Silicon-Valley-Baukasten.</p>
|
||||
</section>
|
||||
|
||||
<section class="zoomsec" id="produkt">
|
||||
<p class="k rv">Das Produkt</p>
|
||||
<h2 class="rv">Eine Cloud, die sich anfühlt<br>wie Ihre eigene Software.</h2>
|
||||
<p class="lead rv d1">Ihr Logo, Ihre Domain, Ihre Ordnerstruktur — von uns eingerichtet, von Ihrem Team ab Tag eins benutzt.</p>
|
||||
|
||||
<div class="mock" id="mock" aria-hidden="true">
|
||||
<div class="win">
|
||||
<div class="wbar">
|
||||
<span class="wdot" style="background:#ff5f57"></span>
|
||||
<span class="wdot" style="background:#febc2e"></span>
|
||||
<span class="wdot" style="background:#28c840"></span>
|
||||
<div class="wurl">cloud.kanzlei-berger.at</div>
|
||||
</div>
|
||||
<div class="wbody">
|
||||
<div class="wcard">
|
||||
<small>Ihre Instanz</small>
|
||||
<div class="wrow">
|
||||
<div class="wlogo">B</div>
|
||||
<div><b>Cloud der Kanzlei Berger</b><small style="color:var(--muted);font-size:.76rem">EU-Rechenzentrum · Alle Dienste aktiv</small></div>
|
||||
</div>
|
||||
<div class="wbar2"><i></i></div>
|
||||
<div style="display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);margin-top:7px"><span>Speicher</span><span>235 / 500 GB</span></div>
|
||||
</div>
|
||||
<div class="wcard">
|
||||
<small>Heute erledigt</small>
|
||||
<div class="wlist">
|
||||
<div class="wli"><span class="ok">✓</span>Backup 03:12 — verschlüsselt & geprüft</div>
|
||||
<div class="wli"><span class="ok">✓</span>Sicherheitsupdates eingespielt</div>
|
||||
<div class="wli"><span class="ok">✓</span>8 Benutzer synchronisiert</div>
|
||||
<div class="wli"><span class="ok">✓</span>Verfügbarkeit: 99,98 %</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="featrow rv" aria-label="Enthaltene Funktionen">
|
||||
<span>Dateien & Sync auf allen Geräten</span>
|
||||
<span>Office im Browser (gemeinsam bearbeiten)</span>
|
||||
<span>Kalender, Kontakte & Aufgaben</span>
|
||||
<span>Talk — Videocalls & Chat</span>
|
||||
<span>Geschützte Freigabe-Links mit Ablaufdatum</span>
|
||||
<span>Versionierung & Papierkorb</span>
|
||||
</div>
|
||||
<p class="modline rv">Zubuchbare Module: <b>Vaultwarden</b> (Team-Passwörter, ab 19 €/Monat) · <b>Paperless-ngx</b> (digitales Dokumentenarchiv, ab 39 €/Monat) · <b>digitale Signatur</b> (ab 29 €/Monat, in Vorbereitung)</p>
|
||||
</section>
|
||||
|
||||
<section class="how" id="ablauf">
|
||||
<p class="k rv">So funktioniert's</p>
|
||||
<h2 class="rv">Von der Bestellung zur laufenden Cloud.<br>Ohne dass Sie etwas tun müssen.</h2>
|
||||
<p class="lead rv d1">Drei Schritte — nur der erste ist Ihrer.</p>
|
||||
|
||||
<div class="tl rv" id="timeline">
|
||||
<div class="tline"><i></i></div>
|
||||
<div class="tstep">
|
||||
<div class="tnum">1</div>
|
||||
<h3>Paket wählen</h3>
|
||||
<p>Sie wählen online das Paket für Ihre Branche und Teamgröße — dauert zwei Minuten. Ihre Instanz startet automatisch und ist wenige Minuten später erreichbar.</p>
|
||||
</div>
|
||||
<div class="tstep">
|
||||
<div class="tnum">2</div>
|
||||
<h3>Wir richten alles ein</h3>
|
||||
<p>Benutzer und Zugriffsrechte, Ordnerstruktur nach Branchenvorlage, Ihr Logo und Ihre Domain — alles in der Einrichtung inklusive. Auf Wunsch übernehmen wir zusätzlich Ihre Bestandsdaten aus Dropbox oder vom alten Server (ab 390 €).</p>
|
||||
</div>
|
||||
<div class="tstep">
|
||||
<div class="tnum">3</div>
|
||||
<h3>Loslegen mit Einschulung</h3>
|
||||
<p>45 Minuten Einschulung für Ihr Team per Video-Call, Kurzanleitung als PDF mit Ihren Screenshots — und ab dann läuft es einfach. Bei Fragen: anrufen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="golive rv" id="golive">
|
||||
<h3>Live mitverfolgen: Ihre Cloud entsteht</h3>
|
||||
<p>So sieht es in Ihrem Dashboard aus, während wir einrichten:</p>
|
||||
<div class="gl"><span class="gck"></span>Instanz erstellt & gestartet<time>0:40 min</time></div>
|
||||
<div class="gl"><span class="gck"></span>Verschlüsselung & Firewall aktiv<time>1:10 min</time></div>
|
||||
<div class="gl"><span class="gck"></span>Domain verbunden, SSL-Zertifikat ausgestellt<time>2:30 min</time></div>
|
||||
<div class="gl"><span class="gck"></span>Erstes Backup angelegt & geprüft<time>4:15 min</time></div>
|
||||
<div class="gl"><span class="gck"></span>Ihr Logo & Ihre Farben hinterlegt<time>5:00 min</time></div>
|
||||
<div class="gdone" id="gdone">✓ Ihre Cloud ist online — nach unter 20 Minuten</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dark" id="sicherheit">
|
||||
<div class="glow"></div>
|
||||
<p class="k rv">Sicherheit & Compliance</p>
|
||||
<h2 class="rv">Sicherheit, die Sie<br>belegen können.</h2>
|
||||
<p class="lead rv d1">Sicherheit ist kein Zusatzpaket. Sie ist der Grund, warum es uns gibt.</p>
|
||||
<div class="dgrid">
|
||||
<div class="dc rv"><div class="dic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div><h3>Eigene isolierte Instanz</h3><p>Ihre Cloud läuft in einer eigenen virtuellen Maschine — strikt getrennt von allen anderen Kunden.</p></div>
|
||||
<div class="dc rv d1"><div class="dic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 3 7v6c0 5 4 8 9 9 5-1 9-4 9-9V7l-9-5z"/><path d="M9 12l2 2 4-4"/></svg></div><h3>Geprüfte Backups</h3><p>Täglich, clientseitig verschlüsselt, getrennt gelagert — und jeden Monat testweise wiederhergestellt.</p></div>
|
||||
<div class="dc rv d2"><div class="dic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 4 5.7 4 9s-1.5 6.4-4 9c-2.5-2.6-4-5.7-4-9s1.5-6.4 4-9z"/></svg></div><h3>Serverstandort EU</h3><p>Kein Datentransfer in Drittländer, keine US-Cloud-Abhängigkeit. Ihre Daten bleiben in Europa.</p></div>
|
||||
<div class="dc rv d3"><div class="dic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/><path d="M14 2v6h6M9 15l2 2 4-4"/></svg></div><h3>Dokumentationsmappe</h3><p>AV-Vertrag, technische und organisatorische Maßnahmen, Backup- und Restore-Nachweise — standardisiert aufbereitet für Ihre internen Nachweise.</p></div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="st rv"><b data-c="99.95" data-d="2">99,95</b><small>% Verfügbarkeit (12 Monate)</small></div>
|
||||
<div class="st rv d1"><b data-c="365">365</b><small>Backups pro Jahr — jedes geprüft</small></div>
|
||||
<div class="st rv d2"><b data-c="20">20</b><small>Minuten bis zur laufenden Instanz</small></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cmp">
|
||||
<p class="k rv">Der ehrliche Vergleich</p>
|
||||
<h2 class="rv">Warum nicht einfach…?</h2>
|
||||
<p class="lead rv d1">Die Frage ist berechtigt. Hier die Antwort — ohne Marketing-Nebel.</p>
|
||||
<div class="cgrid">
|
||||
<div class="cc rv">
|
||||
<h3>…US-Cloud behalten?</h3>
|
||||
<div class="cs">Dropbox, OneDrive & Co.</div>
|
||||
<ul>
|
||||
<li class="neg"><b>✕</b>Daten liegen bei US-Konzernen — Drittland-Transfer als Dauerbaustelle für Ihre DSGVO-Dokumentation</li>
|
||||
<li class="neg"><b>✕</b>Preis pro Benutzer — wächst Ihr Team, wächst die Rechnung</li>
|
||||
<li class="neg"><b>✕</b>Support: Ticketsystem in Übersee</li>
|
||||
<li class="pos"><b>✓</b>Bequem — solange niemand nachfragt</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cc rv d1">
|
||||
<h3>…einen eigenen Server?</h3>
|
||||
<div class="cs">Selbst hosten im Keller oder Rechenzentrum</div>
|
||||
<ul>
|
||||
<li class="pos"><b>✓</b>Volle Kontrolle über alles</li>
|
||||
<li class="neg"><b>✕</b>Updates, Sicherheit, Backups, Ausfälle: Ihr Problem — auch am Wochenende</li>
|
||||
<li class="neg"><b>✕</b>Braucht echtes IT-Wissen im Haus, dauerhaft</li>
|
||||
<li class="neg"><b>✕</b>Ein vergessenes Update kann alles kosten</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cc winr rv d2">
|
||||
<h3>CluPilot Cloud</h3>
|
||||
<div class="cs">Ihre eigene Cloud, von uns betrieben</div>
|
||||
<ul>
|
||||
<li class="pos"><b>✓</b>Eigene isolierte Instanz, Serverstandort EU, AV-Vertrag inklusive</li>
|
||||
<li class="pos"><b>✓</b>Fixer Firmenpreis — egal wie viele Köpfe dazukommen</li>
|
||||
<li class="pos"><b>✓</b>Wir warten, sichern und überwachen — nachweislich, mit monatlichem Restore-Test</li>
|
||||
<li class="pos"><b>✓</b>Persönlicher Support auf Deutsch, am selben Werktag</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="gal" id="pakete">
|
||||
<div class="gh">
|
||||
<div>
|
||||
<p class="k rv">Pakete & Preise</p>
|
||||
<h2 class="rv">Ein fixer Preis pro Firma.<br>Nicht pro Kopf.</h2>
|
||||
</div>
|
||||
<div class="gnav rv">
|
||||
<button class="gbtn" onclick="rail(-1)" aria-label="Zurück"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M15 18l-6-6 6-6"/></svg></button>
|
||||
<button class="gbtn" onclick="rail(1)" aria-label="Weiter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rail" id="rail">
|
||||
<article class="gc rv">
|
||||
<span class="who">Start</span>
|
||||
<h3>Für kleine Teams</h3>
|
||||
<div class="pr">99 €<small>/Monat</small></div>
|
||||
<div class="set">zzgl. Einrichtung „Sorglos-Start" 490–690 € einmalig</div>
|
||||
<ul>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Für Teams bis ca. 8 aktive Benutzer</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>100 GB Speicher (jederzeit erweiterbar), eigene Domain & Ihr Branding</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Dateien, Office im Browser, Kalender, Kontakte, Aufgaben, Talk</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Tägliche verschlüsselte Backups, Updates & Monitoring</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>AV-Vertrag & Doku-Mappe, persönlicher Support</li>
|
||||
</ul>
|
||||
<a class="btn" href="#kontakt">Start wählen</a>
|
||||
</article>
|
||||
|
||||
<article class="gc hot rv d1">
|
||||
<span class="hotbadge">Beliebt</span>
|
||||
<span class="who">Team</span>
|
||||
<h3>Für wachsende Teams</h3>
|
||||
<div class="pr">179 €<small>/Monat</small></div>
|
||||
<div class="set">zzgl. Einrichtung „Sorglos-Start" 490–690 € einmalig</div>
|
||||
<ul>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Alles aus Start — mit 500 GB Speicher</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Für Teams bis ca. 20 aktive Benutzer</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Einschulung für das gesamte Team inklusive</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Ordnerstruktur & Rechte nach Branchenvorlage</li>
|
||||
</ul>
|
||||
<a class="btn" href="#kontakt">Team wählen</a>
|
||||
</article>
|
||||
|
||||
<article class="gc rv d2">
|
||||
<span class="who">Business</span>
|
||||
<h3>Für dokumentenlastige Betriebe</h3>
|
||||
<div class="pr">249 €<small>/Monat</small></div>
|
||||
<div class="set">zzgl. Einrichtung „Sorglos-Start" 490–690 € einmalig</div>
|
||||
<ul>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Alles aus Team — mit 1 TB Speicher</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Für Teams bis ca. 40 aktive Benutzer</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Prioritäts-Support mit bevorzugter Reaktionszeit</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Datenmigration aus Alt-Systemen ab 390 € einmalig</li>
|
||||
</ul>
|
||||
<a class="btn" href="#kontakt">Business wählen</a>
|
||||
</article>
|
||||
|
||||
<article class="gc rv d3">
|
||||
<span class="who">Enterprise</span>
|
||||
<h3>Individuell für Ihr Unternehmen</h3>
|
||||
<div class="pr">ab 399 €<small>/Monat</small></div>
|
||||
<div class="set">Umfang, Einrichtung & SLA nach Vereinbarung</div>
|
||||
<ul>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Speicher, Benutzer & Ressourcen nach Bedarf</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Zusatzmodule wie Documenso (digitale Unterschriften)</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Vereinbarte Reaktionszeiten (SLA) & fester Ansprechpartner</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg>Individuelle Anbindung an Ihre bestehenden Abläufe</li>
|
||||
</ul>
|
||||
<a class="btn" href="#kontakt">Gespräch vereinbaren</a>
|
||||
</article>
|
||||
</div>
|
||||
<p class="allin rv">Alle Pakete: tägliche verschlüsselte Backups mit monatlichem Wiederherstellungstest · Updates & Monitoring · AV-Vertrag & TOMs · persönlicher Support auf Deutsch<br>Zusatzspeicher: 100 GB ab 10 €/Monat · Zusatzmodule: Vaultwarden ab 19 €, Paperless-ngx ab 39 €, digitale Signatur ab 29 €/Monat</p>
|
||||
</section>
|
||||
|
||||
<section class="faq" id="faq">
|
||||
<p class="k rv">Häufige Fragen</p>
|
||||
<h2 class="rv">Klare Antworten,<br>bevor Sie fragen müssen.</h2>
|
||||
<div class="fwrap rv">
|
||||
<details><summary>Was passiert mit unseren Daten, wenn wir kündigen?</summary><p>Sie erhalten vor Vertragsende einen vollständigen Export in Standardformaten. Ihre Cloud basiert auf Open-Source-Software — Sie sind nie eingesperrt. Nach Übergabe löschen wir Instanz und Backups nachweislich.</p></details>
|
||||
<details><summary>Ersetzt das Microsoft 365?</summary><p>Es ergänzt oder ersetzt den Datei-Teil. Viele Kunden behalten Microsoft für E-Mail und nutzen die Cloud als sichere zentrale Ablage statt OneDrive/Dropbox — zum fixen Firmenpreis statt pro Benutzer.</p></details>
|
||||
<details><summary>Wie lange dauert die Einrichtung und was kostet sie?</summary><p>Ihre Instanz läuft wenige Minuten nach der Bestellung. Die vollständige Einrichtung (490–690 € je nach Umfang) umfasst Benutzer und Rechte, Ordnerstruktur nach Branchenvorlage, Ihr Logo und Ihre Domain sowie die Einschulung Ihres Teams — abgeschlossen in 3–7 Werktagen. Die Übernahme Ihrer Bestandsdaten aus Dropbox, OneDrive oder vom alten Server bieten wir ab 390 € an, inklusive schriftlichem Übernahmeprotokoll.</p></details>
|
||||
<details><summary>Was, wenn jemand versehentlich Dateien löscht?</summary><p>Papierkorb plus tägliche Backups mit 30 Tagen Aufbewahrung. Ein Anruf genügt — wir stellen den gewünschten Stand wieder her.</p></details>
|
||||
<details><summary>Brauchen wir eigene IT-Kenntnisse?</summary><p>Nein. Bedienen kann es jeder, der Ordner und Dateien kennt — dafür gibt es die Einschulung. Alles Technische übernehmen wir dauerhaft.</p></details>
|
||||
<details><summary>Mit wem spreche ich bei Fragen?</summary><p>Mit uns direkt — E-Mail oder Telefon, auf Deutsch, Antwort am selben Werktag. Kein Callcenter.</p></details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta" id="kontakt">
|
||||
<div class="orb o1" style="top:auto;bottom:-260px;left:-180px"></div>
|
||||
<h2 class="rv">Wen rufen Sie heute an, wenn<br>Montagfrüh ein Ordner fehlt?</h2>
|
||||
<p class="lead rv d1">Genau dafür gibt es uns. Unverbindliches Erstgespräch — in 20 Minuten wissen Sie, welches Paket passt und wie Ihre Daten sicher umziehen.</p>
|
||||
<div class="ctas rv d2" style="opacity:1;animation:none;justify-content:center">
|
||||
<a class="btn bf" href="mailto:office@clupilot.com">Beratung anfragen</a>
|
||||
<a class="btn bl" href="#pakete">Pakete vergleichen ›</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="fo">
|
||||
<span style="color:var(--ink);font-weight:700">Clu<em style="font-style:normal;color:var(--accent)">Pilot</em> Cloud</span>
|
||||
<span>© 2026 · Österreich</span>
|
||||
<div class="right"><a href="{{ route('legal.impressum') }}">Impressum</a><a href="{{ route('legal.datenschutz') }}">Datenschutz</a><a href="{{ route('legal.agb') }}">AGB</a><a href="{{ route('legal.status') }}">Status</a></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@verbatim
|
||||
<script>
|
||||
const reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
|
||||
|
||||
const mt=document.getElementById('mtrack');
|
||||
mt.innerHTML+=mt.innerHTML;
|
||||
|
||||
const nav=document.getElementById('nav'),prog=document.getElementById('progress'),mock=document.getElementById('mock');
|
||||
function onScroll(){
|
||||
nav.classList.toggle('sc',scrollY>10);
|
||||
const h=document.documentElement;
|
||||
prog.style.width=(scrollY/(h.scrollHeight-h.clientHeight)*100)+'%';
|
||||
if(mock&&!reduce){
|
||||
const r=mock.getBoundingClientRect(),vh=innerHeight;
|
||||
const p=Math.min(Math.max((vh-r.top)/(vh*0.75),0),1);
|
||||
const s=.82+.18*p, y=40*(1-p), rx=6*(1-p);
|
||||
mock.style.transform=`perspective(1000px) scale(${s}) translateY(${y}px) rotateX(${rx}deg)`;
|
||||
}
|
||||
}
|
||||
addEventListener('scroll',onScroll,{passive:true});onScroll();
|
||||
|
||||
const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.12});
|
||||
document.querySelectorAll('.rv').forEach(el=>io.observe(el));
|
||||
|
||||
const cio=new IntersectionObserver(es=>es.forEach(e=>{
|
||||
if(!e.isIntersecting)return;cio.unobserve(e.target);
|
||||
const el=e.target,t=parseFloat(el.dataset.c),d=parseInt(el.dataset.d||0);
|
||||
const fmt=v=>v.toFixed(d).replace('.',',');
|
||||
if(reduce){el.textContent=fmt(t);return}
|
||||
const t0=performance.now();
|
||||
(function tick(ts){const p=Math.min((ts-t0)/1500,1);el.textContent=fmt(t*(1-Math.pow(1-p,3)));if(p<1)requestAnimationFrame(tick)})(t0);
|
||||
}),{threshold:.6});
|
||||
document.querySelectorAll('[data-c]').forEach(el=>cio.observe(el));
|
||||
|
||||
function rail(dir){document.getElementById('rail').scrollBy({left:dir*424,behavior:'smooth'})}
|
||||
window.rail=rail;
|
||||
|
||||
if(!reduce&&matchMedia('(pointer:fine)').matches){
|
||||
document.querySelectorAll('.gc').forEach(c=>{
|
||||
c.addEventListener('mousemove',e=>{
|
||||
const r=c.getBoundingClientRect(),x=(e.clientX-r.left)/r.width-.5,y=(e.clientY-r.top)/r.height-.5;
|
||||
c.style.transform=`translateY(-10px) scale(1.015) rotateX(${-y*7}deg) rotateY(${x*8}deg)`;
|
||||
});
|
||||
c.addEventListener('mouseleave',()=>c.style.transform='');
|
||||
});
|
||||
}
|
||||
|
||||
const words=['Steuerberater.','Anwälte.','Ärzte.','Therapeuten.','Handwerksbetriebe.','Architekten.','Immobilienbüros.','Vereine.','KMU.'];
|
||||
const typeEl=document.getElementById('type');
|
||||
if(typeEl&&!reduce){
|
||||
let wi=0,ci=words[0].length,del=true;
|
||||
(function loop(){
|
||||
const w=words[wi];
|
||||
if(del){ci--;typeEl.textContent=w.slice(0,ci);if(ci===0){del=false;wi=(wi+1)%words.length}}
|
||||
else{ci++;typeEl.textContent=words[wi].slice(0,ci);if(ci===words[wi].length){del=true;setTimeout(loop,1900);return}}
|
||||
setTimeout(loop,del?45:85);
|
||||
})();
|
||||
}
|
||||
|
||||
const gol=document.getElementById('golive');
|
||||
if(gol){
|
||||
const gio=new IntersectionObserver(es=>es.forEach(e=>{
|
||||
if(!e.isIntersecting)return;gio.unobserve(gol);
|
||||
const items=gol.querySelectorAll('.gl');
|
||||
items.forEach((it,i)=>setTimeout(()=>it.classList.add('on'),reduce?0:500+i*650));
|
||||
setTimeout(()=>document.getElementById('gdone').classList.add('on'),reduce?0:500+items.length*650+300);
|
||||
}),{threshold:.4});
|
||||
gio.observe(gol);
|
||||
}
|
||||
|
||||
const orbs=document.querySelectorAll('.hero .orb');
|
||||
if(!reduce)addEventListener('scroll',()=>{
|
||||
orbs.forEach((o,i)=>o.style.marginTop=(scrollY*(i?-.12:.18))+'px');
|
||||
},{passive:true});
|
||||
</script>
|
||||
@endverbatim
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ $title }} — CluPilot Cloud</title>
|
||||
@verbatim
|
||||
<style>
|
||||
:root{--accent:#f97316;--ink:#1d1d1f;--muted:#86868b;--bg:#f5f5f7;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
|
||||
*{margin:0;box-sizing:border-box}
|
||||
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;display:grid;place-items:center;padding:24px}
|
||||
main{max-width:600px;text-align:center}
|
||||
a{color:var(--accent);text-decoration:none}
|
||||
a:hover{text-decoration:underline}
|
||||
.k{color:#f97316;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;margin-bottom:8px}
|
||||
h1{font-size:2rem;letter-spacing:-.02em;margin-bottom:12px}
|
||||
p{color:var(--muted);line-height:1.6;margin-bottom:8px}
|
||||
.back{display:inline-block;margin-top:24px;background:var(--accent);color:#fff;padding:10px 22px;border-radius:99px;font-weight:600}
|
||||
.back:hover{text-decoration:none;background:#ea6a0a}
|
||||
</style>
|
||||
@endverbatim
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<p class="k">CluPilot Cloud</p>
|
||||
<h1>{{ $title }}</h1>
|
||||
<p>Dieser Inhalt wird noch ergänzt.</p>
|
||||
<p>Bei Fragen erreichen Sie uns unter <a href="mailto:office@clupilot.com">office@clupilot.com</a>.</p>
|
||||
<a class="back" href="{{ route('home') }}">Zurück zur Startseite</a>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -11,7 +11,15 @@ use App\Livewire\Support;
|
|||
use App\Livewire\Users;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/', fn () => view('welcome'))->name('home');
|
||||
Route::get('/', fn () => view('landing'))->name('home');
|
||||
|
||||
// Public legal pages (placeholders — replace with real content before launch).
|
||||
Route::prefix('legal')->name('legal.')->group(function () {
|
||||
Route::get('/impressum', fn () => view('legal', ['title' => 'Impressum']))->name('impressum');
|
||||
Route::get('/datenschutz', fn () => view('legal', ['title' => 'Datenschutz']))->name('datenschutz');
|
||||
Route::get('/agb', fn () => view('legal', ['title' => 'AGB']))->name('agb');
|
||||
Route::get('/status', fn () => view('legal', ['title' => 'Status']))->name('status');
|
||||
});
|
||||
|
||||
// Guest auth pages — full-page class-based Livewire components (R1/R2). Fortify
|
||||
// handles the POST actions (login.store, two-factor.login.store) with views off.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<?php
|
||||
|
||||
it('renders the welcome page with a sign-in link once login exists', function () {
|
||||
it('renders the public landing page with a sign-in link', function () {
|
||||
$this->get('/')
|
||||
->assertOk()
|
||||
->assertSee('CluPilot')
|
||||
->assertSee('firmeneigene Cloud')
|
||||
->assertSee(route('login'), false);
|
||||
});
|
||||
|
||||
it('renders the legal placeholder pages', function (string $route) {
|
||||
$this->get(route($route))->assertOk()->assertSee('CluPilot');
|
||||
})->with(['legal.impressum', 'legal.datenschutz', 'legal.agb', 'legal.status']);
|
||||
|
|
|
|||
Loading…
Reference in New Issue