tknuth
/
bayarea-cc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor: Update theme and hero animation 

Update theme to black and blue color scheme.
Implement parallax scrolling effect for the hero section image.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-28 07:24:03 +00:00
parent 11e64ccb22
commit bce434c1a0
2 changed files with 45 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/home/HeroSection.tsx
View File

@ -1,17 +1,35 @@
import { ArrowRight, Play } from 'lucide-react';
import { Link } from 'react-router-dom';
import { useEffect, useRef } from 'react';
import heroNetwork from '@/assets/hero-network.jpg';
const HeroSection = () => {
const imageRef = useRef<HTMLImageElement>(null);
useEffect(() => {
const handleScroll = () => {
if (imageRef.current) {
const scrolled = window.pageYOffset;
const parallax = scrolled * 0.5;
imageRef.current.style.transform = `translateY(${parallax}px) scale(1.1)`;
}
};
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<section className="section-pin grid-overlay">
<div className="relative h-full flex items-center justify-center overflow-hidden">
{/* Background image with overlay */}
<div className="absolute inset-0">
{/* Background image with parallax */}
<div className="absolute inset-0 overflow-hidden">
<img
ref={imageRef}
src={heroNetwork}
alt="Modern IT infrastructure with network connections"
className="w-full h-full object-cover opacity-20"
className="w-full h-[110%] object-cover opacity-20 will-change-transform"
style={{ transform: 'translateY(0px) scale(1.1)' }}
/>
<div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/60 to-background"></div>
</div>

48
src/index.css
View File

@ -4,41 +4,41 @@
@tailwind components;
@tailwind utilities;
/* Bay Area Affiliates Design System - Neon on Dark */
/* Bay Area Affiliates Design System - Black and Blue */
@layer base {
:root {
/* Base teal/near-black system */
--background: 180 75% 7%; /* #071b1b */
--background-deep: 180 72% 9%; /* #0b2626 */
/* Base black system */
--background: 0 0% 3%; /* #080808 */
--background-deep: 0 0% 1%; /* #030303 */
--foreground: 0 0% 98%; /* Near white */
--foreground-muted: 0 0% 80%; /* Muted white */
/* Cards and surfaces */
--card: 180 65% 10%;
--card: 0 0% 8%;
--card-foreground: 0 0% 95%;
--card-border: 180 40% 15%;
--card-border: 220 20% 15%;
/* Neon lime accent system */
--neon: 76 100% 58%; /* #b7ff2a */
--neon-glow: 76 100% 58%;
--neon-muted: 76 60% 45%;
--neon-foreground: 180 75% 7%; /* Dark text on neon */
/* Electric blue accent system */
--neon: 220 100% 60%; /* #3366ff */
--neon-glow: 220 100% 70%;
--neon-muted: 220 60% 45%;
--neon-foreground: 0 0% 3%; /* Dark text on blue */
/* Interactive states */
--primary: 76 100% 58%; /* Neon lime */
--primary-foreground: 180 75% 7%;
--primary-hover: 76 100% 65%;
--primary: 220 100% 60%; /* Electric blue */
--primary-foreground: 0 0% 98%;
--primary-hover: 220 100% 70%;
--secondary: 180 40% 15%;
--secondary: 220 20% 15%;
--secondary-foreground: 0 0% 95%;
--secondary-hover: 180 40% 20%;
--secondary-hover: 220 20% 20%;
/* Muted and accent variants */
--muted: 180 40% 12%;
--muted: 220 15% 12%;
--muted-foreground: 0 0% 65%;
--accent: 180 40% 15%;
--accent: 220 20% 15%;
--accent-foreground: 0 0% 95%;
/* Status colors */
@ -49,10 +49,10 @@
--success-foreground: 0 0% 98%;
/* Borders and inputs */
--border: 180 40% 18%;
--input: 180 40% 15%;
--input-border: 180 40% 25%;
--ring: 76 100% 58%;
--border: 220 15% 18%;
--input: 220 15% 15%;
--input-border: 220 20% 25%;
--ring: 220 100% 60%;
/* Radius system */
--radius: 1.5rem;
@ -60,8 +60,8 @@
--radius-lg: 2rem;
/* Grid and overlay */
--grid-color: 180 40% 12%;
--overlay: 180 75% 7% / 0.8;
--grid-color: 220 15% 12%;
--overlay: 0 0% 3% / 0.8;
/* Animations and effects */
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);