feat: add landing page components including FAQ, features, footer, header, hero, modalities, steps, and section title

2026-09-21 04:32:59 +03:30
parent 1e599b917b
commit 5f19f82f86
41 changed files with 1518 additions and 84 deletions
@@ -0,0 +1,195 @@
+@keyframes landing-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-12px); }
+}
+
+@keyframes landing-scan {
+    0% { top: 0; opacity: 0; }
+    8% { opacity: 1; }
+    92% { opacity: 1; }
+    100% { top: 100%; opacity: 0; }
+}
+
+@keyframes landing-pulse {
+    0% { transform: scale(0.9); opacity: 0.8; }
+    100% { transform: scale(1.7); opacity: 0; }
+}
+
+@keyframes landing-blob {
+    0%, 100% { border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; }
+    50% { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; }
+}
+
+@keyframes landing-kenburns {
+    from { transform: scale(1); }
+    to { transform: scale(1.08); }
+}
+
+@keyframes landing-spin {
+    to { transform: rotate(360deg); }
+}
+
+@keyframes landing-marquee {
+    from { transform: translateX(0); }
+    to { transform: translateX(50%); }
+}
+
+@keyframes landing-draw {
+    to { stroke-dashoffset: 0; }
+}
+
+@keyframes landing-timeline {
+    0%, 12% { opacity: 0.35; }
+    18%, 100% { opacity: 1; }
+}
+
+@keyframes landing-toggle {
+    0%, 40% { transform: translateX(0); }
+    50%, 90% { transform: translateX(-100%); }
+    100% { transform: translateX(0); }
+}
+
+@keyframes landing-bubble {
+    0% { opacity: 0; transform: translateY(12px) scale(0.96); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.landing-page {
+    background-image: radial-gradient(rgba(128, 14, 19, 0.08) 1px, transparent 1px);
+    background-size: 28px 28px;
+}
+
+.landing-grid {
+    background-image: linear-gradient(#DEE3EB 1px, transparent 1px), linear-gradient(90deg, #DEE3EB 1px, transparent 1px);
+    background-size: 32px 32px;
+}
+
+.landing-float {
+    animation: landing-float 6s ease-in-out infinite;
+}
+
+.landing-float--delay {
+    animation-delay: 1.6s;
+}
+
+.landing-scan {
+    animation: landing-scan 3.6s ease-in-out infinite;
+}
+
+.landing-pulse::after {
+    content: '';
+    @apply absolute inset-0 rounded-full border-2 border-complement-700;
+    animation: landing-pulse 2.2s ease-out infinite;
+}
+
+.landing-blob {
+    animation: landing-blob 14s ease-in-out infinite;
+}
+
+.landing-kenburns {
+    animation: landing-kenburns 24s ease-out forwards;
+}
+
+.landing-spin svg {
+    animation: landing-spin 18s linear infinite;
+}
+
+.landing-marquee {
+    animation: landing-marquee 32s linear infinite;
+}
+
+.landing-marquee:hover {
+    animation-play-state: paused;
+}
+
+.landing-underline path {
+    stroke-dasharray: 320;
+    stroke-dashoffset: 320;
+    animation: landing-draw 1.1s ease-out 0.5s forwards;
+}
+
+.landing-timeline-step {
+    animation: landing-timeline 8s ease-in-out infinite;
+}
+
+.landing-timeline-step:nth-child(2) { animation-delay: 1.6s; }
+.landing-timeline-step:nth-child(3) { animation-delay: 3.2s; }
+.landing-timeline-step:nth-child(4) { animation-delay: 4.8s; }
+
+.landing-toggle-thumb {
+    animation: landing-toggle 6s ease-in-out infinite;
+}
+
+.landing-bubble {
+    opacity: 0;
+    animation: landing-bubble 0.5s ease-out forwards;
+}
+
+.landing-bubble:nth-child(2) { animation-delay: 0.6s; }
+.landing-bubble:nth-child(3) { animation-delay: 1.2s; }
+
+.landing-reveal {
+    @apply opacity-0 translate-y-8 transition-all duration-700 ease-out;
+}
+
+.landing-reveal.is-visible {
+    @apply opacity-100 translate-y-0;
+}
+
+.landing-reveal--1 { transition-delay: 100ms; }
+.landing-reveal--2 { transition-delay: 200ms; }
+.landing-reveal--3 { transition-delay: 300ms; }
+.landing-reveal--4 { transition-delay: 400ms; }
+.landing-reveal--5 { transition-delay: 500ms; }
+
+.landing-timeline-line {
+    @apply origin-top scale-y-0 transition-transform duration-1000 ease-out;
+}
+
+.landing-reveal.is-visible .landing-timeline-line {
+    @apply scale-y-100;
+}
+
+.landing-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+.landing-faq[open] .landing-faq-icon {
+    @apply rotate-45;
+}
+
+html:has(.landing-page) {
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .landing-float,
+    .landing-scan,
+    .landing-kenburns,
+    .landing-spin svg,
+    .landing-blob,
+    .landing-marquee,
+    .landing-timeline-step,
+    .landing-toggle-thumb,
+    .landing-pulse::after {
+        animation: none;
+    }
+
+    .landing-underline path {
+        animation: none;
+        stroke-dashoffset: 0;
+    }
+
+    .landing-bubble {
+        animation: none;
+        opacity: 1;
+    }
+
+    .landing-reveal {
+        @apply opacity-100 translate-y-0 transition-none;
+    }
+
+    .landing-timeline-line {
+        @apply scale-y-100 transition-none;
+    }
+}