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

Seed: landing template (12 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:55:23 +00:00
parent bfb4dd2ac3
commit 653d13253c
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Index.tsx
+8 -8
View File
@@ -63,7 +63,7 @@ export default function LandingPage() {
<div className="min-h-screen bg-background text-foreground antialiased">
{/* ── HEADER ── */}
<header
className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${
className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
scrolled
? "bg-background/95 backdrop-blur-lg border-b shadow-sm"
: "bg-transparent"
@@ -148,7 +148,7 @@ export default function LandingPage() {
<div className="flex -space-x-3">
{["A", "B", "C", "D"].map((letter, i) => (
<Avatar key={i} className="h-9 w-9 border-2 border-violet-900 ring-2 ring-violet-900">
<AvatarFallback className={`text-xs font-medium text-white \${
<AvatarFallback className={`text-xs font-medium text-white ${
["bg-pink-500", "bg-indigo-500", "bg-emerald-500", "bg-amber-500"][i]
}`}>{letter}</AvatarFallback>
</Avatar>
@@ -202,13 +202,13 @@ export default function LandingPage() {
].map((feature, i) => (
<div
key={i}
className={`flex flex-col lg:flex-row gap-12 lg:gap-16 items-center mb-24 last:mb-0 \${
className={`flex flex-col lg:flex-row gap-12 lg:gap-16 items-center mb-24 last:mb-0 ${
i % 2 === 1 ? "lg:flex-row-reverse" : ""
}`}
>
{/* Image placeholder */}
<div className="flex-1 w-full animate-scale-in">
<div className={`aspect-video w-full rounded-2xl bg-gradient-to-br \${feature.gradient} opacity-90 shadow-2xl relative overflow-hidden`}>
<div className={`aspect-video w-full rounded-2xl bg-gradient-to-br ${feature.gradient} opacity-90 shadow-2xl relative overflow-hidden`}>
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-24 h-24 rounded-2xl bg-white/10 backdrop-blur-sm flex items-center justify-center text-white/60 text-4xl font-bold shadow-lg">{i + 1}</div>
@@ -299,7 +299,7 @@ export default function LandingPage() {
<button
key={i}
onClick={() => setActiveTestimonial(i)}
className={`h-2.5 rounded-full transition-all duration-300 \${
className={`h-2.5 rounded-full transition-all duration-300 ${
i === activeTestimonial ? "w-8 bg-primary" : "w-2.5 bg-muted-foreground/30 hover:bg-muted-foreground/50"
}`}
/>
@@ -353,7 +353,7 @@ export default function LandingPage() {
cta: "Contact Sales", popular: false,
},
].map((plan, i) => (
<Card key={i} className={`relative border animate-fade-up hover:scale-[1.02] transition-all duration-300 \${plan.popular ? "border-primary shadow-2xl shadow-primary/20 scale-105" : "border-border hover:border-primary/30 hover:shadow-lg hover:-translate-y-1"}`}>
<Card key={i} className={`relative border animate-fade-up hover:scale-[1.02] transition-all duration-300 ${plan.popular ? "border-primary shadow-2xl shadow-primary/20 scale-105" : "border-border hover:border-primary/30 hover:shadow-lg hover:-translate-y-1"}`}>
{plan.popular && (
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
<Badge className="bg-primary text-primary-foreground shadow-md">Most Popular</Badge>
@@ -380,7 +380,7 @@ export default function LandingPage() {
</li>
))}
</ul>
<Button className={`w-full rounded-full \${plan.popular ? "" : "variant-outline"}`} variant={plan.popular ? "default" : "outline"}>
<Button className={`w-full rounded-full ${plan.popular ? "" : "variant-outline"}`} variant={plan.popular ? "default" : "outline"}>
{plan.cta} <ArrowRight className="ml-2 h-4 w-4" />
</Button>
</CardContent>
@@ -408,7 +408,7 @@ export default function LandingPage() {
{ q: "Do you offer a trial period?", a: "Yes, all paid plans come with a 14-day free trial. You can explore all features before committing." },
{ q: "How do I get support?", a: "Free plans get community support. Pro plans include priority email support with 4-hour response times. Enterprise gets dedicated account management and phone support." },
].map((faq, i) => (
<AccordionItem key={i} value={`faq-\${i}`}>
<AccordionItem key={i} value={`faq-${i}`}>
<AccordionTrigger className="text-left">{faq.q}</AccordionTrigger>
<AccordionContent className="text-muted-foreground">{faq.a}</AccordionContent>
</AccordionItem>