mirror of
https://github.com/spliit-app/spliit.git
synced 2026-02-10 09:36:12 +01:00
Landing page
This commit is contained in:
Sebastien Castiel
@@ -1,5 +1,9 @@
|
||||
import { PropsWithChildren } from 'react'
|
||||
|
||||
export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
|
||||
return <main>{children}</main>
|
||||
return (
|
||||
<main className="flex-1 max-w-screen-md w-full mx-auto p-4">
|
||||
{children}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function RootLayout({
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className="">
|
||||
<body className="pt-16 min-h-[100dvh] flex flex-col items-stretch">
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
@@ -67,7 +67,7 @@ export default function RootLayout({
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<ProgressBar />
|
||||
<header className="fixed top-0 left-0 right-0 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm">
|
||||
<header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm">
|
||||
<Link className="flex items-center gap-2" href="/">
|
||||
<h1>
|
||||
<Image
|
||||
@@ -90,7 +90,31 @@ export default function RootLayout({
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div className="max-w-screen-md mx-auto p-4 pt-20">{children}</div>
|
||||
|
||||
{children}
|
||||
|
||||
<footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-slate-800 border-t p-6 mt-8 flex flex-col space-y-2 text-xs [&_a]:underline">
|
||||
<div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
|
||||
<Link className="flex items-center gap-2" href="/">
|
||||
<Image
|
||||
src="/logo-with-text.png"
|
||||
className="m-1 h-auto"
|
||||
width={(35 * 522) / 180}
|
||||
height={35}
|
||||
alt="Spliit"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col space-y a--no-underline-text-white">
|
||||
<span>Made in Montréal, Québec 🇨🇦</span>
|
||||
<span>
|
||||
Built by{' '}
|
||||
<a href="https://scastiel.dev" target="_blank" rel="noopener">
|
||||
Sebastien Castiel
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
149
src/app/page.tsx
149
src/app/page.tsx
@@ -1,3 +1,150 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
BarChartHorizontalBig,
|
||||
CircleDollarSign,
|
||||
Github,
|
||||
List,
|
||||
LucideIcon,
|
||||
Share,
|
||||
ShieldX,
|
||||
Users,
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
export default function HomePage() {
|
||||
return <main></main>
|
||||
return (
|
||||
<main>
|
||||
<section className="py-16 md:py-24 lg:py-32">
|
||||
<div className="container flex max-w-screen-md flex-col items-center gap-4 text-center">
|
||||
<h1 className="!leading-none font-bold text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
|
||||
Share Expenses <br /> with Friends & Family
|
||||
</h1>
|
||||
<p className="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
|
||||
No ads. No account. <br className="sm:hidden" /> Open Source.
|
||||
Forever Free.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button asChild size="lg">
|
||||
<Link
|
||||
className="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8 rounded-md"
|
||||
href="/groups/create"
|
||||
>
|
||||
Create a group
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="secondary" size="lg">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://github.com/scastiel/spliit2"
|
||||
>
|
||||
<Github className="w-4 h-4 mr-2" />
|
||||
GitHub
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-slate-50 dark:bg-slate-800 py-16 md:py-24 lg:py-32">
|
||||
<div className="p-4 flex mx-auto max-w-screen-md flex-col items-center text-center">
|
||||
<h2 className="font-bold text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
|
||||
Features
|
||||
</h2>
|
||||
<p
|
||||
className="mt-2 md:mt-3 leading-normal text-muted-foreground sm:text-lg sm:leading-7"
|
||||
style={{ textWrap: 'balance' } as any}
|
||||
>
|
||||
Spliit is a minimalist application to track and share expenses with
|
||||
your friends and family.
|
||||
</p>
|
||||
<div className="mt-8 md:mt-6 w-full grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-4 text-left">
|
||||
<Feature
|
||||
Icon={Users}
|
||||
name="Groups"
|
||||
description="Create a group for a travel, an event, a gift…"
|
||||
/>
|
||||
<Feature
|
||||
Icon={List}
|
||||
name="Expenses"
|
||||
description="Create and list expenses in your group."
|
||||
/>
|
||||
<Feature
|
||||
Icon={Share}
|
||||
name="Share"
|
||||
description="Send the group link to participants."
|
||||
/>
|
||||
<Feature
|
||||
Icon={BarChartHorizontalBig}
|
||||
name="Balances"
|
||||
description="Visualize how much each participant spent."
|
||||
/>
|
||||
<Feature
|
||||
Icon={CircleDollarSign}
|
||||
name="Reimbursements"
|
||||
description="Optimize money transfers between participants."
|
||||
/>
|
||||
<Feature
|
||||
Icon={ShieldX}
|
||||
name="No ads"
|
||||
description="No account. No limitation. No problem."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 md:py-24 lg:py-32">
|
||||
<div className="container flex max-w-screen-md flex-col items-center text-center">
|
||||
<h2 className="font-bold text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
|
||||
Proudly Open Source
|
||||
</h2>
|
||||
<p
|
||||
className="mt-2 leading-normal text-muted-foreground sm:text-lg sm:leading-7"
|
||||
style={{ textWrap: 'balance' } as any}
|
||||
>
|
||||
Spliit is open source and powered by open source software. Feel free
|
||||
to contribute!
|
||||
</p>
|
||||
<div className="mt-4 md:mt-6">
|
||||
<Button asChild variant="secondary" size="lg">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://github.com/scastiel/spliit2"
|
||||
>
|
||||
<Github className="w-4 h-4 mr-2" />
|
||||
GitHub
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
function Feature({
|
||||
name,
|
||||
Icon,
|
||||
description,
|
||||
}: {
|
||||
name: ReactNode
|
||||
Icon: LucideIcon
|
||||
description: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border rounded-md p-4 flex flex-col gap-2">
|
||||
<Icon className="w-8 h-8" />
|
||||
<div>
|
||||
<strong>{name}</strong>
|
||||
</div>
|
||||
<div
|
||||
className="text-sm text-muted-foreground"
|
||||
style={{ textWrap: 'balance' } as any}
|
||||
>
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,76 +1,93 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
darkMode: ['class'],
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./src/**/*.{ts,tsx}',
|
||||
],
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
padding: '2rem',
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
'2xl': '1400px',
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
'accordion-down': {
|
||||
from: { height: 0 },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
'accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||
},
|
||||
fontFamily: {
|
||||
rounded: [
|
||||
'ui-rounded',
|
||||
'Hiragino Maru Gothic ProN',
|
||||
'Quicksand',
|
||||
'Comfortaa',
|
||||
'Manjari',
|
||||
'Arial Rounded MT',
|
||||
'Arial Rounded MT Bold',
|
||||
'Calibri',
|
||||
'source-sans-pro',
|
||||
'sans-serif',
|
||||
],
|
||||
},
|
||||
dropShadow: {
|
||||
title: '.25vw .25vw 0 rgb(252 165 165 / var(--tw-text-opacity))',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
plugins: [require('tailwindcss-animate')],
|
||||
}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic':
|
||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
export default config
|
||||
Reference in New Issue
Block a user