Seed: services template (18 files)
This commit is contained in:
@@ -0,0 +1,221 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
ArrowRight, Palette, Code, Megaphone, Search, Smartphone, Cloud,
|
||||
CheckCircle2, Check, X
|
||||
} from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import { useSaasMutation } from "@/hooks/use-tygarun";
|
||||
|
||||
const serviceDetails = [
|
||||
{
|
||||
icon: Palette,
|
||||
title: "",
|
||||
desc: "We craft compelling visual identities that resonate with your audience and set you apart from competitors. Our design team blends aesthetics with strategy.",
|
||||
bullets: ["Logo & visual identity systems", "UI/UX design & prototyping", "Design system creation", "Creative direction & art direction"],
|
||||
gradient: "from-violet-400 to-indigo-500",
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
title: "",
|
||||
desc: "From responsive websites to complex web applications, we build performant digital experiences using cutting-edge technologies and best practices.",
|
||||
bullets: ["Custom website development", "Progressive web applications", "E-commerce platforms", "API development & integration"],
|
||||
gradient: "from-sky-400 to-blue-500",
|
||||
},
|
||||
{
|
||||
icon: Megaphone,
|
||||
title: "",
|
||||
desc: "Data-driven marketing strategies that amplify your reach, engage your audience, and convert visitors into loyal customers across all channels.",
|
||||
bullets: ["Social media management", "PPC & paid advertising", "Content marketing strategy", "Email marketing automation"],
|
||||
gradient: "from-rose-400 to-pink-500",
|
||||
},
|
||||
{
|
||||
icon: Search,
|
||||
title: "",
|
||||
desc: "Dominate search rankings with technical SEO, strategic keyword targeting, and comprehensive analytics that reveal actionable insights.",
|
||||
bullets: ["Technical SEO audits", "Keyword research & strategy", "Analytics dashboard setup", "Conversion rate optimization"],
|
||||
gradient: "from-emerald-400 to-teal-500",
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: "",
|
||||
desc: "Native and cross-platform mobile applications engineered for performance, designed for delight, and built to scale with your growing user base.",
|
||||
bullets: ["iOS & Android development", "Cross-platform (React Native)", "App store optimization", "Push notifications & analytics"],
|
||||
gradient: "from-amber-400 to-orange-500",
|
||||
},
|
||||
{
|
||||
icon: Cloud,
|
||||
title: "",
|
||||
desc: "Reliable, scalable cloud infrastructure and automated deployment pipelines that keep your applications running smoothly around the clock.",
|
||||
bullets: ["Cloud architecture design", "CI/CD pipeline setup", "Container orchestration", "Monitoring & incident response"],
|
||||
gradient: "from-cyan-400 to-blue-500",
|
||||
},
|
||||
];
|
||||
|
||||
const pricingPlans = [
|
||||
{
|
||||
name: "Starter",
|
||||
price: "$2,500",
|
||||
period: "/month",
|
||||
desc: "Perfect for small businesses getting started with digital.",
|
||||
features: [
|
||||
{ text: "Brand identity design", included: true },
|
||||
{ text: "Responsive website (5 pages)", included: true },
|
||||
{ text: "Basic SEO setup", included: true },
|
||||
{ text: "Monthly analytics report", included: true },
|
||||
{ text: "Social media management", included: false },
|
||||
{ text: "Dedicated project manager", included: false },
|
||||
],
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "Growth",
|
||||
price: "$5,000",
|
||||
period: "/month",
|
||||
desc: "For growing companies ready to scale their digital presence.",
|
||||
features: [
|
||||
{ text: "Full brand & design system", included: true },
|
||||
{ text: "Custom web application", included: true },
|
||||
{ text: "Advanced SEO & analytics", included: true },
|
||||
{ text: "Weekly analytics reports", included: true },
|
||||
{ text: "Social media management", included: true },
|
||||
{ text: "Dedicated project manager", included: true },
|
||||
],
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "Enterprise",
|
||||
price: "$12,000",
|
||||
period: "/month",
|
||||
desc: "Full-service engagement for enterprise-level organizations.",
|
||||
features: [
|
||||
{ text: "Complete digital transformation", included: true },
|
||||
{ text: "Multi-platform development", included: true },
|
||||
{ text: "Enterprise SEO & marketing", included: true },
|
||||
{ text: "Real-time analytics dashboard", included: true },
|
||||
{ text: "Full marketing team access", included: true },
|
||||
{ text: "24/7 priority support", included: true },
|
||||
],
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
export default function ServicesPage() {
|
||||
const { mutate: startCheckout, loading: checkoutBusy } = useSaasMutation("billing", "/checkout");
|
||||
|
||||
const handleCheckout = async (plan) => {
|
||||
const amount = Number(String(plan.price).replace(/[^0-9]/g, "")) * 100;
|
||||
try {
|
||||
const res = await startCheckout({ plan: plan.name.toLowerCase(), amount, interval: "month" });
|
||||
if (res?.url) window.location.href = res.url;
|
||||
else toast.success("Starting your " + plan.name + " plan...");
|
||||
} catch (err) {
|
||||
toast.error("Checkout failed. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||
<Header />
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section className="pt-32 pb-20">
|
||||
<div className="mx-auto max-w-7xl px-6 text-center">
|
||||
<h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight animate-fade-up">
|
||||
Our Services
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Comprehensive digital solutions designed to elevate your brand and accelerate your business growth.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── SERVICE DETAILS ── */}
|
||||
<section className="pb-24">
|
||||
<div className="mx-auto max-w-7xl px-6 space-y-24">
|
||||
{serviceDetails.map((service, i) => (
|
||||
<div key={i} className={`flex flex-col lg:flex-row gap-12 items-center \${i % 2 !== 0 ? "lg:flex-row-reverse" : ""}`}>
|
||||
<div className="flex-1 space-y-6">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center shadow-lg shadow-primary/10">
|
||||
<service.icon className="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold">{service.title}</h2>
|
||||
<p className="text-muted-foreground leading-relaxed">{service.desc}</p>
|
||||
<ul className="space-y-3">
|
||||
{service.bullets.map((bullet, j) => (
|
||||
<li key={j} className="flex items-center gap-3 text-sm">
|
||||
<CheckCircle2 className="h-5 w-5 text-primary shrink-0" />
|
||||
{bullet}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button asChild className="active:scale-[0.98]">
|
||||
<Link to="/contact">Get Started <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 w-full">
|
||||
<div className={`relative aspect-[4/3] rounded-2xl bg-gradient-to-br \${service.gradient} opacity-20 overflow-hidden animate-scale-in`}>
|
||||
<div className="absolute inset-0 opacity-[0.15]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "18px 18px" }} />
|
||||
<div className="absolute -top-8 -right-8 w-32 h-32 rounded-full bg-white/10 blur-2xl" />
|
||||
<div className="absolute -bottom-6 -left-6 w-24 h-24 rounded-full bg-white/10 blur-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── PRICING ── */}
|
||||
<section className="py-24 bg-muted/30">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Simple, Transparent Pricing</h2>
|
||||
<p className="mt-4 text-muted-foreground max-w-xl mx-auto">Choose the plan that fits your needs. Scale up anytime as your business grows.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto stagger">
|
||||
{pricingPlans.map((plan, i) => (
|
||||
<Card key={i} className={`relative border-2 transition-all duration-300 \${plan.popular ? "border-primary shadow-lg shadow-primary/10 scale-[1.02]" : "hover:border-primary/50 hover:shadow-lg"}`}>
|
||||
{plan.popular && (
|
||||
<Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground">
|
||||
Most Popular
|
||||
</Badge>
|
||||
)}
|
||||
<CardHeader className="text-center pb-2">
|
||||
<CardTitle className="text-xl">{plan.name}</CardTitle>
|
||||
<div className="mt-4">
|
||||
<span className="text-4xl font-extrabold">{plan.price}</span>
|
||||
<span className="text-muted-foreground">{plan.period}</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-2">{plan.desc}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<ul className="space-y-3">
|
||||
{plan.features.map((f, j) => (
|
||||
<li key={j} className="flex items-center gap-3 text-sm">
|
||||
{f.included ? (
|
||||
<Check className="h-4 w-4 text-primary shrink-0" />
|
||||
) : (
|
||||
<X className="h-4 w-4 text-muted-foreground/40 shrink-0" />
|
||||
)}
|
||||
<span className={f.included ? "" : "text-muted-foreground/60"}>{f.text}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button onClick={() => handleCheckout(plan)} disabled={checkoutBusy} className="w-full mt-4 active:scale-[0.98]" variant={plan.popular ? "default" : "outline"}>
|
||||
Get Started
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user