bender/fda0c3df-5eda-4b44-ab10-e1fc87d8da07
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update src/App.tsx

Browse Source
This commit is contained in:
bender
2026-04-13 14:42:43 +00:00
parent 94a5671edd
commit 6a81f04882
1 changed files with 100 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
src/App.tsx
View File

@@ -10,274 +10,117 @@ import { Award, Shield, Star } from "lucide-react";
export default function App() {
return (
<>
<div id="nav" data-section="nav">
<NavbarCentered
logo="Kikwala"
navItems={[
{
name: "About",
id: "about",
href: "#about",
},
{
name: "Services",
id: "features",
href: "#features",
},
{
name: "Metrics",
id: "metrics",
href: "#metrics",
},
]}
ctaButton={{
text: "Contact Us",
href: "#contact",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarCentered
logo="Kikwala"
navItems={[
{ name: "About", href: "#about" },
{ name: "Services", href: "#features" },
{ name: "Metrics", href: "#metrics" },
]}
ctaButton={{
text: "Contact Us", href: "#contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
tag="Innovative Solutions"
title="Redefining the Future of Kikwala Group"
description="We blend cutting-edge technology with strategic design to build seamless, future-ready experiences."
primaryButton={{
text: "Explore Services",
href: "#features",
}}
secondaryButton={{
text: "Learn More",
href: "#about",
}}
items={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-corporate-architecture-mode-1776091009314-91da2c66.png",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/abstract-geometric-shapes-in-soft-blue-a-1776091018661-488dce9e.png",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/close-up-of-a-modern-laptop-workspace-wi-1776091030671-cb60234b.png",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-conference-room-glass-walls-s-1776091039888-bae26767.png",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/creative-design-studio-interior-light-wo-1776091048661-bb8c4a50.png",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-business-cityscape-aerial-view-bl-1776091058873-a76defb2.png",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
tag="Innovative Solutions"
title="Redefining the Future of Kikwala Group"
description="We blend cutting-edge technology with strategic design to build seamless, future-ready experiences."
primaryButton={{
text: "Explore Services", href: "#features"}}
secondaryButton={{
text: "Learn More", href: "#about"}}
items={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-corporate-architecture-mode-1776091009314-91da2c66.png" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/abstract-geometric-shapes-in-soft-blue-a-1776091018661-488dce9e.png" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/close-up-of-a-modern-laptop-workspace-wi-1776091030671-cb60234b.png" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-conference-room-glass-walls-s-1776091039888-bae26767.png" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/creative-design-studio-interior-light-wo-1776091048661-bb8c4a50.png" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-business-cityscape-aerial-view-bl-1776091058873-a76defb2.png" },
]}
/>
</div>
<div id="about" data-section="about">
<AboutMediaOverlay
tag="About Us"
title="Where Vision Meets Precision"
description="Kikwala Group is dedicated to delivering excellence across digital platforms. Our approach focuses on long-term sustainability and aesthetic innovation."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-team-working-in-a-high-tech-1776091068654-92bcd5ea.png"
/>
</div>
<div id="about" data-section="about">
<AboutMediaOverlay
tag="About Us"
title="Where Vision Meets Precision"
description="Kikwala Group is dedicated to delivering excellence across digital platforms. Our approach focuses on long-term sustainability and aesthetic innovation."
imageSrc={{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-team-working-in-a-high-tech-1776091068654-92bcd5ea.png" }}
/>
</div>
<div id="features" data-section="features">
<FeaturesLabeledList
tag="Core Services"
title="What We Deliver"
description="Comprehensive suite of digital services designed to scale."
items={[
{
label: "Strategy",
title: "Strategic Digital Consulting",
bullets: [
"Business modeling",
"Market entry analysis",
"Growth optimization",
],
primaryButton: {
text: "View Details",
href: "#",
},
secondaryButton: {
text: "Contact",
href: "#contact",
},
},
{
label: "Design",
title: "UI & UX Design",
bullets: [
"User research",
"Prototype design",
"Interactive experiences",
],
primaryButton: {
text: "View Details",
href: "#",
},
secondaryButton: {
text: "Contact",
href: "#contact",
},
},
{
label: "Tech",
title: "Advanced Engineering",
bullets: [
"Cloud architecture",
"Custom application development",
"Security protocols",
],
primaryButton: {
text: "View Details",
href: "#",
},
secondaryButton: {
text: "Contact",
href: "#contact",
},
},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricsGradientCards
tag="Our Impact"
title="Measurable Results"
description="Data-driven performance for every project we undertake."
metrics={[
{
value: "150+",
title: "Successful Projects",
description: "High-impact deployments delivered.",
icon: Award,
},
{
value: "98%",
title: "Client Satisfaction",
description: "Consistently meeting high standards.",
icon: Star,
},
{
value: "40+",
title: "Global Partners",
description: "Extensive network of innovators.",
icon: Shield,
},
]}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialSplitCards
tag="Client Stories"
title="What Partners Say"
description="Trusted by leading global innovators."
testimonials={[
{
tag: "Innovation",
title: "Game-changing solution",
quote: "Kikwala Group transformed our digital strategy with incredible precision.",
name: "Sarah Chen",
date: "2023-09-12",
avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-professional-business-person-1776091077117-de145c03.png",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/abstract-modern-office-architecture-glas-1776091127265-b2d4a12b.png",
},
{
tag: "Growth",
title: "Unrivaled expertise",
quote: "The team provided deep insights that helped us scale our platform efficiently.",
name: "Michael Ross",
date: "2023-11-05",
avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-professional-woman-business--1776091088512-80201065.png",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-design-texture-clean-white-an-1776091135466-6d81bda8.png",
},
{
tag: "Strategy",
title: "Outstanding results",
quote: "Strategic thinkers who deliver results consistently and professionally.",
name: "Elena Rodriguez",
date: "2024-01-20",
avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-tech-business-person-clean-a-1776091098842-4ea10ba3.png",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-office-building-glass-exterior-br-1776091144537-6703e6f3.png",
},
{
tag: "Design",
title: "Visionary design",
quote: "Their design process is fluid, intuitive, and truly visionary.",
name: "David Kim",
date: "2024-03-14",
avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-professional-business-execut-1776091109322-2044fb88.png",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-office-setup-laptop-and-dig-1776091153984-849c58a1.png",
},
{
tag: "Engineering",
title: "Reliable partner",
quote: "A tech partner that treats your project as their own.",
name: "Alex Johnson",
date: "2024-05-10",
avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-professional-business-entrep-1776091117968-b4c0e85c.png",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/abstract-business-meeting-soft-focus-bac-1776091163608-3b4d564d.png",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimpleCard
brand="Kikwala Group"
columns={[
{
title: "Company",
items: [
<div id="features" data-section="features">
<FeaturesLabeledList
tag="Core Services"
title="What We Deliver"
description="Comprehensive suite of digital services designed to scale."
items={[
{
label: "About Us",
href: "#about",
label: "Strategy", title: "Strategic Digital Consulting", bullets: ["Business modeling", "Market entry analysis", "Growth optimization"],
primaryButton: { text: "View Details", href: "#" },
secondaryButton: { text: "Contact", href: "#contact" },
},
{
label: "Careers",
href: "#",
label: "Design", title: "UI & UX Design", bullets: ["User research", "Prototype design", "Interactive experiences"],
primaryButton: { text: "View Details", href: "#" },
secondaryButton: { text: "Contact", href: "#contact" },
},
{
label: "Press",
href: "#",
label: "Tech", title: "Advanced Engineering", bullets: ["Cloud architecture", "Custom application development", "Security protocols"],
primaryButton: { text: "View Details", href: "#" },
secondaryButton: { text: "Contact", href: "#contact" },
},
],
},
{
title: "Services",
items: [
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricsGradientCards
tag="Our Impact"
title="Measurable Results"
description="Data-driven performance for every project we undertake."
metrics={[
{ value: "150+", title: "Successful Projects", description: "High-impact deployments delivered.", icon: Award },
{ value: "98%", title: "Client Satisfaction", description: "Consistently meeting high standards.", icon: Star },
{ value: "40+", title: "Global Partners", description: "Extensive network of innovators.", icon: Shield },
]}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialSplitCards
tag="Client Stories"
title="What Partners Say"
description="Trusted by leading global innovators."
testimonials={[
{
label: "Strategy",
href: "#",
},
tag: "Innovation", title: "Game-changing solution", quote: "Kikwala Group transformed our digital strategy with incredible precision.", name: "Sarah Chen", date: "2023-09-12", avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-professional-business-person-1776091077117-de145c03.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/abstract-modern-office-architecture-glas-1776091127265-b2d4a12b.png"},
{
label: "Design",
href: "#",
},
tag: "Growth", title: "Unrivaled expertise", quote: "The team provided deep insights that helped us scale our platform efficiently.", name: "Michael Ross", date: "2023-11-05", avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-professional-woman-business--1776091088512-80201065.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-design-texture-clean-white-an-1776091135466-6d81bda8.png"},
{
label: "Engineering",
href: "#",
},
],
},
]}
copyright="© 2024 Kikwala Group. All rights reserved."
links={[
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
]}
/>
</div>
tag: "Strategy", title: "Outstanding results", quote: "Strategic thinkers who deliver results consistently and professionally.", name: "Elena Rodriguez", date: "2024-01-20", avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-tech-business-person-clean-a-1776091098842-4ea10ba3.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-office-building-glass-exterior-br-1776091144537-6703e6f3.png"},
{
tag: "Design", title: "Visionary design", quote: "Their design process is fluid, intuitive, and truly visionary.", name: "David Kim", date: "2024-03-14", avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-professional-business-execut-1776091109322-2044fb88.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-office-setup-laptop-and-dig-1776091153984-849c58a1.png"},
{
tag: "Engineering", title: "Reliable partner", quote: "A tech partner that treats your project as their own.", name: "Alex Johnson", date: "2024-05-10", avatarImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/headshot-of-professional-business-entrep-1776091117968-b4c0e85c.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/abstract-business-meeting-soft-focus-bac-1776091163608-3b4d564d.png"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimpleCard
brand="Kikwala Group"
columns={[
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }, { label: "Press", href: "#" }] },
{ title: "Services", items: [{ label: "Strategy", href: "#" }, { label: "Design", href: "#" }, { label: "Engineering", href: "#" }] },
]}
copyright="© 2024 Kikwala Group. All rights reserved."
links={[{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }]}
/>
</div>
</>
);
}
}