diff --git a/src/components/FAQSection.tsx b/src/components/FAQSection.tsx
index 4a181d1..f045780 100644
--- a/src/components/FAQSection.tsx
+++ b/src/components/FAQSection.tsx
@@ -30,12 +30,12 @@ export default function FAQSection() {
className="w-full flex items-center justify-between p-6 text-left font-display font-semibold text-white hover:text-brand-400 transition-colors cursor-pointer"
>
-
+
{faq.question}
diff --git a/src/components/ProjectEstimator.tsx b/src/components/ProjectEstimator.tsx
index 187ac2f..1d9423a 100644
--- a/src/components/ProjectEstimator.tsx
+++ b/src/components/ProjectEstimator.tsx
@@ -1,5 +1,6 @@
-import { useState, useEffect, FormEvent } from 'react';
+import { useState, useEffect, FormEvent, useRef } from 'react';
import { Inquiry } from '../types';
+import { sendEmailClientSide } from '../utils/emailController';
import { Calculator, Sparkles, Send, ShieldCheck, CheckCircle2, History, Trash2 } from 'lucide-react';
interface ProjectEstimatorProps {
@@ -43,6 +44,20 @@ export default function ProjectEstimator({ onInquirySubmitted }: ProjectEstimato
}
}, []);
+ const isMounted = useRef(false);
+
+ // Scroll to estimator top when step or success state changes
+ useEffect(() => {
+ if (!isMounted.current) {
+ isMounted.current = true;
+ return;
+ }
+ const element = document.getElementById('estimator');
+ if (element) {
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }
+ }, [step, success]);
+
// Compute estimate values
const calculateEstimate = () => {
// Base prices (Min, Max) in ZAR
@@ -197,24 +212,20 @@ export default function ProjectEstimator({ onInquirySubmitted }: ProjectEstimato
onInquirySubmitted(newInquiry);
try {
- await fetch('/api/send-email', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- name,
- email,
- phone,
- company,
- subject: estimate.serviceLabel,
- message: notes || `Interactive estimate query for ${estimate.serviceLabel} (${estimate.scaleLabel}).`,
- isEstimate: true,
- estimateSummary: {
- totalMin: estimate.totalMin,
- totalMax: estimate.totalMax,
- timelineWeeks: estimate.timelineWeeks,
- breakdown: estimate.breakdown,
- },
- }),
+ await sendEmailClientSide({
+ name,
+ email,
+ phone,
+ company,
+ subject: estimate.serviceLabel,
+ message: notes || `Interactive estimate query for ${estimate.serviceLabel} (${estimate.scaleLabel}).`,
+ isEstimate: true,
+ estimateSummary: {
+ totalMin: estimate.totalMin,
+ totalMax: estimate.totalMax,
+ timelineWeeks: estimate.timelineWeeks,
+ breakdown: estimate.breakdown,
+ },
});
} catch (err) {
console.error('SMTP Proposal send failed. Saved locally:', err);
@@ -536,7 +547,7 @@ export default function ProjectEstimator({ onInquirySubmitted }: ProjectEstimato
R {estimate.totalMin.toLocaleString('en-ZA')}
-
to
+
to
R {estimate.totalMax.toLocaleString('en-ZA')}
@@ -545,11 +556,11 @@ export default function ProjectEstimator({ onInquirySubmitted }: ProjectEstimato
*Approximate cloud deployment, software engineering & layout rates. Scaled via khongisa.co.za Private Cloud.
-
+
Completion Roadmap
@@ -557,7 +568,7 @@ export default function ProjectEstimator({ onInquirySubmitted }: ProjectEstimato
-
+
Priority Mode
diff --git a/src/data.ts b/src/data.ts
index 1b161b6..21eb533 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -138,24 +138,12 @@ export const TIMELINE: TimelineEvent[] = [
},
{
year: '2022',
- title: 'Multi-Platform Pivot',
- description: 'Expanded our services to full web and desktop software layout design, securing major clients in Gauteng\'s logistics and retail sectors.',
- milestone: false
- },
- {
- year: '2023',
- title: 'Private Cloud R&D',
- description: 'In response to clients facing local server limitations, we began research into dedicated hypervisors, virtualization technologies, and private network clusters.',
- milestone: false
- },
- {
- year: '2024',
title: 'Khongisa Cloud Platform Launch',
description: 'Successfully built and rolled out our proprietary private cloud hosting platform (khongisa.co.za), allowing client applications to host seamlessly without third-party servers.',
milestone: true
},
{
- year: '2025',
+ year: '2024',
title: 'Kubernetes & IaC Integration',
description: 'Expanded our operations to offer enterprise-grade Docker containerization, Kubernetes configuration blueprints, and multi-cloud Infrastructure as Code (IaC) designs.',
milestone: true
diff --git a/src/index.css b/src/index.css
index 62bad8c..b7d920d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -71,6 +71,14 @@
}
/* Base custom classes */
+html, body {
+ font-family: var(--font-sans);
+}
+
+button, input, select, textarea {
+ font-family: inherit;
+}
+
.font-display {
font-family: var(--font-display);
}
diff --git a/src/utils/emailController.ts b/src/utils/emailController.ts
new file mode 100644
index 0000000..dc334aa
--- /dev/null
+++ b/src/utils/emailController.ts
@@ -0,0 +1,147 @@
+import { Inquiry } from '../types';
+
+export interface EmailData {
+ name: string;
+ email: string;
+ phone?: string;
+ company?: string;
+ subject: string;
+ message: string;
+ isEstimate: boolean;
+ estimateSummary?: {
+ totalMin: number;
+ totalMax: number;
+ timelineWeeks: number;
+ breakdown: Array<{ item: string; price: string }>;
+ };
+}
+
+// Dynamically load the SMTPJS script to ensure it is always available
+export function loadSmtpScript(): Promise {
+ return Promise.resolve();
+}
+
+/**
+ * Handles sending emails directly via the external messenger API.
+ * This completely avoids the need for local SMTP secrets, PHP files, or internal proxying.
+ */
+export async function sendEmailClientSide(data: EmailData): Promise<{ success: boolean; message: string }> {
+ try {
+ const name = data.name.trim();
+ const email = data.email.trim();
+ const phone = data.phone?.trim() || 'Not Provided';
+ const company = data.company?.trim() || 'Not Provided';
+ const subject = data.subject?.trim() || 'General Inquiry';
+ const message = data.message?.trim() || 'No additional notes provided.';
+ const isEstimate = data.isEstimate;
+ const estimateSummary = data.estimateSummary;
+
+ // Generate Email Subject line
+ const emailSubject = isEstimate
+ ? `LiteCharms Project Estimate Proposal: ${subject}`
+ : `LiteCharms General Service Inquiry: ${subject}`;
+
+ // Build breakdown items list for estimate summary
+ let breakdownHtml = '';
+ if (isEstimate && estimateSummary && Array.isArray(estimateSummary.breakdown)) {
+ breakdownHtml = estimateSummary.breakdown
+ .map(b => `${b.item}: ${b.price}`)
+ .join('');
+ }
+
+ // Compose professional HTML Email template
+ const emailHtml = `
+
+
+
LiteCharms
+
MIDRAND, SOUTH AFRICA
+
+
+
${isEstimate ? 'New Project Estimate Inquiry' : 'New General Service Inquiry'}
+
+
+
+ | Client Name: |
+ ${name} |
+
+
+ | Email Address: |
+ ${email} |
+
+
+ | Phone Number: |
+ ${phone} |
+
+
+ | Company: |
+ ${company} |
+
+
+ | Subject: |
+ ${subject} |
+
+
+
+ ${isEstimate && estimateSummary ? `
+
+
Selected Scope & Custom Pricing Range
+
+ Estimated Range: R ${estimateSummary.totalMin.toLocaleString('en-ZA')} to R ${estimateSummary.totalMax.toLocaleString('en-ZA')}
+
Roadmap: ~${estimateSummary.timelineWeeks} Weeks
+
+ ${breakdownHtml ? `
+
+ ` : ''}
+
+ ` : ''}
+
+
+
Client Message / Brief:
+
${message.replace(/\n/g, '
')}
+
+
+
+ This is an automated dispatch from the LiteCharms website client.
+
+