bender/2729435b-cda5-4aff-b8f0-e44ffa59f702
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
bender
2026-05-23 05:11:37 +00:00
parent e68a1576ab 7288357fc3
commit 39ba202eac
5 changed files with 156 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/app/contact/page.tsx
View File

@@ -2,12 +2,11 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactCTA from "@/components/sections/contact/ContactCTA";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FooterSimple from "@/components/sections/footer/FooterSimple";
export default function LandingPage() {
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -22,110 +21,34 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Work",
id: "/work",
},
{
name: "Services",
id: "/services",
},
{
name: "Contact",
id: "/contact",
},
]}
brandName="KJ Web Studio"
/>
</div>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Work", id: "/work" },
{ name: "Services", id: "/services" },
{ name: "Contact", id: "/contact" },
]}
brandName="KJ Web Studio"
/>
<ContactCTA
tag="Get In Touch"
title="Ready to start your project?"
description="We are here to help your local business grow. Let's discuss your goals and how we can achieve them."
buttons={[{ text: "Send Message" }]}
background={{ variant: "glowing-orb" }}
useInvertedBackground={false}
/>
<div id="contact-page" data-section="contact-page">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Contact"
title="Let's build your website."
description="Reach out to discuss your project. kjwebstudio@outlook.com"
buttonText="Send Message"
/>
</div>
<div id="blog" data-section="blog">
<BlogCardOne
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Agency Insights"
description="Stay updated with industry trends."
blogs={[
{
id: "b1",
category: "Design",
title: "Why Conversion Matters",
excerpt: "Learn how small changes impact user behavior.",
imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-blank-white-screen-turquoise-table-with-nearby-chair_23-2147924199.jpg",
authorName: "KJ Admin",
authorAvatar: "http://img.b2bpic.net/free-photo/ideas-creation-design-process-icon_53876-124499.jpg",
date: "2024-10-01",
},
{
id: "b2",
category: "Local SEO",
title: "Local SEO Tips",
excerpt: "How to get found in your city.",
imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg",
authorName: "KJ Admin",
authorAvatar: "http://img.b2bpic.net/free-photo/business-brainstorm-planning-work-ideas-concept_53876-120969.jpg",
date: "2024-09-20",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "Contact",
href: "/contact",
},
],
},
{
title: "Services",
items: [
{
label: "Design",
href: "/services",
},
{
label: "Leads",
href: "/services",
},
],
},
]}
bottomLeftText="© 2024 KJ Web Studio"
bottomRightText="kjwebstudio@outlook.com"
/>
</div>
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
{ title: "Services", items: [{ label: "Design", href: "/services" }, { label: "Leads", href: "/services" }] },
]}
bottomLeftText="© 2024 KJ Web Studio"
bottomRightText="kjwebstudio@outlook.com"
/>
</ReactLenis>
</ThemeProvider>
);
}
}

175
src/app/page.tsx
View File

