9ecbf0816e
The CSS classes used across different web pages in the web application have been updated. This change mainly consists of adjustments to spacing on various elements to improve the visual layout. The alterations should enhance the readability and user experience of the mentioned pages.
291 lines
8.5 KiB
TypeScript
291 lines
8.5 KiB
TypeScript
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
import { ChevronRight } from 'lucide-react';
|
|
|
|
import { PricingTable } from '@kit/billing-gateway/components';
|
|
import { Button } from '@kit/ui/button';
|
|
import { Heading } from '@kit/ui/heading';
|
|
|
|
import billingConfig from '~/config/billing.config';
|
|
import pathsConfig from '~/config/paths.config';
|
|
import { withI18n } from '~/lib/i18n/with-i18n';
|
|
|
|
function Home() {
|
|
return (
|
|
<div className={'flex flex-col space-y-16'}>
|
|
<div className={'container mx-auto'}>
|
|
<div
|
|
className={
|
|
'mt-4 flex flex-col items-center md:flex-row xl:mt-12' +
|
|
' mx-auto flex-1 justify-center animate-in fade-in ' +
|
|
' duration-1000 slide-in-from-top-12'
|
|
}
|
|
>
|
|
<div className={'flex w-full flex-1 flex-col items-center space-y-8'}>
|
|
<Pill>
|
|
<span>The leading SaaS Starter Kit for ambitious developers</span>
|
|
</Pill>
|
|
|
|
<HeroTitle>
|
|
<span>The SaaS Solution for</span>
|
|
<span>developers and founders</span>
|
|
</HeroTitle>
|
|
|
|
<div>
|
|
<Heading
|
|
level={3}
|
|
className={'text-center font-medium text-muted-foreground'}
|
|
>
|
|
<span>Here you can write a short description of your SaaS</span>
|
|
</Heading>
|
|
|
|
<Heading
|
|
level={3}
|
|
className={'text-center font-medium text-muted-foreground'}
|
|
>
|
|
<span>
|
|
This subheading is usually laid out on multiple lines
|
|
</span>
|
|
</Heading>
|
|
|
|
<Heading
|
|
level={3}
|
|
className={'text-center font-medium text-muted-foreground'}
|
|
>
|
|
<span>Impress your customers, straight to the point.</span>
|
|
</Heading>
|
|
</div>
|
|
|
|
<div className={'flex flex-col items-center space-y-4'}>
|
|
<MainCallToActionButton />
|
|
|
|
<span className={'text-xs text-muted-foreground'}>
|
|
Free plan. No credit card required.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={
|
|
'mx-auto flex max-w-5xl justify-center py-12 animate-in fade-in ' +
|
|
' delay-300 duration-1000 slide-in-from-top-16 fill-mode-both'
|
|
}
|
|
>
|
|
<Image
|
|
priority
|
|
className={
|
|
'rounded-2xl' +
|
|
' shadow-primary/40 animate-in fade-in' +
|
|
' delay-300 duration-1000 ease-out zoom-in-50 fill-mode-both'
|
|
}
|
|
width={2688}
|
|
height={1824}
|
|
src={`/assets/images/dashboard-dark.webp`}
|
|
alt={`App Image`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={'container mx-auto'}>
|
|
<div
|
|
className={
|
|
'flex flex-col items-center justify-center space-y-24 py-16'
|
|
}
|
|
>
|
|
<div
|
|
className={
|
|
'flex max-w-3xl flex-col items-center space-y-8 text-center'
|
|
}
|
|
>
|
|
<Pill>
|
|
<span>A modern, scalable, and secure SaaS Starter Kit</span>
|
|
</Pill>
|
|
|
|
<div className={'flex flex-col space-y-1'}>
|
|
<Heading level={2}>The best tool in the space</Heading>
|
|
|
|
<Heading
|
|
level={3}
|
|
className={'font-medium text-muted-foreground'}
|
|
>
|
|
Unbeatable Features and Benefits for Your SaaS Business
|
|
</Heading>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={'container mx-auto'}>
|
|
<div className={'flex flex-col space-y-4'}>
|
|
<FeatureShowcaseContainer>
|
|
<LeftFeatureContainer>
|
|
<div className={'flex flex-col space-y-2'}>
|
|
<Heading level={2}>Authentication</Heading>
|
|
|
|
<Heading level={3} className={'text-muted-foreground'}>
|
|
Secure and Easy-to-Use Authentication for Your SaaS Website
|
|
and API
|
|
</Heading>
|
|
|
|
<div>
|
|
Our authentication system is built on top of the
|
|
industry-leading PaaS such as Supabase and Firebase. It is
|
|
secure, easy-to-use, and fully customizable. It supports
|
|
email/password, social logins, and more.
|
|
</div>
|
|
</div>
|
|
</LeftFeatureContainer>
|
|
|
|
<RightFeatureContainer>
|
|
<Image
|
|
className="rounded-2xl"
|
|
src={'/assets/images/sign-in.webp'}
|
|
width={'626'}
|
|
height={'683'}
|
|
alt={'Sign In'}
|
|
/>
|
|
</RightFeatureContainer>
|
|
</FeatureShowcaseContainer>
|
|
|
|
<FeatureShowcaseContainer>
|
|
<LeftFeatureContainer>
|
|
<Image
|
|
className="rounded-2xl"
|
|
src={'/assets/images/dashboard.webp'}
|
|
width={'887'}
|
|
height={'743'}
|
|
alt={'Dashboard'}
|
|
/>
|
|
</LeftFeatureContainer>
|
|
|
|
<RightFeatureContainer>
|
|
<div className={'flex flex-col space-y-2'}>
|
|
<Heading level={2}>Dashboard</Heading>
|
|
|
|
<Heading level={3} className={'text-muted-foreground'}>
|
|
A fantastic dashboard to manage your SaaS business
|
|
</Heading>
|
|
|
|
<div>
|
|
Our dashboard offers an overview of your SaaS business. It
|
|
shows at a glance all you need to know about your business. It
|
|
is fully customizable and extendable.
|
|
</div>
|
|
</div>
|
|
</RightFeatureContainer>
|
|
</FeatureShowcaseContainer>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={'container mx-auto'}>
|
|
<div
|
|
className={
|
|
'flex flex-col items-center justify-center space-y-16 py-16'
|
|
}
|
|
>
|
|
<div className={'flex flex-col items-center space-y-8 text-center'}>
|
|
<Pill>
|
|
Get started for free. No credit card required. Cancel anytime.
|
|
</Pill>
|
|
|
|
<div className={'flex flex-col space-y-1'}>
|
|
<Heading level={2}>
|
|
Ready to take your SaaS business to the next level?
|
|
</Heading>
|
|
|
|
<Heading level={3} className={'text-muted-foreground'}>
|
|
Get started on our free plan and upgrade when you are ready.
|
|
</Heading>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={'w-full'}>
|
|
<PricingTable
|
|
config={billingConfig}
|
|
paths={{
|
|
signUp: pathsConfig.auth.signUp,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default withI18n(Home);
|
|
|
|
function HeroTitle({ children }: React.PropsWithChildren) {
|
|
return (
|
|
<h1
|
|
className={
|
|
'text-center text-4xl md:text-5xl' +
|
|
' flex flex-col font-semibold xl:text-7xl'
|
|
}
|
|
>
|
|
{children}
|
|
</h1>
|
|
);
|
|
}
|
|
|
|
function Pill(props: React.PropsWithChildren) {
|
|
return (
|
|
<h2
|
|
className={
|
|
'inline-flex w-auto items-center space-x-2' +
|
|
' rounded-full bg-gradient-to-br dark:from-gray-200 dark:via-gray-400' +
|
|
' bg-clip-text px-4 py-2 text-center text-sm dark:to-gray-700' +
|
|
' border font-normal text-muted-foreground shadow-sm dark:text-transparent'
|
|
}
|
|
>
|
|
{props.children}
|
|
</h2>
|
|
);
|
|
}
|
|
|
|
function FeatureShowcaseContainer(props: React.PropsWithChildren) {
|
|
return (
|
|
<div
|
|
className={
|
|
'flex flex-col items-center justify-between lg:flex-row' +
|
|
' lg:space-x-24'
|
|
}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LeftFeatureContainer(props: React.PropsWithChildren) {
|
|
return (
|
|
<div className={'flex w-full flex-col space-y-8 lg:w-6/12'}>
|
|
{props.children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RightFeatureContainer(props: React.PropsWithChildren) {
|
|
return <div className={'flex w-full lg:w-6/12'}>{props.children}</div>;
|
|
}
|
|
|
|
function MainCallToActionButton() {
|
|
return (
|
|
<Button className={'rounded-full'}>
|
|
<Link href={'/auth/sign-up'}>
|
|
<span className={'flex items-center space-x-0.5'}>
|
|
<span>Get Started</span>
|
|
|
|
<ChevronRight
|
|
className={
|
|
'h-4 animate-in fade-in slide-in-from-left-8' +
|
|
' delay-1000 duration-1000 zoom-in fill-mode-both'
|
|
}
|
|
/>
|
|
</span>
|
|
</Link>
|
|
</Button>
|
|
);
|
|
}
|