Update content and styling
This commit is contained in:
gpt-engineer-app[bot]
parent
026fa73120
commit
b759dd51f6
|
|
@ -14,7 +14,7 @@ const Hero = () => {
|
|||
{/* Content */}
|
||||
<div className="space-y-8 animate-fade-in-up">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-display-lg font-bold text-foreground leading-none">
|
||||
<h1 className="text-display-lg font-bold text-ink leading-none">
|
||||
{content.home.heroTitle}
|
||||
</h1>
|
||||
<p className="text-xl text-muted max-w-lg leading-relaxed">
|
||||
|
|
@ -43,7 +43,7 @@ const Hero = () => {
|
|||
{index === 2 && <Award className="h-4 w-4 text-accent" />}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground text-sm">{feature.title}</h3>
|
||||
<h3 className="font-semibold text-ink text-sm">{feature.title}</h3>
|
||||
<p className="text-muted text-xs leading-relaxed mt-1">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,14 +65,14 @@ const Hero = () => {
|
|||
<div className="absolute -bottom-4 -left-4 bg-card rounded-xl p-4 shadow-subtle border border-border">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<span className="text-xs text-foreground font-medium">Active Projects: 15+</span>
|
||||
<span className="text-xs text-ink font-medium">Active Projects: 15+</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -top-4 -right-4 bg-card rounded-xl p-4 shadow-subtle border border-border">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Award className="h-4 w-4 text-accent" />
|
||||
<span className="text-xs text-foreground font-medium">20+ Years Experience</span>
|
||||
<span className="text-xs text-ink font-medium">20+ Years Experience</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,50 +6,50 @@
|
|||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Core brand colors (HSL) */
|
||||
--bg: 210 24% 7%; /* #0B0F13 near-black */
|
||||
--bg-elevated: 215 20% 12%; /* #121826 */
|
||||
--ink: 210 17% 97%; /* #F7FAFC off-white */
|
||||
--muted: 213 15% 70%; /* #A7B1C2 */
|
||||
--accent: 355 75% 47%; /* #C1272D brand red */
|
||||
--link: 213 94% 68%; /* #60A5FA */
|
||||
/* Core brand colors (HSL values only) */
|
||||
--bg: 210 24% 8%;
|
||||
--bg-elevated: 215 20% 12%;
|
||||
--ink: 210 17% 97%;
|
||||
--muted: 213 15% 65%;
|
||||
--accent: 355 75% 47%;
|
||||
--link: 213 94% 68%;
|
||||
|
||||
/* Semantic mappings */
|
||||
--background: var(--bg);
|
||||
--foreground: var(--ink);
|
||||
/* Semantic color mappings (use HSL values directly) */
|
||||
--background: 210 24% 8%;
|
||||
--foreground: 210 17% 97%;
|
||||
|
||||
--card: var(--bg-elevated);
|
||||
--card-foreground: var(--ink);
|
||||
--card: 215 20% 12%;
|
||||
--card-foreground: 210 17% 97%;
|
||||
|
||||
--popover: var(--bg-elevated);
|
||||
--popover-foreground: var(--ink);
|
||||
--popover: 215 20% 12%;
|
||||
--popover-foreground: 210 17% 97%;
|
||||
|
||||
--primary: var(--accent);
|
||||
--primary-foreground: var(--ink);
|
||||
--primary: 355 75% 47%;
|
||||
--primary-foreground: 210 17% 97%;
|
||||
|
||||
--secondary: var(--bg-elevated);
|
||||
--secondary-foreground: var(--ink);
|
||||
--secondary: 215 20% 16%;
|
||||
--secondary-foreground: 210 17% 97%;
|
||||
|
||||
--muted: var(--bg-elevated);
|
||||
--muted-foreground: var(--muted);
|
||||
--muted: 215 20% 16%;
|
||||
--muted-foreground: 213 15% 65%;
|
||||
|
||||
--accent-color: var(--accent);
|
||||
--accent-foreground: var(--ink);
|
||||
--accent: 355 75% 47%;
|
||||
--accent-foreground: 210 17% 97%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: var(--ink);
|
||||
--destructive-foreground: 210 17% 97%;
|
||||
|
||||
--border: 215 20% 20%;
|
||||
--input: 215 20% 15%;
|
||||
--ring: var(--accent);
|
||||
--ring: 355 75% 47%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Custom design tokens */
|
||||
--gradient-hero: linear-gradient(135deg, hsl(var(--bg)) 0%, hsl(215 25% 10%) 100%);
|
||||
--gradient-card: linear-gradient(145deg, hsl(var(--bg-elevated)) 0%, hsl(215 18% 14%) 100%);
|
||||
--shadow-elevated: 0 10px 40px -10px hsl(var(--bg) / 0.8);
|
||||
--shadow-subtle: 0 4px 16px -4px hsl(var(--bg) / 0.4);
|
||||
--gradient-hero: linear-gradient(135deg, hsl(210 24% 8%) 0%, hsl(215 25% 10%) 100%);
|
||||
--gradient-card: linear-gradient(145deg, hsl(215 20% 12%) 0%, hsl(215 18% 14%) 100%);
|
||||
--shadow-elevated: 0 10px 40px -10px hsl(210 24% 8% / 0.8);
|
||||
--shadow-subtle: 0 4px 16px -4px hsl(210 24% 8% / 0.4);
|
||||
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Sidebar tokens (consistent with main theme) */
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
bg: "hsl(var(--bg))",
|
||||
"bg-elevated": "hsl(var(--bg-elevated))",
|
||||
ink: "hsl(var(--ink))",
|
||||
muted: "hsl(var(--muted))",
|
||||
muted: "hsl(var(--muted-foreground))",
|
||||
accent: "hsl(var(--accent))",
|
||||
link: "hsl(var(--link))",
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ export default {
|
|||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
"accent-color": {
|
||||
DEFAULT: "hsl(var(--accent-color))",
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
|
|
@ -64,14 +64,14 @@ export default {
|
|||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: "hsl(var(--sidebar-background))",
|
||||
foreground: "hsl(var(--sidebar-foreground))",
|
||||
primary: "hsl(var(--sidebar-primary))",
|
||||
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
|
||||
accent: "hsl(var(--sidebar-accent))",
|
||||
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
|
||||
border: "hsl(var(--sidebar-border))",
|
||||
ring: "hsl(var(--sidebar-ring))",
|
||||
DEFAULT: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: "hsl(var(--accent))",
|
||||
"primary-foreground": "hsl(var(--accent-foreground))",
|
||||
accent: "hsl(var(--secondary))",
|
||||
"accent-foreground": "hsl(var(--secondary-foreground))",
|
||||
border: "hsl(var(--border))",
|
||||
ring: "hsl(var(--ring))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue