jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign landing page with interactive mockups and new sections

Browse Source
This commit is contained in:
Mohamed Boudra
2026-03-28 21:39:37 +07:00
parent a3aed9b8b6
commit 2e9f935dbc
13 changed files with 1418 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/styles.css
+54 -2
View File
@@ -1,12 +1,17 @@
@import "tailwindcss";
@keyframes voice-bar {
0% { transform: scaleY(1); }
100% { transform: scaleY(0.3); }
}
/* Title font - centralized for easy changes */
.font-title {
font-family: inherit;
}
/* Inline code styling - applies to code elements not inside pre blocks */
:not(pre) > code {
/* Inline code styling - scoped to prose content */
.prose :not(pre) > code {
background-color: var(--color-muted);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
@@ -87,10 +92,57 @@
--color-secondary: #27272a;
--color-secondary-foreground: #fafafa;
/* Mockup palette (from app unistyles theme) */
--color-mock-surface0: #18181c;
--color-mock-surface1: #1f1f23;
--color-mock-surface2: #27272a;
--color-mock-surface3: #3f3f46;
--color-mock-sidebar: #121216;
--color-mock-fg: #fafafa;
--color-mock-fg-muted: #a1a1aa;
--color-mock-border: #27272a;
--color-mock-border-accent: #34343a;
--color-mock-accent: #20744A;
--color-mock-green: #22c55e;
--color-mock-green-400: #4ade80;
--color-mock-red: #ef4444;
--color-mock-amber: #f59e0b;
--color-mock-blue: #3b82f6;
--color-mock-zinc500: #71717a;
--color-mock-zinc600: #52525b;
--color-mock-diff-add: rgba(46, 160, 67, 0.15);
--color-mock-diff-remove: rgba(248, 81, 73, 0.1);
/* Syntax highlighting */
--color-syn-keyword: #ff7b72;
--color-syn-comment: #8b949e;
--color-syn-string: #a5d6ff;
--color-syn-number: #79c0ff;
--color-syn-function: #d2a8ff;
--color-syn-tag: #7ee787;
--color-syn-property: #79c0ff;
--color-syn-variable: #c9d1d9;
--color-syn-punctuation: #c9d1d9;
--color-syn-operator: #79c0ff;
--animate-flutter-left: flutter-left 0.6s ease-in-out infinite;
--animate-flutter-right: flutter-right 0.6s ease-in-out infinite;
--animate-float: float 8s ease-in-out infinite;
--animate-flutter-body: flutter-body 0.5s ease-in-out infinite;
--animate-synced-snake-dot: synced-snake-dot 950ms linear infinite;
}
/* Synced loader — 6-dot snake animation matching the real app.
Each dot runs this keyframe with a staggered delay so that at any moment
up to 4 dots are visible at decreasing opacity (head=1, trail=0.72/0.46/0.22).
steps(1,end) keeps each opacity level solid for its full 1/6-cycle slot. */
@keyframes synced-snake-dot {
0% { opacity: 1; animation-timing-function: steps(1, end); }
16.667% { opacity: 0.72; animation-timing-function: steps(1, end); }
33.333% { opacity: 0.46; animation-timing-function: steps(1, end); }
50% { opacity: 0.22; animation-timing-function: steps(1, end); }
66.667% { opacity: 0; animation-timing-function: steps(1, end); }
83.333% { opacity: 0; animation-timing-function: steps(1, end); }
}
@keyframes flutter-left {