bender/f7cfda62-bb73-443b-9205-b0326ef37c9a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #1

Merged
bender merged 7 commits from version_2 into main 2026-03-27 12:34:16 +00:00
Conversation 0 Commits 7 Files Changed 7 +258 -150
7 changed files with 258 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,58 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Twitter } from "lucide-react";
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="mediumSizeLargeTitles"
background="grid"
cardStyle="subtle-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Services", id: "/services" },
{ name: "Contact", id: "/contact" },
]}
brandName="Mkay Designs"
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[{ type: 'text', content: 'Our Story & Mission' }]}
useInvertedBackground={false}
ariaLabel="About us section"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Mkay Designs"
copyrightText="© 2025 Mkay Designs | Nairobi, Kenya"
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

40
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,40 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Twitter, MessageCircle } from "lucide-react";
export default function ContactPage() {
return (
<ThemeProvider>
<ReactLenis root>
<NavbarStyleCentered
navItems={[{name: "Home", id: "/"}, {name: "Portfolio", id: "/portfolio"}, {name: "Testimonials", id: "/testimonials"}, {name: "Contact", id: "/contact"}]}
brandName="Mkay Designs"
/>
<div className="pt-32 pb-20">
<ContactSplitForm
title="Let's Connect"
description="Contact us for a quote or general inquiry."
inputs={[{name: "name", type: "text", placeholder: "Name"}, {name: "email", type: "email", placeholder: "Email"}]}
textarea={{ name: "message", placeholder: "Your Message" }}
buttonText="Send"
/>
<div className="mt-8 flex justify-center">
<a href="https://wa.me/254700000000" className="flex items-center gap-2 bg-green-500 text-white px-6 py-3 rounded-full hover:bg-green-600">
<MessageCircle /> Chat on WhatsApp
</a>
</div>
</div>
<FooterCard
logoText="Mkay Designs"
copyrightText="© 2025 Mkay Designs | Nairobi, Kenya"
socialLinks={[{icon: Instagram, href: "#", ariaLabel: "Instagram"}, {icon: Twitter, href: "#", ariaLabel: "Twitter"}]}
/>
</ReactLenis>
</ThemeProvider>
);
}

156
src/app/page.tsx
View File

