aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add core UI components and layout for media platform

Browse Source 
Initializes the client-side application with fundamental UI components, including navigation, cards for articles and auctions, and various elements for user interaction and display.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bVdKIaU
This commit is contained in:
kimjaehyeon0101
2025-09-29 14:35:50 +00:00
parent 4d252ca7a6
commit 2cbad88faa
89 changed files with 17584 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
client/src/index.css Normal file
View File

@ -0,0 +1,183 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: hsl(210, 40%, 98%);
--foreground: hsl(222.2, 84%, 4.9%);
--card: hsl(0, 0%, 100%);
--card-foreground: hsl(222.2, 84%, 4.9%);
--popover: hsl(0, 0%, 100%);
--popover-foreground: hsl(222.2, 84%, 4.9%);
--primary: hsl(221.2, 83.2%, 53.3%);
--primary-foreground: hsl(210, 40%, 98%);
--secondary: hsl(210, 40%, 96%);
--secondary-foreground: hsl(222.2, 84%, 4.9%);
--muted: hsl(210, 40%, 96%);
--muted-foreground: hsl(215.4, 16.3%, 46.9%);
--accent: hsl(210, 40%, 96%);
--accent-foreground: hsl(222.2, 84%, 4.9%);
--destructive: hsl(0, 84.2%, 60.2%);
--destructive-foreground: hsl(210, 40%, 98%);
--border: hsl(214.3, 31.8%, 91.4%);
--input: hsl(214.3, 31.8%, 91.4%);
--ring: hsl(221.2, 83.2%, 53.3%);
--chart-1: hsl(12, 76%, 61%);
--chart-2: hsl(173, 58%, 39%);
--chart-3: hsl(197, 37%, 24%);
--chart-4: hsl(43, 74%, 66%);
--chart-5: hsl(27, 87%, 67%);
--sidebar: hsl(210, 40%, 96%);
--sidebar-foreground: hsl(222.2, 84%, 4.9%);
--sidebar-primary: hsl(221.2, 83.2%, 53.3%);
--sidebar-primary-foreground: hsl(210, 40%, 98%);
--sidebar-accent: hsl(210, 40%, 96%);
--sidebar-accent-foreground: hsl(222.2, 84%, 4.9%);
--sidebar-border: hsl(214.3, 31.8%, 91.4%);
--sidebar-ring: hsl(221.2, 83.2%, 53.3%);
--font-sans: 'Inter', system-ui, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Menlo, monospace;
--radius: 0.75rem;
--shadow-2xs: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-xs: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-sm: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 1px 2px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 1px 2px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-md: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 2px 4px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-lg: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 4px 6px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-xl: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 8px 10px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-2xl: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
.dark {
--background: hsl(0, 0%, 0%);
--foreground: hsl(200, 6.6667%, 91.1765%);
--card: hsl(228, 9.8039%, 10%);
--card-foreground: hsl(0, 0%, 85.0980%);
--popover: hsl(0, 0%, 0%);
--popover-foreground: hsl(200, 6.6667%, 91.1765%);
--primary: hsl(221.2, 83.2%, 53.3%);
--primary-foreground: hsl(210, 40%, 98%);
--secondary: hsl(195.0000, 15.3846%, 94.9020%);
--secondary-foreground: hsl(222.2, 84%, 4.9%);
--muted: hsl(0, 0%, 9.4118%);
--muted-foreground: hsl(210, 3.3898%, 46.2745%);
--accent: hsl(205.7143, 70%, 7.8431%);
--accent-foreground: hsl(221.2, 83.2%, 53.3%);
--destructive: hsl(0, 84.2%, 60.2%);
--destructive-foreground: hsl(210, 40%, 98%);
--border: hsl(210, 5.2632%, 14.9020%);
--input: hsl(207.6923, 27.6596%, 18.4314%);
--ring: hsl(221.2, 83.2%, 53.3%);
--chart-1: hsl(12, 76%, 61%);
--chart-2: hsl(173, 58%, 39%);
--chart-3: hsl(197, 37%, 24%);
--chart-4: hsl(43, 74%, 66%);
--chart-5: hsl(27, 87%, 67%);
--sidebar: hsl(228, 9.8039%, 10%);
--sidebar-foreground: hsl(0, 0%, 85.0980%);
--sidebar-primary: hsl(221.2, 83.2%, 53.3%);
--sidebar-primary-foreground: hsl(210, 40%, 98%);
--sidebar-accent: hsl(205.7143, 70%, 7.8431%);
--sidebar-accent-foreground: hsl(221.2, 83.2%, 53.3%);
--sidebar-border: hsl(205.7143, 15.7895%, 26.0784%);
--sidebar-ring: hsl(221.2, 83.2%, 53.3%);
--font-sans: 'Inter', system-ui, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Menlo, monospace;
--radius: 0.75rem;
--shadow-2xs: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-xs: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-sm: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 1px 2px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 1px 2px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-md: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 2px 4px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-lg: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 4px 6px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-xl: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 8px 10px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
--shadow-2xl: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
}
@layer base {
* {
@apply border-border;
}
body {
@apply font-sans antialiased bg-background text-foreground;
font-family: 'Inter', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
@apply tracking-tight;
}
}
@layer components {
.gradient-bg {
background: linear-gradient(135deg, hsl(221.2, 83.2%, 53.3%) 0%, hsl(262.1, 83.3%, 57.8%) 100%);
}
.card-hover {
transition: all 0.2s ease-in-out;
}
.card-hover:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1);
}
.fade-in {
animation: fadeIn 0.3s ease-in;
}
.prediction-card {
background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
border-left: 4px solid hsl(173, 58%, 39%);
}
.active-tab {
background: hsl(221.2, 83.2%, 53.3%);
color: white;
}
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}