Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 10a8e7bc02 | |||
| ea3214a83f | |||
| d85fc3721b | |||
| 260fc76fa0 |
276
src/app/page.tsx
276
src/app/page.tsx
@@ -1,199 +1,93 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
|
||||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||||
import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
|
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||||
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
import FeatureCardTwentyEight from "@/components/sections/feature/FeatureCardTwentyEight";
|
||||||
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||||
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
|
||||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
||||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
||||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import { Bot, Brain, Sparkles, User, Code, Database, Workflow, Settings, Search, FileText, Send, CheckCircle, Zap, MessageSquare, CreditCard, Star, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, Layers, GitBranch, Lock, Eye } from "lucide-react";
|
|
||||||
|
|
||||||
export default function AIAgentsTemplatePage() {
|
export default function Home() {
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ name: "Features", id: "features" },
|
{ name: "Services", id: "services" },
|
||||||
{ name: "Pricing", id: "pricing" },
|
{ name: "Contact", id: "contact" },
|
||||||
{ name: "Docs", id: "docs" },
|
];
|
||||||
{ name: "Contact", id: "contact" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const features: FeatureCard[] = [
|
const services = [
|
||||||
{
|
{
|
||||||
bentoComponent: "3d-task-list", title: "Agent Tasks", items: [
|
id: "1", title: "Website Design", subtitle: "Stunning visual experiences", category: "Design", value: "Custom layouts"},
|
||||||
{ icon: Search, label: "Research competitors", time: "2m ago" },
|
{
|
||||||
{ icon: FileText, label: "Analyze market data", time: "5m ago" },
|
id: "2", title: "Landing Pages", subtitle: "Optimized for conversion", category: "Marketing", value: "High conversion"},
|
||||||
{ icon: CheckCircle, label: "Generate report", time: "8m ago" },
|
{
|
||||||
{ icon: Send, label: "Send to stakeholders", time: "10m ago" },
|
id: "3", title: "Lead Generation Systems", subtitle: "Capture more inquiries", category: "Growth", value: "Automated"},
|
||||||
],
|
{
|
||||||
description: "Agents break down complex goals into manageable tasks and execute them autonomously."},
|
id: "4", title: "AI Chat Integration", subtitle: "24/7 engagement", category: "AI", value: "Smart support"},
|
||||||
{
|
];
|
||||||
bentoComponent: "chat", aiIcon: Bot,
|
|
||||||
userIcon: User,
|
|
||||||
exchanges: [
|
|
||||||
{ userMessage: "Summarize our Q4 sales data", aiResponse: "Q4 revenue was $2.4M, up 23% from Q3. Top performer: Enterprise tier." },
|
|
||||||
{ userMessage: "What about customer retention?", aiResponse: "Retention rate improved to 94%, with churn down 12% quarter-over-quarter." },
|
|
||||||
],
|
|
||||||
placeholder: "Ask your agent anything...", title: "Natural Conversations", description: "Interact with your agents through natural language. They understand context and intent."},
|
|
||||||
{
|
|
||||||
bentoComponent: "3d-card-grid", items: [
|
|
||||||
{ name: "Code", icon: Code },
|
|
||||||
{ name: "Data", icon: Database },
|
|
||||||
{ name: "Workflow", icon: Workflow },
|
|
||||||
{ name: "Config", icon: Settings },
|
|
||||||
],
|
|
||||||
centerIcon: Brain,
|
|
||||||
title: "Tool Integration", description: "Connect agents to your existing tools and let them take action across your entire stack."},
|
|
||||||
];
|
|
||||||
|
|
||||||
const testimonials = [
|
const footerColumns = [
|
||||||
{ id: "1", name: "Sarah Chen", handle: "CTO at DataFlow", testimonial: "AgentFlow cut our data processing time by 80%.", imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg" },
|
{ title: "Navigation", items: [{ label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
|
||||||
{ id: "2", name: "Marcus Rodriguez", handle: "VP Engineering at ScaleUp", testimonial: "We deployed 50 agents in production within a week.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-work_23-2149362876.jpg" },
|
{ title: "Company", items: [{ label: "Email: kjwebstudio@outlook.com", href: "mailto:kjwebstudio@outlook.com" }] },
|
||||||
{ id: "3", name: "Emily Watson", handle: "Head of AI at TechCorp", testimonial: "The tool integration is seamless.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-working-laptop-smiling-while-sitting-sidewalk-cafe_231208-12079.jpg" },
|
];
|
||||||
];
|
|
||||||
|
|
||||||
const pricingPlans = [
|
return (
|
||||||
{ id: "starter", price: "$29/mo", name: "Starter", buttons: [{ text: "Get Started", href: "#" }], features: ["3 active agents", "5,000 runs/month", "Basic integrations"] },
|
<ThemeProvider
|
||||||
{ id: "pro", price: "$99/mo", name: "Professional", buttons: [{ text: "Get Started", href: "#" }], features: ["15 active agents", "50,000 runs/month", "All integrations"] },
|
defaultButtonVariant="icon-arrow"
|
||||||
{ id: "business", badge: "Most Popular", price: "$299/mo", name: "Business", buttons: [{ text: "Get Started", href: "#" }], features: ["50 active agents", "250,000 runs/month", "Custom integrations"] },
|
defaultTextAnimation="background-highlight"
|
||||||
];
|
borderRadius="rounded"
|
||||||
|
contentWidth="medium"
|
||||||
const faqs = [
|
sizing="medium"
|
||||||
{ id: "1", title: "What are AI agents?", content: "Autonomous software that plans and executes tasks." },
|
background="none"
|
||||||
{ id: "2", title: "How do I start?", content: "You can get your first agent running in under 15 minutes." },
|
cardStyle="gradient-bordered"
|
||||||
];
|
primaryButtonStyle="gradient"
|
||||||
|
secondaryButtonStyle="layered"
|
||||||
const footerColumns = [
|
headingFontWeight="semibold"
|
||||||
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
>
|
||||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }] },
|
<NavbarStyleFullscreen
|
||||||
];
|
navItems={navItems}
|
||||||
|
brandName="KJWebStudio"
|
||||||
return (
|
bottomLeftText="Web Solutions"
|
||||||
<ThemeProvider
|
bottomRightText="kjwebstudio@outlook.com"
|
||||||
defaultButtonVariant="icon-arrow"
|
/>
|
||||||
defaultTextAnimation="background-highlight"
|
<div id="hero">
|
||||||
borderRadius="rounded"
|
<HeroBillboardGallery
|
||||||
contentWidth="medium"
|
title="Websites that turn visitors into customers"
|
||||||
sizing="medium"
|
description="We help local businesses grow by crafting high-performance websites that capture leads and drive results. Fast turnaround • Mobile-first • Built for results."
|
||||||
background="none"
|
background={{ variant: "canvas-reveal" }}
|
||||||
cardStyle="gradient-bordered"
|
buttons={[{ text: "Request a Website", href: "#contact" }, { text: "View Work", href: "#services" }]}
|
||||||
primaryButtonStyle="gradient"
|
mediaItems={[
|
||||||
secondaryButtonStyle="layered"
|
{ imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010125.jpg", imageAlt: "Coding" },
|
||||||
headingFontWeight="semibold"
|
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-workspace-with-smartphone-laptop_23-2148784013.jpg", imageAlt: "Workspace" },
|
||||||
>
|
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-working-with-data-laptop_23-2149372559.jpg", imageAlt: "Data" }
|
||||||
<NavbarStyleFullscreen
|
]}
|
||||||
navItems={navItems}
|
mediaAnimation="blur-reveal"
|
||||||
brandName="KJWebStudio"
|
/>
|
||||||
bottomLeftText="Expert Web Solutions"
|
</div>
|
||||||
bottomRightText="kjwebstudio@outlook.com"
|
<div id="services">
|
||||||
/>
|
<FeatureCardTwentyEight
|
||||||
<HeroBillboardDashboard
|
title="Our Services"
|
||||||
background={{ variant: "canvas-reveal" }}
|
description="Specialized digital solutions designed to help your business reach its goals."
|
||||||
tag="Web Development Partner"
|
features={services}
|
||||||
tagIcon={Code}
|
animationType="slide-up"
|
||||||
title="Professional Web Solutions Built for Growth"
|
textboxLayout="default"
|
||||||
description="We build high-performance, custom websites tailored to your business needs."
|
useInvertedBackground={false}
|
||||||
buttons={[{ text: "Let's Connect", href: "#contact" }]}
|
/>
|
||||||
dashboard={{
|
</div>
|
||||||
title: "Project Management", logoIcon: Code,
|
<div id="contact">
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-with-curly-dark-hair-blowing-his-cheeks_273609-14064.jpg", stats: [
|
<ContactSplit
|
||||||
{ title: "Projects", values: [10, 25, 40], description: "Successful deployments" },
|
tag="Let's Connect"
|
||||||
{ title: "Support", values: [5, 10, 15], description: "Active clients" },
|
title="Ready to start your project?"
|
||||||
{ title: "Uptime", values: [99, 99, 100], valueSuffix: "%", description: "Average uptime" },
|
description="Reach out to us at kjwebstudio@outlook.com and let's turn your ideas into a high-converting website."
|
||||||
],
|
imageSrc="http://img.b2bpic.net/free-photo/cheerful-business-woman-using-laptop-office_1262-14064.jpg"
|
||||||
listTitle: "Recent Activity", listItems: [
|
background={{ variant: "canvas-reveal" }}
|
||||||
{ icon: CheckCircle, title: "New Client Onboarding", status: "Complete" },
|
useInvertedBackground={false}
|
||||||
{ icon: Zap, title: "Site Optimization", status: "Running" },
|
onSubmit={(email) => console.log("Form submitted with email:", email)}
|
||||||
],
|
/>
|
||||||
}}
|
</div>
|
||||||
/>
|
<FooterBase
|
||||||
<div id="features">
|
logoText="KJWebStudio"
|
||||||
<FeatureBento
|
columns={footerColumns}
|
||||||
features={features}
|
copyrightText="© 2025 KJWebStudio"
|
||||||
animationType="slide-up"
|
/>
|
||||||
tag="Services"
|
</ThemeProvider>
|
||||||
tagIcon={Settings}
|
);
|
||||||
title="End-to-End Web Services"
|
}
|
||||||
description="Comprehensive solutions for every stage of your online presence."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<FeatureHoverPattern
|
|
||||||
animationType="slide-up"
|
|
||||||
tag="Quality First"
|
|
||||||
tagIcon={Shield}
|
|
||||||
title="Why Partner With Us?"
|
|
||||||
description="Expertise that scales with your business goals."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
features={[
|
|
||||||
{ icon: Code, title: "Modern Tech Stack", description: "Fast, secure, and modern frameworks." },
|
|
||||||
{ icon: Database, title: "Scalable Design", description: "Architecture built to grow with you." },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<MetricSplitMediaAbout
|
|
||||||
tag="About Us"
|
|
||||||
tagIcon={User}
|
|
||||||
title="Your Vision, Our Implementation"
|
|
||||||
description="At KJWebStudio, we bridge the gap between creative ideas and technical execution. Our focus is on building user-centric, high-converting digital experiences that reflect your brand identity perfectly."
|
|
||||||
metrics={[{ value: "100%", title: "Satisfaction" }, { value: "24/7", title: "Reliable" }]}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/computer-screens-desk-empty-software-it-agency-office-computers-background-running-programming-code-data-algorithms-neural-network-servers-cloud-computing-data-room_482257-33530.jpg"
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
metricsAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
<TestimonialCardSix
|
|
||||||
testimonials={testimonials}
|
|
||||||
animationType="slide-up"
|
|
||||||
tag="Reviews"
|
|
||||||
tagIcon={Star}
|
|
||||||
title="What Our Clients Say"
|
|
||||||
description="Hear from businesses we have helped grow online."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
<div id="pricing">
|
|
||||||
<PricingCardThree
|
|
||||||
plans={pricingPlans}
|
|
||||||
animationType="slide-up"
|
|
||||||
tag="Pricing"
|
|
||||||
tagIcon={CreditCard}
|
|
||||||
title="Transparent Pricing Packages"
|
|
||||||
description="Clear packages for predictable web development outcomes."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<FaqDouble
|
|
||||||
faqs={faqs}
|
|
||||||
tag="FAQs"
|
|
||||||
tagIcon={HelpCircle}
|
|
||||||
title="Common Questions"
|
|
||||||
description="Quick answers to help you get started."
|
|
||||||
textboxLayout="default"
|
|
||||||
faqsAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
<div id="contact">
|
|
||||||
<ContactCTA
|
|
||||||
tag="Get in Touch"
|
|
||||||
tagIcon={Mail}
|
|
||||||
title="Have a Project in Mind?"
|
|
||||||
description="Ready to build your next digital asset? Contact us at kjwebstudio@outlook.com or send a message below to start your project journey."
|
|
||||||
buttons={[{ text: "Email Us", href: "mailto:kjwebstudio@outlook.com" }]}
|
|
||||||
background={{ variant: "canvas-reveal" }}
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<FooterBaseCard
|
|
||||||
logoText="KJWebStudio"
|
|
||||||
columns={footerColumns}
|
|
||||||
copyrightText="© 2025 KJWebStudio. All rights reserved."
|
|
||||||
/>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user