Implement scroll-narrative website
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.
This commit is contained in:
gpt-engineer-app[bot]
@@ -18,24 +18,41 @@ export default {
|
||||
}
|
||||
},
|
||||
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: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
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))'
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
hover: 'hsl(var(--primary-hover))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))'
|
||||
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))'
|
||||
@@ -50,45 +67,72 @@ export default {
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))'
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
border: 'hsl(var(--card-border))',
|
||||
},
|
||||
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))'
|
||||
}
|
||||
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: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)'
|
||||
'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)'
|
||||
}
|
||||
from: { height: '0' },
|
||||
to: { height: 'var(--radix-accordion-content-height)' }
|
||||
},
|
||||
'accordion-up': {
|
||||
from: {
|
||||
height: 'var(--radix-accordion-content-height)'
|
||||
},
|
||||
to: {
|
||||
height: '0'
|
||||
}
|
||||
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'
|
||||
'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'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user