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

Fast fertig

This commit is contained in:
knuthtimo-lab 2025-08-28 10:59:49 +02:00
parent bce434c1a0
commit 1cf349f430
7 changed files with 79 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -16,6 +16,11 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@lovable_dev" /> <meta name="twitter:site" content="@lovable_dev" />
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" /> <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/logo_bayarea.svg" />
<link rel="icon" type="image/png" href="/logo_bayarea.svg" />
<!-- Note: For production, consider converting logo_bayarea.svg to favicon.ico for better browser support -->
</head> </head>
<body> <body>

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.5 KiB

41
public/logo_bayarea.svg Normal file
View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="40"
height="40"
viewBox="0 0 10.583333 10.583333"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1">
<g
id="g2"
transform="translate(-59.849599,-62.962344)">
<g
id="g3"
transform="matrix(2.4622373,0,0,2.4622373,-103.30064,-98.368198)">
<path
id="rect4"
style="opacity:0.92;fill:#000080;fill-opacity:0;stroke-width:0.0110529;-inkscape-stroke:none;paint-order:markers fill stroke"
d="m 69.557843,68.36669 v -1.921262 h -1.960031 v 1.445588 c 0,0.26351 0.212068,0.475674 0.475578,0.475674 z" />
<path
id="path1"
style="opacity:0.92;fill:#000080;stroke-width:0.0110529;-inkscape-stroke:none;paint-order:markers fill stroke"
d="m 68.07339,65.851028 c -0.26351,0 -0.475578,0.212067 -0.475578,0.475579 v 0.118821 h 1.960031 v 1.921262 h 0.10113 c 0.26351,0 0.475578,-0.212164 0.475578,-0.475674 v -1.564409 c 0,-0.263512 -0.212068,-0.475579 -0.475578,-0.475579 z" />
<path
id="rect14"
style="opacity:0.92;fill:#0000ff;fill-opacity:0;stroke-width:0.0110529;-inkscape-stroke:none;paint-order:markers fill stroke"
d="m 68.587351,69.424584 v -1.960128 h -1.99822 v 1.484453 c 0,0.26351 0.212067,0.475675 0.475577,0.475675 z" />
<path
id="path2"
style="opacity:0.92;fill:#0000ff;stroke-width:0.0110529;-inkscape-stroke:none;paint-order:markers fill stroke"
d="m 67.064708,66.908921 c -0.26351,0 -0.475577,0.212068 -0.475577,0.475578 v 0.07996 h 1.99822 v 1.960128 h 0.06294 c 0.263512,0 0.475579,-0.212165 0.475579,-0.475675 v -1.56441 c 0,-0.26351 -0.212067,-0.475578 -0.475579,-0.475578 z" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/serverroom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

18
src/components/Navigation.tsx
View File

