Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 26c58938cb | |||
| 9b6d224bf1 | |||
| f6c9954ada | |||
| fcebf4cbc1 | |||
| 27b597c56b | |||
| eb11700be9 | |||
| 82be15e78c | |||
| 8cb3935f42 | |||
| 3051701749 | |||
| 17b263609b | |||
| e6f20e77bd | |||
| 66e8ef2013 | |||
| 1e985cd753 | |||
| 629fc9f9f9 |
@@ -6,20 +6,24 @@ import "@/lib/gsap-setup";
|
|||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||||
import Tag from "@/tag/Tag";
|
import Tag from "@/tag/Tag";
|
||||||
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
||||||
|
import { Roboto } from "next/font/google";
|
||||||
|
import { Libre_Baskerville } from "next/font/google";
|
||||||
|
|
||||||
const halant = Halant({
|
|
||||||
variable: "--font-halant",
|
|
||||||
|
export const metadata: Metadata = { title: 'Webild SaaS | Build High-Converting Landing Pages Fast', description: 'Accelerate your SaaS growth with Webild\'s high-performance, conversion-optimized landing page templates. Designed for developers and founders.' };
|
||||||
|
|
||||||
|
|
||||||
|
const libreBaskerville = Libre_Baskerville({
|
||||||
|
variable: "--font-libre-baskerville",
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
weight: ["300", "400", "500", "600", "700"],
|
weight: ["400", "700"],
|
||||||
});
|
});
|
||||||
|
|
||||||
const inter = Inter({
|
const inter = Inter({
|
||||||
variable: "--font-inter",
|
variable: "--font-inter",
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = { title: 'Webild SaaS | Build High-Converting Landing Pages Fast', description: 'Accelerate your SaaS growth with Webild\'s high-performance, conversion-optimized landing page templates. Designed for developers and founders.' };
|
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
@@ -28,9 +32,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body
|
<body className={`${libreBaskerville.variable} ${inter.variable} antialiased`}>
|
||||||
className={`${halant.variable} ${inter.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
<Tag />
|
||||||
{children}
|
{children}
|
||||||
<script
|
<script
|
||||||
|
|||||||
101
src/app/page.tsx
101
src/app/page.tsx
@@ -29,28 +29,18 @@ export default function SaasTemplatePage() {
|
|||||||
|
|
||||||
const features: FeatureCard[] = [
|
const features: FeatureCard[] = [
|
||||||
{
|
{
|
||||||
bentoComponent: "globe",
|
bentoComponent: "globe", title: "Global Reach", description: "Connect with users worldwide through our distributed infrastructure"},
|
||||||
title: "Global Reach",
|
|
||||||
description: "Connect with users worldwide through our distributed infrastructure",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
bentoComponent: "marquee",
|
bentoComponent: "marquee", variant: "text", centerIcon: Zap,
|
||||||
variant: "text",
|
|
||||||
centerIcon: Zap,
|
|
||||||
texts: ["Fast", "Reliable", "Secure", "Scalable", "Modern"],
|
texts: ["Fast", "Reliable", "Secure", "Scalable", "Modern"],
|
||||||
title: "Built for Speed",
|
title: "Built for Speed", description: "Lightning fast performance with optimized delivery"},
|
||||||
description: "Lightning fast performance with optimized delivery",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
bentoComponent: "3d-stack-cards",
|
bentoComponent: "3d-stack-cards", items: [
|
||||||
items: [
|
|
||||||
{ icon: Shield, title: "Security", subtitle: "Enterprise-grade", detail: "Bank-level encryption" },
|
{ icon: Shield, title: "Security", subtitle: "Enterprise-grade", detail: "Bank-level encryption" },
|
||||||
{ icon: Rocket, title: "Performance", subtitle: "99.9% uptime", detail: "Always available" },
|
{ icon: Rocket, title: "Performance", subtitle: "99.9% uptime", detail: "Always available" },
|
||||||
{ icon: Target, title: "Accuracy", subtitle: "100% reliable", detail: "Data you can trust" },
|
{ icon: Target, title: "Accuracy", subtitle: "100% reliable", detail: "Data you can trust" },
|
||||||
],
|
],
|
||||||
title: "Built for Scale",
|
title: "Built for Scale", description: "Deploy to any region with automatic failover support"}
|
||||||
description: "Deploy to any region with automatic failover support",
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -69,12 +59,10 @@ export default function SaasTemplatePage() {
|
|||||||
description="Create stunning, responsive websites with our comprehensive component library designed"
|
description="Create stunning, responsive websites with our comprehensive component library designed"
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Get Started",
|
text: "Get Started", onClick: () => console.log("Get Started clicked"),
|
||||||
onClick: () => console.log("Get Started clicked"),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "Learn More",
|
text: "Learn More", onClick: () => console.log("Learn More clicked"),
|
||||||
onClick: () => console.log("Learn More clicked"),
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
marqueeItems={[
|
marqueeItems={[
|
||||||
@@ -105,24 +93,16 @@ export default function SaasTemplatePage() {
|
|||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
icon: Layers,
|
icon: Layers,
|
||||||
title: "Modular Architecture",
|
title: "Modular Architecture", description: "Build with composable components that scale with your needs"},
|
||||||
description: "Build with composable components that scale with your needs",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Code,
|
icon: Code,
|
||||||
title: "Developer Experience",
|
title: "Developer Experience", description: "Clean APIs and comprehensive documentation for faster development"},
|
||||||
description: "Clean APIs and comprehensive documentation for faster development",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Shield,
|
icon: Shield,
|
||||||
title: "Enterprise Security",
|
title: "Enterprise Security", description: "Bank-level encryption and compliance with industry standards"},
|
||||||
description: "Bank-level encryption and compliance with industry standards",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Rocket,
|
icon: Rocket,
|
||||||
title: "Lightning Fast",
|
title: "Lightning Fast", description: "Optimized for performance with sub-second response times"},
|
||||||
description: "Optimized for performance with sub-second response times",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<TestimonialCardFifteen
|
<TestimonialCardFifteen
|
||||||
@@ -142,56 +122,31 @@ export default function SaasTemplatePage() {
|
|||||||
animationType="opacity"
|
animationType="opacity"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
|
cardClassName="border-2 border-primary-500 scale-105"
|
||||||
plans={[
|
plans={[
|
||||||
{
|
{
|
||||||
id: "starter",
|
id: "starter", badge: "Starter", badgeIcon: Zap,
|
||||||
badge: "Starter",
|
price: "$19/mo", subtitle: "Perfect for individuals", buttons: [
|
||||||
badgeIcon: Zap,
|
|
||||||
price: "$19/mo",
|
|
||||||
subtitle: "Perfect for individuals",
|
|
||||||
buttons: [
|
|
||||||
{ text: "Get Started", onClick: () => console.log("Starter clicked") },
|
{ text: "Get Started", onClick: () => console.log("Starter clicked") },
|
||||||
],
|
],
|
||||||
features: [
|
features: [
|
||||||
"Up to 5 projects",
|
"Up to 5 projects", "Basic analytics", "24/7 email support", "API access"],
|
||||||
"Basic analytics",
|
|
||||||
"24/7 email support",
|
|
||||||
"API access",
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "pro",
|
id: "pro", badge: "Pro", badgeIcon: Rocket,
|
||||||
badge: "Pro",
|
price: "$49/mo", subtitle: "For growing teams", buttons: [
|
||||||
badgeIcon: Rocket,
|
|
||||||
price: "$49/mo",
|
|
||||||
subtitle: "For growing teams",
|
|
||||||
buttons: [
|
|
||||||
{ text: "Get Started", onClick: () => console.log("Pro clicked") },
|
{ text: "Get Started", onClick: () => console.log("Pro clicked") },
|
||||||
],
|
],
|
||||||
features: [
|
features: [
|
||||||
"Unlimited projects",
|
"Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations", "Team collaboration"],
|
||||||
"Advanced analytics",
|
|
||||||
"Priority support",
|
|
||||||
"Custom integrations",
|
|
||||||
"Team collaboration",
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "enterprise",
|
id: "enterprise", badge: "Enterprise", badgeIcon: Crown,
|
||||||
badge: "Enterprise",
|
price: "$99/mo", subtitle: "For large organizations", buttons: [
|
||||||
badgeIcon: Crown,
|
|
||||||
price: "$99/mo",
|
|
||||||
subtitle: "For large organizations",
|
|
||||||
buttons: [
|
|
||||||
{ text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
|
{ text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
|
||||||
],
|
],
|
||||||
features: [
|
features: [
|
||||||
"Everything in Pro",
|
"Everything in Pro", "Dedicated account manager", "Custom SLA", "On-premise deployment", "Advanced security"],
|
||||||
"Dedicated account manager",
|
|
||||||
"Custom SLA",
|
|
||||||
"On-premise deployment",
|
|
||||||
"Advanced security",
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
@@ -210,8 +165,7 @@ export default function SaasTemplatePage() {
|
|||||||
logoText="SaaSify"
|
logoText="SaaSify"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: "Product",
|
title: "Product", items: [
|
||||||
items: [
|
|
||||||
{ label: "Features", href: "#features" },
|
{ label: "Features", href: "#features" },
|
||||||
{ label: "Pricing", href: "#pricing" },
|
{ label: "Pricing", href: "#pricing" },
|
||||||
{ label: "Integrations", href: "#" },
|
{ label: "Integrations", href: "#" },
|
||||||
@@ -219,8 +173,7 @@ export default function SaasTemplatePage() {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Company",
|
title: "Company", items: [
|
||||||
items: [
|
|
||||||
{ label: "About", href: "#about" },
|
{ label: "About", href: "#about" },
|
||||||
{ label: "Blog", href: "#" },
|
{ label: "Blog", href: "#" },
|
||||||
{ label: "Careers", href: "#" },
|
{ label: "Careers", href: "#" },
|
||||||
@@ -228,8 +181,7 @@ export default function SaasTemplatePage() {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Resources",
|
title: "Resources", items: [
|
||||||
items: [
|
|
||||||
{ label: "Documentation", href: "#" },
|
{ label: "Documentation", href: "#" },
|
||||||
{ label: "Help Center", href: "#" },
|
{ label: "Help Center", href: "#" },
|
||||||
{ label: "Community", href: "#" },
|
{ label: "Community", href: "#" },
|
||||||
@@ -237,8 +189,7 @@ export default function SaasTemplatePage() {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Legal",
|
title: "Legal", items: [
|
||||||
items: [
|
|
||||||
{ label: "Privacy", href: "#" },
|
{ label: "Privacy", href: "#" },
|
||||||
{ label: "Terms", href: "#" },
|
{ label: "Terms", href: "#" },
|
||||||
{ label: "Security", href: "#" },
|
{ label: "Security", href: "#" },
|
||||||
@@ -250,4 +201,4 @@ export default function SaasTemplatePage() {
|
|||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -11,7 +11,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--font-inter-tight), sans-serif;
|
font-family: var(--font-inter), sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -24,5 +24,5 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-inter-tight), sans-serif;
|
font-family: var(--font-libre-baskerville), serif;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,15 +10,15 @@
|
|||||||
--accent: #ffffff;
|
--accent: #ffffff;
|
||||||
--background-accent: #ffffff; */
|
--background-accent: #ffffff; */
|
||||||
|
|
||||||
--background: #050012;
|
--background: #0a0a0a;
|
||||||
--card: #040121;
|
--card: #1a1a1a;
|
||||||
--foreground: #f0e6ff;
|
--foreground: #fffffae6;
|
||||||
--primary-cta: #c89bff;
|
--primary-cta: #fde047;
|
||||||
--primary-cta-text: #050012;
|
--primary-cta-text: #0a0a0a;
|
||||||
--secondary-cta: #1d123b;
|
--secondary-cta: #1a1a1a;
|
||||||
--secondary-cta-text: #f0e6ff;
|
--secondary-cta-text: #fffffae6;
|
||||||
--accent: #684f7b;
|
--accent: #737373;
|
||||||
--background-accent: #65417c;
|
--background-accent: #737373;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user