@@ -29,22 +29,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Work",
id: "/work",
},
{
name: "Services",
id: "/services",
},
{
name: "Contact",
id: "/contact",
},
{ name: "Home", id: "/" },
{ name: "Work", id: "/work" },
{ name: "Services", id: "/services" },
{ name: "Contact", id: "/contact" },
]}
brandName="KJ Web Studio"
/>
@@ -52,21 +40,10 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroLogoBillboard
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
logoText="KJ Web Studio"
description="We design modern, high-converting websites for local businesses that want more calls, leads, and clients."
buttons={[
{
text: "Request a Website",
href: "/contact",
},
{
text: "View Work",
href: "/work",
},
]}
buttons={[{ text: "Request a Website", href: "/contact" }, { text: "View Work", href: "/work" }]}
imageSrc="http://img.b2bpic.net/free-photo/apartment-diy-decoration-furnishing-interior_53876-120878.jpg"
imageAlt="minimalist web agency hero"
mediaAnimation="slide-up"
@@ -79,30 +56,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "1",
value: "24h",
title: "Fast Turnaround",
items: [
"Ready to launch fast",
],
},
{
id: "2",
value: "100%",
title: "Mobile-First",
items: [
"Works on every device",
],
},
{
id: "3",
value: "High",
title: "Conversion",
items: [
"Optimized for calls",
],
},
{ id: "1", value: "24h", title: "Fast Turnaround", items: ["Ready to launch fast"] },
{ id: "2", value: "100%", title: "Mobile-First", items: ["Works on every device"] },
{ id: "3", value: "High", title: "Conversion", items: ["Optimized for calls"] },
]}
title="Results-Driven"
description="Websites built for real business impact."
@@ -115,21 +71,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={true}
features={[
{
icon: Layout,
title: "Website Design",
description: "Clean, modern websites built to convert.",
},
{
icon: Smartphone,
title: "Landing Pages",
description: "High-performing pages for specific campaigns.",
},
{
icon: Mail,
title: "Lead Gen",
description: "Integrated forms and call systems.",
},
{ icon: Layout, title: "Website Design", description: "Clean, modern websites built to convert." },
{ icon: Smartphone, title: "Landing Pages", description: "High-performing pages for specific campaigns." },
{ icon: Mail, title: "Lead Gen", description: "Integrated forms and call systems." },
]}
title="Our Services"
description="Everything you need to grow your local business."
@@ -143,60 +87,12 @@ export default function LandingPage() {
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{
id: "1",
brand: "Contractor",
name: "Contractor Web Concept",
price: "High Impact",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg",
},
{
id: "2",
brand: "Barber",
name: "Barber Shop Web Concept",
price: "High Impact",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg",
},
{
id: "3",
brand: "Resto",
name: "Restaurant Web Concept",
price: "High Impact",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836115.jpg",
},
{
id: "4",
brand: "Clinic",
name: "Clinic Web Concept",
price: "High Impact",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5885.jpg",
},
{
id: "5",
brand: "Lawyer",
name: "Law Firm Concept",
price: "High Impact",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-builder-desk-with-tablet-mock-up_23-2148269846.jpg",
},
{
id: "6",
brand: "Gym",
name: "Fitness Concept",
price: "High Impact",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-applying-hairdresser-hairstylist-beauty-saloon_627829-4642.jpg",
},
{ id: "1", brand: "Contractor", name: "Contractor Web Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg" },
{ id: "2", brand: "Barber", name: "Barber Shop Web Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg" },
{ id: "3", brand: "Resto", name: "Restaurant Web Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836115.jpg" },
{ id: "4", brand: "Clinic", name: "Clinic Web Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5885.jpg" },
{ id: "5", brand: "Lawyer", name: "Law Firm Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/top-view-builder-desk-with-tablet-mock-up_23-2148269846.jpg" },
{ id: "6", brand: "Gym", name: "Fitness Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-applying-hairdresser-hairstylist-beauty-saloon_627829-4642.jpg" },
]}
title="Recent Work"
description="Concepts designed for local growth."
@@ -208,44 +104,15 @@ export default function LandingPage() {
useInvertedBackground={false}
tag="Our Agency"
title="We help local businesses dominate their digital presence."
buttons={[
{
text: "Learn More",
href: "/about",
},
]}
buttons={[{ text: "Learn More", href: "/about" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "Contact",
href: "/contact",
},
],
},
{
title: "Services",
items: [
{
label: "Design",
href: "/services",
},
{
label: "Leads",
href: "/services",
},
],
},
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
{ title: "Services", items: [{ label: "Design", href: "/services" }, { label: "Leads", href: "/services" }] },
]}
bottomLeftText="© 2024 KJ Web Studio"
bottomRightText="kjwebstudio@outlook.com"

174
src/app/services/page.tsx
View File

@@ -2,13 +2,12 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import { Code, MessageSquare, Phone, Rocket } from "lucide-react";
import { Layout, Smartphone, Mail, Globe, Zap, Palette } from "lucide-react";
export default function LandingPage() {
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -23,119 +22,64 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Work",
id: "/work",
},
{
name: "Services",
id: "/services",
},
{
name: "Contact",
id: "/contact",
},
]}
brandName="KJ Web Studio"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Work", id: "/work" },
{ name: "Services", id: "/services" },
{ name: "Contact", id: "/contact" },
]}
brandName="KJ Web Studio"
/>
</div>
<div id="services-page" data-section="services-page">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
icon: Code,
title: "Website Design",
description: "Professional business websites.",
},
{
icon: Rocket,
title: "Landing Pages",
description: "High-conversion landing pages.",
},
{
icon: Phone,
title: "Lead Systems",
description: "Call-generating inquiry systems.",
},
{
icon: MessageSquare,
title: "AI Chat",
description: "Automated engagement bots.",
},
]}
title="Our Services"
description="We specialize in high-converting web solutions."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentySix
title="Our Premium Digital Services"
description="We build high-performance digital infrastructure designed to convert visitors into loyal, paying customers for your local business."
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Custom Web Design", description: "Hand-crafted, professional website layouts tailored to your brand identity and industry standards.", buttonIcon: Palette,
imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg"
},
{
title: "Mobile-First Development", description: "Fully responsive design that guarantees seamless functionality and stunning visuals across all mobile devices.", buttonIcon: Smartphone,
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg"
},
{
title: "Lead Generation Systems", description: "Strategic integration of high-converting contact forms, click-to-call buttons, and automated capture systems.", buttonIcon: Mail,
imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836115.jpg"
},
{
title: "Search Engine Optimization", description: "Core technical SEO implementation to improve your local search visibility and attract more nearby traffic.", buttonIcon: Globe,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5885.jpg"
},
{
title: "High-Speed Hosting", description: "Lightning-fast load times that keep visitors engaged and improve your site's performance and ranking.", buttonIcon: Zap,
imageSrc: "http://img.b2bpic.net/free-photo/top-view-builder-desk-with-tablet-mock-up_23-2148269846.jpg"
},
{
title: "Content Management", description: "User-friendly administration interfaces so you can easily update your services, offers, and contact information.", buttonIcon: Layout,
imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-applying-hairdresser-hairstylist-beauty-saloon_627829-4642.jpg"
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
title="Common Questions"
description="Find out how we work."
faqsAnimation="slide-up"
faqs={[
{
id: "f1",
title: "How long does a site take?",
content: "Most projects are completed within 7-10 business days.",
},
{
id: "f2",
title: "What platforms do you use?",
content: "We use modern, fast, and SEO-optimized web tech.",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "Contact",
href: "/contact",
},
],
},
{
title: "Services",
items: [
{
label: "Design",
href: "/services",
},
{
label: "Leads",
href: "/services",
},
],
},
]}
bottomLeftText="© 2024 KJ Web Studio"
bottomRightText="kjwebstudio@outlook.com"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
{ title: "Services", items: [{ label: "Design", href: "/services" }, { label: "Leads", href: "/services" }] },
]}
bottomLeftText="© 2024 KJ Web Studio"
bottomRightText="kjwebstudio@outlook.com"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

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

