Files
1e91cf87-032e-4ce3-bb34-4d3…/src/app/services/page.tsx

164 lines
7.9 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import { Sparkles, Target, Hammer, Rocket, TrendingUp } from "lucide-react";
export default function ServicesPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "How It Works", id: "how-it-works" },
{ name: "Results", id: "results" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Product", items: [
{ label: "AI Websites", href: "/services" },
{ label: "AI Chatbots", href: "/services" },
{ label: "Automation", href: "/services" },
{ label: "Pricing", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "How It Works", href: "#how-it-works" },
{ label: "Results", href: "#results" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Resources", items: [
{ label: "Blog", href: "#" },
{ label: "Documentation", href: "#" },
{ label: "Case Studies", href: "#" },
{ label: "FAQ", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="extZura"
navItems={navItems}
button={{
text: "Get My Website", href: "contact"}}
/>
</div>
<div id="services-detailed" data-section="services-detailed">
<FeatureCardTwelve
title="Our Comprehensive Services"
description="Explore each of our AI-powered solutions designed to help your business thrive online and attract qualified leads."
tag="Detailed Offerings"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
features={[
{
id: "ai-websites-detail", label: "AI Websites", title: "High-Converting Website Design & Development", items: [
"Premium, modern design that builds trust and credibility", "Fully mobile-optimized responsive design for all devices", "Advanced SEO optimization for search visibility", "Lightning-fast loading speeds for better user experience", "Built-in conversion tracking and analytics", "Secure, scalable infrastructure", "CMS integration for easy updates", "Performance monitoring and optimization"],
buttons: [
{
text: "Get a Quote", href: "contact"},
],
},
{
id: "ai-chatbots-detail", label: "AI Chatbots", title: "Intelligent 24/7 Lead Generation & Support", items: [
"AI-powered conversational interactions with your visitors", "Automatic lead capture and qualification", "Handles customer inquiries round the clock", "Seamless CRM and email integration", "Increases customer satisfaction and response rates", "Natural language processing for better conversations", "Multi-language support capabilities", "Detailed analytics and conversation logs"],
buttons: [
{
text: "See Demo", href: "contact"},
],
},
{
id: "automation-detail", label: "Automation", title: "Intelligent Business Process Automation", items: [
"Automated booking system management", "Email marketing workflow automation", "Lead qualification and scoring systems", "Automated customer follow-up sequences", "Saves significant time and increases team efficiency", "Reduces manual errors and improves consistency", "Custom workflow design for your specific needs", "Integration with your existing tools and systems"],
buttons: [
{
text: "Schedule Consultation", href: "contact"},
],
},
]}
/>
</div>
<div id="implementation-process" data-section="implementation-process">
<MetricCardOne
title="Our Implementation Process"
description="We follow a structured, proven methodology to ensure your success at every stage."
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground={true}
metrics={[
{
id: "1", value: "1", title: "Discovery", description: "We conduct a thorough analysis of your business, competition, and target audience to develop a customized strategy.", icon: Target,
},
{
id: "2", value: "2", title: "Design", description: "Our creative team designs mockups and wireframes tailored to your brand identity and conversion goals.", icon: Hammer,
},
{
id: "3", value: "3", title: "Development", description: "We build your website, chatbot, and automation systems using the latest technologies and best practices.", icon: Rocket,
},
{
id: "4", value: "4", title: "Optimization", description: "We test, launch, and continuously monitor performance to maximize your ROI and lead generation.", icon: TrendingUp,
},
]}
/>
</div>
<div id="contact-services" data-section="contact-services">
<ContactCenter
tag="Get Started"
title="Ready to Transform Your Business?"
description="Let's discuss which of our AI-powered solutions would be the best fit for your business. Schedule a free consultation with our team today."
tagIcon={Sparkles}
background={{ variant: "animated-grid" }}
useInvertedBackground={false}
inputPlaceholder="Your business email"
buttonText="Schedule Free Consultation"
termsText="We respect your privacy. We'll only use your email to schedule your consultation and send you relevant information about our services."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2025 extZura. All rights reserved."
bottomRightText="Helping businesses grow online"
/>
</div>
</ThemeProvider>
);
}