507 lines
29 KiB
TypeScript
507 lines
29 KiB
TypeScript
import React, { useState } from "react";
|
||
import { Navigation } from "../components/Navigation";
|
||
import { Footer } from "../components/Footer";
|
||
import { Button } from "../components/ui/button";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { Card, CardContent } from "../components/ui/card";
|
||
import { Input } from "../components/ui/input";
|
||
import {
|
||
Accordion,
|
||
AccordionContent,
|
||
AccordionItem,
|
||
AccordionTrigger,
|
||
} from "../components/ui/accordion";
|
||
import {
|
||
HelpCircle,
|
||
Search,
|
||
ArrowRight,
|
||
MessageSquare,
|
||
Phone,
|
||
Mail,
|
||
} from "lucide-react";
|
||
import { Helmet } from "react-helmet-async";
|
||
import { useNavigate } from "react-router-dom";
|
||
|
||
export const FAQs = () => {
|
||
const [searchTerm, setSearchTerm] = useState("");
|
||
const navigate = useNavigate();
|
||
|
||
const faqCategories = [
|
||
{
|
||
category: "General Questions",
|
||
icon: HelpCircle,
|
||
faqs: [
|
||
{
|
||
question: "What industries does WDI serve?",
|
||
answer:
|
||
"WDI serves a diverse range of AI‑driven industries, including Healthcare, FinTech, E‑commerce, Education, Manufacturing, Real Estate, Logistics, and more. Our AI mobile and web development solutions are tailored to each sector’s regulatory and business needs, delivering scalable AI‑powered mobile and web applications.",
|
||
},
|
||
{
|
||
question: "What makes WDI different from other tech partners?",
|
||
answer:
|
||
"As an AI app development company, we differentiate ourselves through a comprehensive, AI-driven approach that blends technical excellence with deep industry knowledge. Our approach ensures scalable, innovative, and business-focused solutions tailored to client needs.\n\nKey strengths include:\n\n• End-to-end AI-driven app development services from concept to deployment\n• Agile methodology with transparent communication\n• Proven track record with 500+ successful projects\n• Expert team of 150+ AI mobile application developers\n• Focus on long-term partnerships rather than one-off projects\n• Adoption of cutting-edge technologies, including AI/ML, cloud solutions, and modern development frameworks",
|
||
},
|
||
{
|
||
question: "How long has WDI been in business?",
|
||
answer:
|
||
"WDI has been pioneering AI‑driven digital transformation solutions for over 6 years. Our AI mobile and web development team has delivered 500+ successful projects, built a team of 150+ experts, and become a trusted technology partner for startups and enterprise organizations.",
|
||
},
|
||
{
|
||
question: "What is WDI's approach to project management?",
|
||
answer:
|
||
"We follow Agile project management methodologies, primarily Scrum and Kanban, tailored to client preferences and project needs. Our process includes sprint planning, daily standups, reviews, and retrospectives. We maintain transparent communication through dedicated project managers, regular updates, and collaborative tools that keep clients informed throughout the AI‑driven development lifecycle.",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
category: "Services & Solutions",
|
||
icon: MessageSquare,
|
||
faqs: [
|
||
{
|
||
question: "What development methodologies does WDI follow?",
|
||
answer:
|
||
"We primarily follow Agile methodologies, including Scrum and Kanban, but can adapt to client preferences such as Waterfall or hybrid approaches. Our Agile process includes sprint planning, daily standups, reviews, and retrospectives, supported by modern practices like CI/CD, test‑driven development, and rigorous code reviews to ensure high‑quality, AI‑driven deliverables across AI mobile and web development projects.",
|
||
},
|
||
{
|
||
question: "Do you offer post-development support and maintenance?",
|
||
answer:
|
||
"Yes. We provide comprehensive post‑launch support and maintenance packages featuring: 1) 24/7 technical support, 2) bug fixes and security patches, 3) performance monitoring and optimization, 4) feature enhancements and AI‑driven updates, 5) infrastructure management and scaling, and 6) regular health checks and reporting. Packages are customizable with flexible SLAs to match your AI mobile and web development needs.",
|
||
},
|
||
{
|
||
question: "Can WDI integrate with our existing systems?",
|
||
answer:
|
||
"Absolutely. We specialize in third‑party integrations and can seamlessly connect new AI‑driven solutions with your existing systems, databases, and applications. Our expertise includes APIs, webhooks, middleware, ETL processes, and cloud‑to‑cloud integrations, all designed to ensure data consistency, security, and minimal disruption to ongoing operations for AI‑powered mobile and web applications.",
|
||
},
|
||
{
|
||
question: "What is your approach to UI/UX design?",
|
||
answer:
|
||
"Our UI/UX design follows a user‑centered, AI‑driven approach, including: 1) user research and persona development, 2) information architecture and wireframing, 3) interactive prototyping and user testing, 4) visual design and style guide creation, 5) accessibility compliance (WCAG), 6) responsive design across all devices, and 7) continuous iteration based on feedback. We conduct design‑thinking workshops to align stakeholders and deliver exceptional AI‑powered design and user experiences for AI mobile app development.",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
category: "Hiring & Engagement",
|
||
icon: Phone,
|
||
faqs: [
|
||
{
|
||
question: "How does WDI vet its talent?",
|
||
answer:
|
||
"Our rigorous vetting process for AI mobile application developers and AI‑driven app development teams includes: 1) Technical assessments and coding challenges, 2) Multiple rounds of technical interviews, 3) Portfolio and project reviews, 4) Behavioral and cultural fit evaluations, 5) Reference checks from previous employers, and 6) Continuous skill assessment and certification programs. We maintain a 95% client satisfaction rate with our talent, and all professionals undergo regular training to stay current with the latest AI mobile and web development technologies and best practices.",
|
||
},
|
||
{
|
||
question: "What are your typical engagement models?",
|
||
|
||
answer:
|
||
"We offer three primary engagement models tailored to meet diverse project requirements and business goals. Each model is designed to provide flexibility, efficiency, and the right level of collaboration based on your needs.\n\nKey engagement models include:\n\n• Fixed-Price – Best for well-defined AI mobile and web development projects with clear scope and requirements\n• Time & Material – Ideal for projects with evolving needs or ongoing AI-driven development\n• Dedicated Team – Perfect for long-term partnerships where you need a committed AI app development company team working exclusively on your AI-powered mobile and web applications\n\nWe can also create hybrid models by combining elements from different approaches based on your specific needs."
|
||
},
|
||
{
|
||
question: "Can we hire dedicated developers from WDI?",
|
||
answer:
|
||
"Yes, we offer dedicated development teams and individual developer hiring options. Our AI mobile application developers work exclusively on your AI‑driven projects and can be scaled up or down as needed. This model gives you direct access to our AI mobile app development talent pool while we handle HR, administrative, and infrastructure aspects. Dedicated teams integrate with your existing processes and become an extension of your in‑house AI mobile and web development team.",
|
||
},
|
||
{
|
||
question: "What is the typical timeline for team augmentation?",
|
||
answer:
|
||
"Team augmentation timelines depend on the required skills and team size, but generally: 1) Standard AI mobile and web skill sets: 1–2 weeks, 2) Specialized AI‑driven skills: 2–4 weeks, 3) Large teams (10+ members): 4–6 weeks. Our process includes requirement analysis, talent matching, interviews, onboarding, and integration. We maintain a bench of pre‑vetted AI mobile application developers and AI‑driven professionals to accelerate ramp up for common technology stacks and AI mobile app development projects.",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
category: "Technical Questions",
|
||
icon: MessageSquare,
|
||
faqs: [
|
||
{
|
||
question:
|
||
"Which programming languages and frameworks do you specialize in?",
|
||
answer:
|
||
"We specialize in a wide range of modern AI-driven technologies, enabling us to deliver scalable, high-performance, and future-ready solutions across mobile and web platforms.\n\nOur core technology expertise includes:\n\n• Frontend – React, Angular, Vue.js, Next.js, TypeScript\n• Backend – Node.js, Python, Java, .NET, PHP\n• Mobile – React Native, Flutter, iOS (Swift), Android (Kotlin)\n• Cloud – AWS, Azure, Google Cloud\n• Databases – PostgreSQL, MongoDB, MySQL, Redis\n• AI/ML – TensorFlow, PyTorch, scikit-learn\n• DevOps – Docker, Kubernetes, Jenkins, Terraform\n\nWe continuously evaluate and adopt emerging technologies to deliver cutting-edge AI mobile and web development solutions."
|
||
},
|
||
{
|
||
question: "How do you ensure data security and privacy?",
|
||
answer:
|
||
"We adhere to industry-leading security standards and protocols to ensure the highest level of protection for applications and data across the entire development lifecycle.\n\nOur security practices include:\n\n• ISO 27001 and SOC 2 compliance\n• GDPR and other data privacy regulations\n• End-to-end encryption for data in transit and at rest\n• Multi-factor authentication and strict access controls\n• Regular security audits and penetration testing\n• Secure coding practices and rigorous code reviews\n• Infrastructure security with VPNs and firewalls\n• Employee training on security best practices\n• Incident response and disaster recovery plans\n\nThese practices ensure robust protection for AI-powered mobile and web applications throughout the AI-driven development lifecycle."
|
||
},
|
||
{
|
||
question: "What cloud platforms do you work with?",
|
||
answer:
|
||
"We are certified partners with major cloud platforms and leverage their capabilities to deliver scalable, secure, and high-performance solutions tailored to modern business needs.\n\nOur cloud services include:\n\n• Cloud migration and modernization\n• Infrastructure as Code (IaC)\n• Serverless architecture implementation\n• Containerization with Docker and Kubernetes\n• CI/CD pipeline setup\n• Cloud security implementation\n• Cost optimization strategies\n• 24/7 monitoring and support\n\nWe utilize platforms such as Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP) to build scalable and secure AI-powered mobile and web development solutions."
|
||
},
|
||
{
|
||
question: "Do you provide AI and Machine Learning solutions?",
|
||
answer:
|
||
"Yes, we offer comprehensive AI/ML solutions including: 1) AI strategy and consulting, 2) Custom ML model development, 3) Computer vision applications, 4) Natural language processing, 5) Predictive analytics and forecasting, 6) AI chatbots and virtual assistants, 7) Recommendation engines, 8) AI model deployment and MLOps, 9) AI integration into existing applications, and 10) Generative AI solutions. Our AI experts work with frameworks like TensorFlow, PyTorch, and cloud-based AI services.",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
category: "Billing & Contracts",
|
||
icon: Mail,
|
||
faqs: [
|
||
{
|
||
question: "What are your payment terms?",
|
||
answer:
|
||
"Our standard AI-driven project payment terms are designed to provide flexibility and transparency across different engagement models, ensuring smooth collaboration and financial planning.\n\nPayment terms include:\n\n• Fixed-Price projects – 30% advance, 40% at milestone completion, 30% at project delivery\n• Time & Material – Monthly billing with NET 15–30 payment terms\n• Dedicated Team – Monthly advance payment for AI mobile and web development team costs\n\nWe accept payments via wire transfer, ACH, or other mutually agreed methods. For long-term AI app development partnerships, we can also customize payment structures aligned with your business cycles and budget planning."
|
||
},
|
||
{
|
||
question: "Can we sign an NDA?",
|
||
answer:
|
||
"Absolutely. Confidentiality is paramount to us, and we are happy to sign Non‑Disclosure Agreements (NDAs) before any project discussions begin. We have standard mutual NDAs ready, or we can review and sign your NDA format. We maintain strict confidentiality protocols and ensure all AI‑driven team members working on your AI mobile and web development projects sign appropriate confidentiality agreements.",
|
||
},
|
||
{
|
||
question: "What is included in your project estimates?",
|
||
answer:
|
||
"Our AI mobile and web development project estimates are designed to provide complete transparency, clarity, and alignment with your business goals from the outset.\n\nOur estimates include:\n\n• Detailed scope of work and deliverables\n• Development hours breakdown by task/feature\n• Team composition and hourly rates\n• Project timeline with milestones\n• Third-party service costs (if applicable)\n• Testing and quality assurance\n• Project management overhead\n• Documentation and knowledge transfer\n\nWe ensure transparent pricing with no hidden costs and clearly outline all assumptions and exclusions for AI-powered mobile and web applications."
|
||
},
|
||
{
|
||
question: "Do you offer different pricing models?",
|
||
answer:
|
||
"Yes. We offer flexible pricing models designed to accommodate different project scopes, timelines, and business objectives in AI-driven development.\n\nOur pricing models include:\n\n• Fixed-Price – Best for AI mobile app development projects with a well-defined scope\n• Time & Material – Ideal for evolving AI-driven requirements and ongoing development\n• Dedicated Team – Monthly fixed cost for a dedicated AI app development team\n• Outcome-based – Performance-linked pricing tied to specific business results\n• Hybrid models – A combination of the above approaches based on different project phases\n\nWe collaborate closely with you to determine the most cost-effective and suitable pricing structure for your AI mobile and web development needs."
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
const allFaqs = faqCategories.flatMap((category) =>
|
||
category.faqs.map((faq) => ({
|
||
...faq,
|
||
category: category.category,
|
||
icon: category.icon,
|
||
}))
|
||
);
|
||
|
||
const filteredFaqs = allFaqs.filter(
|
||
(faq) =>
|
||
faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
faq.answer.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
faq.category.toLowerCase().includes(searchTerm.toLowerCase())
|
||
);
|
||
|
||
const filteredCategories = faqCategories
|
||
.map((category) => ({
|
||
...category,
|
||
faqs: category.faqs.filter(
|
||
(faq) =>
|
||
faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
|
||
),
|
||
}))
|
||
.filter((category) => category.faqs.length > 0);
|
||
|
||
return (
|
||
<div className="dark min-h-screen bg-background">
|
||
{/* <Navigation /> */}
|
||
|
||
{/* Hero Section */}
|
||
<section className="pt-24 pb-16 bg-background">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>FAQ | Custom AI Solutions for Startups & Enterprises</title>
|
||
<meta
|
||
name="description"
|
||
content="Find answers about WDI’s custom AI development services. We help startups and enterprises build smart digital tools tailored to their goals."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link rel="canonical" href="https://www.wdipl.com/resources/faqs" />
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta property="og:title" content="FAQ | Custom AI Solutions for Startups & Enterprises" />
|
||
<meta
|
||
property="og:description"
|
||
content="Find answers about WDI’s custom AI development services. We help startups and enterprises build smart digital tools tailored to their goals."
|
||
/>
|
||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
||
{/* Twitter Card Tags */}
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="FAQ | Custom AI Solutions for Startups & Enterprises" />
|
||
<meta
|
||
name="twitter:description"
|
||
content="Find answers about WDI’s custom AI development services. We help startups and enterprises build smart digital tools tailored to their goals."
|
||
/>
|
||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
||
{/* Social Profiles (using JSON-LD Schema) */}
|
||
<script type="application/ld+json">
|
||
{`
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "WDI",
|
||
"url": "https://www.wdipl.com",
|
||
"sameAs": [
|
||
"https://www.facebook.com/wdideas",
|
||
"https://www.linkedin.com/in/website-developers-india/",
|
||
"https://www.instagram.com/wdipl/"
|
||
]
|
||
}
|
||
`}
|
||
</script>
|
||
</Helmet>
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
<div className="flex items-center justify-center gap-2 mb-6">
|
||
<HelpCircle className="w-6 h-6 text-[#E5195E]" />
|
||
<Badge
|
||
variant="outline"
|
||
className="border-[#E5195E]/20 text-[#E5195E]"
|
||
>
|
||
Frequently Asked Questions
|
||
</Badge>
|
||
</div>
|
||
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
|
||
FAQs: Your Questions, Our Answers
|
||
</h1>
|
||
<p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
|
||
Have questions about our AI‑driven services, development processes, or how we work with clients? Our Frequently Asked Questions (FAQs) section provides clear, concise answers to common inquiries so you can quickly find the information you need.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Search Section */}
|
||
<section className="py-8 bg-card/50 border-y border-white/10">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="max-w-2xl mx-auto">
|
||
<div className="relative">
|
||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
|
||
<Input
|
||
placeholder="Search frequently asked questions..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="pl-12 pr-4 py-3 bg-background/50 border-white/10 text-lg"
|
||
/>
|
||
</div>
|
||
<div className="text-center mt-4">
|
||
<span className="text-sm text-muted-foreground">
|
||
{searchTerm
|
||
? `${filteredFaqs.length} result${filteredFaqs.length !== 1 ? "s" : ""
|
||
} found`
|
||
: `${allFaqs.length} questions available`}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ Categories */}
|
||
<section className="py-16 bg-background">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
{filteredCategories.length > 0 ? (
|
||
<div className="max-w-4xl mx-auto space-y-12">
|
||
{filteredCategories.map((category, categoryIndex) => {
|
||
const Icon = category.icon;
|
||
return (
|
||
<div key={category.category}>
|
||
<div className="flex items-center gap-3 mb-8">
|
||
<div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
|
||
<Icon className="w-5 h-5 text-[#E5195E]" />
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-white">
|
||
{category.category}
|
||
</h2>
|
||
</div>
|
||
|
||
<Accordion type="single" collapsible className="space-y-4">
|
||
{category.faqs.map((faq, faqIndex) => (
|
||
<AccordionItem
|
||
key={`${categoryIndex}-${faqIndex}`}
|
||
value={`item-${categoryIndex}-${faqIndex}`}
|
||
className="border border-white/10 rounded-lg bg-card/30 hover:bg-card/50 transition-colors duration-200"
|
||
>
|
||
<AccordionTrigger className="px-6 py-4 text-left hover:no-underline">
|
||
<span className="text-white font-medium pr-4">
|
||
{faq.question}
|
||
</span>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="px-6 pb-4">
|
||
<div className="text-muted-foreground leading-relaxed">
|
||
{faq.answer}
|
||
</div>
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<div className="max-w-2xl mx-auto text-center">
|
||
<HelpCircle className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
|
||
<h3 className="text-xl font-semibold text-white mb-2">
|
||
No FAQs Found
|
||
</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
We couldn't find any questions matching your search. Try
|
||
different keywords or browse all categories.
|
||
</p>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setSearchTerm("")}
|
||
className="border-white/20 text-white hover:bg-white/10"
|
||
>
|
||
View All Questions
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Quick Stats */}
|
||
<section className="py-16 bg-card/50">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||
<div>
|
||
<div className="text-3xl font-bold bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent mb-2">
|
||
{allFaqs.length}+
|
||
</div>
|
||
<div className="text-muted-foreground">Questions Answered</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-3xl font-bold bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent mb-2">
|
||
24/7
|
||
</div>
|
||
<div className="text-muted-foreground">Support Available</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-3xl font-bold bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent mb-2">
|
||
<1hr
|
||
</div>
|
||
<div className="text-muted-foreground">Average Response Time</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-3xl font-bold bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent mb-2">
|
||
98%
|
||
</div>
|
||
<div className="text-muted-foreground">Issue Resolution Rate</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact Support */}
|
||
<section className="py-16 bg-background">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl font-bold text-white mb-4">
|
||
Still Have Questions?
|
||
</h2>
|
||
<p className="text-lg text-muted-foreground">
|
||
Can't find the answer you're looking for? Our team is here to
|
||
help you with any questions or concerns.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
{/* <Card className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 text-center">
|
||
<CardContent className="p-6">
|
||
<div className="w-12 h-12 rounded-full bg-[#E5195E]/20 flex items-center justify-center mx-auto mb-4">
|
||
<MessageSquare className="w-6 h-6 text-[#E5195E]" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white mb-2">
|
||
Live Chat
|
||
</h3>
|
||
<p className="text-muted-foreground mb-4 text-sm">
|
||
Get instant answers from our support team
|
||
</p>
|
||
<Button
|
||
variant="outline"
|
||
className="border-white/20 text-white hover:bg-white/10"
|
||
>
|
||
Start Chat
|
||
</Button>
|
||
</CardContent>
|
||
</Card> */}
|
||
|
||
<Card className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 text-center">
|
||
<CardContent className="p-6">
|
||
<div className="w-12 h-12 rounded-full bg-[#E5195E]/20 flex items-center justify-center mx-auto mb-4">
|
||
<Mail className="w-6 h-6 text-[#E5195E]" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white mb-2">
|
||
Email Support
|
||
</h3>
|
||
<p className="text-muted-foreground mb-4 text-sm">
|
||
Send us your questions via email
|
||
</p>
|
||
<a
|
||
href="mailto:ideas@wdipl.com"
|
||
>
|
||
<Button
|
||
variant="outline"
|
||
className="border-white/20 text-white hover:bg-white/10"
|
||
>
|
||
Send Email
|
||
</Button>
|
||
</a>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 text-center">
|
||
<CardContent className="p-6">
|
||
<div className="w-12 h-12 rounded-full bg-[#E5195E]/20 flex items-center justify-center mx-auto mb-4">
|
||
<Phone className="w-6 h-6 text-[#E5195E]" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white mb-2">
|
||
Phone Support
|
||
</h3>
|
||
<p className="text-muted-foreground mb-4 text-sm">
|
||
Call us for immediate assistance
|
||
</p>
|
||
<a href="tel:+91 7700900039">
|
||
<Button
|
||
variant="outline"
|
||
className="border-white/20 text-white hover:bg-white/10"
|
||
>
|
||
Call Now
|
||
</Button>
|
||
</a>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-16 bg-card/50">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
<h2 className="text-3xl font-bold text-white mb-6">
|
||
Ready to Get Started?
|
||
</h2>
|
||
<p className="text-lg text-muted-foreground mb-8">
|
||
Have all your questions answered? Let's discuss your project and
|
||
explore how we can help you achieve your goals.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button
|
||
size="lg"
|
||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
Couldn't find your answer? Contact us directly
|
||
<ArrowRight className="ml-2 w-4 h-4" />
|
||
</Button>
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
className="border-white/20 text-white hover:bg-white/10"
|
||
>
|
||
Schedule a Discovery Call
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* <Footer /> */}
|
||
</div>
|
||
);
|
||
};
|