@@ -12,13 +12,13 @@
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612e6;
--primary-cta: #15479c;
--foreground: #0a0a0a;
--primary-cta: #4f46e5;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta: #f1f5f9;
--secondary-cta-text: #000612e6;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
--accent: #8b5cf6;
--background-accent: #f5f3ff;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

163
src/app/work/page.tsx
View File

@@ -2,13 +2,11 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterSimple from '@/components/sections/footer/FooterSimple';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import { Clock, Smartphone, TrendingUp } from "lucide-react";
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FooterSimple from '@/components/sections/footer/FooterSimple';
export default function LandingPage() {
export default function WorkPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -23,126 +21,45 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Work",
id: "/work",
},
{
name: "Services",
id: "/services",
},
{
name: "Contact",
id: "/contact",
},
]}
brandName="KJ Web Studio"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Work", id: "/work" },
{ name: "Services", id: "/services" },
{ name: "Contact", id: "/contact" },
]}
brandName="KJ Web Studio"
/>
</div>
<div id="work-page" data-section="work-page">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
products={[
{
id: "w1",
brand: "Contractor",
name: "Contractor Web Concept",
price: "Lead Focus",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-13570.jpg",
},
{
id: "w2",
brand: "Barber",
name: "Barber Shop Web Concept",
price: "Lead Focus",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/black-white-representation-sasquatch-hairy-beast_23-2151368313.jpg",
},
]}
title="Our Work"
description="See the concepts that turn visitors into clients."
/>
</div>
<div id="work-showcase" data-section="work-showcase">
<ProductCardThree
title="Our Portfolio"
description="A selection of high-converting concepts designed for local business growth."
animationType="slide-up"
gridVariant="one-large-right-three-stacked-left"
textboxLayout="split"
products={[
{ id: "1", name: "Contractor Web Concept", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg" },
{ id: "2", name: "Barber Shop Web Concept", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg" },
{ id: "3", name: "Restaurant Web Concept", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836115.jpg" },
{ id: "4", name: "Clinic Web Concept", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5885.jpg" }
]}
/>
</div>
<div id="metric" data-section="metric">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Proven Impact"
description="Our designs drive real metrics for business owners."
metrics={[
{
id: "m1",
icon: TrendingUp,
title: "Avg. Lead Increase",
value: "45%",
},
{
id: "m2",
icon: Smartphone,
title: "Mobile Traffic",
value: "80%",
},
{
id: "m3",
icon: Clock,
title: "Build Time",
value: "7 Days",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "Contact",
href: "/contact",
},
],
},
{
title: "Services",
items: [
{
label: "Design",
href: "/services",
},
{
label: "Leads",
href: "/services",
},
],
},
]}
bottomLeftText="© 2024 KJ Web Studio"
bottomRightText="kjwebstudio@outlook.com"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
{ title: "Services", items: [{ label: "Design", href: "/services" }, { label: "Leads", href: "/services" }] },
]}
bottomLeftText="© 2024 KJ Web Studio"
bottomRightText="kjwebstudio@outlook.com"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}