Compare commits
4 Commits
version_4_
...
version_6_
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ba0d4c9a97 | ||
| 342782a059 | |||
|
|
79ad655975 | ||
| d8e90f88bd |
@@ -14,12 +14,14 @@ import CommitmentsSection from './HomePage/sections/Commitments';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
|
||||
import TrustMetricsSection from './HomePage/sections/TrustMetrics';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<AboutSection />
|
||||
<TrustMetricsSection />
|
||||
|
||||
<CompaniesSection />
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ With God nothing shall be impossible. – Luke 1:37"
|
||||
primaryButton={{
|
||||
text: "Our Companies", href: "#companies"}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us", href: "#contact"}}
|
||||
text: "Get Your Free Consultation", href: "#contact"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vintage-landscape-photo_23-2149728863.jpg"
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
|
||||
50
src/pages/HomePage/sections/TrustMetrics.tsx
Normal file
50
src/pages/HomePage/sections/TrustMetrics.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Calendar, Building2, Users, Clock } from "lucide-react";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import Card from "@/components/ui/Card";
|
||||
|
||||
export default function TrustMetricsSection() {
|
||||
return (
|
||||
<div data-webild-section="trust-metrics" id="trust-metrics">
|
||||
<section className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<TextAnimation
|
||||
variant="fade-blur"
|
||||
text="Trust Metrics"
|
||||
tag="h2"
|
||||
className="text-sm font-semibold tracking-wider text-accent uppercase mb-4"
|
||||
gradientText={false}
|
||||
/>
|
||||
<TextAnimation
|
||||
variant="fade-blur"
|
||||
text="Proven Track Record"
|
||||
tag="h3"
|
||||
className="text-4xl md:text-5xl font-bold text-foreground"
|
||||
gradientText={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="slide-up">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ icon: Calendar, value: "15+", label: "Years Experience" },
|
||||
{ icon: Building2, value: "100+", label: "Business Clients" },
|
||||
{ icon: Users, value: "1000+", label: "Employees Managed" },
|
||||
{ icon: Clock, value: "24/7", label: "Client Support" }
|
||||
].map((metric, index) => (
|
||||
<Card key={index} className="p-8 flex flex-col items-center text-center hover:-translate-y-1 transition-transform duration-300">
|
||||
<div className="w-14 h-14 rounded-full bg-background-accent flex items-center justify-center mb-6 text-foreground">
|
||||
<metric.icon className="w-7 h-7" />
|
||||
</div>
|
||||
<h4 className="text-4xl font-bold text-foreground mb-2">{metric.value}</h4>
|
||||
<p className="text-accent font-medium">{metric.label}</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user