mirror of
https://github.com/jnsahaj/tweakcn.git
synced 2026-08-30 18:10:28 +08:00
refactor: update color scheme to use custom CSS variables for better consistency
Co-authored-by: Sahaj Jain <82111591+jnsahaj@users.noreply.github.com>
This commit is contained in:
+1
-1
@@ -30,7 +30,7 @@ export default function Home() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-background text-foreground flex min-h-[100dvh] flex-col items-center justify-items-center">
|
||||
<div className="bg-[var(--hp-surface)] text-white flex min-h-[100dvh] flex-col items-center justify-items-center">
|
||||
<Header
|
||||
isScrolled={isScrolled}
|
||||
mobileMenuOpen={mobileMenuOpen}
|
||||
|
||||
@@ -29,7 +29,7 @@ export function Footer() {
|
||||
<div className="sm:col-span-2">
|
||||
<Link href="/" className="mb-4 flex items-center gap-2">
|
||||
<Logo className="size-5" />
|
||||
<span className="font-mono text-sm font-semibold">tweakcn</span>
|
||||
<span className="font-mono text-sm font-semibold text-white">tweakcn</span>
|
||||
</Link>
|
||||
<p className="max-w-xs text-xs leading-relaxed text-[var(--hp-text-secondary)]">
|
||||
A visual theme editor for shadcn/ui. Customize, preview, and export Tailwind CSS
|
||||
@@ -62,7 +62,7 @@ export function Footer() {
|
||||
|
||||
{/* Product links */}
|
||||
<div>
|
||||
<h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-foreground">
|
||||
<h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-white">
|
||||
Product
|
||||
</h4>
|
||||
<ul className="space-y-2.5">
|
||||
@@ -81,7 +81,7 @@ export function Footer() {
|
||||
|
||||
{/* Resources links */}
|
||||
<div>
|
||||
<h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-foreground">
|
||||
<h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-white">
|
||||
Resources
|
||||
</h4>
|
||||
<ul className="space-y-2.5">
|
||||
@@ -92,14 +92,14 @@ export function Footer() {
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-foreground"
|
||||
className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-white"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
href={link.href}
|
||||
className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-foreground"
|
||||
className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-white"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
|
||||
@@ -36,7 +36,7 @@ const faqs = [
|
||||
|
||||
export function FAQ() {
|
||||
return (
|
||||
<section id="faq" className="w-full border-b border-[var(--hp-rule)]">
|
||||
<section id="faq" className="w-full border-b border-[var(--hp-rule)] bg-[var(--hp-surface)]">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
{/* Header row */}
|
||||
<div className="border-b border-[var(--hp-rule)] py-10">
|
||||
|
||||
@@ -14,7 +14,7 @@ export function Hero() {
|
||||
const mode = themeState.currentMode;
|
||||
|
||||
return (
|
||||
<section className="relative w-full overflow-hidden border-b border-[var(--hp-rule)]">
|
||||
<section className="relative w-full overflow-hidden border-b border-[var(--hp-rule)] bg-[var(--hp-surface)]">
|
||||
{/* Fine dot grid */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 -z-10"
|
||||
|
||||
@@ -23,7 +23,7 @@ const steps = [
|
||||
|
||||
export function HowItWorks() {
|
||||
return (
|
||||
<section id="how-it-works" className="w-full border-b border-[var(--hp-rule)]">
|
||||
<section id="how-it-works" className="w-full border-b border-[var(--hp-rule)] bg-[var(--hp-surface)]">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
{/* Header row */}
|
||||
<div className="flex items-end justify-between border-b border-[var(--hp-rule)] py-10">
|
||||
|
||||
@@ -177,7 +177,7 @@ function MarqueeRow({ items, reverse = false }: { items: typeof testimonials; re
|
||||
|
||||
export function Testimonials() {
|
||||
return (
|
||||
<section id="testimonials" className="w-full border-b border-[var(--hp-rule)] py-20 md:py-28 overflow-hidden">
|
||||
<section id="testimonials" className="w-full border-b border-[var(--hp-rule)] bg-[var(--hp-surface)] py-20 md:py-28 overflow-hidden">
|
||||
<div className="container mx-auto mb-12 px-4 md:px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
|
||||
Reference in New Issue
Block a user