@ -33,11 +33,13 @@ const Navigation = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
{/* Logo */} {/* Logo */}
<Link to="/" className="flex items-center space-x-2"> <Link to="/" className="flex items-center space-x-3">
<div className="w-8 h-8 bg-neon rounded-lg flex items-center justify-center"> <img
<span className="text-neon-foreground font-bold text-sm">BA</span> src="/logo_bayarea.svg"
</div> alt="Bay Area Affiliates Logo"
<span className="font-heading font-bold text-lg text-foreground"> className="w-8 h-8 opacity-90 hover:opacity-100 transition-opacity duration-300"
/>
<span className="font-heading font-bold text-lg text-white">
Bay Area Affiliates Bay Area Affiliates
</span> </span>
</Link> </Link>
@ -51,7 +53,7 @@ const Navigation = () => {
className={`font-medium transition-colors duration-200 ${ className={`font-medium transition-colors duration-200 ${
isActive(item.path) isActive(item.path)
? 'text-neon' ? 'text-neon'
: 'text-foreground-muted hover:text-neon' : 'text-white hover:text-neon'
}`} }`}
> >
{item.name} {item.name}
@ -68,7 +70,7 @@ const Navigation = () => {
{/* Mobile menu button */} {/* Mobile menu button */}
<button <button
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="md:hidden text-foreground hover:text-neon transition-colors" className="md:hidden text-white hover:text-neon transition-colors"
aria-label="Toggle navigation menu" aria-label="Toggle navigation menu"
> >
{isOpen ? <X size={24} /> : <Menu size={24} />} {isOpen ? <X size={24} /> : <Menu size={24} />}
@ -87,7 +89,7 @@ const Navigation = () => {
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${ className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
isActive(item.path) isActive(item.path)
? 'text-neon bg-neon/10' ? 'text-neon bg-neon/10'
: 'text-foreground-muted hover:text-neon hover:bg-neon/5' : 'text-white hover:text-neon hover:bg-neon/5'
}`} }`}
> >
{item.name} {item.name}

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

@ -20,53 +20,45 @@ const HeroSection = () => {
}, []); }, []);
return ( return (
<section className="section-pin grid-overlay"> <section className="section-pin">
<div className="relative h-full flex items-center justify-center overflow-hidden"> <div className="relative h-full flex items-center justify-center overflow-hidden">
{/* Background image with parallax */} {/* Background image with parallax */}
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<img <img
ref={imageRef} ref={imageRef}
src={heroNetwork} src="/serverroom.png"
alt="Modern IT infrastructure with network connections" alt="Modern IT infrastructure with network connections"
className="w-full h-[110%] object-cover opacity-20 will-change-transform" className="w-full h-[110%] object-cover will-change-transform"
style={{ transform: 'translateY(0px) scale(1.1)' }} 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>
{/* Particle field effect */}
<div className="absolute inset-0 opacity-30">
{Array.from({ length: 50 }).map((_, i) => (
<div
key={i}
className="absolute w-1 h-1 bg-neon rounded-full animate-float"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 6}s`,
animationDuration: `${6 + Math.random() * 4}s`,
}}
/>
))}
</div> </div>
{/* Main content */} {/* Main content */}
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
{/* Logo */}
<div className="flex justify-center mb-8">
<img
src="/logo_bayarea.svg"
alt="Bay Area Affiliates Logo"
className="w-20 h-20 sm:w-24 sm:h-24 opacity-95 hover:opacity-100 transition-opacity duration-300 drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]"
/>
</div>
{/* Badge */} {/* Badge */}
<div className="inline-flex items-center px-4 py-2 rounded-full bg-neon/10 border border-neon/30 text-neon text-sm font-medium mb-8"> <div className="inline-flex items-center px-4 py-2 rounded-full bg-neon/20 border border-neon/40 text-neon text-sm font-medium mb-8 drop-shadow-[0_0_10px_rgba(51,102,255,0.5)]">
<span className="w-2 h-2 bg-neon rounded-full mr-2 animate-glow-pulse"></span> <span className="w-2 h-2 bg-neon rounded-full mr-2 animate-glow-pulse"></span>
Serving the Coastal Bend since 2010 Serving the Coastal Bend since 2010
</div> </div>
{/* Main headline */} {/* Main headline */}
<h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-foreground mb-6 text-balance"> <h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-white mb-6 text-balance drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
Modern IT that keeps your{' '} Modern IT that keeps your{' '}
<span className="text-neon text-glow">business moving</span> <span className="text-neon text-glow drop-shadow-[0_0_30px_rgba(51,102,255,0.8)]">business moving</span>
</h1> </h1>
{/* Subheadline */} {/* Subheadline */}
<p className="text-xl sm:text-2xl text-foreground-muted mb-12 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl sm:text-2xl text-white/95 mb-12 max-w-3xl mx-auto leading-relaxed drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]">
From fast devices to secure remote access and resilient networks — we design, From fast devices to secure remote access and resilient networks — we design,
run and protect your tech so you can focus on growth. run and protect your tech so you can focus on growth.
</p> </p>
@ -88,11 +80,11 @@ const HeroSection = () => {
</div> </div>
{/* Trust indicators */} {/* Trust indicators */}
<div className="mt-16 pt-8 border-t border-border/30"> <div className="mt-16 pt-8 border-t border-white/30">
<p className="text-sm text-foreground-muted mb-6">Trusted by businesses across Corpus Christi</p> <p className="text-sm text-white/90 mb-6 drop-shadow-[0_0_10px_rgba(255,255,255,0.2)]">Trusted by businesses across Corpus Christi</p>
<div className="flex flex-wrap justify-center items-center gap-8 opacity-60"> <div className="flex flex-wrap justify-center items-center gap-8">
{['Healthcare', 'Manufacturing', 'Professional Services', 'Non-Profit'].map((industry) => ( {['Healthcare', 'Manufacturing', 'Professional Services'].map((industry) => (
<span key={industry} className="text-sm font-medium text-foreground-muted"> <span key={industry} className="text-base font-bold text-white drop-shadow-[0_0_20px_rgba(255,255,255,0.6)] drop-shadow-[0_0_40px_rgba(255,255,255,0.3)]">
{industry} {industry}
</span> </span>
))} ))}
@ -103,7 +95,7 @@ const HeroSection = () => {
{/* Scroll indicator */} {/* Scroll indicator */}
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2"> <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
<div className="w-6 h-10 border-2 border-neon/50 rounded-full flex justify-center"> <div className="w-6 h-10 border-2 border-neon/60 rounded-full flex justify-center drop-shadow-[0_0_10px_rgba(51,102,255,0.3)]">
<div className="w-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div> <div className="w-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div>
</div> </div>
</div> </div>