bender/95200f3e-dc03-43e2-9c22-e0b21e73ee2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-26 10:31:41 +00:00
Conversation 0 Commits 1 Files Changed 1 +48 -236
1 changed files with 48 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
src/app/page.tsx
View File

@@ -31,22 +31,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Projects",
id: "projects",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Projects", id: "projects" },
{ name: "Contact", id: "contact" },
]}
brandName="Brian Mokwena Studio"
/>
@@ -54,82 +42,35 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "plain",
}}
background={{ variant: "plain" }}
title="Architecting the Future of Web Solutions"
description="I build impactful, full-stack applications leveraging the MERN stack. 4+ years of real-world experience, driving user-centric outcomes."
kpis={[
{
value: "4+",
label: "Years Experience",
},
{
value: "50+",
label: "Projects Completed",
},
{
value: "100%",
label: "Client Satisfaction",
},
{ value: "4+", label: "Years Experience" },
{ value: "50+", label: "Projects Completed" },
{ value: "100%", label: "Client Satisfaction" },
]}
enableKpiAnimation={true}
buttons={[
{
text: "View Projects",
href: "#projects",
},
{
text: "Contact Me",
href: "#contact",
},
{ text: "View Projects", href: "#projects" },
{ text: "Contact Me", href: "#contact" },
]}
imageSrc="http://img.b2bpic.net/free-photo/boxes-surface-with-abstract-pattern-colorful-waves_1217-2579.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/boxes-surface-with-abstract-pattern-colorful-waves_1217-2579.jpg"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/three-dimensional-rendered-abstract-geometric-background_181624-58570.jpg",
alt: "Three dimensional rendered abstract geometric background",
},
{
src: "http://img.b2bpic.net/free-photo/low-angle-view-modern-ceiling_1359-1021.jpg",
alt: "Low angle view of modern ceiling",
},
{
src: "http://img.b2bpic.net/free-photo/detail-shot-patterned-wall_1359-846.jpg",
alt: "Detail shot of patterned wall,",
},
{
src: "http://img.b2bpic.net/free-photo/hex-textured-background-networking_23-2150080740.jpg",
alt: "Hex textured background for networking",
},
{
src: "http://img.b2bpic.net/free-photo/boxes-surface-with-abstract-pattern-colorful-waves_1217-2579.jpg",
alt: "digital network tech background",
},
{ src: "http://img.b2bpic.net/free-photo/three-dimensional-rendered-abstract-geometric-background_181624-58570.jpg", alt: "Three dimensional rendered abstract geometric background" },
{ src: "http://img.b2bpic.net/free-photo/low-angle-view-modern-ceiling_1359-1021.jpg", alt: "Low angle view of modern ceiling" },
{ src: "http://img.b2bpic.net/free-photo/detail-shot-patterned-wall_1359-846.jpg", alt: "Detail shot of patterned wall," },
{ src: "http://img.b2bpic.net/free-photo/hex-textured-background-networking_23-2150080740.jpg", alt: "Hex textured background for networking" },
{ src: "http://img.b2bpic.net/free-photo/boxes-surface-with-abstract-pattern-colorful-waves_1217-2579.jpg", alt: "digital network tech background" },
]}
avatarText="Trusted by 50+ partners globally"
marqueeItems={[
{
type: "text",
text: "Next.js",
},
{
type: "text",
text: "Node.js",
},
{
type: "text",
text: "TypeScript",
},
{
type: "text",
text: "MongoDB",
},
{
type: "text",
text: "Tailwind CSS",
},
{ type: "text", text: "Next.js" },
{ type: "text", text: "Node.js" },
{ type: "text", text: "TypeScript" },
{ type: "text", text: "MongoDB" },
{ type: "text", text: "Tailwind CSS" },
]}
/>
</div>
@@ -142,7 +83,7 @@ export default function LandingPage() {
description="My journey began with a passion for technology and problem-solving, leading me to master the MERN stack through dedicated self-learning and practical projects."
subdescription="Specializing in React, Node.js, MongoDB, and Express, I build robust, responsive, and scalable applications serving real users."
icon={Code}
imageSrc="http://img.b2bpic.net/free-photo/beautiful-redhead-woman-pride-day_23-2148967687.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/beautiful-redhead-woman-pride-day_23-2148967687.jpg"
mediaAnimation="blur-reveal"
/>
</div>
@@ -154,42 +95,12 @@ export default function LandingPage() {
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "ARRC.online",
price: "Political Party Portal",
imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg",
},
{
id: "p2",
name: "PHP SMS Portal",
price: "Infobip API Integration",
imageSrc: "http://img.b2bpic.net/free-photo/christmas-smartphone-mockup-with-golden-decorations_187299-48058.jpg",
},
{
id: "p3",
name: "Portfolio Core",
price: "React/TS/Tailwind",
imageSrc: "http://img.b2bpic.net/free-photo/vertical-view-from-car-forest-road-ahead-gps-travel-route_169016-68581.jpg",
},
{
id: "p4",
name: "E-Commerce Dash",
price: "Custom SaaS Build",
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038905.jpg",
},
{
id: "p5",
name: "Analytics Engine",
price: "MERN Stack Build",
imageSrc: "http://img.b2bpic.net/free-photo/blonde-business-woman-working-her-laptop-outdoors_23-2149100338.jpg",
},
{
id: "p6",
name: "Cloud CMS",
price: "Enterprise Solution",
imageSrc: "http://img.b2bpic.net/free-photo/minimal-smartphone-rocks-arrangement_23-2149672672.jpg",
},
{ id: "p1", name: "ARRC.online", price: "Political Party Portal", imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg" },
{ id: "p2", name: "PHP SMS Portal", price: "Infobip API Integration", imageSrc: "http://img.b2bpic.net/free-photo/christmas-smartphone-mockup-with-golden-decorations_187299-48058.jpg" },
{ id: "p3", name: "Portfolio Core", price: "React/TS/Tailwind", imageSrc: "http://img.b2bpic.net/free-photo/vertical-view-from-car-forest-road-ahead-gps-travel-route_169016-68581.jpg" },
{ id: "p4", name: "E-Commerce Dash", price: "Custom SaaS Build", imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038905.jpg" },
{ id: "p5", name: "Analytics Engine", price: "MERN Stack Build", imageSrc: "http://img.b2bpic.net/free-photo/blonde-business-woman-working-her-laptop-outdoors_23-2149100338.jpg" },
{ id: "p6", name: "Cloud CMS", price: "Enterprise Solution", imageSrc: "http://img.b2bpic.net/free-photo/minimal-smartphone-rocks-arrangement_23-2149672672.jpg" },
]}
title="Featured Real-World Projects"
description="Scalable web solutions built to serve real-world users and enterprise requirements."
@@ -201,33 +112,13 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Full-Stack MERN",
description: "Expertise in React, Node, Express, MongoDB.",
bentoComponent: "reveal-icon",
icon: LayoutDashboard,
imageSrc: "http://img.b2bpic.net/free-photo/surrealist-portrait-fashionable-woman_23-2149224642.jpg",
imageAlt: "Surrealist portrait of fashionable woman",
},
{
title: "Cloud Architecture",
description: "Responsive design & scalable API logic.",
bentoComponent: "reveal-icon",
icon: Cloud,
imageSrc: "http://img.b2bpic.net/free-photo/boxes-surface-with-abstract-pattern-colorful-waves_1217-2579.jpg?_wi=2",
imageAlt: "Surrealist portrait of fashionable woman",
},
{
title: "Modern UI/UX",
description: "Tailwind-driven performance and style.",
bentoComponent: "reveal-icon",
icon: Palette,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-redhead-woman-pride-day_23-2148967687.jpg?_wi=2",
imageAlt: "Surrealist portrait of fashionable woman",
},
{ title: "Full-Stack MERN", description: "Expertise in React, Node, Express, MongoDB.", bentoComponent: "reveal-icon", icon: LayoutDashboard },
{ title: "Cloud Architecture", description: "Responsive design & scalable API logic.", bentoComponent: "reveal-icon", icon: Cloud },
{ title: "Modern UI/UX", description: "Tailwind-driven performance and style.", bentoComponent: "reveal-icon", icon: Palette },
]}
title="Core Technical Capabilities"
description="Leveraging 2026-ready technologies to deliver robust, high-performance web solutions."
animationType="slide-up"
/>
</div>
@@ -237,24 +128,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
metrics={[
{
id: "m1",
icon: Award,
title: "Certifications",
value: "10+",
},
{
id: "m2",
icon: Clock,
title: "Hours Coded",
value: "8k+",
},
{
id: "m3",
icon: CheckCircle,
title: "Deployments",
value: "40+",
},
{ id: "m1", icon: Award, title: "Certifications", value: "10+" },
{ id: "m2", icon: Clock, title: "Hours Coded", value: "8k+" },
{ id: "m3", icon: CheckCircle, title: "Deployments", value: "40+" },
]}
title="Agency Milestones"
description="Quality-driven metrics showcasing our impact."
@@ -267,60 +143,16 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah J.",
role: "Client",
company: "Tech Startup",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-senior-man-holding-smart-phone_23-2147935571.jpg",
},
{
id: "2",
name: "Mark D.",
role: "CEO",
company: "Innovate Ltd",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-face-portrait-wearing-suit_53876-148135.jpg",
},
{
id: "3",
name: "Elena R.",
role: "Manager",
company: "Growth Co",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-design-abstract-blur-background_1048-12681.jpg",
},
{
id: "4",
name: "David K.",
role: "Lead",
company: "DevGroup",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
},
{
id: "5",
name: "Jane L.",
role: "Founder",
company: "Startup X",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg",
},
{ id: "1", name: "Sarah J.", role: "Client", company: "Tech Startup", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-senior-man-holding-smart-phone_23-2147935571.jpg" },
{ id: "2", name: "Mark D.", role: "CEO", company: "Innovate Ltd", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-face-portrait-wearing-suit_53876-148135.jpg" },
{ id: "3", name: "Elena R.", role: "Manager", company: "Growth Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-design-abstract-blur-background_1048-12681.jpg" },
{ id: "4", name: "David K.", role: "Lead", company: "DevGroup", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg" },
{ id: "5", name: "Jane L.", role: "Founder", company: "Startup X", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg" },
]}
kpiItems={[
{
value: "4.9/5",
label: "Average Rating",
},
{
value: "100%",
label: "Deadline Met",
},
{
value: "24h",
label: "Response Time",
},
{ value: "4.9/5", label: "Average Rating" },
{ value: "100%", label: "Deadline Met" },
{ value: "24h", label: "Response Time" },
]}
title="Voices of Satisfied Partners"
description="Working together to build digital products that matter."
@@ -333,22 +165,10 @@ export default function LandingPage() {
title="Ready to Build?"
description="Ready to bring your project to life? Let's discuss how we can work together."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
},
{
name: "email",
type: "email",
placeholder: "Email Address",
},
{ name: "name", type: "text", placeholder: "Your Name" },
{ name: "email", type: "email", placeholder: "Email Address" },
]}
textarea={{
name: "message",
placeholder: "Tell me about your project...",
rows: 4,
}}
textarea={{ name: "message", placeholder: "Tell me about your project...", rows: 4 }}
imageSrc="http://img.b2bpic.net/free-photo/3d-render-modern-home-office_1048-16765.jpg"
/>
</div>
@@ -358,16 +178,8 @@ export default function LandingPage() {
logoText="Brian Mokwena Agency"
copyrightText="© 2026 Brian Mokwena. All rights reserved."
socialLinks={[
{
icon: Github,
href: "https://github.com/brianmokwena",
ariaLabel: "GitHub",
},
{
icon: Linkedin,
href: "https://linkedin.com/in/brianmokwena",
ariaLabel: "LinkedIn",
},
{ icon: Github, href: "https://github.com/brianmokwena", ariaLabel: "GitHub" },
{ icon: Linkedin, href: "https://linkedin.com/in/brianmokwena", ariaLabel: "LinkedIn" },
]}
/>
</div>