first commit
This commit is contained in:
+661
@@ -0,0 +1,661 @@
|
||||
import { useState, useEffect, FormEvent } from 'react';
|
||||
import Header from './components/Header';
|
||||
import ServiceExplorer from './components/ServiceExplorer';
|
||||
import ProjectEstimator from './components/ProjectEstimator';
|
||||
import CompanyTimeline from './components/CompanyTimeline';
|
||||
import FAQSection from './components/FAQSection';
|
||||
import AuroraBackground from './components/AuroraBackground';
|
||||
import { BrandIcon, BrandLogo } from './components/BrandAssets';
|
||||
import { Inquiry } from './types';
|
||||
import {
|
||||
MapPin,
|
||||
Mail,
|
||||
Phone,
|
||||
Clock,
|
||||
Send,
|
||||
CheckCircle2,
|
||||
ArrowRight,
|
||||
Sparkles
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function App() {
|
||||
// General Contact Form States
|
||||
const [contactName, setContactName] = useState('');
|
||||
const [contactEmail, setContactEmail] = useState('');
|
||||
const [contactSubject, setContactSubject] = useState('General Services Inquiry');
|
||||
const [contactMessage, setContactMessage] = useState('');
|
||||
const [contactSuccess, setContactSuccess] = useState(false);
|
||||
const [contactLoading, setContactLoading] = useState(false);
|
||||
|
||||
// Stats Counters state for load-in effect
|
||||
const [activeClients, setActiveClients] = useState(12);
|
||||
const [completedProjects, setCompletedProjects] = useState(25);
|
||||
|
||||
useEffect(() => {
|
||||
// Soft animate stats for visual delight
|
||||
const clientsTimer = setInterval(() => {
|
||||
setActiveClients((prev) => {
|
||||
if (prev >= 65) {
|
||||
clearInterval(clientsTimer);
|
||||
return 65;
|
||||
}
|
||||
return prev + 2;
|
||||
});
|
||||
}, 40);
|
||||
|
||||
const projectsTimer = setInterval(() => {
|
||||
setCompletedProjects((prev) => {
|
||||
if (prev >= 142) {
|
||||
clearInterval(projectsTimer);
|
||||
return 142;
|
||||
}
|
||||
return prev + 4;
|
||||
});
|
||||
}, 25);
|
||||
|
||||
return () => {
|
||||
clearInterval(clientsTimer);
|
||||
clearInterval(projectsTimer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const scrollToSection = (id: string) => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
const headerOffset = 80;
|
||||
const elementPosition = element.getBoundingClientRect().top + window.scrollY;
|
||||
const offsetPosition = elementPosition - headerOffset;
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleGeneralContactSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!contactName || !contactEmail || !contactMessage) return;
|
||||
|
||||
setContactLoading(true);
|
||||
|
||||
// Save general inquiry to localStorage
|
||||
const savedMsg = {
|
||||
id: `contact-${Date.now()}`,
|
||||
name: contactName,
|
||||
email: contactEmail,
|
||||
subject: contactSubject,
|
||||
message: contactMessage,
|
||||
date: new Date().toLocaleDateString('en-ZA'),
|
||||
};
|
||||
|
||||
const pastMsgs = JSON.parse(localStorage.getItem('litecharms_general_contacts') || '[]');
|
||||
pastMsgs.push(savedMsg);
|
||||
localStorage.setItem('litecharms_general_contacts', JSON.stringify(pastMsgs));
|
||||
|
||||
try {
|
||||
await fetch('/api/send-email', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: contactName,
|
||||
email: contactEmail,
|
||||
subject: contactSubject,
|
||||
message: contactMessage,
|
||||
isEstimate: false,
|
||||
}),
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('SMTP API Submission failed. Saved locally instead:', err);
|
||||
} finally {
|
||||
setContactLoading(false);
|
||||
setContactSuccess(true);
|
||||
setContactName('');
|
||||
setContactEmail('');
|
||||
setContactMessage('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleEstimatorInquiry = (inquiry: Inquiry) => {
|
||||
console.log('Received Estimate Inquiry:', inquiry);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-brand-950 font-sans text-slate-300 antialiased relative z-10 selection:bg-brand-500/30 selection:text-white" id="app-root">
|
||||
{/* Aurora Background */}
|
||||
<AuroraBackground />
|
||||
|
||||
{/* Navigation Header */}
|
||||
<Header onScrollTo={scrollToSection} />
|
||||
|
||||
{/* 1. Hero Section */}
|
||||
<section
|
||||
id="hero"
|
||||
className="pt-32 pb-20 md:pt-40 md:pb-28 relative overflow-hidden"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-6 relative">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||||
{/* Hero Left Content */}
|
||||
<div className="lg:col-span-7 space-y-8 text-left">
|
||||
{/* South Africa Tag */}
|
||||
<div className="inline-flex items-center space-x-2 bg-brand-900/50 border border-brand-800/80 px-3.5 py-1.5 rounded-full" id="hero-sa-tag">
|
||||
<span className="w-2 h-2 rounded-full bg-brand-500 animate-pulse" />
|
||||
<span className="text-[11px] font-mono font-bold uppercase tracking-wider text-brand-100">
|
||||
Established 2011 • Midrand, South Africa
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Display Headline */}
|
||||
<h1 className="font-display text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-[1.15]" id="hero-headline">
|
||||
Bespoke App Design & <br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-500 via-brand-200 to-accent-400">
|
||||
Cloud Deployments
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Narrative Subhead */}
|
||||
<p className="text-base sm:text-lg text-slate-300 leading-relaxed max-w-2xl" id="hero-description">
|
||||
LiteCharms (PTY) Ltd provides an integrated approach to software layouts and modern deployment solutions.
|
||||
We engineer immersive interfaces for web, mobile, and desktop systems, alongside Docker containerization, Kubernetes configurations, and cloud hosting for clients who do not have hosting environments.
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 pt-2">
|
||||
<button
|
||||
id="hero-cta-estimator"
|
||||
onClick={() => scrollToSection('estimator')}
|
||||
className="px-6 py-3.5 rounded-xl font-bold text-sm text-white bg-brand-500 hover:bg-brand-600 shadow-lg shadow-brand-500/20 transition-all text-center flex items-center justify-center space-x-2 cursor-pointer hover:scale-[1.02] duration-250"
|
||||
>
|
||||
<span>Build Interactive Estimate</span>
|
||||
<Sparkles className="w-4 h-4 text-brand-100" />
|
||||
</button>
|
||||
<button
|
||||
id="hero-cta-services"
|
||||
onClick={() => scrollToSection('services')}
|
||||
className="px-6 py-3.5 rounded-xl font-bold text-sm text-slate-200 bg-slate-900/60 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition-all text-center flex items-center justify-center space-x-2 cursor-pointer hover:scale-[1.02] duration-250"
|
||||
>
|
||||
<span>Explore Our Services</span>
|
||||
<ArrowRight className="w-4 h-4 text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Deployment Disclaimer Badge */}
|
||||
<div className="p-4 rounded-xl bg-slate-900/50 backdrop-blur-md border border-slate-800/80 flex items-start space-x-3 text-xs text-slate-400 max-w-xl">
|
||||
<div className="w-5 h-5 rounded-md bg-brand-950 border border-brand-800/50 flex items-center justify-center text-brand-500 font-bold shrink-0 text-[10px] mt-0.5 font-mono">IaC</div>
|
||||
<p className="leading-relaxed">
|
||||
<strong>Cloud & Container Ready:</strong> Built to compile as a lightweight optimized single-page layout, ready to deploy flawlessly inside containerized Docker environments or on our khongisa.co.za private cloud.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Right Visuals - Bento grid style */}
|
||||
<div className="lg:col-span-5 grid grid-cols-2 gap-4 relative" id="hero-visual-bento">
|
||||
{/* Card 1: Main Stats Box */}
|
||||
<div className="bg-slate-900/50 backdrop-blur-md rounded-2xl p-6 border border-slate-800/80 shadow-sm col-span-2 hover:border-slate-700 transition-all">
|
||||
<p className="text-[10px] font-mono text-slate-400 uppercase tracking-widest">
|
||||
Our Engineering Track Record
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-4 mt-4">
|
||||
<div>
|
||||
<p className="text-2xl md:text-3xl font-extrabold font-display text-brand-500">
|
||||
2011
|
||||
</p>
|
||||
<p className="text-[10px] font-medium text-slate-400 uppercase mt-0.5">
|
||||
Established
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl md:text-3xl font-extrabold font-display text-white">
|
||||
{completedProjects}+
|
||||
</p>
|
||||
<p className="text-[10px] font-medium text-slate-400 uppercase mt-0.5">
|
||||
Projects
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl md:text-3xl font-extrabold font-display text-white">
|
||||
{activeClients}+
|
||||
</p>
|
||||
<p className="text-[10px] font-medium text-slate-400 uppercase mt-0.5">
|
||||
Active Clients
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Core Focus A */}
|
||||
<div className="bg-gradient-to-br from-brand-600 to-brand-850 rounded-2xl p-6 text-white shadow-md shadow-brand-500/5 border border-brand-500/20">
|
||||
<div className="w-9 h-9 rounded-lg bg-white/20 flex items-center justify-center mb-4">
|
||||
<BrandIcon className="w-5 h-5 text-brand-100" />
|
||||
</div>
|
||||
<h4 className="font-display font-bold text-sm leading-tight">
|
||||
Responsive App Layouts
|
||||
</h4>
|
||||
<p className="text-[10px] text-brand-100 mt-2 leading-relaxed">
|
||||
Wireframes and structural guidelines for web dashboards, native iOS/Android, and high-productivity desktop software.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3: Core Focus B */}
|
||||
<div className="bg-slate-900/80 backdrop-blur-md rounded-2xl p-6 text-slate-100 shadow-md border border-slate-800/80">
|
||||
<div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center mb-4 border border-slate-700">
|
||||
<span className="text-brand-500 text-xs font-mono font-bold">IaC</span>
|
||||
</div>
|
||||
<h4 className="font-display font-bold text-sm leading-tight text-white">
|
||||
Docker & Kubernetes
|
||||
</h4>
|
||||
<p className="text-[10px] text-slate-400 mt-2 leading-relaxed">
|
||||
Declarative Kubernetes cluster blueprints, Docker multi-stage configurations, and cloud setups on khongisa.co.za.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. About Section & Timeline */}
|
||||
<section id="about" className="py-24 sm:py-32 relative">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
|
||||
{/* Left side text */}
|
||||
<div className="lg:col-span-5 space-y-6 lg:sticky lg:top-28">
|
||||
<span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
|
||||
Our Heritage
|
||||
</span>
|
||||
<h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
|
||||
Established in Midrand. <br />
|
||||
Sustained by Engineering.
|
||||
</h2>
|
||||
<div className="space-y-4 text-sm leading-relaxed text-slate-300">
|
||||
<p>
|
||||
LiteCharms (PTY) Ltd was born in Midrand in 2011, initially serving as a specialist interface consulting firm for the emerging mobile industry in South Africa. As local enterprise operations expanded, we observed a crucial bottleneck: software layout design cannot achieve its full potential if clients lack reliable, containerized hosting environments and flexible scale options.
|
||||
</p>
|
||||
<p>
|
||||
In 2017, we expanded our core divisions to provide automated Docker container layouts, declarative Kubernetes blueprints, and cloud setups, powered by our high-performance private cloud platform, khongisa.co.za.
|
||||
</p>
|
||||
<p className="font-medium text-white">
|
||||
Today, we bridge the gap between user experience and modern cloud orchestration, delivering reliable structures that are optimized, secure, and fully documented.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Physical Address details widget */}
|
||||
<div className="pt-6 border-t border-slate-800 space-y-3 text-xs">
|
||||
<div className="flex items-center space-x-3 text-slate-300">
|
||||
<MapPin className="w-4 h-4 text-brand-500 shrink-0" />
|
||||
<span>Grand Central Office Park, Midrand, Johannesburg, 1685, South Africa</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3 text-slate-300">
|
||||
<Clock className="w-4 h-4 text-brand-500 shrink-0" />
|
||||
<span>Monday - Friday: 08:00 - 17:00 (GMT+2)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side interactive timeline */}
|
||||
<div className="lg:col-span-7">
|
||||
<CompanyTimeline />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. Services Section */}
|
||||
<section id="services" className="py-24 sm:py-32 relative border-y border-slate-900 bg-slate-950/20 backdrop-blur-[2px]">
|
||||
<div className="max-w-7xl mx-auto px-6 text-center space-y-12">
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
<span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
|
||||
Full Suite Solutions
|
||||
</span>
|
||||
<h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
|
||||
Bespoke Digital Design & Cloud Deployments
|
||||
</h2>
|
||||
<p className="text-sm sm:text-base text-slate-300 leading-relaxed">
|
||||
We separate our specialties into cohesive pillars. Explore our capabilities to see how we plan, design, and roll out interfaces and infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Service Explorer Accordion / Tabs */}
|
||||
<ServiceExplorer />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. Project Estimator Section */}
|
||||
<section id="estimator" className="py-24 sm:py-32 relative">
|
||||
<div className="max-w-7xl mx-auto px-6 space-y-12">
|
||||
<div className="text-center max-w-3xl mx-auto space-y-4">
|
||||
<span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
|
||||
Interactive Estimator
|
||||
</span>
|
||||
<h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
|
||||
Model Your Custom Project Scope
|
||||
</h2>
|
||||
<p className="text-sm sm:text-base text-slate-300 leading-relaxed">
|
||||
Select your required app layout services or cloud hosting parameters. Our system computes an investment range in South African Rands (ZAR) instantly. Submit the configuration to lock in your draft!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ProjectEstimator onInquirySubmitted={handleEstimatorInquiry} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. FAQs Section */}
|
||||
<section id="faqs" className="py-24 sm:py-32 border-t border-slate-900 bg-slate-950/30 backdrop-blur-[2px]">
|
||||
<div className="max-w-7xl mx-auto px-6 space-y-12">
|
||||
<div className="text-center max-w-3xl mx-auto space-y-4">
|
||||
<span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
|
||||
Support Center
|
||||
</span>
|
||||
<h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
|
||||
Frequently Answered Questions
|
||||
</h2>
|
||||
<p className="text-sm sm:text-base text-slate-300 leading-relaxed">
|
||||
Find instant answers regarding our site planning timelines, khongisa.co.za cloud hosting options, Gauteng region operations, and modern cloud deployment configurations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FAQSection />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 6. Contact & Directions Section */}
|
||||
<section id="contact" className="py-24 sm:py-32 relative">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
|
||||
{/* Contact Info Panel */}
|
||||
<div className="lg:col-span-5 space-y-8" id="contact-info-panel">
|
||||
<div className="space-y-4">
|
||||
<span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
|
||||
Get In Touch
|
||||
</span>
|
||||
<h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
|
||||
Reach Our Midrand Office
|
||||
</h2>
|
||||
<p className="text-sm leading-relaxed text-slate-300">
|
||||
Ready to map out your infrastructure or design high-performance software layouts? Contact our directors directly or submit the general inquiry form. You can also visit our offices in Gauteng.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Direct Info list */}
|
||||
<div className="space-y-4" id="direct-contact-links">
|
||||
<a
|
||||
href="mailto:contact@litecharms.co.za"
|
||||
id="contact-email-link"
|
||||
className="flex items-center space-x-4 p-4 rounded-xl border border-slate-800/80 hover:border-slate-700 bg-slate-900/20 hover:bg-slate-900/40 transition-all text-slate-300 hover:text-white"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-brand-900/60 flex items-center justify-center text-brand-500">
|
||||
<Mail className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-mono font-semibold text-slate-500 uppercase">Email Us</p>
|
||||
<p className="text-sm font-bold">contact@litecharms.co.za</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="tel:+27872659463"
|
||||
id="contact-phone-link"
|
||||
className="flex items-center space-x-4 p-4 rounded-xl border border-slate-800/80 hover:border-slate-700 bg-slate-900/20 hover:bg-slate-900/40 transition-all text-slate-300 hover:text-white"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-brand-900/60 flex items-center justify-center text-brand-500">
|
||||
<Phone className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-mono font-semibold text-slate-500 uppercase">Call Office</p>
|
||||
<p className="text-sm font-bold">+27 (0) 87 265 9463</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div className="flex items-center space-x-4 p-4 rounded-xl border border-slate-800/80 bg-slate-900/20 text-slate-300">
|
||||
<div className="w-10 h-10 rounded-lg bg-brand-900/60 flex items-center justify-center text-brand-500">
|
||||
<Clock className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-mono font-semibold text-slate-500 uppercase">Core Office Hours</p>
|
||||
<p className="text-sm font-bold">Mon - Fri: 08:00 - 17:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Graphic Midrand South Africa Map Representation */}
|
||||
<div className="p-6 bg-slate-900/40 backdrop-blur-sm rounded-2xl border border-slate-800/80 space-y-4" id="map-visual-block">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h4 className="font-display font-bold text-sm text-white">Midrand Headquarters</h4>
|
||||
<p className="text-xs text-slate-400 mt-1">1633 Liebenburg Rd, Boordwyk, Midrand, Gauteng, ZA</p>
|
||||
</div>
|
||||
<span className="text-[9px] font-mono font-bold uppercase bg-slate-800 text-slate-300 px-2 py-0.5 rounded border border-slate-700 shrink-0">
|
||||
Gauteng Corridor
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Styled geometric CSS map visual */}
|
||||
<div className="h-32 bg-brand-950 rounded-xl relative overflow-hidden border border-slate-800 flex items-center justify-center">
|
||||
{/* Grid background lines */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(#00bcac_2px,transparent_2px)] [background-size:20px_20px] opacity-15" />
|
||||
<div className="absolute top-1/2 w-full h-0.5 bg-brand-500/20" />
|
||||
<div className="absolute left-1/3 h-full w-0.5 bg-brand-500/20" />
|
||||
<div className="absolute right-1/4 h-full w-0.5 bg-brand-500/20" />
|
||||
|
||||
{/* Johannesburg - Pretoria corridor labels */}
|
||||
<span className="absolute top-3 left-4 text-[9px] font-mono text-brand-200">Pretoria (N1 North)</span>
|
||||
<span className="absolute bottom-3 left-4 text-[9px] font-mono text-brand-200">Johannesburg (N1 South)</span>
|
||||
|
||||
{/* Pulsing local coordinate pointer */}
|
||||
<div className="relative z-10 flex flex-col items-center">
|
||||
<div className="w-3 h-3 bg-brand-500 rounded-full animate-ping absolute" />
|
||||
<div className="w-3 h-3 bg-brand-500 rounded-full border-2 border-white relative z-10" />
|
||||
<span className="text-[10px] font-bold text-white bg-slate-950/90 backdrop-blur-sm px-2 py-0.5 rounded border border-slate-800 mt-1.5 shadow-md">
|
||||
LiteCharms Offices
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* General Contact Form */}
|
||||
<div className="lg:col-span-7 bg-slate-900/30 backdrop-blur-md border border-slate-800/80 p-8 rounded-2xl shadow-sm" id="contact-form-panel">
|
||||
<div className="border-b border-slate-800 pb-5 mb-6">
|
||||
<h3 className="font-display text-xl font-bold text-white">General Message Form</h3>
|
||||
<p className="text-xs text-slate-400 mt-1">
|
||||
Have a general service query or want to request a hardcopy portfolio handover? Leave your request below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{contactSuccess ? (
|
||||
<div className="p-8 text-center bg-slate-900/50 rounded-xl border border-brand-500/30 space-y-4 animate-fade-in" id="contact-success-box">
|
||||
<div className="w-12 h-12 bg-brand-900/50 border border-brand-500/30 text-brand-500 rounded-full flex items-center justify-center mx-auto shadow-sm">
|
||||
<CheckCircle2 className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-display font-bold text-lg text-white">Message Delivered!</h4>
|
||||
<p className="text-xs text-slate-400 mt-1.5 leading-relaxed max-w-md mx-auto">
|
||||
Thank you for contacting LiteCharms (PTY) Ltd. Your inquiry has been cataloged. Our South African helpdesk will reply within 4 business hours.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
id="btn-send-another-message"
|
||||
onClick={() => setContactSuccess(false)}
|
||||
className="mt-2 text-xs font-bold text-brand-500 hover:text-brand-400 underline cursor-pointer"
|
||||
>
|
||||
Send Another Message
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleGeneralContactSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 mb-1">Your Full Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
id="contact-input-name"
|
||||
value={contactName}
|
||||
onChange={(e) => setContactName(e.target.value)}
|
||||
placeholder="Sipho Cele"
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-slate-800 focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-slate-900/50 text-white placeholder:text-slate-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 mb-1">Your Email Address *</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
id="contact-input-email"
|
||||
value={contactEmail}
|
||||
onChange={(e) => setContactEmail(e.target.value)}
|
||||
placeholder="sipho@company.co.za"
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-slate-800 focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-slate-900/50 text-white placeholder:text-slate-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 mb-1">Subject of Inquiry</label>
|
||||
<select
|
||||
id="contact-input-subject"
|
||||
value={contactSubject}
|
||||
onChange={(e) => setContactSubject(e.target.value)}
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-slate-800 focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-slate-900/50 text-white"
|
||||
>
|
||||
<option value="General Services Inquiry">General Services Inquiry</option>
|
||||
<option value="App UX Layout Request">App UX/UI Layout Request</option>
|
||||
<option value="Docker & Kubernetes Deployment Planning">Docker & Kubernetes Deployment Planning</option>
|
||||
<option value="Cloud Hosting (khongisa.co.za)">Cloud Hosting (khongisa.co.za)</option>
|
||||
<option value="Career & SLA Proposals">Career & SLA Proposals</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 mb-1">Detailed Message *</label>
|
||||
<textarea
|
||||
required
|
||||
id="contact-textarea-message"
|
||||
value={contactMessage}
|
||||
onChange={(e) => setContactMessage(e.target.value)}
|
||||
rows={5}
|
||||
placeholder="Specify your operational needs, site layout details, or timeframe..."
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-slate-800 focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-slate-900/50 text-white placeholder:text-slate-600 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
id="contact-btn-submit"
|
||||
disabled={contactLoading}
|
||||
className="w-full py-3 px-6 rounded-xl font-bold bg-brand-500 hover:bg-brand-600 text-white shadow-md shadow-brand-500/15 flex items-center justify-center space-x-2 transition-colors disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{contactLoading ? (
|
||||
<span>Sending Message...</span>
|
||||
) : (
|
||||
<>
|
||||
<span>Send Message</span>
|
||||
<Send className="w-4 h-4" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-slate-950/60 backdrop-blur-md text-slate-400 py-16 border-t border-slate-900" id="app-footer">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start border-b border-slate-900 pb-12">
|
||||
|
||||
{/* Branding Column */}
|
||||
<div className="md:col-span-5 space-y-4 text-left">
|
||||
<div className="flex items-center space-x-2">
|
||||
<BrandLogo className="h-10 w-auto" />
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 max-w-sm leading-relaxed">
|
||||
Registered IT Services provider based in Midrand, South Africa. Delivering exceptional digital layouts and resilient containerized deployment environments since 2011.
|
||||
</p>
|
||||
<div className="text-[10px] font-mono bg-slate-950 px-3 py-2 rounded-lg border border-slate-900 inline-block text-slate-500">
|
||||
Registration No: 2011/104859/07 • Midrand, ZA
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links Columns */}
|
||||
<div className="md:col-span-3 text-left space-y-3">
|
||||
<h5 className="text-xs font-mono font-bold text-slate-200 uppercase tracking-wider">
|
||||
Services Links
|
||||
</h5>
|
||||
<ul className="space-y-2 text-xs text-slate-400">
|
||||
<li>
|
||||
<button onClick={() => scrollToSection('services')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
|
||||
Web & Mobile App Design
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => scrollToSection('services')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
|
||||
Desktop Layout Customization
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => scrollToSection('services')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
|
||||
Docker Containerization
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => scrollToSection('services')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
|
||||
Kubernetes IaC & Hosting
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 text-left space-y-3">
|
||||
<h5 className="text-xs font-mono font-bold text-slate-200 uppercase tracking-wider">
|
||||
Company
|
||||
</h5>
|
||||
<ul className="space-y-2 text-xs text-slate-400">
|
||||
<li>
|
||||
<button onClick={() => scrollToSection('about')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
|
||||
Our History (Timeline)
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => scrollToSection('estimator')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
|
||||
Interactive Estimator
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => scrollToSection('faqs')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
|
||||
FAQ Hub
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 text-left space-y-3">
|
||||
<h5 className="text-xs font-mono font-bold text-slate-200 uppercase tracking-wider">
|
||||
Specifications
|
||||
</h5>
|
||||
<div className="space-y-2">
|
||||
<span className="inline-block text-[10px] font-semibold bg-emerald-950/50 text-emerald-400 px-2.5 py-1 rounded border border-emerald-900/50">
|
||||
Container & Cloud Ready
|
||||
</span>
|
||||
<p className="text-[10px] leading-relaxed text-slate-500">
|
||||
Fully optimized container configurations with integrated Docker structures, designed for easy deployment to khongisa.co.za or custom Kubernetes setups.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="pt-8 flex flex-col md:flex-row justify-between items-center text-xs">
|
||||
<p className="text-slate-500 text-center md:text-left">
|
||||
© {new Date().getFullYear()} LiteCharms (PTY) Ltd. All Rights Reserved. Midrand, South Africa.
|
||||
</p>
|
||||
<p className="text-slate-600 mt-2 md:mt-0 text-center md:text-right">
|
||||
Designed with precision • Est. 2011 • Reg 2011/104859/07
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user