Clone Dispel.com website
This commit is contained in:
gpt-engineer-app[bot]
parent
da479fa8a6
commit
026fa73120
47
index.html
47
index.html
|
|
@ -3,21 +3,52 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>welding-web-echo</title>
|
||||
<meta name="description" content="Lovable Generated Project" />
|
||||
<meta name="author" content="Lovable" />
|
||||
<title>Texas Welding & Fabrication Company | Professional Industrial Services</title>
|
||||
<meta name="description" content="Professional welding and fabrication services for industrial and commercial projects across Texas. Expert craftsmanship, modern equipment, and reliable service." />
|
||||
<meta name="author" content="Texas Welding & Fabrication Company" />
|
||||
|
||||
<meta property="og:title" content="welding-web-echo" />
|
||||
<meta property="og:description" content="Lovable Generated Project" />
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||
<meta property="og:title" content="Texas Welding & Fabrication Company | Professional Industrial Services" />
|
||||
<meta property="og:description" content="Professional welding and fabrication services for industrial and commercial projects across Texas. Expert craftsmanship, modern equipment, and reliable service." />
|
||||
<meta property="og:site_name" content="Texas Welding & Fabrication Company" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@lovable_dev" />
|
||||
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||
<meta name="twitter:title" content="Texas Welding & Fabrication Company | Professional Industrial Services" />
|
||||
<meta name="twitter:description" content="Professional welding and fabrication services for industrial and commercial projects across Texas. Expert craftsmanship, modern equipment, and reliable service." />
|
||||
|
||||
<!-- Additional SEO -->
|
||||
<link rel="canonical" href="https://texaswelding.com/" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="theme-color" content="#C1272D" />
|
||||
|
||||
<!-- Structured Data -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "Texas Welding & Fabrication Company",
|
||||
"description": "Professional welding and fabrication services for industrial and commercial projects across Texas.",
|
||||
"url": "https://texaswelding.com",
|
||||
"telephone": "(361) 555-0123",
|
||||
"email": "info@texaswelding.com",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "123 Industrial Blvd",
|
||||
"addressLocality": "Alice",
|
||||
"addressRegion": "TX",
|
||||
"postalCode": "78332"
|
||||
},
|
||||
"sameAs": []
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-accent text-ink px-4 py-2 rounded-md z-50">
|
||||
Skip to main content
|
||||
</a>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -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 = () => (
|
|||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Index />} />
|
||||
<Route path="/services-and-specialties" element={<Services />} />
|
||||
<Route path="/about-us" element={<About />} />
|
||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<section className="py-24 bg-bg-elevated">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<h2 className="text-display-sm font-bold text-foreground">
|
||||
Precision Craftsmanship, Reliable Service
|
||||
</h2>
|
||||
<p className="text-muted leading-relaxed text-lg">
|
||||
{content.home.blurbLeft}
|
||||
</p>
|
||||
<Button className="group">
|
||||
Learn More About Us
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="bg-gradient-card rounded-xl p-8 shadow-subtle border border-border">
|
||||
<p className="text-muted leading-relaxed">
|
||||
{content.home.blurbRight}
|
||||
</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 gap-6 mt-8 pt-6 border-t border-border">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-accent">500+</div>
|
||||
<div className="text-sm text-muted">Projects Completed</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-accent">20+</div>
|
||||
<div className="text-sm text-muted">Years Experience</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyBlurb;
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import React from 'react';
|
||||
import content from '@/content/content.json';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-bg-elevated border-t border-border">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
{/* Company Logo & Info */}
|
||||
<div className="md:col-span-1">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="h-8 w-8 bg-accent rounded-md flex items-center justify-center">
|
||||
<span className="text-ink font-bold text-sm">TW</span>
|
||||
</div>
|
||||
<span className="font-semibold text-foreground">Texas Welding</span>
|
||||
</div>
|
||||
<p className="text-muted text-sm leading-relaxed">
|
||||
Professional welding and fabrication services for industrial and commercial projects across Texas.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="md:col-span-2">
|
||||
<h3 className="font-semibold text-foreground mb-4">Quick Links</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{content.nav.map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
|
||||
className="text-muted hover:text-foreground transition-smooth focus-ring rounded-md text-sm"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="md:col-span-1">
|
||||
<h3 className="font-semibold text-foreground mb-4">Contact</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<p className="text-muted">
|
||||
Phone: <a href={`tel:${content.contact.phone}`} className="text-link hover:underline">{content.contact.phone}</a>
|
||||
</p>
|
||||
<p className="text-muted">
|
||||
Email: <a href={`mailto:${content.contact.email}`} className="text-link hover:underline">{content.contact.email}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border mt-8 pt-8 text-center">
|
||||
<p className="text-muted text-sm">{content.footer.copyright}</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -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 (
|
||||
<header className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<a href="/" className="flex items-center space-x-2 focus-ring rounded-md">
|
||||
<div className="h-8 w-8 bg-accent rounded-md flex items-center justify-center">
|
||||
<span className="text-ink font-bold text-sm">TW</span>
|
||||
</div>
|
||||
<span className="font-semibold text-foreground hidden sm:block">
|
||||
Texas Welding
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8" aria-label="Primary navigation">
|
||||
{content.nav.map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
|
||||
className="text-muted hover:text-foreground transition-smooth focus-ring rounded-md px-2 py-1"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
<Button variant="default" size="sm" className="ml-4">
|
||||
Get Quote
|
||||
</Button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 text-muted hover:text-foreground focus-ring rounded-md"
|
||||
aria-label="Toggle navigation menu"
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
{isOpen ? <X size={20} /> : <Menu size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{isOpen && (
|
||||
<nav className="md:hidden py-4 border-t border-border" aria-label="Mobile navigation">
|
||||
<div className="flex flex-col space-y-4">
|
||||
{content.nav.map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
|
||||
className="text-muted hover:text-foreground transition-smooth focus-ring rounded-md px-2 py-2"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
<Button variant="default" size="sm" className="w-fit mt-4">
|
||||
Get Quote
|
||||
</Button>
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -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 (
|
||||
<section className="relative min-h-screen flex items-center hero-gradient overflow-hidden">
|
||||
{/* Background Image Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-bg/90 to-transparent z-10"></div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-20">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* 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">
|
||||
{content.home.heroTitle}
|
||||
</h1>
|
||||
<p className="text-xl text-muted max-w-lg leading-relaxed">
|
||||
{content.home.heroSubtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button size="lg" className="group">
|
||||
{content.home.ctaServices}
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
<Button variant="outline" size="lg">
|
||||
{content.home.ctaExplore}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-8">
|
||||
{content.home.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-accent/20 rounded-md flex items-center justify-center">
|
||||
{index === 0 && <Wrench className="h-4 w-4 text-accent" />}
|
||||
{index === 1 && <Shield className="h-4 w-4 text-accent" />}
|
||||
{index === 2 && <Award className="h-4 w-4 text-accent" />}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground text-sm">{feature.title}</h3>
|
||||
<p className="text-muted text-xs leading-relaxed mt-1">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Image Placeholder */}
|
||||
<div className="relative lg:ml-8">
|
||||
<div className="relative bg-gradient-card rounded-2xl p-8 shadow-elevated">
|
||||
<div className="aspect-[4/3] bg-muted/20 rounded-xl flex items-center justify-center">
|
||||
<div className="text-center space-y-4">
|
||||
<Wrench className="h-16 w-16 text-accent mx-auto" />
|
||||
<p className="text-muted text-sm">Industrial Facility Image</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Cards */}
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notice Bar */}
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-accent/10 border-t border-accent/20 z-30">
|
||||
<div className="container mx-auto px-4 py-3">
|
||||
<div className="text-center">
|
||||
<a href="/employees-notice" className="text-accent hover:text-accent/80 transition-smooth text-sm font-medium">
|
||||
{content.home.employeesNotice}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
157
src/index.css
157
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%;
|
||||
/* 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 */
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
/* Semantic mappings */
|
||||
--background: var(--bg);
|
||||
--foreground: var(--ink);
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--card: var(--bg-elevated);
|
||||
--card-foreground: var(--ink);
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--popover: var(--bg-elevated);
|
||||
--popover-foreground: var(--ink);
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--primary: var(--accent);
|
||||
--primary-foreground: var(--ink);
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--secondary: var(--bg-elevated);
|
||||
--secondary-foreground: var(--ink);
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: var(--bg-elevated);
|
||||
--muted-foreground: var(--muted);
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--accent-color: var(--accent);
|
||||
--accent-foreground: var(--ink);
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: var(--ink);
|
||||
|
||||
--border: 215 20% 20%;
|
||||
--input: 215 20% 15%;
|
||||
--ring: var(--accent);
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
--sidebar-background: 0 0% 98%;
|
||||
/* 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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<main className="pt-16">
|
||||
{/* Hero Section */}
|
||||
<section className="py-24 hero-gradient">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-6">
|
||||
<h1 className="text-display-md font-bold text-foreground">
|
||||
{content.about.title}
|
||||
</h1>
|
||||
<p className="text-xl text-muted">
|
||||
A legacy of excellence in Texas welding and fabrication
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About Content */}
|
||||
<section className="py-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="bg-gradient-card p-8 rounded-xl border border-border">
|
||||
<p className="text-muted leading-relaxed text-lg">
|
||||
{content.about.col1}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Company Stats */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="bg-gradient-card p-6 rounded-xl border border-border text-center">
|
||||
<div className="text-3xl font-bold text-accent mb-2">500+</div>
|
||||
<div className="text-sm text-muted">Projects Completed</div>
|
||||
</div>
|
||||
<div className="bg-gradient-card p-6 rounded-xl border border-border text-center">
|
||||
<div className="text-3xl font-bold text-accent mb-2">20+</div>
|
||||
<div className="text-sm text-muted">Years Experience</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="bg-gradient-card p-8 rounded-xl border border-border">
|
||||
<p className="text-muted leading-relaxed text-lg">
|
||||
{content.about.col2}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Values */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-4 p-4 bg-gradient-card rounded-xl border border-border">
|
||||
<Building className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Quality First</h3>
|
||||
<p className="text-muted text-sm">Every project meets the highest standards of craftsmanship and durability.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4 p-4 bg-gradient-card rounded-xl border border-border">
|
||||
<Users className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Team Excellence</h3>
|
||||
<p className="text-muted text-sm">Our skilled professionals bring decades of combined experience to every job.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4 p-4 bg-gradient-card rounded-xl border border-border">
|
||||
<Award className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Customer Focus</h3>
|
||||
<p className="text-muted text-sm">We build lasting relationships through reliable service and competitive pricing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Timeline Section */}
|
||||
<section className="py-24 bg-bg-elevated">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-display-sm font-bold text-foreground mb-12">Our Journey</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center space-x-6 p-6 bg-gradient-card rounded-xl border border-border">
|
||||
<div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-ink font-bold">2004</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h3 className="font-semibold text-foreground mb-2">Company Founded</h3>
|
||||
<p className="text-muted">Established in Texas with a commitment to quality welding and fabrication services.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6 p-6 bg-gradient-card rounded-xl border border-border">
|
||||
<div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-ink font-bold">2010</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h3 className="font-semibold text-foreground mb-2">Facility Expansion</h3>
|
||||
<p className="text-muted">Expanded our fabrication shop with state-of-the-art equipment and technology.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6 p-6 bg-gradient-card rounded-xl border border-border">
|
||||
<div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-ink font-bold">2024</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h3 className="font-semibold text-foreground mb-2">Continued Excellence</h3>
|
||||
<p className="text-muted">Today we continue to serve Texas with unmatched quality and service.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
|
|
@ -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 (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
|
||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<main>
|
||||
<Hero />
|
||||
<CompanyBlurb />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gray-100">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">404</h1>
|
||||
<p className="mb-4 text-xl text-gray-600">Oops! Page not found</p>
|
||||
<a href="/" className="text-blue-500 underline hover:text-blue-700">
|
||||
Return to Home
|
||||
</a>
|
||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
||||
<div className="text-center space-y-6 max-w-md mx-auto px-4">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-6xl font-bold text-accent">404</h1>
|
||||
<h2 className="text-2xl font-semibold text-foreground">Page Not Found</h2>
|
||||
<p className="text-muted leading-relaxed">
|
||||
The page you're looking for doesn't exist or has been moved.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button asChild className="group">
|
||||
<a href="/">
|
||||
<Home className="mr-2 h-4 w-4" />
|
||||
Return to Home
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<main className="pt-16">
|
||||
{/* Hero Section */}
|
||||
<section className="py-24 hero-gradient">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-6">
|
||||
<h1 className="text-display-md font-bold text-foreground">
|
||||
{content.services.title}
|
||||
</h1>
|
||||
<p className="text-xl text-muted">
|
||||
Professional welding and fabrication services tailored to your industrial needs
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Grid */}
|
||||
<section className="py-24 bg-bg-elevated">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Services Column */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center space-x-3 mb-8">
|
||||
<Wrench className="h-8 w-8 text-accent" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Services</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{content.services.services.map((service, index) => (
|
||||
<div key={index} className="bg-gradient-card p-6 rounded-xl border border-border hover:shadow-subtle transition-smooth">
|
||||
<h3 className="font-semibold text-foreground mb-2">{service}</h3>
|
||||
<p className="text-muted text-sm">Professional service with certified specialists and modern equipment</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Specialties Column */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center space-x-3 mb-8">
|
||||
<Settings className="h-8 w-8 text-accent" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Specialties</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{content.services.specialties.map((specialty, index) => (
|
||||
<div key={index} className="bg-gradient-card p-6 rounded-xl border border-border hover:shadow-subtle transition-smooth">
|
||||
<h3 className="font-semibold text-foreground mb-2">{specialty}</h3>
|
||||
<p className="text-muted text-sm">Specialized expertise with attention to detail and quality assurance</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quality Assurance */}
|
||||
<section className="py-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-12">
|
||||
<div className="flex items-center justify-center space-x-3 mb-6">
|
||||
<Shield className="h-10 w-10 text-accent" />
|
||||
<h2 className="text-display-sm font-bold text-foreground">Quality Assurance</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
|
||||
<Shield className="h-8 w-8 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Certified Processes</h3>
|
||||
<p className="text-muted">All work follows industry standards and safety protocols</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
|
||||
<Wrench className="h-8 w-8 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Expert Craftsmen</h3>
|
||||
<p className="text-muted">Skilled professionals with extensive experience</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
|
||||
<Settings className="h-8 w-8 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Modern Equipment</h3>
|
||||
<p className="text-muted">State-of-the-art tools and technology</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
|
|
@ -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",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue