662 lines
33 KiB
TypeScript
662 lines
33 KiB
TypeScript
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>
|
|
);
|
|
}
|