From 31fef3d9b3feebaedcf5f576a95ca81924aa926e Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:11:15 +0000
Subject: [PATCH] Seed: services template (18 files)

---
 src/pages/Services.tsx | 221 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 src/pages/Services.tsx

diff --git a/src/pages/Services.tsx b/src/pages/Services.tsx
new file mode 100644
index 0000000..fd76439
--- /dev/null
+++ b/src/pages/Services.tsx
@@ -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>
+  );
+}
\ No newline at end of file