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]
parent
d385113dfe
commit
11e64ccb22
11
index.html
11
index.html
|
|
@ -3,12 +3,13 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>coastal-glow-narrative</title>
|
<title>Bay Area Affiliates - IT Services Corpus Christi | Managed IT Coastal Bend</title>
|
||||||
<meta name="description" content="Lovable Generated Project" />
|
<meta name="description" content="Top-notch Computer & Networking solutions for the Coastal Bend. We design, run and protect your IT so you can focus on growth. Serving Corpus Christi businesses since 2010." />
|
||||||
<meta name="author" content="Lovable" />
|
<meta name="keywords" content="IT services Corpus Christi, managed IT Coastal Bend, computer networking solutions, business IT support, VPN services, cloud computing Texas" />
|
||||||
|
<meta name="author" content="Bay Area Affiliates, Inc." />
|
||||||
|
|
||||||
<meta property="og:title" content="coastal-glow-narrative" />
|
<meta property="og:title" content="Bay Area Affiliates - IT Services Corpus Christi | Managed IT Coastal Bend" />
|
||||||
<meta property="og:description" content="Lovable Generated Project" />
|
<meta property="og:description" content="Top-notch Computer & Networking solutions for the Coastal Bend. We design, run and protect your IT so you can focus on growth." />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,10 @@ import { TooltipProvider } from "@/components/ui/tooltip";
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
import Index from "./pages/Index";
|
import Index from "./pages/Index";
|
||||||
|
import Services from "./pages/Services";
|
||||||
|
import About from "./pages/About";
|
||||||
|
import Blog from "./pages/Blog";
|
||||||
|
import Contact from "./pages/Contact";
|
||||||
import NotFound from "./pages/NotFound";
|
import NotFound from "./pages/NotFound";
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
|
|
@ -16,6 +20,10 @@ const App = () => (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Index />} />
|
<Route path="/" element={<Index />} />
|
||||||
|
<Route path="/services" element={<Services />} />
|
||||||
|
<Route path="/about" element={<About />} />
|
||||||
|
<Route path="/blog" element={<Blog />} />
|
||||||
|
<Route path="/contact" element={<Contact />} />
|
||||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="*" element={<NotFound />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
|
|
@ -0,0 +1,129 @@
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { MapPin, Phone, Mail, ArrowUp } from 'lucide-react';
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
const scrollToTop = () => {
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const quickLinks = [
|
||||||
|
{ name: 'Services', path: '/services' },
|
||||||
|
{ name: 'About', path: '/about' },
|
||||||
|
{ name: 'Blog', path: '/blog' },
|
||||||
|
{ name: 'Contact', path: '/contact' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
'Hardware & Desktop Support',
|
||||||
|
'Network Infrastructure',
|
||||||
|
'Virtualization & Cloud',
|
||||||
|
'Secure Remote Access',
|
||||||
|
'Backup & Continuity',
|
||||||
|
'Microsoft 365',
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="bg-background-deep border-t border-border relative">
|
||||||
|
{/* Back to top button */}
|
||||||
|
<button
|
||||||
|
onClick={scrollToTop}
|
||||||
|
className="absolute -top-6 left-1/2 transform -translate-x-1/2 w-12 h-12 bg-neon rounded-full flex items-center justify-center text-neon-foreground hover:shadow-neon transition-all duration-300 hover:-translate-y-1"
|
||||||
|
aria-label="Back to top"
|
||||||
|
>
|
||||||
|
<ArrowUp className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
||||||
|
{/* Company info */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-6">
|
||||||
|
<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">
|
||||||
|
Bay Area Affiliates, Inc.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-foreground-muted mb-6 leading-relaxed max-w-md">
|
||||||
|
Top-notch Computer & Networking solutions for the Coastal Bend.
|
||||||
|
We design, run and protect your IT so you can focus on growth.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center text-foreground-muted">
|
||||||
|
<MapPin className="w-4 h-4 mr-3 text-neon" />
|
||||||
|
<span>Serving Corpus Christi & the Coastal Bend</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-foreground-muted">
|
||||||
|
<Phone className="w-4 h-4 mr-3 text-neon" />
|
||||||
|
<a href="tel:+1-361-555-0123" className="hover:text-neon transition-colors">
|
||||||
|
(361) 555-0123
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-foreground-muted">
|
||||||
|
<Mail className="w-4 h-4 mr-3 text-neon" />
|
||||||
|
<a href="mailto:info@bayareaaffiliates.com" className="hover:text-neon transition-colors">
|
||||||
|
info@bayareaaffiliates.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick links */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-heading font-semibold text-foreground mb-4">Company</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{quickLinks.map((link) => (
|
||||||
|
<li key={link.name}>
|
||||||
|
<Link
|
||||||
|
to={link.path}
|
||||||
|
className="text-foreground-muted hover:text-neon transition-colors"
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Services */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-heading font-semibold text-foreground mb-4">Services</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{services.map((service) => (
|
||||||
|
<li key={service}>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="text-foreground-muted hover:text-neon transition-colors text-sm"
|
||||||
|
>
|
||||||
|
{service}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom bar */}
|
||||||
|
<div className="pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center">
|
||||||
|
<div className="text-foreground-muted text-sm mb-4 sm:mb-0">
|
||||||
|
© 2024 Bay Area Affiliates, Inc. All rights reserved.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-6 text-sm">
|
||||||
|
<Link to="/privacy" className="text-foreground-muted hover:text-neon transition-colors">
|
||||||
|
Privacy Policy
|
||||||
|
</Link>
|
||||||
|
<Link to="/terms" className="text-foreground-muted hover:text-neon transition-colors">
|
||||||
|
Terms of Service
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import { Menu, X } from 'lucide-react';
|
||||||
|
|
||||||
|
const Navigation = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 50);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: 'Home', path: '/' },
|
||||||
|
{ name: 'Services', path: '/services' },
|
||||||
|
{ name: 'About', path: '/about' },
|
||||||
|
{ name: 'Blog', path: '/blog' },
|
||||||
|
{ name: 'Contact', path: '/contact' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const isActive = (path: string) => location.pathname === path;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||||
|
isScrolled ? 'bg-background/90 backdrop-blur-md border-b border-border' : 'bg-transparent'
|
||||||
|
}`}>
|
||||||
|
<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">
|
||||||
|
Bay Area Affiliates
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<div className="hidden md:flex items-center space-x-8">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.name}
|
||||||
|
to={item.path}
|
||||||
|
className={`font-medium transition-colors duration-200 ${
|
||||||
|
isActive(item.path)
|
||||||
|
? 'text-neon'
|
||||||
|
: 'text-foreground-muted hover:text-neon'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
<Link
|
||||||
|
to="/contact"
|
||||||
|
className="btn-neon ml-4"
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile menu button */}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="md:hidden text-foreground hover:text-neon transition-colors"
|
||||||
|
aria-label="Toggle navigation menu"
|
||||||
|
>
|
||||||
|
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Navigation */}
|
||||||
|
{isOpen && (
|
||||||
|
<div className="md:hidden bg-background/95 backdrop-blur-md border-t border-border">
|
||||||
|
<div className="px-2 pt-2 pb-3 space-y-1">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.name}
|
||||||
|
to={item.path}
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
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'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
<Link
|
||||||
|
to="/contact"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className="block w-full text-center btn-neon mt-4"
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { useEffect, useRef, ReactNode } from 'react';
|
||||||
|
|
||||||
|
interface ScrollRevealProps {
|
||||||
|
children: ReactNode;
|
||||||
|
delay?: number;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ScrollReveal = ({ children, delay = 0, className = '' }: ScrollRevealProps) => {
|
||||||
|
const elementRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const element = elementRef.current;
|
||||||
|
if (!element) return;
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
setTimeout(() => {
|
||||||
|
element.classList.add('revealed');
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
observer.observe(element);
|
||||||
|
|
||||||
|
return () => observer.unobserve(element);
|
||||||
|
}, [delay]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={elementRef}
|
||||||
|
className={`scroll-reveal ${className}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ScrollReveal;
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
import { ArrowRight, Clock, DollarSign, Phone } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import ScrollReveal from '../ScrollReveal';
|
||||||
|
|
||||||
|
const CTASection = () => {
|
||||||
|
const faqs = [
|
||||||
|
{
|
||||||
|
icon: Clock,
|
||||||
|
question: "How quickly can you start?",
|
||||||
|
answer: "Most assessments can begin within 48 hours of contact."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: DollarSign,
|
||||||
|
question: "How do you price services?",
|
||||||
|
answer: "Transparent monthly pricing based on devices and services needed."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Phone,
|
||||||
|
question: "What's included in support?",
|
||||||
|
answer: "24/7 monitoring, helpdesk, proactive maintenance, and SLA guarantees."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-background-deep relative overflow-hidden">
|
||||||
|
{/* Background decoration */}
|
||||||
|
<div className="absolute inset-0 grid-overlay opacity-20"></div>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-neon/5 to-transparent"></div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
|
<ScrollReveal>
|
||||||
|
<h2 className="font-heading font-bold text-4xl sm:text-5xl lg:text-6xl text-foreground mb-6">
|
||||||
|
Ready for <span className="text-neon text-glow">reliable IT?</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-xl text-foreground-muted mb-12 leading-relaxed">
|
||||||
|
Join 150+ Coastal Bend businesses that trust us with their technology.
|
||||||
|
Get started with a free 20-minute assessment.
|
||||||
|
</p>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
{/* Primary CTAs */}
|
||||||
|
<ScrollReveal delay={200}>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
|
||||||
|
<Link
|
||||||
|
to="/contact"
|
||||||
|
className="btn-neon group flex items-center space-x-2 text-lg px-8 py-4"
|
||||||
|
>
|
||||||
|
<span>Book a 20-minute assessment</span>
|
||||||
|
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
to="/contact"
|
||||||
|
className="btn-ghost group flex items-center space-x-2 text-lg px-8 py-4"
|
||||||
|
>
|
||||||
|
<span>Send a message</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
{/* Micro FAQ */}
|
||||||
|
<ScrollReveal delay={400}>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{faqs.map((faq, index) => {
|
||||||
|
const Icon = faq.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={faq.question} className="text-left">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<div className="w-8 h-8 bg-neon/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<Icon className="w-4 h-4 text-neon" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-2">
|
||||||
|
{faq.question}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-foreground-muted">
|
||||||
|
{faq.answer}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
{/* Contact info */}
|
||||||
|
<ScrollReveal delay={600}>
|
||||||
|
<div className="mt-16 pt-8 border-t border-border/30">
|
||||||
|
<p className="text-sm text-foreground-muted mb-4">
|
||||||
|
Ready to talk? We're here to help.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center text-sm">
|
||||||
|
<a
|
||||||
|
href="tel:+1-361-555-0123"
|
||||||
|
className="text-neon hover:text-neon/80 transition-colors flex items-center"
|
||||||
|
>
|
||||||
|
<Phone className="w-4 h-4 mr-2" />
|
||||||
|
(361) 555-0123
|
||||||
|
</a>
|
||||||
|
<span className="hidden sm:block text-border">|</span>
|
||||||
|
<a
|
||||||
|
href="mailto:info@bayareaaffiliates.com"
|
||||||
|
className="text-neon hover:text-neon/80 transition-colors"
|
||||||
|
>
|
||||||
|
info@bayareaaffiliates.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CTASection;
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
import { ArrowRight, Play } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import heroNetwork from '@/assets/hero-network.jpg';
|
||||||
|
|
||||||
|
const HeroSection = () => {
|
||||||
|
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">
|
||||||
|
<img
|
||||||
|
src={heroNetwork}
|
||||||
|
alt="Modern IT infrastructure with network connections"
|
||||||
|
className="w-full h-full object-cover opacity-20"
|
||||||
|
/>
|
||||||
|
<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">
|
||||||
|
{/* 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">
|
||||||
|
<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">
|
||||||
|
Modern IT that keeps your{' '}
|
||||||
|
<span className="text-neon text-glow">business moving</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Subheadline */}
|
||||||
|
<p className="text-xl sm:text-2xl text-foreground-muted mb-12 max-w-3xl mx-auto leading-relaxed">
|
||||||
|
From fast devices to secure remote access and resilient networks — we design,
|
||||||
|
run and protect your tech so you can focus on growth.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* CTA buttons */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
|
<Link
|
||||||
|
to="/contact"
|
||||||
|
className="btn-neon group flex items-center space-x-2"
|
||||||
|
>
|
||||||
|
<span>Get in touch</span>
|
||||||
|
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<button className="btn-ghost group flex items-center space-x-2">
|
||||||
|
<Play className="w-5 h-5 transition-transform group-hover:scale-110" />
|
||||||
|
<span>See our system</span>
|
||||||
|
</button>
|
||||||
|
</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">
|
||||||
|
{industry}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HeroSection;
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { Search, Shield, Cog, Zap } from 'lucide-react';
|
||||||
|
import ScrollReveal from '../ScrollReveal';
|
||||||
|
|
||||||
|
const ProcessTimeline = () => {
|
||||||
|
const [activeStep, setActiveStep] = useState(0);
|
||||||
|
const sectionRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
icon: Search,
|
||||||
|
title: 'Assess',
|
||||||
|
description: 'Discovery, inventory, quick wins report',
|
||||||
|
details: 'We start with a comprehensive assessment of your current IT infrastructure, identifying immediate opportunities for improvement and creating a roadmap for optimization.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Cog,
|
||||||
|
title: 'Stabilize',
|
||||||
|
description: 'Patching, backups, device hygiene, ticket triage',
|
||||||
|
details: 'Foundation work to ensure your systems are secure, backed up, and running smoothly. We address critical vulnerabilities and establish reliable backup procedures.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Harden',
|
||||||
|
description: 'MFA, endpoint security, VPN, network segmentation',
|
||||||
|
details: 'Implementation of robust security measures including multi-factor authentication, endpoint protection, secure remote access, and network isolation strategies.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Zap,
|
||||||
|
title: 'Automate',
|
||||||
|
description: 'Monitoring, updates, reporting, playbooks',
|
||||||
|
details: 'Deploy automated monitoring systems, update management, comprehensive reporting, and documented procedures to maintain peak performance with minimal intervention.'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
if (!sectionRef.current) return;
|
||||||
|
|
||||||
|
const section = sectionRef.current;
|
||||||
|
const rect = section.getBoundingClientRect();
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
|
||||||
|
// Calculate scroll progress within the section
|
||||||
|
const sectionHeight = rect.height;
|
||||||
|
const scrollProgress = Math.max(0, Math.min(1, (windowHeight - rect.top) / (windowHeight + sectionHeight)));
|
||||||
|
|
||||||
|
// Determine active step based on scroll progress
|
||||||
|
const newActiveStep = Math.min(steps.length - 1, Math.floor(scrollProgress * steps.length));
|
||||||
|
setActiveStep(newActiveStep);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, [steps.length]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section ref={sectionRef} className="py-32 bg-background relative overflow-hidden">
|
||||||
|
{/* Background decoration */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||||
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="text-center mb-20">
|
||||||
|
<h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
|
||||||
|
How we <span className="text-neon">transform</span> your IT
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-foreground-muted max-w-3xl mx-auto">
|
||||||
|
Our proven four-phase methodology ensures systematic improvement and lasting results.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
{/* Timeline line */}
|
||||||
|
<div className="absolute left-8 lg:left-1/2 lg:transform lg:-translate-x-1/2 top-0 bottom-0 w-px bg-border">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 w-full bg-neon transition-all duration-500 ease-out"
|
||||||
|
style={{ height: `${(activeStep + 1) * 25}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Steps */}
|
||||||
|
<div className="space-y-16 lg:space-y-24">
|
||||||
|
{steps.map((step, index) => {
|
||||||
|
const Icon = step.icon;
|
||||||
|
const isActive = index <= activeStep;
|
||||||
|
const isEven = index % 2 === 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollReveal key={step.title} delay={index * 100}>
|
||||||
|
<div className={`relative flex flex-col lg:flex-row items-center ${
|
||||||
|
isEven ? '' : 'lg:flex-row-reverse'
|
||||||
|
}`}>
|
||||||
|
{/* Step content */}
|
||||||
|
<div className={`flex-1 ${isEven ? 'lg:pr-16' : 'lg:pl-16'} ${
|
||||||
|
isEven ? 'lg:text-right' : 'lg:text-left'
|
||||||
|
} text-center lg:text-left`}>
|
||||||
|
<div className="card-dark p-8 max-w-lg mx-auto lg:mx-0">
|
||||||
|
<div className="mb-4">
|
||||||
|
<span className="text-sm font-medium text-neon uppercase tracking-wider">
|
||||||
|
Step {index + 1}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-heading font-bold text-2xl text-foreground mb-3">
|
||||||
|
{step.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-foreground-muted mb-4">
|
||||||
|
{step.description}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-foreground-muted">
|
||||||
|
{step.details}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Timeline dot */}
|
||||||
|
<div className="relative z-10 my-8 lg:my-0">
|
||||||
|
<div className={`w-16 h-16 rounded-full border-4 flex items-center justify-center transition-all duration-500 ${
|
||||||
|
isActive
|
||||||
|
? 'border-neon bg-neon text-neon-foreground shadow-neon'
|
||||||
|
: 'border-border bg-background text-foreground-muted'
|
||||||
|
}`}>
|
||||||
|
<Icon className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Spacer for layout */}
|
||||||
|
<div className="flex-1 hidden lg:block"></div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProcessTimeline;
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
import { MapPin, Star, Users } from 'lucide-react';
|
||||||
|
import ScrollReveal from '../ScrollReveal';
|
||||||
|
|
||||||
|
const ProofSection = () => {
|
||||||
|
const stats = [
|
||||||
|
{ value: '150+', label: 'Local businesses served' },
|
||||||
|
{ value: '99.9%', label: 'Network uptime achieved' },
|
||||||
|
{ value: '15+', label: 'Years in Coastal Bend' },
|
||||||
|
{ value: '<2min', label: 'Average response time' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const testimonial = {
|
||||||
|
quote: "Bay Area Affiliates transformed our IT infrastructure completely. Their proactive approach means we rarely have downtime, and when issues do arise, they're resolved quickly. Our team can focus on patient care instead of tech problems.",
|
||||||
|
author: "Sarah Martinez",
|
||||||
|
title: "Operations Manager",
|
||||||
|
company: "Coastal Medical Group"
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-background relative overflow-hidden">
|
||||||
|
{/* Background decoration */}
|
||||||
|
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||||
|
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<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">
|
||||||
|
<MapPin className="w-4 h-4 mr-2" />
|
||||||
|
Proudly serving the Coastal Bend
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
|
||||||
|
Local expertise for{' '}
|
||||||
|
<span className="text-neon">Corpus Christi</span>{' '}
|
||||||
|
and surrounding communities
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-xl text-foreground-muted max-w-3xl mx-auto">
|
||||||
|
We understand the unique challenges of businesses in our region and provide
|
||||||
|
tailored solutions that work in the real world.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<ScrollReveal delay={200}>
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-20">
|
||||||
|
{stats.map((stat, index) => (
|
||||||
|
<div key={stat.label} className="text-center">
|
||||||
|
<div className="font-heading font-bold text-4xl lg:text-5xl text-neon mb-2">
|
||||||
|
{stat.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-foreground-muted text-sm lg:text-base">
|
||||||
|
{stat.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
{/* Testimonial */}
|
||||||
|
<ScrollReveal delay={400}>
|
||||||
|
<div className="card-dark p-8 lg:p-12 max-w-4xl mx-auto">
|
||||||
|
<div className="flex flex-col lg:flex-row items-start gap-8">
|
||||||
|
{/* Quote */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center mb-6">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<Star key={i} className="w-5 h-5 text-neon fill-current" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<blockquote className="text-lg lg:text-xl text-foreground leading-relaxed mb-6">
|
||||||
|
"{testimonial.quote}"
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-12 h-12 bg-neon/20 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<Users className="w-6 h-6 text-neon" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-foreground">{testimonial.author}</div>
|
||||||
|
<div className="text-foreground-muted text-sm">
|
||||||
|
{testimonial.title}, {testimonial.company}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
{/* Service area */}
|
||||||
|
<ScrollReveal delay={600}>
|
||||||
|
<div className="mt-16 text-center">
|
||||||
|
<h3 className="font-heading font-semibold text-xl text-foreground mb-6">
|
||||||
|
Serving businesses throughout the Coastal Bend
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap justify-center items-center gap-6 text-foreground-muted">
|
||||||
|
{[
|
||||||
|
'Corpus Christi', 'Portland', 'Ingleside', 'Aransas Pass',
|
||||||
|
'Rockport', 'Fulton', 'Sinton', 'Mathis'
|
||||||
|
].map((city) => (
|
||||||
|
<span key={city} className="flex items-center text-sm">
|
||||||
|
<MapPin className="w-3 h-3 mr-1 text-neon" />
|
||||||
|
{city}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProofSection;
|
||||||
|
|
@ -0,0 +1,128 @@
|
||||||
|
import { Monitor, Wifi, Cloud, Shield, Database, Settings } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import ScrollReveal from '../ScrollReveal';
|
||||||
|
|
||||||
|
const ServicesOverview = () => {
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
icon: Monitor,
|
||||||
|
title: 'Hardware & Desktop Support',
|
||||||
|
description: 'Fast devices and responsive support that keeps your team productive.',
|
||||||
|
features: ['SSD upgrades', 'Hardware procurement', '24/7 helpdesk']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Wifi,
|
||||||
|
title: 'Network Infrastructure',
|
||||||
|
description: 'Reliable switching and Wi-Fi that scales with your business growth.',
|
||||||
|
features: ['Enterprise Wi-Fi', 'Network design', 'Performance monitoring']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Cloud,
|
||||||
|
title: 'Virtualization & Cloud',
|
||||||
|
description: 'Modern infrastructure that reduces costs and improves flexibility.',
|
||||||
|
features: ['Cloud migration', 'Hybrid solutions', 'Resource optimization']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Secure Remote Access',
|
||||||
|
description: 'Zero-drama VPN with modern protocols for secure anywhere access.',
|
||||||
|
features: ['WireGuard VPN', 'Multi-factor auth', 'Secure endpoints']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Database,
|
||||||
|
title: 'Backup & Business Continuity',
|
||||||
|
description: 'Comprehensive protection against data loss and downtime.',
|
||||||
|
features: ['Automated backups', 'Disaster recovery', 'Business continuity']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Settings,
|
||||||
|
title: 'Microsoft 365 Enablement',
|
||||||
|
description: 'Full utilization of your M365 investment with expert guidance.',
|
||||||
|
features: ['Migration services', 'Training & adoption', 'Security configuration']
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-background-deep relative overflow-hidden">
|
||||||
|
{/* Background decoration */}
|
||||||
|
<div className="absolute inset-0 grid-overlay opacity-20"></div>
|
||||||
|
<div className="absolute top-1/4 right-0 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
|
||||||
|
<div className="absolute bottom-1/4 left-0 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
|
||||||
|
Complete IT solutions for{' '}
|
||||||
|
<span className="text-neon">modern businesses</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-foreground-muted max-w-3xl mx-auto">
|
||||||
|
From desktop support to enterprise infrastructure — we've got your technology covered.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{services.map((service, index) => {
|
||||||
|
const Icon = service.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollReveal key={service.title} delay={index * 100}>
|
||||||
|
<div className="card-dark p-8 group hover:shadow-neon transition-all duration-500 hover:-translate-y-1">
|
||||||
|
{/* Icon */}
|
||||||
|
<div className="w-12 h-12 bg-neon/20 rounded-xl flex items-center justify-center mb-6 group-hover:bg-neon/30 transition-colors">
|
||||||
|
<Icon className="w-6 h-6 text-neon" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<h3 className="font-heading font-bold text-xl text-foreground mb-4">
|
||||||
|
{service.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-foreground-muted mb-6 leading-relaxed">
|
||||||
|
{service.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Features */}
|
||||||
|
<ul className="space-y-2 mb-6">
|
||||||
|
{service.features.map((feature) => (
|
||||||
|
<li key={feature} className="flex items-center text-sm text-foreground-muted">
|
||||||
|
<div className="w-1.5 h-1.5 bg-neon rounded-full mr-3"></div>
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="inline-flex items-center text-neon font-medium hover:text-neon/80 transition-colors group-hover:underline"
|
||||||
|
>
|
||||||
|
Learn more
|
||||||
|
<svg className="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom CTA */}
|
||||||
|
<ScrollReveal delay={600}>
|
||||||
|
<div className="text-center mt-16">
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="btn-ghost text-lg px-12 py-4"
|
||||||
|
>
|
||||||
|
View all services
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ServicesOverview;
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
import { Shield, Zap, Users } from 'lucide-react';
|
||||||
|
import ScrollReveal from '../ScrollReveal';
|
||||||
|
|
||||||
|
const ValuePillars = () => {
|
||||||
|
const pillars = [
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
number: '01',
|
||||||
|
title: 'End-to-end Managed IT',
|
||||||
|
description: 'Comprehensive computer & networking solutions tailored to your workflows — helpdesk, proactive maintenance, and clear SLAs.',
|
||||||
|
image: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=600&h=400&fit=crop&auto=format'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Zap,
|
||||||
|
number: '02',
|
||||||
|
title: 'Faster Devices, Happier Teams',
|
||||||
|
description: 'Practical upgrades like SSD migrations and cleanup reduce tickets and boost morale.',
|
||||||
|
image: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=600&h=400&fit=crop&auto=format'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
number: '03',
|
||||||
|
title: 'Secure Remote Access',
|
||||||
|
description: 'Zero-drama VPN with modern protocols (e.g., WireGuard) for secure, high-speed access anywhere.',
|
||||||
|
image: 'https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?w=600&h=400&fit=crop&auto=format'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-background-deep relative overflow-hidden">
|
||||||
|
{/* Background decoration */}
|
||||||
|
<div className="absolute inset-0 grid-overlay opacity-20"></div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
|
||||||
|
Why teams choose us for{' '}
|
||||||
|
<span className="text-neon">reliable IT</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-foreground-muted max-w-3xl mx-auto">
|
||||||
|
We handle the complexity so you can focus on what you do best.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
<div className="space-y-24">
|
||||||
|
{pillars.map((pillar, index) => {
|
||||||
|
const Icon = pillar.icon;
|
||||||
|
const isReverse = index % 2 === 1;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollReveal key={pillar.number} delay={index * 200}>
|
||||||
|
<div className={`flex flex-col ${isReverse ? 'lg:flex-row-reverse' : 'lg:flex-row'} items-center gap-12 lg:gap-16`}>
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1 space-y-6">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<span className="text-6xl font-heading font-bold text-neon/30">
|
||||||
|
{pillar.number}
|
||||||
|
</span>
|
||||||
|
<div className="w-12 h-12 bg-neon/20 rounded-xl flex items-center justify-center">
|
||||||
|
<Icon className="w-6 h-6 text-neon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="font-heading font-bold text-3xl text-foreground">
|
||||||
|
{pillar.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-lg text-foreground-muted leading-relaxed">
|
||||||
|
{pillar.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button className="btn-ghost">
|
||||||
|
Learn more
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Image */}
|
||||||
|
<div className="flex-1 parallax">
|
||||||
|
<div className="card-dark p-2 group hover:shadow-neon transition-all duration-500">
|
||||||
|
<img
|
||||||
|
src={pillar.image}
|
||||||
|
alt={pillar.title}
|
||||||
|
className="w-full h-64 lg:h-80 object-cover rounded-xl transition-transform duration-500 group-hover:scale-105"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ValuePillars;
|
||||||
225
src/index.css
225
src/index.css
|
|
@ -1,96 +1,76 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
|
/* Bay Area Affiliates Design System - Neon on Dark */
|
||||||
All colors MUST be HSL.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 100%;
|
/* Base teal/near-black system */
|
||||||
--foreground: 222.2 84% 4.9%;
|
--background: 180 75% 7%; /* #071b1b */
|
||||||
|
--background-deep: 180 72% 9%; /* #0b2626 */
|
||||||
|
--foreground: 0 0% 98%; /* Near white */
|
||||||
|
--foreground-muted: 0 0% 80%; /* Muted white */
|
||||||
|
|
||||||
--card: 0 0% 100%;
|
/* Cards and surfaces */
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
--card: 180 65% 10%;
|
||||||
|
--card-foreground: 0 0% 95%;
|
||||||
|
--card-border: 180 40% 15%;
|
||||||
|
|
||||||
--popover: 0 0% 100%;
|
/* Neon lime accent system */
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
--neon: 76 100% 58%; /* #b7ff2a */
|
||||||
|
--neon-glow: 76 100% 58%;
|
||||||
|
--neon-muted: 76 60% 45%;
|
||||||
|
--neon-foreground: 180 75% 7%; /* Dark text on neon */
|
||||||
|
|
||||||
--primary: 222.2 47.4% 11.2%;
|
/* Interactive states */
|
||||||
--primary-foreground: 210 40% 98%;
|
--primary: 76 100% 58%; /* Neon lime */
|
||||||
|
--primary-foreground: 180 75% 7%;
|
||||||
|
--primary-hover: 76 100% 65%;
|
||||||
|
|
||||||
--secondary: 210 40% 96.1%;
|
--secondary: 180 40% 15%;
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--secondary-foreground: 0 0% 95%;
|
||||||
|
--secondary-hover: 180 40% 20%;
|
||||||
|
|
||||||
--muted: 210 40% 96.1%;
|
/* Muted and accent variants */
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
--muted: 180 40% 12%;
|
||||||
|
--muted-foreground: 0 0% 65%;
|
||||||
|
|
||||||
--accent: 210 40% 96.1%;
|
--accent: 180 40% 15%;
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
--accent-foreground: 0 0% 95%;
|
||||||
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
/* Status colors */
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive: 0 84% 60%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
|
||||||
--border: 214.3 31.8% 91.4%;
|
--success: 142 76% 36%;
|
||||||
--input: 214.3 31.8% 91.4%;
|
--success-foreground: 0 0% 98%;
|
||||||
--ring: 222.2 84% 4.9%;
|
|
||||||
|
|
||||||
--radius: 0.5rem;
|
/* Borders and inputs */
|
||||||
|
--border: 180 40% 18%;
|
||||||
|
--input: 180 40% 15%;
|
||||||
|
--input-border: 180 40% 25%;
|
||||||
|
--ring: 76 100% 58%;
|
||||||
|
|
||||||
--sidebar-background: 0 0% 98%;
|
/* Radius system */
|
||||||
|
--radius: 1.5rem;
|
||||||
|
--radius-sm: 0.75rem;
|
||||||
|
--radius-lg: 2rem;
|
||||||
|
|
||||||
--sidebar-foreground: 240 5.3% 26.1%;
|
/* Grid and overlay */
|
||||||
|
--grid-color: 180 40% 12%;
|
||||||
|
--overlay: 180 75% 7% / 0.8;
|
||||||
|
|
||||||
--sidebar-primary: 240 5.9% 10%;
|
/* Animations and effects */
|
||||||
|
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
|
||||||
--sidebar-primary-foreground: 0 0% 98%;
|
/* Shadows and glows */
|
||||||
|
--shadow-neon: 0 0 20px hsl(var(--neon) / 0.3);
|
||||||
--sidebar-accent: 240 4.8% 95.9%;
|
--shadow-neon-strong: 0 0 40px hsl(var(--neon) / 0.6);
|
||||||
|
--shadow-card: 0 8px 32px hsl(180 75% 7% / 0.4);
|
||||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
||||||
|
|
||||||
--sidebar-border: 220 13% 91%;
|
|
||||||
|
|
||||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--background: 222.2 84% 4.9%;
|
|
||||||
--foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--card: 222.2 84% 4.9%;
|
|
||||||
--card-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--popover: 222.2 84% 4.9%;
|
|
||||||
--popover-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--primary: 210 40% 98%;
|
|
||||||
--primary-foreground: 222.2 47.4% 11.2%;
|
|
||||||
|
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
|
||||||
--secondary-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--muted: 217.2 32.6% 17.5%;
|
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
|
||||||
|
|
||||||
--accent: 217.2 32.6% 17.5%;
|
|
||||||
--accent-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
|
||||||
--destructive-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--border: 217.2 32.6% 17.5%;
|
|
||||||
--input: 217.2 32.6% 17.5%;
|
|
||||||
--ring: 212.7 26.8% 83.9%;
|
|
||||||
--sidebar-background: 240 5.9% 10%;
|
|
||||||
--sidebar-foreground: 240 4.8% 95.9%;
|
|
||||||
--sidebar-primary: 224.3 76.3% 48%;
|
|
||||||
--sidebar-primary-foreground: 0 0% 100%;
|
|
||||||
--sidebar-accent: 240 3.7% 15.9%;
|
|
||||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
|
||||||
--sidebar-border: 240 3.7% 15.9%;
|
|
||||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -100,6 +80,103 @@ All colors MUST be HSL.
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground font-body antialiased;
|
||||||
|
font-feature-settings: "rlig" 1, "calt" 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
/* Grid overlay */
|
||||||
|
.grid-overlay {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px);
|
||||||
|
background-size: 60px 60px;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Neon glow effects */
|
||||||
|
.neon-glow {
|
||||||
|
box-shadow: var(--shadow-neon);
|
||||||
|
transition: var(--transition-smooth);
|
||||||
|
}
|
||||||
|
|
||||||
|
.neon-glow:hover {
|
||||||
|
box-shadow: var(--shadow-neon-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text glow */
|
||||||
|
.text-glow {
|
||||||
|
text-shadow: 0 0 10px hsl(var(--neon) / 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scroll reveal animation */
|
||||||
|
.scroll-reveal {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-reveal.revealed {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Parallax container */
|
||||||
|
.parallax {
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section pinning */
|
||||||
|
.section-pin {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button variants */
|
||||||
|
.btn-neon {
|
||||||
|
@apply bg-primary text-primary-foreground hover:bg-primary-hover;
|
||||||
|
@apply rounded-[var(--radius)] px-8 py-4 font-semibold;
|
||||||
|
@apply transition-all duration-300 ease-out;
|
||||||
|
@apply shadow-[0_0_0_1px_hsl(var(--neon))] hover:shadow-[0_0_20px_hsl(var(--neon)/0.5)];
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
@apply border border-border hover:border-neon text-foreground hover:text-neon;
|
||||||
|
@apply rounded-[var(--radius)] px-8 py-4 font-semibold;
|
||||||
|
@apply transition-all duration-300 ease-out;
|
||||||
|
@apply hover:shadow-[0_0_15px_hsl(var(--neon)/0.3)];
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card styles */
|
||||||
|
.card-dark {
|
||||||
|
@apply bg-card border border-card-border rounded-[var(--radius-lg)];
|
||||||
|
@apply backdrop-blur-sm shadow-[var(--shadow-card)];
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography helpers */
|
||||||
|
.text-balance {
|
||||||
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,266 @@
|
||||||
|
import Navigation from '@/components/Navigation';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
|
import { Shield, Users, Zap, MapPin } from 'lucide-react';
|
||||||
|
import ScrollReveal from '@/components/ScrollReveal';
|
||||||
|
|
||||||
|
const About = () => {
|
||||||
|
const values = [
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Security-First',
|
||||||
|
description: 'Every solution we implement prioritizes your data security and business continuity.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Zap,
|
||||||
|
title: 'Reliability',
|
||||||
|
description: 'We build systems that work consistently, so you can depend on your technology.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: 'Clarity',
|
||||||
|
description: 'No tech jargon or hidden fees. We explain what we do and why it matters.'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const timeline = [
|
||||||
|
{
|
||||||
|
year: '2010',
|
||||||
|
title: 'Founded in Corpus Christi',
|
||||||
|
description: 'Started with a mission to bring enterprise-level IT solutions to local businesses.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2015',
|
||||||
|
title: 'Expanded Service Portfolio',
|
||||||
|
description: 'Added cloud services and advanced networking to serve growing businesses.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2020',
|
||||||
|
title: 'Remote Work Transformation',
|
||||||
|
description: 'Helped 100+ businesses transition to secure remote work during the pandemic.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2024',
|
||||||
|
title: 'Leading the Coastal Bend',
|
||||||
|
description: 'Now serving 150+ businesses with modern, reliable IT infrastructure.'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
|
||||||
|
<main>
|
||||||
|
{/* Hero section */}
|
||||||
|
<section className="pt-32 pb-16 bg-background relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<h1 className="font-heading font-bold text-5xl sm:text-6xl text-foreground mb-6">
|
||||||
|
Local IT expertise for the{' '}
|
||||||
|
<span className="text-neon">Coastal Bend</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-foreground-muted leading-relaxed">
|
||||||
|
Since 2010, we've been helping businesses in Corpus Christi and surrounding
|
||||||
|
communities build reliable, secure technology foundations that drive growth.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Story section */}
|
||||||
|
<section className="py-24 bg-background-deep">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-heading font-bold text-4xl text-foreground mb-6">
|
||||||
|
Our story
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-6 text-foreground-muted leading-relaxed">
|
||||||
|
<p>
|
||||||
|
Bay Area Affiliates was founded with a simple belief: local businesses
|
||||||
|
deserve the same level of IT expertise and reliability as large corporations,
|
||||||
|
but with the personal touch that only comes from working with your neighbors.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Over the years, we've watched the Coastal Bend grow and change. We've helped
|
||||||
|
businesses navigate technology challenges, from the transition to cloud computing
|
||||||
|
to the rapid shift to remote work. Through it all, we've maintained our
|
||||||
|
commitment to clear communication, reliable solutions, and exceptional service.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Today, we're proud to serve over 150 businesses across the region, from
|
||||||
|
Corpus Christi to the smallest coastal communities. Our team combines
|
||||||
|
deep technical expertise with real-world business understanding to deliver
|
||||||
|
IT solutions that actually work for our clients.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
<ScrollReveal delay={200}>
|
||||||
|
<div className="card-dark p-8">
|
||||||
|
<h3 className="font-heading font-semibold text-xl text-foreground mb-6">
|
||||||
|
By the numbers
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="font-heading font-bold text-3xl text-neon mb-2">150+</div>
|
||||||
|
<div className="text-sm text-foreground-muted">Businesses served</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="font-heading font-bold text-3xl text-neon mb-2">99.9%</div>
|
||||||
|
<div className="text-sm text-foreground-muted">Uptime achieved</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="font-heading font-bold text-3xl text-neon mb-2">15+</div>
|
||||||
|
<div className="text-sm text-foreground-muted">Years of service</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="font-heading font-bold text-3xl text-neon mb-2"><2min</div>
|
||||||
|
<div className="text-sm text-foreground-muted">Response time</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Values section */}
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="font-heading font-bold text-4xl text-foreground mb-6">
|
||||||
|
Our values guide everything we do
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-foreground-muted max-w-3xl mx-auto">
|
||||||
|
These principles shape how we work with clients and build solutions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{values.map((value, index) => {
|
||||||
|
const Icon = value.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollReveal key={value.title} delay={index * 100}>
|
||||||
|
<div className="card-dark p-8 text-center">
|
||||||
|
<div className="w-16 h-16 bg-neon/20 rounded-xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Icon className="w-8 h-8 text-neon" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-heading font-bold text-xl text-foreground mb-4">
|
||||||
|
{value.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-foreground-muted leading-relaxed">
|
||||||
|
{value.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Timeline section */}
|
||||||
|
<section className="py-24 bg-background-deep">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="font-heading font-bold text-4xl text-foreground mb-6">
|
||||||
|
Our journey
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-foreground-muted max-w-3xl mx-auto">
|
||||||
|
From a small startup to the Coastal Bend's trusted IT partner.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
{/* Timeline line */}
|
||||||
|
<div className="absolute left-8 md:left-1/2 md:transform md:-translate-x-1/2 top-0 bottom-0 w-px bg-border"></div>
|
||||||
|
|
||||||
|
<div className="space-y-12">
|
||||||
|
{timeline.map((item, index) => {
|
||||||
|
const isEven = index % 2 === 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollReveal key={item.year} delay={index * 100}>
|
||||||
|
<div className={`relative flex flex-col md:flex-row items-center ${
|
||||||
|
isEven ? '' : 'md:flex-row-reverse'
|
||||||
|
}`}>
|
||||||
|
{/* Content */}
|
||||||
|
<div className={`flex-1 ${isEven ? 'md:pr-16' : 'md:pl-16'} ${
|
||||||
|
isEven ? 'md:text-right' : 'md:text-left'
|
||||||
|
} text-center md:text-left`}>
|
||||||
|
<div className="card-dark p-6 max-w-md mx-auto md:mx-0">
|
||||||
|
<div className="text-2xl font-heading font-bold text-neon mb-2">
|
||||||
|
{item.year}
|
||||||
|
</div>
|
||||||
|
<h3 className="font-heading font-semibold text-lg text-foreground mb-3">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-foreground-muted">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Timeline dot */}
|
||||||
|
<div className="relative z-10 my-6 md:my-0">
|
||||||
|
<div className="w-4 h-4 bg-neon rounded-full border-4 border-background"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Spacer */}
|
||||||
|
<div className="flex-1 hidden md:block"></div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Local commitment */}
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<ScrollReveal>
|
||||||
|
<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">
|
||||||
|
<MapPin className="w-4 h-4 mr-2" />
|
||||||
|
Proudly local
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
|
||||||
|
Committed to the{' '}
|
||||||
|
<span className="text-neon">Coastal Bend</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-xl text-foreground-muted max-w-3xl mx-auto mb-12">
|
||||||
|
We live and work here too. When you succeed, our community succeeds.
|
||||||
|
That's why we're invested in building long-term partnerships, not just
|
||||||
|
providing quick fixes.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="/contact" className="btn-neon">
|
||||||
|
Start a conversation
|
||||||
|
</a>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default About;
|
||||||
|
|
@ -0,0 +1,314 @@
|
||||||
|
import Navigation from '@/components/Navigation';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
|
import { Calendar, ArrowRight, Clock } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import ScrollReveal from '@/components/ScrollReveal';
|
||||||
|
|
||||||
|
const Blog = () => {
|
||||||
|
const posts = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: 'Upgrade your HDD to SSD for a big speed boost',
|
||||||
|
excerpt: 'A practical checklist for business owners considering SSD upgrades, including before/after performance comparisons and cost analysis.',
|
||||||
|
content: `
|
||||||
|
<h2>Why SSD upgrades matter for business computers</h2>
|
||||||
|
<p>If your business computers are still running traditional hard disk drives (HDDs), you're likely experiencing slower boot times, delayed file access, and frustrated employees. Solid State Drives (SSDs) can transform your computing experience dramatically.</p>
|
||||||
|
|
||||||
|
<h3>The performance difference</h3>
|
||||||
|
<p>Here's what you can expect when upgrading from HDD to SSD:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Boot time:</strong> From 2-3 minutes to 15-30 seconds</li>
|
||||||
|
<li><strong>Application loading:</strong> 50-70% faster startup times</li>
|
||||||
|
<li><strong>File transfers:</strong> 3-5x faster copying and moving files</li>
|
||||||
|
<li><strong>Overall responsiveness:</strong> Instant access to documents and programs</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Real-world impact</h3>
|
||||||
|
<p>For a typical office worker who starts their computer 2-3 times per day and opens multiple applications, an SSD upgrade can save 15-30 minutes daily. Over a year, that's 65-130 hours of increased productivity per employee.</p>
|
||||||
|
|
||||||
|
<h3>Implementation checklist</h3>
|
||||||
|
<p>Before upgrading your business computers:</p>
|
||||||
|
<ol>
|
||||||
|
<li>Audit current hardware (age, compatibility, warranty status)</li>
|
||||||
|
<li>Identify priority machines (key employees, frequently used computers)</li>
|
||||||
|
<li>Plan data migration strategy (clone drives or fresh installs)</li>
|
||||||
|
<li>Budget for professional installation vs. DIY approach</li>
|
||||||
|
<li>Schedule upgrades during off-hours to minimize disruption</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>Cost considerations</h3>
|
||||||
|
<p>SSD prices have dropped significantly. A typical business-grade 500GB SSD costs $60-100, with installation running $50-150 per machine if done professionally. For a computer that's 2-4 years old, this upgrade often provides better ROI than buying new hardware.</p>
|
||||||
|
|
||||||
|
<p>If you're ready to boost your team's productivity with SSD upgrades, <a href="/contact">contact us</a> for a free assessment of your current hardware.</p>
|
||||||
|
`,
|
||||||
|
author: 'Technical Team',
|
||||||
|
date: '2024-01-15',
|
||||||
|
readTime: '8 min read',
|
||||||
|
category: 'Hardware',
|
||||||
|
image: 'https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?w=800&h=400&fit=crop&auto=format'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'Secure your corporate network access with WireGuard VPN',
|
||||||
|
excerpt: 'Learn why modern businesses are switching to WireGuard VPN for faster, more secure remote access, and how to implement it properly.',
|
||||||
|
content: `
|
||||||
|
<h2>Why traditional VPNs are holding your business back</h2>
|
||||||
|
<p>If your remote workers complain about slow, unreliable VPN connections, you're not alone. Traditional VPN protocols like OpenVPN and IPSec were designed decades ago and struggle with modern internet conditions.</p>
|
||||||
|
|
||||||
|
<h3>What makes WireGuard different</h3>
|
||||||
|
<p>WireGuard is a modern VPN protocol that's faster, more secure, and easier to manage than traditional solutions:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Speed:</strong> Up to 5x faster than OpenVPN in real-world tests</li>
|
||||||
|
<li><strong>Security:</strong> Modern cryptography with smaller attack surface</li>
|
||||||
|
<li><strong>Reliability:</strong> Seamless roaming between networks (WiFi to cellular)</li>
|
||||||
|
<li><strong>Battery life:</strong> More efficient on mobile devices</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Business benefits</h3>
|
||||||
|
<p>Beyond technical advantages, WireGuard delivers real business value:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Remote workers stay productive with fast, reliable connections</li>
|
||||||
|
<li>Reduced support tickets related to VPN issues</li>
|
||||||
|
<li>Better security posture with modern encryption</li>
|
||||||
|
<li>Easier management and troubleshooting for IT teams</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Implementation considerations</h3>
|
||||||
|
<p>While WireGuard is more straightforward than traditional VPNs, proper implementation requires planning:</p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Network design:</strong> Plan IP address ranges and routing</li>
|
||||||
|
<li><strong>Certificate management:</strong> Secure key distribution strategy</li>
|
||||||
|
<li><strong>Client configuration:</strong> Standardized setup for all devices</li>
|
||||||
|
<li><strong>Monitoring:</strong> Track usage and performance metrics</li>
|
||||||
|
<li><strong>Training:</strong> Ensure users understand the new system</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>Security best practices</h3>
|
||||||
|
<p>A WireGuard VPN is only as secure as its implementation. Key security measures include:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Regular key rotation and revocation procedures</li>
|
||||||
|
<li>Network segmentation to limit access scope</li>
|
||||||
|
<li>Multi-factor authentication for administrative access</li>
|
||||||
|
<li>Logging and monitoring for unusual activity</li>
|
||||||
|
<li>Regular security audits and penetration testing</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>Ready to give your team faster, more secure remote access? <a href="/contact">Contact us</a> to discuss WireGuard implementation for your business.</p>
|
||||||
|
`,
|
||||||
|
author: 'Security Team',
|
||||||
|
date: '2024-01-08',
|
||||||
|
readTime: '12 min read',
|
||||||
|
category: 'Security',
|
||||||
|
image: 'https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?w=800&h=400&fit=crop&auto=format'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'What comprehensive IT support looks like for SMBs',
|
||||||
|
excerpt: 'Understanding the full scope of managed IT services: from hardware and network infrastructure to virtualization and helpdesk support.',
|
||||||
|
content: `
|
||||||
|
<h2>Beyond break-fix: The modern approach to IT support</h2>
|
||||||
|
<p>Many small and medium businesses still operate on a "break-fix" model—calling for help only when something stops working. But comprehensive IT support takes a proactive approach that prevents problems before they impact your business.</p>
|
||||||
|
|
||||||
|
<h3>The four pillars of comprehensive IT support</h3>
|
||||||
|
|
||||||
|
<h4>1. Hardware and Desktop Support</h4>
|
||||||
|
<p>This goes beyond fixing broken computers:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Proactive hardware monitoring and maintenance</li>
|
||||||
|
<li>Planned hardware refresh cycles to avoid unexpected failures</li>
|
||||||
|
<li>Performance optimization (SSD upgrades, memory increases)</li>
|
||||||
|
<li>24/7 helpdesk for user support and troubleshooting</li>
|
||||||
|
<li>Asset management and warranty tracking</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>2. Network Infrastructure</h4>
|
||||||
|
<p>Your network is the foundation of modern business operations:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Enterprise-grade switching and routing equipment</li>
|
||||||
|
<li>Reliable, secure wireless networks that scale</li>
|
||||||
|
<li>Network monitoring and performance optimization</li>
|
||||||
|
<li>Redundancy planning to minimize downtime</li>
|
||||||
|
<li>Regular security audits and updates</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>3. Virtualization and Cloud Services</h4>
|
||||||
|
<p>Modern infrastructure that grows with your business:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Server virtualization to reduce hardware costs</li>
|
||||||
|
<li>Cloud migration strategy and implementation</li>
|
||||||
|
<li>Hybrid solutions that balance performance and cost</li>
|
||||||
|
<li>Resource scaling based on business needs</li>
|
||||||
|
<li>Backup and disaster recovery in the cloud</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>4. Security and Compliance</h4>
|
||||||
|
<p>Protecting your business from ever-evolving threats:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Multi-layered security strategy (endpoint, network, email)</li>
|
||||||
|
<li>Regular security training for employees</li>
|
||||||
|
<li>Compliance management for industry regulations</li>
|
||||||
|
<li>Incident response planning and testing</li>
|
||||||
|
<li>Security monitoring and threat detection</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>What this means for your business</h3>
|
||||||
|
<p>Comprehensive IT support transforms technology from a business constraint into a competitive advantage:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Increased uptime:</strong> Proactive monitoring prevents 80% of potential issues</li>
|
||||||
|
<li><strong>Predictable costs:</strong> Monthly service fees instead of emergency repair bills</li>
|
||||||
|
<li><strong>Enhanced security:</strong> Professional-grade protection without dedicated IT staff</li>
|
||||||
|
<li><strong>Scalable growth:</strong> Technology that adapts as your business evolves</li>
|
||||||
|
<li><strong>Peace of mind:</strong> Focus on your core business while experts handle IT</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Choosing the right IT partner</h3>
|
||||||
|
<p>Not all managed service providers offer truly comprehensive support. Look for:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Local presence and understanding of your market</li>
|
||||||
|
<li>Transparent pricing with clear service level agreements</li>
|
||||||
|
<li>Proactive approach, not just reactive support</li>
|
||||||
|
<li>Experience with businesses similar to yours</li>
|
||||||
|
<li>Strong references and proven track record</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>Ready to move beyond break-fix IT support? <a href="/contact">Schedule a consultation</a> to learn how comprehensive IT support can benefit your business.</p>
|
||||||
|
`,
|
||||||
|
author: 'Strategy Team',
|
||||||
|
date: '2024-01-01',
|
||||||
|
readTime: '15 min read',
|
||||||
|
category: 'Strategy',
|
||||||
|
image: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&auto=format'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
|
||||||
|
<main>
|
||||||
|
{/* Hero section */}
|
||||||
|
<section className="pt-32 pb-16 bg-background relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<h1 className="font-heading font-bold text-5xl sm:text-6xl text-foreground mb-6">
|
||||||
|
IT insights for{' '}
|
||||||
|
<span className="text-neon">your business</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-foreground-muted leading-relaxed">
|
||||||
|
Practical advice, industry insights, and technical guides to help
|
||||||
|
your business make better technology decisions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Blog posts */}
|
||||||
|
<section className="py-24 bg-background-deep">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid grid-cols-1 gap-16">
|
||||||
|
{posts.map((post, index) => (
|
||||||
|
<ScrollReveal key={post.id} delay={index * 100}>
|
||||||
|
<article className="card-dark overflow-hidden group hover:shadow-neon transition-all duration-500">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-0">
|
||||||
|
{/* Image */}
|
||||||
|
<div className="relative overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={post.image}
|
||||||
|
alt={post.title}
|
||||||
|
className="w-full h-64 lg:h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||||
|
/>
|
||||||
|
<div className="absolute top-4 left-4">
|
||||||
|
<span className="inline-block px-3 py-1 bg-neon text-neon-foreground text-xs font-medium rounded-full">
|
||||||
|
{post.category}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-8 lg:p-12 flex flex-col">
|
||||||
|
<div className="flex items-center space-x-4 text-sm text-foreground-muted mb-4">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Calendar className="w-4 h-4 mr-1" />
|
||||||
|
{new Date(post.date).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Clock className="w-4 h-4 mr-1" />
|
||||||
|
{post.readTime}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="font-heading font-bold text-2xl lg:text-3xl text-foreground mb-4 group-hover:text-neon transition-colors">
|
||||||
|
{post.title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-foreground-muted leading-relaxed mb-6 flex-grow">
|
||||||
|
{post.excerpt}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm text-foreground-muted">
|
||||||
|
By {post.author}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
to={`/blog/${post.id}`}
|
||||||
|
className="inline-flex items-center text-neon font-medium hover:text-neon/80 transition-colors group"
|
||||||
|
>
|
||||||
|
Read article
|
||||||
|
<ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</ScrollReveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Newsletter signup */}
|
||||||
|
<ScrollReveal delay={400}>
|
||||||
|
<div className="mt-20">
|
||||||
|
<div className="card-dark p-8 lg:p-12 text-center">
|
||||||
|
<h3 className="font-heading font-bold text-3xl text-foreground mb-4">
|
||||||
|
Stay updated with IT insights
|
||||||
|
</h3>
|
||||||
|
<p className="text-foreground-muted mb-8 max-w-2xl mx-auto">
|
||||||
|
Get practical tips, industry updates, and technology guidance
|
||||||
|
delivered to your inbox monthly.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="Enter your email"
|
||||||
|
className="flex-1 px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground"
|
||||||
|
/>
|
||||||
|
<button className="btn-neon whitespace-nowrap">
|
||||||
|
Subscribe
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-xs text-foreground-muted mt-4">
|
||||||
|
No spam, unsubscribe anytime.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Blog;
|
||||||
|
|
@ -0,0 +1,336 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
import Navigation from '@/components/Navigation';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
|
import { Mail, Phone, MapPin, Clock, DollarSign, Headphones } from 'lucide-react';
|
||||||
|
import ScrollReveal from '@/components/ScrollReveal';
|
||||||
|
import { useToast } from '@/hooks/use-toast';
|
||||||
|
|
||||||
|
const Contact = () => {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
company: '',
|
||||||
|
phone: '',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsSubmitting(true);
|
||||||
|
|
||||||
|
// Simulate form submission
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
toast({
|
||||||
|
title: "Message sent successfully!",
|
||||||
|
description: "We'll get back to you within 24 hours.",
|
||||||
|
});
|
||||||
|
setFormData({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
company: '',
|
||||||
|
phone: '',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[e.target.name]: e.target.value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const faqs = [
|
||||||
|
{
|
||||||
|
icon: Clock,
|
||||||
|
question: "How quickly can you start?",
|
||||||
|
answer: "Most assessments can begin within 48 hours of contact. Emergency support is available 24/7."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: DollarSign,
|
||||||
|
question: "How do you price services?",
|
||||||
|
answer: "Transparent monthly pricing based on devices and services needed. No hidden fees or surprise charges."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Headphones,
|
||||||
|
question: "What's included in support?",
|
||||||
|
answer: "24/7 monitoring, helpdesk, proactive maintenance, security updates, and SLA guarantees."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
|
||||||
|
<main>
|
||||||
|
{/* Hero section */}
|
||||||
|
<section className="pt-32 pb-16 bg-background relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<h1 className="font-heading font-bold text-5xl sm:text-6xl text-foreground mb-6">
|
||||||
|
Let's talk about your{' '}
|
||||||
|
<span className="text-neon">IT needs</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-foreground-muted leading-relaxed">
|
||||||
|
Ready to improve your technology? We're here to help. Get started with
|
||||||
|
a free consultation and see how we can make your IT work better for you.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact form and info */}
|
||||||
|
<section className="py-24 bg-background-deep">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-16">
|
||||||
|
{/* Contact form */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="card-dark p-8 lg:p-12">
|
||||||
|
<h2 className="font-heading font-bold text-3xl text-foreground mb-8">
|
||||||
|
Send us a message
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
required
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground"
|
||||||
|
placeholder="Your full name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
Email *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
required
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground"
|
||||||
|
placeholder="your@email.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="company" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
Company
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="company"
|
||||||
|
name="company"
|
||||||
|
value={formData.company}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground"
|
||||||
|
placeholder="Your company name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="phone" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
Phone
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground"
|
||||||
|
placeholder="(361) 555-0123"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
Message *
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
name="message"
|
||||||
|
required
|
||||||
|
rows={6}
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-3 bg-input border border-input-border rounded-lg focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-foreground resize-none"
|
||||||
|
placeholder="Tell us about your IT needs or challenges..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="w-full btn-neon disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{isSubmitting ? 'Sending...' : 'Send message'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-8 pt-8 border-t border-border">
|
||||||
|
<p className="text-sm text-foreground-muted text-center">
|
||||||
|
By submitting this form, you agree to receive communications from Bay Area Affiliates.
|
||||||
|
We'll never share your information with third parties.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact info and FAQ */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
<ScrollReveal delay={200}>
|
||||||
|
<div className="card-dark p-6">
|
||||||
|
<h3 className="font-heading font-semibold text-xl text-foreground mb-6">
|
||||||
|
Get in touch
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<Phone className="w-5 h-5 text-neon mt-1" />
|
||||||
|
<div>
|
||||||
|
<div className="text-foreground font-medium">Call us</div>
|
||||||
|
<a href="tel:+1-361-555-0123" className="text-foreground-muted hover:text-neon transition-colors">
|
||||||
|
(361) 555-0123
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<Mail className="w-5 h-5 text-neon mt-1" />
|
||||||
|
<div>
|
||||||
|
<div className="text-foreground font-medium">Email us</div>
|
||||||
|
<a href="mailto:info@bayareaaffiliates.com" className="text-foreground-muted hover:text-neon transition-colors">
|
||||||
|
info@bayareaaffiliates.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<MapPin className="w-5 h-5 text-neon mt-1" />
|
||||||
|
<div>
|
||||||
|
<div className="text-foreground font-medium">Service area</div>
|
||||||
|
<div className="text-foreground-muted">
|
||||||
|
Corpus Christi & the Coastal Bend
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 pt-6 border-t border-border">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-sm text-foreground-muted mb-2">
|
||||||
|
Business hours
|
||||||
|
</div>
|
||||||
|
<div className="text-foreground text-sm">
|
||||||
|
Monday - Friday: 8:00 AM - 6:00 PM<br />
|
||||||
|
Emergency support: 24/7
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
|
||||||
|
<ScrollReveal delay={400}>
|
||||||
|
<div className="card-dark p-6">
|
||||||
|
<h3 className="font-heading font-semibold text-xl text-foreground mb-6">
|
||||||
|
Quick answers
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{faqs.map((faq) => {
|
||||||
|
const Icon = faq.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={faq.question} className="flex items-start space-x-3">
|
||||||
|
<div className="w-8 h-8 bg-neon/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||||
|
<Icon className="w-4 h-4 text-neon" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-medium text-foreground mb-1 text-sm">
|
||||||
|
{faq.question}
|
||||||
|
</h4>
|
||||||
|
<p className="text-foreground-muted text-sm">
|
||||||
|
{faq.answer}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Next steps */}
|
||||||
|
<section className="py-16 bg-background">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="font-heading font-bold text-3xl text-foreground mb-4">
|
||||||
|
What happens next?
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-12 h-12 bg-neon/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-neon font-bold">1</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-2">We respond quickly</h3>
|
||||||
|
<p className="text-sm text-foreground-muted">Get a response within 24 hours, usually much faster.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-12 h-12 bg-neon/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-neon font-bold">2</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-2">Free consultation</h3>
|
||||||
|
<p className="text-sm text-foreground-muted">20-minute call to understand your needs and challenges.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-12 h-12 bg-neon/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-neon font-bold">3</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-2">Custom proposal</h3>
|
||||||
|
<p className="text-sm text-foreground-muted">Tailored solution with clear next steps and pricing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Contact;
|
||||||
|
|
@ -1,12 +1,25 @@
|
||||||
// Update this page (the content is just a fallback if you fail to update the page)
|
import Navigation from '@/components/Navigation';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
|
import HeroSection from '@/components/home/HeroSection';
|
||||||
|
import ValuePillars from '@/components/home/ValuePillars';
|
||||||
|
import ProcessTimeline from '@/components/home/ProcessTimeline';
|
||||||
|
import ServicesOverview from '@/components/home/ServicesOverview';
|
||||||
|
import ProofSection from '@/components/home/ProofSection';
|
||||||
|
import CTASection from '@/components/home/CTASection';
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
<div className="min-h-screen">
|
||||||
<div className="text-center">
|
<Navigation />
|
||||||
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
|
<main>
|
||||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
<HeroSection />
|
||||||
</div>
|
<ValuePillars />
|
||||||
|
<ProcessTimeline />
|
||||||
|
<ServicesOverview />
|
||||||
|
<ProofSection />
|
||||||
|
<CTASection />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,261 @@
|
||||||
|
import Navigation from '@/components/Navigation';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
|
import { Monitor, Wifi, Cloud, Shield, Database, Settings, CheckCircle } from 'lucide-react';
|
||||||
|
import ScrollReveal from '@/components/ScrollReveal';
|
||||||
|
|
||||||
|
const Services = () => {
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
icon: Monitor,
|
||||||
|
title: 'Hardware & Desktop Support',
|
||||||
|
description: 'Keep your team productive with fast, reliable devices and responsive support when you need it most.',
|
||||||
|
problem: 'Slow computers and frequent technical issues drain productivity and frustrate employees.',
|
||||||
|
solution: 'We provide comprehensive hardware management, from procurement to maintenance, ensuring your team has the tools they need to succeed.',
|
||||||
|
deliverables: [
|
||||||
|
'Hardware assessment and procurement',
|
||||||
|
'SSD upgrades and performance optimization',
|
||||||
|
'24/7 helpdesk support with <2min response',
|
||||||
|
'Preventive maintenance scheduling',
|
||||||
|
'Asset management and lifecycle planning'
|
||||||
|
],
|
||||||
|
requirements: [
|
||||||
|
'Current hardware inventory',
|
||||||
|
'Business hour preferences',
|
||||||
|
'Critical system identification'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Wifi,
|
||||||
|
title: 'Network Infrastructure',
|
||||||
|
description: 'Reliable, scalable networking that grows with your business and keeps everyone connected.',
|
||||||
|
problem: 'Unreliable networks cause dropped connections, slow file transfers, and frustrated users.',
|
||||||
|
solution: 'We design and implement enterprise-grade network infrastructure that provides consistent performance and reliable connectivity.',
|
||||||
|
deliverables: [
|
||||||
|
'Network design and implementation',
|
||||||
|
'Enterprise Wi-Fi deployment',
|
||||||
|
'Switch and router configuration',
|
||||||
|
'Performance monitoring and optimization',
|
||||||
|
'Network security implementation'
|
||||||
|
],
|
||||||
|
requirements: [
|
||||||
|
'Building layout and coverage needs',
|
||||||
|
'User count and device inventory',
|
||||||
|
'Bandwidth requirements assessment'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Cloud,
|
||||||
|
title: 'Virtualization & Cloud',
|
||||||
|
description: 'Modern infrastructure solutions that reduce costs while improving flexibility and scalability.',
|
||||||
|
problem: 'Physical servers are expensive to maintain and difficult to scale as business needs change.',
|
||||||
|
solution: 'We implement virtualization and cloud solutions that reduce hardware costs while improving reliability and flexibility.',
|
||||||
|
deliverables: [
|
||||||
|
'Virtualization platform setup',
|
||||||
|
'Cloud migration planning and execution',
|
||||||
|
'Hybrid infrastructure design',
|
||||||
|
'Resource optimization and monitoring',
|
||||||
|
'Backup and disaster recovery planning'
|
||||||
|
],
|
||||||
|
requirements: [
|
||||||
|
'Current server and application inventory',
|
||||||
|
'Performance requirements assessment',
|
||||||
|
'Compliance and security requirements'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Secure Remote Access',
|
||||||
|
description: 'Zero-drama VPN solutions with modern protocols for secure, high-speed access from anywhere.',
|
||||||
|
problem: 'Traditional VPNs are slow, unreliable, and create security vulnerabilities for remote workers.',
|
||||||
|
solution: 'We implement modern VPN solutions using WireGuard and other advanced protocols for fast, secure remote access.',
|
||||||
|
deliverables: [
|
||||||
|
'WireGuard VPN implementation',
|
||||||
|
'Multi-factor authentication setup',
|
||||||
|
'Endpoint security configuration',
|
||||||
|
'Remote access policy development',
|
||||||
|
'User training and documentation'
|
||||||
|
],
|
||||||
|
requirements: [
|
||||||
|
'Remote user count and locations',
|
||||||
|
'Applications requiring remote access',
|
||||||
|
'Security policy requirements'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Database,
|
||||||
|
title: 'Backup & Business Continuity',
|
||||||
|
description: 'Comprehensive protection against data loss and downtime with tested recovery procedures.',
|
||||||
|
problem: 'Data loss from hardware failure, cyber attacks, or human error can shut down business operations.',
|
||||||
|
solution: 'We implement robust backup systems and business continuity plans to protect your critical data and minimize downtime.',
|
||||||
|
deliverables: [
|
||||||
|
'Automated backup system implementation',
|
||||||
|
'Disaster recovery planning and testing',
|
||||||
|
'Business continuity procedures',
|
||||||
|
'Recovery time optimization',
|
||||||
|
'Regular backup verification and reporting'
|
||||||
|
],
|
||||||
|
requirements: [
|
||||||
|
'Critical data and system identification',
|
||||||
|
'Recovery time objectives',
|
||||||
|
'Compliance requirements'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Settings,
|
||||||
|
title: 'Microsoft 365 Enablement',
|
||||||
|
description: 'Maximize your M365 investment with expert migration, configuration, and user adoption support.',
|
||||||
|
problem: 'Organizations often use only a fraction of their Microsoft 365 capabilities, missing productivity gains.',
|
||||||
|
solution: 'We help you fully utilize your M365 investment through proper configuration, security setup, and user training.',
|
||||||
|
deliverables: [
|
||||||
|
'M365 migration and setup',
|
||||||
|
'Security and compliance configuration',
|
||||||
|
'User training and adoption programs',
|
||||||
|
'SharePoint and Teams optimization',
|
||||||
|
'Email security and management'
|
||||||
|
],
|
||||||
|
requirements: [
|
||||||
|
'Current email and collaboration tools',
|
||||||
|
'User count and licensing needs',
|
||||||
|
'Compliance and security requirements'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
|
||||||
|
<main>
|
||||||
|
{/* Hero section */}
|
||||||
|
<section className="pt-32 pb-16 bg-background relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<ScrollReveal>
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<h1 className="font-heading font-bold text-5xl sm:text-6xl text-foreground mb-6">
|
||||||
|
Complete IT solutions for{' '}
|
||||||
|
<span className="text-neon">your business</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-foreground-muted leading-relaxed">
|
||||||
|
From desktop support to enterprise infrastructure, we provide the technology
|
||||||
|
foundation your business needs to thrive in the Coastal Bend.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services detail */}
|
||||||
|
<section className="py-24 bg-background-deep">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="space-y-24">
|
||||||
|
{services.map((service, index) => {
|
||||||
|
const Icon = service.icon;
|
||||||
|
const isReverse = index % 2 === 1;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollReveal key={service.title} delay={index * 100}>
|
||||||
|
<div className={`flex flex-col ${isReverse ? 'lg:flex-row-reverse' : 'lg:flex-row'} gap-12 lg:gap-16`}>
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="card-dark p-8 lg:p-12">
|
||||||
|
<div className="flex items-center space-x-4 mb-6">
|
||||||
|
<div className="w-12 h-12 bg-neon/20 rounded-xl flex items-center justify-center">
|
||||||
|
<Icon className="w-6 h-6 text-neon" />
|
||||||
|
</div>
|
||||||
|
<h2 className="font-heading font-bold text-3xl text-foreground">
|
||||||
|
{service.title}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-lg text-foreground-muted mb-8 leading-relaxed">
|
||||||
|
{service.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Problem */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<h3 className="font-semibold text-foreground mb-3">The Challenge</h3>
|
||||||
|
<p className="text-foreground-muted">{service.problem}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Solution */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h3 className="font-semibold text-foreground mb-3">Our Approach</h3>
|
||||||
|
<p className="text-foreground-muted">{service.solution}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Deliverables */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h3 className="font-semibold text-foreground mb-4">What We Deliver</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{service.deliverables.map((item) => (
|
||||||
|
<li key={item} className="flex items-start">
|
||||||
|
<CheckCircle className="w-5 h-5 text-neon mr-3 mt-0.5 flex-shrink-0" />
|
||||||
|
<span className="text-foreground-muted">{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Requirements */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-4">What We Need From You</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{service.requirements.map((item) => (
|
||||||
|
<li key={item} className="flex items-start">
|
||||||
|
<div className="w-2 h-2 bg-neon rounded-full mr-3 mt-2 flex-shrink-0"></div>
|
||||||
|
<span className="text-foreground-muted text-sm">{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact card */}
|
||||||
|
<div className="lg:w-80">
|
||||||
|
<div className="card-dark p-6 sticky top-24">
|
||||||
|
<h3 className="font-heading font-semibold text-xl text-foreground mb-4">
|
||||||
|
Ready to get started?
|
||||||
|
</h3>
|
||||||
|
<p className="text-foreground-muted mb-6">
|
||||||
|
Let's discuss how we can help improve your {service.title.toLowerCase()}.
|
||||||
|
</p>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
className="block w-full btn-neon text-center"
|
||||||
|
>
|
||||||
|
Get a quote
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="tel:+1-361-555-0123"
|
||||||
|
className="block w-full btn-ghost text-center"
|
||||||
|
>
|
||||||
|
Call us today
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 pt-6 border-t border-border text-center">
|
||||||
|
<p className="text-sm text-foreground-muted">
|
||||||
|
Free consultation • No obligation
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollReveal>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Services;
|
||||||
|
|
@ -18,24 +18,41 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
'heading': ['Poppins', 'sans-serif'],
|
||||||
|
'body': ['Inter', 'sans-serif'],
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
border: 'hsl(var(--border))',
|
border: 'hsl(var(--border))',
|
||||||
input: 'hsl(var(--input))',
|
input: 'hsl(var(--input))',
|
||||||
|
'input-border': 'hsl(var(--input-border))',
|
||||||
ring: 'hsl(var(--ring))',
|
ring: 'hsl(var(--ring))',
|
||||||
background: 'hsl(var(--background))',
|
background: {
|
||||||
foreground: 'hsl(var(--foreground))',
|
DEFAULT: 'hsl(var(--background))',
|
||||||
|
deep: 'hsl(var(--background-deep))',
|
||||||
|
},
|
||||||
|
foreground: {
|
||||||
|
DEFAULT: 'hsl(var(--foreground))',
|
||||||
|
muted: 'hsl(var(--foreground-muted))',
|
||||||
|
},
|
||||||
primary: {
|
primary: {
|
||||||
DEFAULT: 'hsl(var(--primary))',
|
DEFAULT: 'hsl(var(--primary))',
|
||||||
foreground: 'hsl(var(--primary-foreground))'
|
foreground: 'hsl(var(--primary-foreground))',
|
||||||
|
hover: 'hsl(var(--primary-hover))',
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
DEFAULT: 'hsl(var(--secondary))',
|
DEFAULT: 'hsl(var(--secondary))',
|
||||||
foreground: 'hsl(var(--secondary-foreground))'
|
foreground: 'hsl(var(--secondary-foreground))',
|
||||||
|
hover: 'hsl(var(--secondary-hover))',
|
||||||
},
|
},
|
||||||
destructive: {
|
destructive: {
|
||||||
DEFAULT: 'hsl(var(--destructive))',
|
DEFAULT: 'hsl(var(--destructive))',
|
||||||
foreground: 'hsl(var(--destructive-foreground))'
|
foreground: 'hsl(var(--destructive-foreground))'
|
||||||
},
|
},
|
||||||
|
success: {
|
||||||
|
DEFAULT: 'hsl(var(--success))',
|
||||||
|
foreground: 'hsl(var(--success-foreground))'
|
||||||
|
},
|
||||||
muted: {
|
muted: {
|
||||||
DEFAULT: 'hsl(var(--muted))',
|
DEFAULT: 'hsl(var(--muted))',
|
||||||
foreground: 'hsl(var(--muted-foreground))'
|
foreground: 'hsl(var(--muted-foreground))'
|
||||||
|
|
@ -50,45 +67,72 @@ export default {
|
||||||
},
|
},
|
||||||
card: {
|
card: {
|
||||||
DEFAULT: 'hsl(var(--card))',
|
DEFAULT: 'hsl(var(--card))',
|
||||||
foreground: 'hsl(var(--card-foreground))'
|
foreground: 'hsl(var(--card-foreground))',
|
||||||
|
border: 'hsl(var(--card-border))',
|
||||||
},
|
},
|
||||||
sidebar: {
|
neon: {
|
||||||
DEFAULT: 'hsl(var(--sidebar-background))',
|
DEFAULT: 'hsl(var(--neon))',
|
||||||
foreground: 'hsl(var(--sidebar-foreground))',
|
glow: 'hsl(var(--neon-glow))',
|
||||||
primary: 'hsl(var(--sidebar-primary))',
|
muted: 'hsl(var(--neon-muted))',
|
||||||
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
foreground: 'hsl(var(--neon-foreground))',
|
||||||
accent: 'hsl(var(--sidebar-accent))',
|
},
|
||||||
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
grid: 'hsl(var(--grid-color))',
|
||||||
border: 'hsl(var(--sidebar-border))',
|
|
||||||
ring: 'hsl(var(--sidebar-ring))'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
lg: 'var(--radius)',
|
'2xl': 'var(--radius-lg)',
|
||||||
md: 'calc(var(--radius) - 2px)',
|
xl: 'var(--radius)',
|
||||||
sm: 'calc(var(--radius) - 4px)'
|
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: {
|
keyframes: {
|
||||||
'accordion-down': {
|
'accordion-down': {
|
||||||
from: {
|
from: { height: '0' },
|
||||||
height: '0'
|
to: { height: 'var(--radix-accordion-content-height)' }
|
||||||
},
|
|
||||||
to: {
|
|
||||||
height: 'var(--radix-accordion-content-height)'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
'accordion-up': {
|
'accordion-up': {
|
||||||
from: {
|
from: { height: 'var(--radix-accordion-content-height)' },
|
||||||
height: 'var(--radix-accordion-content-height)'
|
to: { height: '0' }
|
||||||
},
|
},
|
||||||
to: {
|
'fade-in': {
|
||||||
height: '0'
|
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: {
|
animation: {
|
||||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
'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'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue