Fast fertig
This commit is contained in:
parent
bce434c1a0
commit
1cf349f430
|
|
@ -16,6 +16,11 @@
|
|||
<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" />
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
|
|
@ -33,11 +33,13 @@ const Navigation = () => {
|
|||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-neon rounded-lg flex items-center justify-center">
|
||||
<span className="text-neon-foreground font-bold text-sm">BA</span>
|
||||
</div>
|
||||
<span className="font-heading font-bold text-lg text-foreground">
|
||||
<Link to="/" className="flex items-center space-x-3">
|
||||
<img
|
||||
src="/logo_bayarea.svg"
|
||||
alt="Bay Area Affiliates Logo"
|
||||
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
|
||||
</span>
|
||||
</Link>
|
||||
|
|
@ -51,7 +53,7 @@ const Navigation = () => {
|
|||
className={`font-medium transition-colors duration-200 ${
|
||||
isActive(item.path)
|
||||
? 'text-neon'
|
||||
: 'text-foreground-muted hover:text-neon'
|
||||
: 'text-white hover:text-neon'
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
|
|
@ -68,7 +70,7 @@ const Navigation = () => {
|
|||
{/* Mobile menu button */}
|
||||
<button
|
||||
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"
|
||||
>
|
||||
{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 ${
|
||||
isActive(item.path)
|
||||
? '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}
|
||||
|
|
|
|||
|
|
@ -20,53 +20,45 @@ const HeroSection = () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<section className="section-pin grid-overlay">
|
||||
<section className="section-pin">
|
||||
<div className="relative h-full flex items-center justify-center overflow-hidden">
|
||||
{/* Background image with parallax */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<img
|
||||
ref={imageRef}
|
||||
src={heroNetwork}
|
||||
src="/serverroom.png"
|
||||
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)' }}
|
||||
/>
|
||||
<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>
|
||||
|
||||
{/* Main content */}
|
||||
<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">
|
||||
{/* 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 */}
|
||||
<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>
|
||||
Serving the Coastal Bend since 2010
|
||||
</div>
|
||||
|
||||
{/* 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{' '}
|
||||
<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>
|
||||
|
||||
{/* 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,
|
||||
run and protect your tech so you can focus on growth.
|
||||
</p>
|
||||
|
|
@ -88,11 +80,11 @@ const HeroSection = () => {
|
|||
</div>
|
||||
|
||||
{/* Trust indicators */}
|
||||
<div className="mt-16 pt-8 border-t border-border/30">
|
||||
<p className="text-sm text-foreground-muted mb-6">Trusted by businesses across Corpus Christi</p>
|
||||
<div className="flex flex-wrap justify-center items-center gap-8 opacity-60">
|
||||
{['Healthcare', 'Manufacturing', 'Professional Services', 'Non-Profit'].map((industry) => (
|
||||
<span key={industry} className="text-sm font-medium text-foreground-muted">
|
||||
<div className="mt-16 pt-8 border-t border-white/30">
|
||||
<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">
|
||||
{['Healthcare', 'Manufacturing', 'Professional Services'].map((industry) => (
|
||||
<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}
|
||||
</span>
|
||||
))}
|
||||
|
|
@ -103,7 +95,7 @@ const HeroSection = () => {
|
|||
|
||||
{/* Scroll indicator */}
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue