11e64ccb22
Build a high-conversion, story-driven marketing site for Bay Area Affiliates, Inc. The site will feature a scroll-narrative experience with pinned hero, section pinning, subtle parallax, and neon accents. It prioritizes performance, accessibility, and clear CTAs, targeting small to mid-sized businesses in the Coastal Bend. Key features include: - Pinned hero section with headline, subcopy, and CTAs. - Value pillars section with alternating media layouts. - "How We Work" section with a pinned timeline. - Services overview with cards linking to detail pages. - Local focus section with client logos and testimonials. - CTA footer band with micro-FAQ. - Dedicated Services, About, Blog, and Contact pages. The design will adhere to the specified brand guidelines, including a deep teal/near-black base with neon lime accents. Interactions will respect `prefers-reduced-motion`. Performance and SEO best practices will be followed, including metadata, lazy loading, and local SEO keywords. Accessibility standards (WCAG AA) will be met.
141 lines
3.7 KiB
TypeScript
141 lines
3.7 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
export default {
|
|
darkMode: ["class"],
|
|
content: [
|
|
"./pages/**/*.{ts,tsx}",
|
|
"./components/**/*.{ts,tsx}",
|
|
"./app/**/*.{ts,tsx}",
|
|
"./src/**/*.{ts,tsx}",
|
|
],
|
|
prefix: "",
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: {
|
|
'2xl': '1400px'
|
|
}
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
'heading': ['Poppins', 'sans-serif'],
|
|
'body': ['Inter', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
'input-border': 'hsl(var(--input-border))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: {
|
|
DEFAULT: 'hsl(var(--background))',
|
|
deep: 'hsl(var(--background-deep))',
|
|
},
|
|
foreground: {
|
|
DEFAULT: 'hsl(var(--foreground))',
|
|
muted: 'hsl(var(--foreground-muted))',
|
|
},
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))',
|
|
hover: 'hsl(var(--primary-hover))',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))',
|
|
hover: 'hsl(var(--secondary-hover))',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))'
|
|
},
|
|
success: {
|
|
DEFAULT: 'hsl(var(--success))',
|
|
foreground: 'hsl(var(--success-foreground))'
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))'
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))'
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))'
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))',
|
|
border: 'hsl(var(--card-border))',
|
|
},
|
|
neon: {
|
|
DEFAULT: 'hsl(var(--neon))',
|
|
glow: 'hsl(var(--neon-glow))',
|
|
muted: 'hsl(var(--neon-muted))',
|
|
foreground: 'hsl(var(--neon-foreground))',
|
|
},
|
|
grid: 'hsl(var(--grid-color))',
|
|
},
|
|
borderRadius: {
|
|
'2xl': 'var(--radius-lg)',
|
|
xl: 'var(--radius)',
|
|
lg: 'calc(var(--radius) - 0.25rem)',
|
|
md: 'calc(var(--radius) - 0.5rem)',
|
|
sm: 'var(--radius-sm)',
|
|
},
|
|
spacing: {
|
|
'18': '4.5rem',
|
|
'88': '22rem',
|
|
'128': '32rem',
|
|
},
|
|
boxShadow: {
|
|
'neon': 'var(--shadow-neon)',
|
|
'neon-strong': 'var(--shadow-neon-strong)',
|
|
'card': 'var(--shadow-card)',
|
|
},
|
|
keyframes: {
|
|
'accordion-down': {
|
|
from: { height: '0' },
|
|
to: { height: 'var(--radix-accordion-content-height)' }
|
|
},
|
|
'accordion-up': {
|
|
from: { height: 'var(--radix-accordion-content-height)' },
|
|
to: { height: '0' }
|
|
},
|
|
'fade-in': {
|
|
from: { opacity: '0', transform: 'translateY(20px)' },
|
|
to: { opacity: '1', transform: 'translateY(0)' }
|
|
},
|
|
'fade-in-scale': {
|
|
from: { opacity: '0', transform: 'translateY(20px) scale(0.95)' },
|
|
to: { opacity: '1', transform: 'translateY(0) scale(1)' }
|
|
},
|
|
'slide-in-right': {
|
|
from: { transform: 'translateX(100%)' },
|
|
to: { transform: 'translateX(0)' }
|
|
},
|
|
'glow-pulse': {
|
|
'0%, 100%': { boxShadow: '0 0 5px hsl(var(--neon) / 0.3)' },
|
|
'50%': { boxShadow: '0 0 20px hsl(var(--neon) / 0.6)' }
|
|
},
|
|
'float': {
|
|
'0%, 100%': { transform: 'translateY(0px)' },
|
|
'50%': { transform: 'translateY(-10px)' }
|
|
}
|
|
},
|
|
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-scale': 'fade-in-scale 0.6s ease-out',
|
|
'slide-in-right': 'slide-in-right 0.3s ease-out',
|
|
'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
|
|
'float': 'float 6s ease-in-out infinite'
|
|
}
|
|
}
|
|
},
|
|
plugins: [require("tailwindcss-animate")],
|
|
} satisfies Config;
|