feat: add landing page components including FAQ, features, footer, header, hero, modalities, steps, and section title
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -23,19 +23,19 @@
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button.p-button-outlined {
|
||||
@apply bg-transparent text-dominant-500 border-dominant-500;
|
||||
@apply !bg-transparent !text-dominant-500 border-dominant-500;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button.p-button-outlined:hover {
|
||||
@apply bg-dominant-500 text-white;
|
||||
@apply !bg-dominant-500 !text-white;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button.p-button-text {
|
||||
@apply bg-transparent text-dominant-500 border-transparent;
|
||||
@apply !bg-transparent !text-dominant-500 !border-transparent;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button.p-button-text:hover {
|
||||
background-color: rgba(128, 14, 19, 0.1);
|
||||
background-color: rgba(128, 14, 19, 0.1) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -81,3 +81,10 @@
|
||||
background: #576989 !important;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.fast-request-dialog {
|
||||
width: calc(100vw - 1.5rem) !important;
|
||||
max-width: 688px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,3 +48,13 @@
|
||||
.p-datatable-tbody > tr > td{
|
||||
@apply !border-0
|
||||
}
|
||||
|
||||
.table-generic {
|
||||
@apply w-full min-w-0;
|
||||
}
|
||||
.table-generic-scroll {
|
||||
@apply w-full overflow-x-auto;
|
||||
}
|
||||
.table-generic-scroll .p-datatable-table {
|
||||
@apply min-w-full;
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
@import "tailwindcss";
|
||||
@import "./Client/sidebar/sidebar.css";
|
||||
@import "./Client/page-transitions.css";
|
||||
@import "./Client/landing.css";
|
||||
@config "../../Client-tailwind.config.js";
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user