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";
|
||||
|
||||
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
|
||||
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
||||
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
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 HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import FeatureCardTwentyEight from "@/components/sections/feature/FeatureCardTwentyEight";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
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() {
|
||||
const navItems = [
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Docs", id: "docs" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
export default function Home() {
|
||||
const navItems = [
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const features: FeatureCard[] = [
|
||||
{
|
||||
bentoComponent: "3d-task-list", title: "Agent Tasks", items: [
|
||||
{ icon: Search, label: "Research competitors", time: "2m ago" },
|
||||
{ icon: FileText, label: "Analyze market data", time: "5m ago" },
|
||||
{ icon: CheckCircle, label: "Generate report", time: "8m ago" },
|
||||
{ icon: Send, label: "Send to stakeholders", time: "10m ago" },
|
||||
],
|
||||
description: "Agents break down complex goals into manageable tasks and execute them autonomously."},
|
||||
{
|
||||
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 services = [
|
||||
{
|
||||
id: "1", title: "Website Design", subtitle: "Stunning visual experiences", category: "Design", value: "Custom layouts"},
|
||||
{
|
||||
id: "2", title: "Landing Pages", subtitle: "Optimized for conversion", category: "Marketing", value: "High conversion"},
|
||||
{
|
||||
id: "3", title: "Lead Generation Systems", subtitle: "Capture more inquiries", category: "Growth", value: "Automated"},
|
||||
{
|
||||
id: "4", title: "AI Chat Integration", subtitle: "24/7 engagement", category: "AI", value: "Smart support"},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
{ 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 footerColumns = [
|
||||
{ title: "Navigation", items: [{ label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Company", items: [{ label: "Email: kjwebstudio@outlook.com", href: "mailto:kjwebstudio@outlook.com" }] },
|
||||
];
|
||||
|
||||
const pricingPlans = [
|
||||
{ id: "starter", price: "$29/mo", name: "Starter", buttons: [{ text: "Get Started", href: "#" }], features: ["3 active agents", "5,000 runs/month", "Basic integrations"] },
|
||||
{ id: "pro", price: "$99/mo", name: "Professional", buttons: [{ text: "Get Started", href: "#" }], features: ["15 active agents", "50,000 runs/month", "All integrations"] },
|
||||
{ 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"] },
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{ id: "1", title: "What are AI agents?", content: "Autonomous software that plans and executes tasks." },
|
||||
{ id: "2", title: "How do I start?", content: "You can get your first agent running in under 15 minutes." },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }] },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="KJWebStudio"
|
||||
bottomLeftText="Expert Web Solutions"
|
||||
bottomRightText="kjwebstudio@outlook.com"
|
||||
/>
|
||||
<HeroBillboardDashboard
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
tag="Web Development Partner"
|
||||
tagIcon={Code}
|
||||
title="Professional Web Solutions Built for Growth"
|
||||
description="We build high-performance, custom websites tailored to your business needs."
|
||||
buttons={[{ text: "Let's Connect", href: "#contact" }]}
|
||||
dashboard={{
|
||||
title: "Project Management", logoIcon: Code,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-with-curly-dark-hair-blowing-his-cheeks_273609-14064.jpg", stats: [
|
||||
{ title: "Projects", values: [10, 25, 40], description: "Successful deployments" },
|
||||
{ title: "Support", values: [5, 10, 15], description: "Active clients" },
|
||||
{ title: "Uptime", values: [99, 99, 100], valueSuffix: "%", description: "Average uptime" },
|
||||
],
|
||||
listTitle: "Recent Activity", listItems: [
|
||||
{ icon: CheckCircle, title: "New Client Onboarding", status: "Complete" },
|
||||
{ icon: Zap, title: "Site Optimization", status: "Running" },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
<div id="features">
|
||||
<FeatureBento
|
||||
features={features}
|
||||
animationType="slide-up"
|
||||
tag="Services"
|
||||
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>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="KJWebStudio"
|
||||
bottomLeftText="Web Solutions"
|
||||
bottomRightText="kjwebstudio@outlook.com"
|
||||
/>
|
||||
<div id="hero">
|
||||
<HeroBillboardGallery
|
||||
title="Websites that turn visitors into customers"
|
||||
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={{ variant: "canvas-reveal" }}
|
||||
buttons={[{ text: "Request a Website", href: "#contact" }, { text: "View Work", href: "#services" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010125.jpg", imageAlt: "Coding" },
|
||||
{ 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" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="services">
|
||||
<FeatureCardTwentyEight
|
||||
title="Our Services"
|
||||
description="Specialized digital solutions designed to help your business reach its goals."
|
||||
features={services}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<ContactSplit
|
||||
tag="Let's Connect"
|
||||
title="Ready to start your project?"
|
||||
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"
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
useInvertedBackground={false}
|
||||
onSubmit={(email) => console.log("Form submitted with email:", email)}
|
||||
/>
|
||||
</div>
|
||||
<FooterBase
|
||||
logoText="KJWebStudio"
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 KJWebStudio"
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user