vibeasite-templates/template-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: services template (18 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:57:33 +00:00
parent 023c60df49
commit c69bd8462e
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Services.tsx
+3 -3
View File
@@ -138,7 +138,7 @@ export default function ServicesPage() {
<section className="pb-24"> <section className="pb-24">
<div className="mx-auto max-w-7xl px-6 space-y-24"> <div className="mx-auto max-w-7xl px-6 space-y-24">
{serviceDetails.map((service, i) => ( {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 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="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"> <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" /> <service.icon className="h-7 w-7 text-primary" />
@@ -158,7 +158,7 @@ export default function ServicesPage() {
</Button> </Button>
</div> </div>
<div className="flex-1 w-full"> <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={`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 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 -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 className="absolute -bottom-6 -left-6 w-24 h-24 rounded-full bg-white/10 blur-2xl" />
@@ -178,7 +178,7 @@ export default function ServicesPage() {
</div> </div>
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto stagger"> <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto stagger">
{pricingPlans.map((plan, i) => ( {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"}`}> <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 && ( {plan.popular && (
<Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground"> <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground">
Most Popular Most Popular