Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6a41182e03 | |||
| 5752a52802 | |||
| d8f4c01867 | |||
| 61724b1521 | |||
| b8a86cf3e6 | |||
| 00ed237840 | |||
| d82cafbc75 | |||
| e90f11ddc1 | |||
| f3ccd8d0d9 | |||
| e8b3694622 |
@@ -6,20 +6,17 @@ 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 { Playfair_Display } from "next/font/google";
|
||||||
|
|
||||||
const halant = Halant({
|
|
||||||
variable: "--font-halant",
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["300", "400", "500", "600", "700"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const inter = Inter({
|
|
||||||
variable: "--font-inter",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = { title: 'Webild SaaS | High-Performance Landing Page Templates', description: 'Accelerate your SaaS growth with Webild\'s high-conversion, responsive landing page templates. Built for performance, scalability, and modern design.' };
|
export const metadata: Metadata = { title: 'Webild SaaS | High-Performance Landing Page Templates', description: 'Accelerate your SaaS growth with Webild\'s high-conversion, responsive landing page templates. Built for performance, scalability, and modern design.' };
|
||||||
|
|
||||||
|
const playfairDisplay = Playfair_Display({
|
||||||
|
variable: "--font-playfair-display", subsets: ["latin"],
|
||||||
|
weight: ["400", "500", "600", "700", "800", "900"],
|
||||||
|
});
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
@@ -28,9 +25,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body
|
<body className={`${playfairDisplay.variable} antialiased`}>
|
||||||
className={`${halant.variable} ${inter.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
<Tag />
|
||||||
{children}
|
{children}
|
||||||
<script
|
<script
|
||||||
|
|||||||
216
src/app/page.tsx
216
src/app/page.tsx
@@ -48,63 +48,69 @@ export default function SaasTemplatePage() {
|
|||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<NavbarLayoutFloatingInline
|
<NavbarLayoutFloatingInline
|
||||||
navItems={navItems}
|
navItems={navItems}
|
||||||
brandName="GROWTHENGINE CRM"
|
brandName="GROWTHENGINECRM"
|
||||||
button={{ text: "Get Started", href: "#" }}
|
button={{ text: "Get Started", href: "#" }}
|
||||||
/>
|
/>
|
||||||
<HeroCentered
|
<div id="hero">
|
||||||
background={{ variant: "rotated-rays-animated-grid" }}
|
<HeroCentered
|
||||||
avatars={avatars}
|
background={{ variant: "rotated-rays-animated-grid" }}
|
||||||
avatarText="Trusted by 1000+ users"
|
avatars={avatars}
|
||||||
title="Build Modern Web Experiences-Out of the world california apple"
|
avatarText="Trusted by 1000+ users"
|
||||||
description="Create stunning, responsive websites with our comprehensive component library designed"
|
title="An all-in-one platform designed to help your business grow and thrive"
|
||||||
buttons={[
|
description="All the tools your business needs websites, online courses, automation, CRM, and more running 24/7, 365 days a year, to help you attract, convert, and scale with ease."
|
||||||
{
|
buttons={[
|
||||||
text: "Get Started", onClick: () => console.log("Get Started clicked"),
|
{
|
||||||
},
|
text: "Get Started", onClick: () => console.log("Get Started clicked"),
|
||||||
{
|
},
|
||||||
text: "Learn More", onClick: () => console.log("Learn More clicked"),
|
{
|
||||||
},
|
text: "Learn More", onClick: () => console.log("Learn More clicked"),
|
||||||
]}
|
},
|
||||||
marqueeItems={[
|
]}
|
||||||
{ type: "text-icon", text: "Lightning Fast", icon: Zap },
|
marqueeItems={[
|
||||||
{ type: "text-icon", text: "Enterprise Security", icon: Shield },
|
{ type: "text-icon", text: "Lightning Fast", icon: Zap },
|
||||||
{ type: "text-icon", text: "99.9% Uptime", icon: Rocket },
|
{ type: "text-icon", text: "Enterprise Security", icon: Shield },
|
||||||
{ type: "text-icon", text: "Precision Targeting", icon: Target },
|
{ type: "text-icon", text: "99.9% Uptime", icon: Rocket },
|
||||||
{ type: "text-icon", text: "AI Powered", icon: Sparkles },
|
{ type: "text-icon", text: "Precision Targeting", icon: Target },
|
||||||
]}
|
{ type: "text-icon", text: "AI Powered", icon: Sparkles },
|
||||||
/>
|
]}
|
||||||
<FeatureBento
|
/>
|
||||||
features={features}
|
</div>
|
||||||
animationType="none"
|
<div id="features">
|
||||||
tag="Features"
|
<FeatureBento
|
||||||
title="Powerful Features"
|
features={features}
|
||||||
description="Everything you need to build and scale your product"
|
animationType="none"
|
||||||
textboxLayout="default"
|
tag="Features"
|
||||||
useInvertedBackground={false}
|
title="Powerful Features"
|
||||||
/>
|
description="Everything you need to build and scale your product"
|
||||||
<FeatureBorderGlow
|
textboxLayout="default"
|
||||||
tag="Why Choose Us"
|
useInvertedBackground={false}
|
||||||
tagIcon={Users}
|
/>
|
||||||
title="Built by developers, for developers"
|
</div>
|
||||||
description="We understand the challenges of modern software development because we face them every day."
|
<div id="about">
|
||||||
animationType="slide-up"
|
<FeatureBorderGlow
|
||||||
textboxLayout="default"
|
tag="Why Choose Us"
|
||||||
useInvertedBackground={false}
|
tagIcon={Users}
|
||||||
features={[
|
title="Built by developers, for developers"
|
||||||
{
|
description="We understand the challenges of modern software development because we face them every day."
|
||||||
icon: Layers,
|
animationType="slide-up"
|
||||||
title: "Modular Architecture", description: "Build with composable components that scale with your needs"},
|
textboxLayout="default"
|
||||||
{
|
useInvertedBackground={false}
|
||||||
icon: Code,
|
features={[
|
||||||
title: "Developer Experience", description: "Clean APIs and comprehensive documentation for faster development"},
|
{
|
||||||
{
|
icon: Layers,
|
||||||
icon: Shield,
|
title: "Modular Architecture", description: "Build with composable components that scale with your needs"},
|
||||||
title: "Enterprise Security", description: "Bank-level encryption and compliance with industry standards"},
|
{
|
||||||
{
|
icon: Code,
|
||||||
icon: Rocket,
|
title: "Developer Experience", description: "Clean APIs and comprehensive documentation for faster development"},
|
||||||
title: "Lightning Fast", description: "Optimized for performance with sub-second response times"},
|
{
|
||||||
]}
|
icon: Shield,
|
||||||
/>
|
title: "Enterprise Security", description: "Bank-level encryption and compliance with industry standards"},
|
||||||
|
{
|
||||||
|
icon: Rocket,
|
||||||
|
title: "Lightning Fast", description: "Optimized for performance with sub-second response times"},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<TestimonialCardFifteen
|
<TestimonialCardFifteen
|
||||||
testimonial="This platform has completely transformed how we build products. The developer experience is unmatched."
|
testimonial="This platform has completely transformed how we build products. The developer experience is unmatched."
|
||||||
rating={5}
|
rating={5}
|
||||||
@@ -114,54 +120,58 @@ export default function SaasTemplatePage() {
|
|||||||
avatarsAnimation="slide-up"
|
avatarsAnimation="slide-up"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
/>
|
/>
|
||||||
<PricingCardEight
|
<div id="pricing">
|
||||||
tag="Pricing"
|
<PricingCardEight
|
||||||
tagIcon={Sparkles}
|
tag="Pricing"
|
||||||
title="Simple, transparent pricing"
|
tagIcon={Sparkles}
|
||||||
description="Choose the plan that works best for you. All plans include a 14-day free trial."
|
title="Simple, transparent pricing"
|
||||||
animationType="opacity"
|
description="Choose the plan that works best for you. All plans include a 14-day free trial."
|
||||||
textboxLayout="default"
|
animationType="opacity"
|
||||||
useInvertedBackground={false}
|
textboxLayout="default"
|
||||||
plans={[
|
useInvertedBackground={false}
|
||||||
{
|
plans={[
|
||||||
id: "starter", badge: "Starter", badgeIcon: Zap,
|
{
|
||||||
price: "$19/mo", subtitle: "Perfect for individuals", buttons: [
|
id: "starter", badge: "Starter", badgeIcon: Zap,
|
||||||
{ text: "Get Started", onClick: () => console.log("Starter clicked") },
|
price: "$19/mo", subtitle: "Perfect for individuals", buttons: [
|
||||||
],
|
{ text: "Get Started", onClick: () => console.log("Starter clicked") },
|
||||||
features: [
|
],
|
||||||
"Up to 5 projects", "Basic analytics", "24/7 email support", "API access"],
|
features: [
|
||||||
},
|
"Up to 5 projects", "Basic analytics", "24/7 email support", "API access"],
|
||||||
{
|
},
|
||||||
id: "pro", badge: "Pro", badgeIcon: Rocket,
|
{
|
||||||
price: "$49/mo", subtitle: "For growing teams", buttons: [
|
id: "pro", badge: "Pro", badgeIcon: Rocket,
|
||||||
{ text: "Get Started", onClick: () => console.log("Pro clicked") },
|
price: "$49/mo", subtitle: "For growing teams", buttons: [
|
||||||
],
|
{ text: "Get Started", onClick: () => console.log("Pro clicked") },
|
||||||
features: [
|
],
|
||||||
"Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations", "Team collaboration"],
|
features: [
|
||||||
},
|
"Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations", "Team collaboration"],
|
||||||
{
|
},
|
||||||
id: "enterprise", badge: "Enterprise", badgeIcon: Crown,
|
{
|
||||||
price: "$99/mo", subtitle: "For large organizations", buttons: [
|
id: "enterprise", badge: "Enterprise", badgeIcon: Crown,
|
||||||
{ text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
|
price: "$99/mo", subtitle: "For large organizations", buttons: [
|
||||||
],
|
{ text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
|
||||||
features: [
|
],
|
||||||
"Everything in Pro", "Dedicated account manager", "Custom SLA", "On-premise deployment", "Advanced security"],
|
features: [
|
||||||
},
|
"Everything in Pro", "Dedicated account manager", "Custom SLA", "On-premise deployment", "Advanced security"],
|
||||||
]}
|
},
|
||||||
/>
|
]}
|
||||||
<ContactCenter
|
/>
|
||||||
tag="Contact"
|
</div>
|
||||||
tagIcon={Mail}
|
<div id="contact">
|
||||||
title="Ready to get started?"
|
<ContactCenter
|
||||||
description="Join thousands of developers building better products with our platform."
|
tag="Contact"
|
||||||
background={{ variant: "animated-grid" }}
|
tagIcon={Mail}
|
||||||
useInvertedBackground={false}
|
title="Ready to get started?"
|
||||||
inputPlaceholder="Enter your email"
|
description="Join thousands of developers building better products with our platform."
|
||||||
buttonText="Get Early Access"
|
background={{ variant: "animated-grid" }}
|
||||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
useInvertedBackground={false}
|
||||||
/>
|
inputPlaceholder="Enter your email"
|
||||||
|
buttonText="Get Early Access"
|
||||||
|
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<FooterBaseReveal
|
<FooterBaseReveal
|
||||||
logoText="GROWTHENGINE CRM"
|
logoText="GROWTHENGINECRM"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: "Product", items: [
|
title: "Product", items: [
|
||||||
@@ -195,7 +205,7 @@ export default function SaasTemplatePage() {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
copyrightText="2024 GROWTHENGINE CRM. All rights reserved."
|
copyrightText="2024 GROWTHENGINECRM. All rights reserved."
|
||||||
/>
|
/>
|
||||||
</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-playfair-display), 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-playfair-display), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user