From 026fa73120316c38950abf1577f43a8a5f5332fc Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Mon, 15 Sep 2025 07:51:08 +0000 Subject: [PATCH] Clone Dispel.com website --- index.html | 47 +++++++-- src/App.tsx | 4 + src/components/CompanyBlurb.tsx | 51 +++++++++ src/components/Footer.tsx | 60 +++++++++++ src/components/Header.tsx | 75 ++++++++++++++ src/components/Hero.tsx | 97 +++++++++++++++++ src/components/ui/button.tsx | 24 +++-- src/content/content.json | 133 ++++++++++++++++++++++++ src/index.css | 177 +++++++++++++++++--------------- src/pages/About.tsx | 136 ++++++++++++++++++++++++ src/pages/Index.tsx | 18 ++-- src/pages/NotFound.tsx | 25 +++-- src/pages/Services.tsx | 110 ++++++++++++++++++++ tailwind.config.ts | 70 ++++++++++++- 14 files changed, 906 insertions(+), 121 deletions(-) create mode 100644 src/components/CompanyBlurb.tsx create mode 100644 src/components/Footer.tsx create mode 100644 src/components/Header.tsx create mode 100644 src/components/Hero.tsx create mode 100644 src/content/content.json create mode 100644 src/pages/About.tsx create mode 100644 src/pages/Services.tsx diff --git a/index.html b/index.html index 35c7178..587156e 100644 --- a/index.html +++ b/index.html @@ -3,21 +3,52 @@ - welding-web-echo - - + Texas Welding & Fabrication Company | Professional Industrial Services + + - - + - + + + + - - + + + + + + + + + + + + Skip to main content +
diff --git a/src/App.tsx b/src/App.tsx index 18daf2e..08516cd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,8 @@ import { TooltipProvider } from "@/components/ui/tooltip"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Index from "./pages/Index"; +import Services from "./pages/Services"; +import About from "./pages/About"; import NotFound from "./pages/NotFound"; const queryClient = new QueryClient(); @@ -16,6 +18,8 @@ const App = () => ( } /> + } /> + } /> {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} } /> diff --git a/src/components/CompanyBlurb.tsx b/src/components/CompanyBlurb.tsx new file mode 100644 index 0000000..223f421 --- /dev/null +++ b/src/components/CompanyBlurb.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { Button } from '@/components/ui/button'; +import { ArrowRight } from 'lucide-react'; +import content from '@/content/content.json'; + +const CompanyBlurb = () => { + return ( +
+
+
+
+
+

+ Precision Craftsmanship, Reliable Service +

+

+ {content.home.blurbLeft} +

+ +
+ +
+
+

+ {content.home.blurbRight} +

+ + {/* Stats */} +
+
+
500+
+
Projects Completed
+
+
+
20+
+
Years Experience
+
+
+
+
+
+
+
+
+ ); +}; + +export default CompanyBlurb; \ No newline at end of file diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..ac87483 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import content from '@/content/content.json'; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..191e501 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { Button } from '@/components/ui/button'; +import { Menu, X } from 'lucide-react'; +import content from '@/content/content.json'; + +const Header = () => { + const [isOpen, setIsOpen] = React.useState(false); + + return ( +
+
+
+ {/* Logo */} + +
+ TW +
+ + Texas Welding + + + + {/* Desktop Navigation */} + + + {/* Mobile Menu Button */} + +
+ + {/* Mobile Navigation */} + {isOpen && ( + + )} +
+
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx new file mode 100644 index 0000000..691f8cb --- /dev/null +++ b/src/components/Hero.tsx @@ -0,0 +1,97 @@ +import React from 'react'; +import { Button } from '@/components/ui/button'; +import { ArrowRight, Wrench, Shield, Award } from 'lucide-react'; +import content from '@/content/content.json'; + +const Hero = () => { + return ( +
+ {/* Background Image Overlay */} +
+ +
+
+ {/* Content */} +
+
+

+ {content.home.heroTitle} +

+

+ {content.home.heroSubtitle} +

+
+ + {/* CTAs */} +
+ + +
+ + {/* Features */} +
+ {content.home.features.map((feature, index) => ( +
+
+ {index === 0 && } + {index === 1 && } + {index === 2 && } +
+
+

{feature.title}

+

{feature.description}

+
+
+ ))} +
+
+ + {/* Hero Image Placeholder */} +
+
+
+
+ +

Industrial Facility Image

+
+
+ + {/* Floating Cards */} +
+
+
+ Active Projects: 15+ +
+
+ +
+
+ + 20+ Years Experience +
+
+
+
+
+
+ + {/* Notice Bar */} +
+
+
+ + {content.home.employeesNotice} + +
+
+
+
+ ); +}; + +export default Hero; \ No newline at end of file diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index cdedd4f..792b758 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -5,22 +5,24 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-smooth focus-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", - destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", - outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", - secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", + default: "bg-accent text-ink shadow-subtle hover:bg-accent/90 active:bg-accent/80", + destructive: "bg-destructive text-destructive-foreground shadow-subtle hover:bg-destructive/90", + outline: "border border-border bg-transparent shadow-subtle hover:bg-bg-elevated hover:border-accent/50 text-foreground", + secondary: "bg-bg-elevated text-foreground shadow-subtle hover:bg-bg-elevated/80 border border-border", + ghost: "hover:bg-bg-elevated hover:text-foreground text-muted", + link: "text-link underline-offset-4 hover:underline", + hero: "bg-accent text-ink shadow-elevated hover:bg-accent/90 active:bg-accent/80 font-semibold", }, size: { - default: "h-10 px-4 py-2", - sm: "h-9 rounded-md px-3", - lg: "h-11 rounded-md px-8", - icon: "h-10 w-10", + default: "h-9 px-4 py-2", + sm: "h-8 rounded-md px-3 text-xs", + lg: "h-12 rounded-lg px-8 text-base font-semibold", + xl: "h-14 rounded-xl px-10 text-lg font-semibold", + icon: "h-9 w-9", }, }, defaultVariants: { diff --git a/src/content/content.json b/src/content/content.json new file mode 100644 index 0000000..f1e0cef --- /dev/null +++ b/src/content/content.json @@ -0,0 +1,133 @@ +{ + "nav": [ + "Services & Specialties", + "About Us", + "Clients & Projects", + "Locations", + "Careers", + "Contact Us" + ], + "home": { + "heroTitle": "A TEXAS WELDING & FABRICATION COMPANY", + "heroSubtitle": "Professional welding and fabrication services for industrial and commercial projects across Texas.", + "ctaServices": "SERVICES & SPECIALTIES", + "ctaExplore": "EXPLORE PROJECTS", + "blurbLeft": "With decades of experience in welding and fabrication, we deliver precision craftsmanship and reliable service for projects of all sizes. From structural steel to custom fabrication, our team brings expertise and quality to every job.", + "blurbRight": "Our state-of-the-art facility and skilled craftsmen ensure that every project meets the highest standards of quality and safety. We pride ourselves on timely delivery and exceeding customer expectations.", + "employeesNotice": "EMPLOYEES & PAST EMPLOYEES NOTICE — CLICK HERE - 1095-C INFO", + "featuresTitle": "Why Choose Us", + "features": [ + { + "title": "Expert Craftsmanship", + "description": "Certified welders and fabricators with decades of experience" + }, + { + "title": "Modern Equipment", + "description": "State-of-the-art welding and fabrication equipment" + }, + { + "title": "Quality Assurance", + "description": "Rigorous quality control and safety standards" + } + ] + }, + "services": { + "title": "Services & Specialties", + "services": [ + "Structural Steel Welding", + "Pipe Welding", + "Aluminum Welding", + "Stainless Steel Fabrication", + "Custom Metal Fabrication", + "Repair & Maintenance", + "On-Site Welding Services" + ], + "specialties": [ + "Industrial Equipment Fabrication", + "Architectural Metalwork", + "Heavy Equipment Repair", + "Pressure Vessel Work", + "Custom Railings & Gates", + "Structural Modifications" + ] + }, + "about": { + "title": "Welcome to Our Company", + "col1": "Founded in Texas, our welding and fabrication company has built a reputation for excellence in the industrial sector. We specialize in custom metalwork, structural welding, and precision fabrication services.", + "col2": "Our commitment to quality craftsmanship and customer satisfaction has made us a trusted partner for businesses across Texas. From small repairs to large-scale industrial projects, we deliver results that exceed expectations." + }, + "clients": [ + { + "name": "Dixie Iron Works", + "location": "Alice, Texas", + "project": "Structural Steel Framework", + "craftOnSite": "Welding & Assembly", + "duration": "2 months" + }, + { + "name": "Texas Petrochemical", + "location": "Houston, Texas", + "project": "Pipeline Fabrication", + "craftOnSite": "Pipe Welding", + "duration": "6 weeks" + }, + { + "name": "Gulf Coast Manufacturing", + "location": "Corpus Christi, Texas", + "project": "Equipment Modification", + "craftOnSite": "Custom Fabrication", + "duration": "3 weeks" + } + ], + "locations": { + "southTexas": { + "title": "South Texas Office & Fabrication Shop", + "address": "123 Industrial Blvd, Alice, TX 78332", + "phone": "(361) 555-0123", + "fax": "(361) 555-0124" + }, + "corporate": { + "title": "Corporate Office", + "address": "P.O. Box 1234, Alice, TX 78333", + "phone": "(361) 555-0125", + "fax": "(361) 555-0126" + }, + "opsManager": { + "name": "Operations Manager", + "title": "John Smith, Operations Manager", + "phones": ["(361) 555-0127", "(361) 555-0128"], + "email": "operations@texaswelding.com" + } + }, + "careers": { + "intro": "Join our team of skilled professionals in a growing company that values craftsmanship and safety.", + "crafts": [ + "Certified Welders", + "Fabricators", + "Pipe Fitters", + "Quality Control Inspectors", + "Project Managers", + "Shop Foremen" + ], + "hours": "Office Hours: Monday - Friday, 7:00 AM - 5:00 PM", + "downloadCta": "CLICK HERE", + "downloadText": "Download application packet", + "upload": "UPLOAD", + "uploadText": "Upload completed application" + }, + "contact": { + "phone": "(361) 555-0123", + "fax": "(361) 555-0124", + "email": "info@texaswelding.com", + "rightColumn": "You may contact us using the information provided. For immediate assistance, please call during business hours. Oops! We could not locate your form.", + "locationsRepeat": true + }, + "footer": { + "copyright": "Copyright ©2024 Texas Welding & Fabrication Company • All Rights Reserved." + }, + "meta": { + "siteName": "Texas Welding & Fabrication Company", + "siteDescription": "Professional welding and fabrication services for industrial and commercial projects across Texas.", + "siteUrl": "https://texaswelding.com" + } +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 4844bbd..7651732 100644 --- a/src/index.css +++ b/src/index.css @@ -2,95 +2,65 @@ @tailwind components; @tailwind utilities; -/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. -All colors MUST be HSL. -*/ +/* Design system inspired by Dispel.com aesthetic - dark industrial theme */ @layer base { :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; - + /* 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 */ + + /* Semantic mappings */ + --background: var(--bg); + --foreground: var(--ink); + + --card: var(--bg-elevated); + --card-foreground: var(--ink); + + --popover: var(--bg-elevated); + --popover-foreground: var(--ink); + + --primary: var(--accent); + --primary-foreground: var(--ink); + + --secondary: var(--bg-elevated); + --secondary-foreground: var(--ink); + + --muted: var(--bg-elevated); + --muted-foreground: var(--muted); + + --accent-color: var(--accent); + --accent-foreground: var(--ink); + + --destructive: 0 84% 60%; + --destructive-foreground: var(--ink); + + --border: 215 20% 20%; + --input: 215 20% 15%; + --ring: var(--accent); + --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); + --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - --sidebar-background: 0 0% 98%; - - --sidebar-foreground: 240 5.3% 26.1%; - - --sidebar-primary: 240 5.9% 10%; - - --sidebar-primary-foreground: 0 0% 98%; - - --sidebar-accent: 240 4.8% 95.9%; - - --sidebar-accent-foreground: 240 5.9% 10%; - - --sidebar-border: 220 13% 91%; - - --sidebar-ring: 217.2 91.2% 59.8%; - } - - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - --sidebar-background: 240 5.9% 10%; - --sidebar-foreground: 240 4.8% 95.9%; - --sidebar-primary: 224.3 76.3% 48%; - --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 3.7% 15.9%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; - --sidebar-ring: 217.2 91.2% 59.8%; + /* Sidebar tokens (consistent with main theme) */ + --sidebar-background: var(--bg); + --sidebar-foreground: var(--ink); + --sidebar-primary: var(--accent); + --sidebar-primary-foreground: var(--ink); + --sidebar-accent: var(--bg-elevated); + --sidebar-accent-foreground: var(--ink); + --sidebar-border: hsl(215 20% 20%); + --sidebar-ring: var(--accent); } } @@ -99,7 +69,44 @@ All colors MUST be HSL. @apply border-border; } + html { + scroll-behavior: smooth; + } + body { - @apply bg-background text-foreground; + @apply bg-background text-foreground font-sans antialiased; + color-scheme: dark; + } +} + +@layer components { + /* Hero section styling */ + .hero-gradient { + background: var(--gradient-hero); + } + + /* Card styling */ + .card-elevated { + background: var(--gradient-card); + box-shadow: var(--shadow-elevated); + } + + /* Smooth transitions */ + .transition-smooth { + transition: var(--transition-smooth); + } + + /* Focus styles for accessibility */ + .focus-ring { + @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background; + } +} + +@layer utilities { + /* Reduced motion support */ + @media (prefers-reduced-motion: reduce) { + .transition-smooth { + transition: none; + } } } diff --git a/src/pages/About.tsx b/src/pages/About.tsx new file mode 100644 index 0000000..039087c --- /dev/null +++ b/src/pages/About.tsx @@ -0,0 +1,136 @@ +import React from 'react'; +import Header from '@/components/Header'; +import Footer from '@/components/Footer'; +import { Building, Users, Award } from 'lucide-react'; +import content from '@/content/content.json'; + +const About = () => { + return ( +
+
+
+ {/* Hero Section */} +
+
+
+

+ {content.about.title} +

+

+ A legacy of excellence in Texas welding and fabrication +

+
+
+
+ + {/* About Content */} +
+
+
+
+
+
+

+ {content.about.col1} +

+
+ + {/* Company Stats */} +
+
+
500+
+
Projects Completed
+
+
+
20+
+
Years Experience
+
+
+
+ +
+
+

+ {content.about.col2} +

+
+ + {/* Values */} +
+
+ +
+

Quality First

+

Every project meets the highest standards of craftsmanship and durability.

+
+
+ +
+ +
+

Team Excellence

+

Our skilled professionals bring decades of combined experience to every job.

+
+
+ +
+ +
+

Customer Focus

+

We build lasting relationships through reliable service and competitive pricing.

+
+
+
+
+
+
+
+
+ + {/* Timeline Section */} +
+
+
+

Our Journey

+ +
+
+
+ 2004 +
+
+

Company Founded

+

Established in Texas with a commitment to quality welding and fabrication services.

+
+
+ +
+
+ 2010 +
+
+

Facility Expansion

+

Expanded our fabrication shop with state-of-the-art equipment and technology.

+
+
+ +
+
+ 2024 +
+
+

Continued Excellence

+

Today we continue to serve Texas with unmatched quality and service.

+
+
+
+
+
+
+
+
+
+ ); +}; + +export default About; \ No newline at end of file diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 7130b54..d76d685 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1,12 +1,18 @@ -// Update this page (the content is just a fallback if you fail to update the page) +import React from 'react'; +import Header from '@/components/Header'; +import Footer from '@/components/Footer'; +import Hero from '@/components/Hero'; +import CompanyBlurb from '@/components/CompanyBlurb'; const Index = () => { return ( -
-
-

