7ebff31475
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
567 lines
16 KiB
Plaintext
567 lines
16 KiB
Plaintext
---
|
|
status: "published"
|
|
label: "Marketing Components"
|
|
title: "Marketing Components in the Next.js Supabase SaaS kit"
|
|
description: "Learn how to use the Marketing components in the Next.js Supabase SaaS kit"
|
|
order: 8
|
|
---
|
|
|
|
Marketing components are designed to help you create beautiful and engaging marketing pages for your SaaS application. These components are built on top of the Shadcn UI library and are designed to work seamlessly with Next.js routing.
|
|
|
|
## Hero
|
|
|
|
The Hero component is a versatile and customizable landing page hero section for React applications.
|
|
|
|
{% component path="marketing/hero" /%}
|
|
|
|
### Import
|
|
|
|
```jsx
|
|
import { Hero } from '@kit/ui/marketing';
|
|
```
|
|
|
|
### Usage
|
|
|
|
```jsx
|
|
import { Hero, Pill, CtaButton } from '@kit/ui/marketing';
|
|
import Image from 'next/image';
|
|
|
|
function LandingPage() {
|
|
return (
|
|
<Hero
|
|
pill={<Pill>New Feature</Pill>}
|
|
title="Welcome to Our App"
|
|
subtitle="Discover the power of our innovative solution"
|
|
cta={<CtaButton>Get Started</CtaButton>}
|
|
image={
|
|
<Image
|
|
src="/hero-image.jpg"
|
|
alt="Hero Image"
|
|
width={1200}
|
|
height={600}
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Styling
|
|
|
|
The Hero component uses Tailwind CSS for styling. You can customize its appearance by:
|
|
|
|
1. Modifying the default classes in the component.
|
|
2. Passing additional classes via the `className` prop.
|
|
3. Overriding styles in your CSS using the appropriate selectors.
|
|
|
|
### Animations
|
|
|
|
By default, the Hero component applies entrance animations to its elements. You can disable these animations by setting the `animate` prop to `false`.
|
|
|
|
### Accessibility
|
|
|
|
The Hero component uses semantic HTML elements and follows accessibility best practices:
|
|
|
|
- The main title uses an `<h1>` tag (via the `HeroTitle` component).
|
|
- The subtitle uses an `<h3>` tag for proper heading hierarchy.
|
|
|
|
Ensure that any images passed via the `image` prop include appropriate `alt` text for screen readers.
|
|
|
|
### Notes
|
|
|
|
- The Hero component is designed to be flexible and can accommodate various content types through its props.
|
|
- For optimal performance, consider lazy-loading large images passed to the `image` prop.
|
|
- The component is responsive and adjusts its layout for different screen sizes.
|
|
|
|
### A Larger example straight from the kit
|
|
|
|
Below is a larger example of a Hero component with additional elements like a pill, CTA button, and image:
|
|
|
|
```tsx
|
|
import { Hero, Pill, CtaButton, GradientSecondaryText } from '@kit/ui/marketing';
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { LayoutDashboard } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
<Hero
|
|
pill={
|
|
<Pill label={'New'}>
|
|
<span>The leading SaaS Starter Kit for ambitious developers</span>
|
|
</Pill>
|
|
}
|
|
title={
|
|
<>
|
|
<span>The ultimate SaaS Starter</span>
|
|
<span>for your next project</span>
|
|
</>
|
|
}
|
|
subtitle={
|
|
<span>
|
|
Build and Ship a SaaS faster than ever before with the next-gen SaaS
|
|
Starter Kit. Ship your SaaS in days, not months.
|
|
</span>
|
|
}
|
|
cta={<MainCallToActionButton />}
|
|
image={
|
|
<Image
|
|
priority
|
|
className={
|
|
'delay-250 rounded-2xl border border-gray-200 duration-1000 ease-out animate-in fade-in zoom-in-50 fill-mode-both dark:border-primary/10'
|
|
}
|
|
width={3558}
|
|
height={2222}
|
|
src={`/images/dashboard.webp`}
|
|
alt={`App Image`}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
function MainCallToActionButton() {
|
|
return (
|
|
<div className={'flex space-x-4'}>
|
|
<CtaButton>
|
|
<Link href={'/auth/sign-up'}>
|
|
<span className={'flex items-center space-x-0.5'}>
|
|
<span>
|
|
<Trans i18nKey={'common.getStarted'} />
|
|
</span>
|
|
|
|
<ArrowRightIcon
|
|
className={
|
|
'h-4 animate-in fade-in slide-in-from-left-8' +
|
|
' delay-1000 duration-1000 zoom-in fill-mode-both'
|
|
}
|
|
/>
|
|
</span>
|
|
</Link>
|
|
</CtaButton>
|
|
|
|
<CtaButton variant={'link'}>
|
|
<Link href={'/contact'}>
|
|
<Trans i18nKey={'common.contactUs'} />
|
|
</Link>
|
|
</CtaButton>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## HeroTitle
|
|
|
|
The `HeroTitle` component is a specialized heading component used within the Hero component to display the main title.
|
|
|
|
{% component path="marketing/hero-title" /%}
|
|
|
|
### Props
|
|
|
|
The `HeroTitle` component accepts the following props:
|
|
|
|
1. `asChild?: boolean`: Whether to render the component as a child of the `Slot` component.
|
|
2. `HTMLAttributes<HTMLHeadingElement>`: Additional attributes to apply to the heading element.
|
|
|
|
### Usage
|
|
|
|
```tsx
|
|
import { HeroTitle } from '@kit/ui/marketing';
|
|
|
|
function LandingPage() {
|
|
return (
|
|
<HeroTitle asChild>
|
|
Welcome to Our App
|
|
</HeroTitle>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Pill
|
|
|
|
The `Pill` component is a small, rounded content container often used for highlighting or categorizing information.
|
|
|
|
{% component path="marketing/pill" /%}
|
|
|
|
### Usage
|
|
|
|
Use the `Pill` component to create a small, rounded content container with optional label text.
|
|
|
|
```tsx
|
|
import { Pill } from '@kit/ui/marketing';
|
|
|
|
function LandingPage() {
|
|
return (
|
|
<Pill label="New">
|
|
Discover the power of our innovative
|
|
</Pill>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Features
|
|
|
|
The `FeatureShowcase`, `FeatureShowcaseIconContainer`, `FeatureGrid`, and `FeatureCard` components are designed to showcase product features on marketing pages.
|
|
|
|
### FeatureShowcase
|
|
|
|
The `FeatureShowcase` component is a layout component that showcases a feature with an icon, heading, and description.
|
|
|
|
### FeatureShowcaseIconContainer
|
|
|
|
The `FeatureShowcaseIconContainer` component is a layout component that contains an icon for the `FeatureShowcase` component.
|
|
|
|
### FeatureGrid
|
|
|
|
The `FeatureGrid` component is a layout component that arranges `FeatureCard` components in a grid layout.
|
|
|
|
### FeatureCard
|
|
|
|
The `FeatureCard` component is a card component that displays a feature with a label, description, and optional image.
|
|
|
|
### Usage
|
|
|
|
Use the `FeatureShowcase` component to showcase a feature with an icon, heading, and description.
|
|
|
|
```tsx
|
|
<div className={'container mx-auto'}>
|
|
<div
|
|
className={'flex flex-col space-y-16 xl:space-y-32 2xl:space-y-36'}
|
|
>
|
|
<FeatureShowcase
|
|
heading={
|
|
<>
|
|
<b className="font-semibold dark:text-white">
|
|
The ultimate SaaS Starter Kit
|
|
</b>
|
|
.{' '}
|
|
<GradientSecondaryText>
|
|
Unleash your creativity and build your SaaS faster than ever
|
|
with Makerkit.
|
|
</GradientSecondaryText>
|
|
</>
|
|
}
|
|
icon={
|
|
<FeatureShowcaseIconContainer>
|
|
<LayoutDashboard className="h-5" />
|
|
<span>All-in-one solution</span>
|
|
</FeatureShowcaseIconContainer>
|
|
}
|
|
>
|
|
<FeatureGrid>
|
|
<FeatureCard
|
|
className={
|
|
'relative col-span-2 overflow-hidden bg-violet-500 text-white lg:h-96'
|
|
}
|
|
label={'Beautiful Dashboard'}
|
|
description={`Makerkit provides a beautiful dashboard to manage your SaaS business.`}
|
|
>
|
|
<Image
|
|
className="absolute right-0 top-0 hidden h-full w-full rounded-tl-2xl border border-border lg:top-36 lg:flex lg:h-auto lg:w-10/12"
|
|
src={'/images/dashboard-header.webp'}
|
|
width={'2061'}
|
|
height={'800'}
|
|
alt={'Dashboard Header'}
|
|
/>
|
|
</FeatureCard>
|
|
|
|
<FeatureCard
|
|
className={
|
|
'relative col-span-2 w-full overflow-hidden lg:col-span-1'
|
|
}
|
|
label={'Authentication'}
|
|
description={`Makerkit provides a variety of providers to allow your users to sign in.`}
|
|
>
|
|
<Image
|
|
className="absolute left-16 top-32 hidden h-auto w-8/12 rounded-l-2xl lg:flex"
|
|
src={'/images/sign-in.webp'}
|
|
width={'1760'}
|
|
height={'1680'}
|
|
alt={'Sign In'}
|
|
/>
|
|
</FeatureCard>
|
|
|
|
<FeatureCard
|
|
className={
|
|
'relative col-span-2 overflow-hidden lg:col-span-1 lg:h-96'
|
|
}
|
|
label={'Multi Tenancy'}
|
|
description={`Multi tenant memberships for your SaaS business.`}
|
|
>
|
|
<Image
|
|
className="absolute right-0 top-0 hidden h-full w-full rounded-tl-2xl border lg:top-28 lg:flex lg:h-auto lg:w-8/12"
|
|
src={'/images/multi-tenancy.webp'}
|
|
width={'2061'}
|
|
height={'800'}
|
|
alt={'Multi Tenancy'}
|
|
/>
|
|
</FeatureCard>
|
|
|
|
<FeatureCard
|
|
className={'relative col-span-2 overflow-hidden lg:h-96'}
|
|
label={'Billing'}
|
|
description={`Makerkit supports multiple payment gateways to charge your customers.`}
|
|
>
|
|
<Image
|
|
className="absolute right-0 top-0 hidden h-full w-full rounded-tl-2xl border border-border lg:top-36 lg:flex lg:h-auto lg:w-11/12"
|
|
src={'/images/billing.webp'}
|
|
width={'2061'}
|
|
height={'800'}
|
|
alt={'Billing'}
|
|
/>
|
|
</FeatureCard>
|
|
</FeatureGrid>
|
|
</FeatureShowcase>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## SecondaryHero
|
|
|
|
The `SecondaryHero` component is a secondary hero section that can be used to highlight additional features or content on a landing page.
|
|
|
|
```tsx
|
|
<SecondaryHero
|
|
pill={<Pill>Get started for free. No credit card required.</Pill>}
|
|
heading="Fair pricing for all types of businesses"
|
|
subheading="Get started on our free plan and upgrade when you are ready."
|
|
/>
|
|
```
|
|
|
|
{% component path="marketing/secondary-hero" /%}
|
|
|
|
## Header
|
|
|
|
The `Header` component is a navigation header that can be used to display links to different sections of a marketing page.
|
|
|
|
```tsx
|
|
export function SiteHeader(props: { user?: User | null }) {
|
|
return (
|
|
<Header
|
|
logo={<AppLogo />}
|
|
navigation={<SiteNavigation />}
|
|
actions={<SiteHeaderAccountSection user={props.user ?? null} />}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Footer
|
|
|
|
The `Footer` component is a footer section that can be used to display links, social media icons, and other information on a marketing page.
|
|
|
|
```tsx
|
|
import { Footer } from '@kit/ui/marketing';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import { AppLogo } from '~/components/app-logo';
|
|
import appConfig from '~/config/app.config';
|
|
|
|
export function SiteFooter() {
|
|
return (
|
|
<Footer
|
|
logo={<AppLogo className="w-[85px] md:w-[95px]" />}
|
|
description={<Trans i18nKey="marketing.footerDescription" />}
|
|
copyright={
|
|
<Trans
|
|
i18nKey="marketing.copyright"
|
|
values={{
|
|
product: appConfig.name,
|
|
year: new Date().getFullYear(),
|
|
}}
|
|
/>
|
|
}
|
|
sections={[
|
|
{
|
|
heading: <Trans i18nKey="marketing.about" />,
|
|
links: [
|
|
{ href: '/blog', label: <Trans i18nKey="marketing.blog" /> },
|
|
{ href: '/contact', label: <Trans i18nKey="marketing.contact" /> },
|
|
],
|
|
},
|
|
{
|
|
heading: <Trans i18nKey="marketing.product" />,
|
|
links: [
|
|
{
|
|
href: '/docs',
|
|
label: <Trans i18nKey="marketing.documentation" />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
heading: <Trans i18nKey="marketing.legal" />,
|
|
links: [
|
|
{
|
|
href: '/terms-of-service',
|
|
label: <Trans i18nKey="marketing.termsOfService" />,
|
|
},
|
|
{
|
|
href: '/privacy-policy',
|
|
label: <Trans i18nKey="marketing.privacyPolicy" />,
|
|
},
|
|
{
|
|
href: '/cookie-policy',
|
|
label: <Trans i18nKey="marketing.cookiePolicy" />,
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
## CtaButton
|
|
|
|
The `CtaButton` component is a call-to-action button that can be used to encourage users to take a specific action.
|
|
|
|
{% component path="marketing/cta-button" /%}
|
|
|
|
```tsx
|
|
function MainCallToActionButton() {
|
|
return (
|
|
<div className={'flex space-x-4'}>
|
|
<CtaButton>
|
|
<Link href={'/auth/sign-up'}>
|
|
<span className={'flex items-center space-x-0.5'}>
|
|
<span>
|
|
<Trans i18nKey={'common.getStarted'} />
|
|
</span>
|
|
|
|
<ArrowRightIcon
|
|
className={
|
|
'h-4 animate-in fade-in slide-in-from-left-8' +
|
|
' delay-1000 duration-1000 zoom-in fill-mode-both'
|
|
}
|
|
/>
|
|
</span>
|
|
</Link>
|
|
</CtaButton>
|
|
|
|
<CtaButton variant={'link'}>
|
|
<Link href={'/contact'}>
|
|
<Trans i18nKey={'common.contactUs'} />
|
|
</Link>
|
|
</CtaButton>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## GradientSecondaryText
|
|
|
|
The `GradientSecondaryText` component is a text component that applies a gradient color to the text.
|
|
|
|
{% component path="marketing/gradient-secondary-text" /%}
|
|
|
|
```tsx
|
|
function GradientSecondaryTextExample() {
|
|
return (
|
|
<p>
|
|
<GradientSecondaryText>
|
|
Unleash your creativity and build your SaaS faster than ever with
|
|
Makerkit.
|
|
</GradientSecondaryText>
|
|
</p>
|
|
);
|
|
}
|
|
```
|
|
|
|
## GradientText
|
|
|
|
The `GradientText` component is a text component that applies a gradient color to the text.
|
|
|
|
{% component path="marketing/gradient-text" /%}
|
|
|
|
```tsx
|
|
function GradientTextExample() {
|
|
return (
|
|
<p>
|
|
<GradientText className={'from-primary/60 to-primary'}>
|
|
Unleash your creativity and build your SaaS faster than ever with
|
|
Makerkit.
|
|
</GradientText>
|
|
</p>
|
|
);
|
|
}
|
|
```
|
|
|
|
You can use the Tailwind CSS gradient utility classes to customize the gradient colors.
|
|
|
|
```tsx
|
|
<GradientText className={'from-violet-500 to-purple-700'}>
|
|
Unleash your creativity and build your SaaS faster than ever with Makerkit.
|
|
</GradientText>
|
|
```
|
|
|
|
## NewsletterSignupContainer
|
|
|
|
The `NewsletterSignupContainer` is a comprehensive component for handling newsletter signups in a marketing context. It manages the entire signup flow, including form display, loading state, and success/error messages.
|
|
|
|
{% component path="marketing/newsletter-sign-up" /%}
|
|
|
|
### Import
|
|
|
|
```jsx
|
|
import { NewsletterSignupContainer } from '@kit/ui/marketing';
|
|
```
|
|
|
|
### Props
|
|
|
|
The `NewsletterSignupContainer` accepts the following props:
|
|
- `onSignup`: the callback function that will notify you of a submission
|
|
- `heading`: the heading of the component
|
|
- `description`: the description below the heading
|
|
- `successMessage`: the text to display on successful submissions
|
|
- `errorMessage`: the text to display on errors
|
|
|
|
The component also accepts all standard HTML div attributes.
|
|
|
|
### Usage
|
|
|
|
```tsx
|
|
'use client';
|
|
|
|
import { NewsletterSignupContainer } from '@kit/ui/marketing';
|
|
|
|
function WrapperNewsletterComponent() {
|
|
const handleNewsletterSignup = async (email: string) => {
|
|
// Implement your signup logic here
|
|
await apiClient.subscribeToNewsletter(email);
|
|
};
|
|
|
|
return (
|
|
<NewsletterSignupContainer
|
|
onSignup={handleNewsletterSignup}
|
|
heading="Join Our Community"
|
|
description="Be the first to know about new features and updates."
|
|
successMessage="You're all set! Check your inbox for a confirmation email."
|
|
errorMessage="Oops! Something went wrong. Please try again later."
|
|
className="max-w-md mx-auto"
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
Wrap the component into a parent `client` component as you'll need to pass the `onSignup` function to the component.
|
|
|
|
The `onSignup` function should handle the signup process, such as making an API request to subscribe the user to the newsletter, whichever provider you're using.
|
|
|
|
### Behavior
|
|
|
|
1. Initially displays the newsletter signup form.
|
|
2. When the form is submitted, it shows a loading spinner.
|
|
3. On successful signup, displays a success message.
|
|
4. If an error occurs during signup, shows an error message.
|
|
|
|
### Styling
|
|
|
|
The component uses Tailwind CSS for styling. The container is flexbox-based and centers its content. You can customize the appearance by passing additional classes via the `className` prop.
|
|
|
|
### Accessibility
|
|
|
|
- Uses semantic HTML structure with appropriate headings.
|
|
- Provides clear feedback for form submission states.
|
|
- Error and success messages are displayed using the `Alert` component for consistent styling and accessibility.
|
|
|
|
### Notes
|
|
|
|
- It integrates with other Makerkit UI components like `Alert`, `Heading`, and `Spinner`.
|
|
- The actual signup logic is decoupled from the component, allowing for flexibility in implementation.
|