@@ -29,22 +29,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Services",
id: "services",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "/" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Testimonials", id: "/testimonials" },
{ name: "Contact", id: "/contact" },
]}
brandName="Mkay Designs"
/>
@@ -53,19 +41,12 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "gradient-bars",
}}
variant: "gradient-bars"}}
title="Crafting Your Dream Space in Kenya"
description="Mkay Designs transforms your vision into a living masterpiece. Bringing bespoke interior elegance to residential and commercial projects across the region."
buttons={[
{
text: "View Projects",
href: "#services",
},
{
text: "Get a Consultation",
href: "#contact",
},
{ text: "View Portfolio", href: "/portfolio" },
{ text: "Get a Consultation", href: "/contact" },
]}
imageSrc="http://img.b2bpic.net/free-photo/luxurious-outdoor-living-space-with-comfortable-sofa_23-2152008212.jpg"
mediaAnimation="slide-up"
@@ -77,136 +58,25 @@ export default function LandingPage() {
useInvertedBackground={false}
title="The Mkay Design Philosophy"
metrics={[
{
icon: Award,
label: "Years Experience",
value: "10+",
},
{
icon: Home,
label: "Projects Completed",
value: "500+",
},
{
icon: Sparkles,
label: "Happy Clients",
value: "98%",
},
{ icon: Award, label: "Years Experience", value: "10+" },
{ icon: Home, label: "Projects Completed", value: "500+" },
{ icon: Sparkles, label: "Happy Clients", value: "98%" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureCardSeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: 1,
title: "Residential Design",
description: "Creating intimate and functional homes that feel like a sanctuary tailored just for you.",
imageSrc: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-home-arrangement_23-2149135745.jpg",
},
{
id: 2,
title: "Commercial Solutions",
description: "Inspiring workspaces that elevate brand identity and foster team productivity.",
imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-light-lamp-design_23-2151037575.jpg",
},
{
id: 3,
title: "Space Planning",
description: "Optimizing every square foot for maximum aesthetic impact and utility.",
imageSrc: "http://img.b2bpic.net/free-vector/professional-office-interior-with-flat-design_23-2147907710.jpg",
},
]}
title="Our Design Services"
description="From concept to completion, we manage every detail to ensure your space reflects your unique personality and professional identity."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="asymmetric-60-wide-40-narrow"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Amina Otieno",
role: "Homeowner",
company: "Nairobi Estate",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/modern-styled-small-entryway_23-2150712947.jpg",
},
{
id: "2",
name: "David Mwangi",
role: "CEO",
company: "Tech Innovate",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg",
},
{
id: "3",
name: "Sarah Juma",
role: "Director",
company: "Creative Hub",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722559.jpg",
},
{
id: "4",
name: "Kevin Otieno",
role: "Partner",
company: "Law Firm",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/wooden-bowl-water_1252-815.jpg",
},
]}
title="What Our Clients Say"
description="Discover why clients across Nairobi and beyond trust Mkay Designs to bring their spaces to life."
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
text="Ready to redefine your space? Let's discuss your project today and bring your vision to life."
buttons={[
{
text: "Call +254 700 000 000",
href: "tel:+254700000000",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Mkay Designs"
copyrightText="© 2025 Mkay Designs | Nairobi, Kenya"
socialLinks={[
{
icon: Instagram,
href: "#",
ariaLabel: "Instagram",
},
{
icon: Twitter,
href: "#",
ariaLabel: "Twitter",
},
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

37
src/app/portfolio/page.tsx Normal file
View File

@@ -0,0 +1,37 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Twitter } from "lucide-react";
export default function PortfolioPage() {
return (
<ThemeProvider>
<ReactLenis root>
<NavbarStyleCentered
navItems={[{name: "Home", id: "/"}, {name: "Portfolio", id: "/portfolio"}, {name: "Testimonials", id: "/testimonials"}, {name: "Contact", id: "/contact"}]}
brandName="Mkay Designs"
/>
<div className="pt-32 pb-20">
<FeatureCardMedia
title="Our Portfolio"
description="Explore our recent residential and commercial design projects."
animationType="slide-up"
features={[
{ id: "1", title: "Luxury Villa", description: "Modern residential design in Nairobi.", tag: "Residential", imageSrc: "http://img.b2bpic.net/free-photo/luxurious-outdoor-living-space-with-comfortable-sofa_23-2152008212.jpg" },
{ id: "2", title: "Modern Office", description: "Creative workspace transformation.", tag: "Commercial", imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg" }
]}
/>
</div>
<FooterCard
logoText="Mkay Designs"
copyrightText="© 2025 Mkay Designs | Nairobi, Kenya"
socialLinks={[{icon: Instagram, href: "#", ariaLabel: "Instagram"}, {icon: Twitter, href: "#", ariaLabel: "Twitter"}]}
/>
</ReactLenis>
</ThemeProvider>
);
}

66
src/app/services/page.tsx Normal file
View File

@@ -0,0 +1,66 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Twitter } from "lucide-react";
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="mediumSizeLargeTitles"
background="grid"
cardStyle="subtle-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Services", id: "/services" },
{ name: "Contact", id: "/contact" },
]}
brandName="Mkay Designs"
/>
</div>
<div id="services" data-section="services">
<FeatureCardThree
title="Our Comprehensive Services"
description="Detailed offerings tailored to your specific interior design needs."
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ id: "1", title: "Full Home Redesign", description: "Complete transformations from floor to ceiling.", imageSrc: "http://img.b2bpic.net/free-photo/luxurious-outdoor-living-space-with-comfortable-sofa_23-2152008212.jpg" },
{ id: "2", title: "Workspace Optimization", description: "Enhancing commercial spaces for efficiency.", imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg" },
{ id: "3", title: "Bespoke Furniture Design", description: "Custom pieces crafted to your exact specifications.", imageSrc: "http://img.b2bpic.net/free-photo/wooden-bowl-water_1252-815.jpg" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Mkay Designs"
copyrightText="© 2025 Mkay Designs | Nairobi, Kenya"
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #fcf6ec;
--card: #f3ede2;
--foreground: #2e2521;
--primary-cta: #2e2521;
--background: #f5f4f0;
--card: #ffffff;
--foreground: #1a1a1a;
--primary-cta: #2c2c2c;
--primary-cta-text: #fcf6ec;
--secondary-cta: #ffffff;
--secondary-cta: #f5f4f0;
--secondary-cta-text: #2e2521;
--accent: #b2a28b;
--background-accent: #b2a28b;
--accent: #8a8a8a;
--background-accent: #e8e6e1;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

37
src/app/testimonials/page.tsx Normal file
View File

@@ -0,0 +1,37 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Twitter } from "lucide-react";
export default function TestimonialsPage() {
return (
<ThemeProvider>
<ReactLenis root>
<NavbarStyleCentered
navItems={[{name: "Home", id: "/"}, {name: "Portfolio", id: "/portfolio"}, {name: "Testimonials", id: "/testimonials"}, {name: "Contact", id: "/contact"}]}
brandName="Mkay Designs"
/>
<div className="pt-32 pb-20">
<TestimonialCardTwo
title="Client Reviews"
description="What our clients say about our bespoke design services."
animationType="slide-up"
testimonials={[
{ id: "1", name: "Amina Otieno", role: "Homeowner", testimonial: "Absolutely transformed my home vision!" },
{ id: "2", name: "David Mwangi", role: "CEO", testimonial: "Outstanding office interior design." }
]}
/>
</div>
<FooterCard
logoText="Mkay Designs"
copyrightText="© 2025 Mkay Designs | Nairobi, Kenya"
socialLinks={[{icon: Instagram, href: "#", ariaLabel: "Instagram"}, {icon: Twitter, href: "#", ariaLabel: "Twitter"}]}
/>
</ReactLenis>
</ThemeProvider>
);
}