Welcome to Your Blank App

-

Start building your amazing project here!

-
+
+
+
+ + +
+
); }; diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx index f9cf7c5..edbf3a9 100644 --- a/src/pages/NotFound.tsx +++ b/src/pages/NotFound.tsx @@ -1,5 +1,7 @@ import { useLocation } from "react-router-dom"; import { useEffect } from "react"; +import { Button } from "@/components/ui/button"; +import { Home } from "lucide-react"; const NotFound = () => { const location = useLocation(); @@ -9,13 +11,22 @@ const NotFound = () => { }, [location.pathname]); return ( -
-
-

404

-

Oops! Page not found

- - Return to Home - +
+
+
+

404

+

Page Not Found

+

+ The page you're looking for doesn't exist or has been moved. +

+
+ +
); diff --git a/src/pages/Services.tsx b/src/pages/Services.tsx new file mode 100644 index 0000000..31464f4 --- /dev/null +++ b/src/pages/Services.tsx @@ -0,0 +1,110 @@ +import React from 'react'; +import Header from '@/components/Header'; +import Footer from '@/components/Footer'; +import { Wrench, Settings, Shield } from 'lucide-react'; +import content from '@/content/content.json'; + +const Services = () => { + return ( +
+
+
+ {/* Hero Section */} +
+
+
+

+ {content.services.title} +

+

+ Professional welding and fabrication services tailored to your industrial needs +

+
+
+
+ + {/* Services Grid */} +
+
+
+
+ {/* Services Column */} +
+
+ +

Services

+
+
+ {content.services.services.map((service, index) => ( +
+

{service}

+

Professional service with certified specialists and modern equipment

+
+ ))} +
+
+ + {/* Specialties Column */} +
+
+ +

Specialties

+
+
+ {content.services.specialties.map((specialty, index) => ( +
+

{specialty}

+

Specialized expertise with attention to detail and quality assurance

+
+ ))} +
+
+
+
+
+
+ + {/* Quality Assurance */} +
+
+
+
+ +

Quality Assurance

+
+ +
+
+
+ +
+

Certified Processes

+

All work follows industry standards and safety protocols

+
+ +
+
+ +
+

Expert Craftsmen

+

Skilled professionals with extensive experience

+
+ +
+
+ +
+

Modern Equipment

+

State-of-the-art tools and technology

+
+
+
+
+
+
+
+ ); +}; + +export default Services; \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index a1edb69..f1fb67c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -7,13 +7,29 @@ export default { theme: { container: { center: true, - padding: "2rem", + padding: { + DEFAULT: "2rem", + sm: "2rem", + md: "3rem", + lg: "4rem", + xl: "5rem", + "2xl": "6rem", + }, screens: { "2xl": "1400px", }, }, extend: { colors: { + /* Core brand colors */ + bg: "hsl(var(--bg))", + "bg-elevated": "hsl(var(--bg-elevated))", + ink: "hsl(var(--ink))", + muted: "hsl(var(--muted))", + accent: "hsl(var(--accent))", + link: "hsl(var(--link))", + + /* Semantic color mappings */ border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", @@ -31,12 +47,12 @@ export default { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, - muted: { + "muted-token": { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, - accent: { - DEFAULT: "hsl(var(--accent))", + "accent-color": { + DEFAULT: "hsl(var(--accent-color))", foreground: "hsl(var(--accent-foreground))", }, popover: { @@ -62,6 +78,30 @@ export default { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", + xl: "1rem", + "2xl": "1.5rem", + }, + fontFamily: { + sans: ["system-ui", "Inter", "Helvetica", "Arial", "sans-serif"], + }, + fontSize: { + "display-lg": ["4rem", { lineHeight: "1.1", letterSpacing: "-0.02em" }], + "display-md": ["3rem", { lineHeight: "1.1", letterSpacing: "-0.02em" }], + "display-sm": ["2.25rem", { lineHeight: "1.2", letterSpacing: "-0.01em" }], + }, + spacing: { + "18": "4.5rem", + "88": "22rem", + "112": "28rem", + "128": "32rem", + }, + backgroundImage: { + "gradient-hero": "var(--gradient-hero)", + "gradient-card": "var(--gradient-card)", + }, + boxShadow: { + "elevated": "var(--shadow-elevated)", + "subtle": "var(--shadow-subtle)", }, keyframes: { "accordion-down": { @@ -80,10 +120,32 @@ export default { height: "0", }, }, + "fade-in": { + from: { + opacity: "0", + transform: "translateY(20px)", + }, + to: { + opacity: "1", + transform: "translateY(0)", + }, + }, + "fade-in-up": { + from: { + opacity: "0", + transform: "translateY(40px)", + }, + to: { + opacity: "1", + transform: "translateY(0)", + }, + }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", + "fade-in": "fade-in 0.6s ease-out", + "fade-in-up": "fade-in-up 0.8s ease-out", }, }, },