mirror of
https://github.com/spliit-app/spliit.git
synced 2026-03-05 04:06:13 +01:00
Landing page
This commit is contained in:
Sebastien Castiel
@@ -1,5 +1,9 @@
|
|||||||
import { PropsWithChildren } from 'react'
|
import { PropsWithChildren } from 'react'
|
||||||
|
|
||||||
export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
|
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 (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<body className="">
|
<body className="pt-16 min-h-[100dvh] flex flex-col items-stretch">
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
attribute="class"
|
attribute="class"
|
||||||
defaultTheme="system"
|
defaultTheme="system"
|
||||||
@@ -67,7 +67,7 @@ export default function RootLayout({
|
|||||||
disableTransitionOnChange
|
disableTransitionOnChange
|
||||||
>
|
>
|
||||||
<ProgressBar />
|
<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="/">
|
<Link className="flex items-center gap-2" href="/">
|
||||||
<h1>
|
<h1>
|
||||||
<Image
|
<Image
|
||||||
@@ -90,7 +90,31 @@ export default function RootLayout({
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</header>
|
</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>
|
</ThemeProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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() {
|
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} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
darkMode: ["class"],
|
darkMode: ['class'],
|
||||||
content: [
|
content: [
|
||||||
'./pages/**/*.{ts,tsx}',
|
'./pages/**/*.{ts,tsx}',
|
||||||
'./components/**/*.{ts,tsx}',
|
'./components/**/*.{ts,tsx}',
|
||||||
'./app/**/*.{ts,tsx}',
|
'./app/**/*.{ts,tsx}',
|
||||||
'./src/**/*.{ts,tsx}',
|
'./src/**/*.{ts,tsx}',
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
container: {
|
container: {
|
||||||
center: true,
|
center: true,
|
||||||
padding: "2rem",
|
padding: '2rem',
|
||||||
screens: {
|
screens: {
|
||||||
"2xl": "1400px",
|
'2xl': '1400px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
border: "hsl(var(--border))",
|
border: 'hsl(var(--border))',
|
||||||
input: "hsl(var(--input))",
|
input: 'hsl(var(--input))',
|
||||||
ring: "hsl(var(--ring))",
|
ring: 'hsl(var(--ring))',
|
||||||
background: "hsl(var(--background))",
|
background: 'hsl(var(--background))',
|
||||||
foreground: "hsl(var(--foreground))",
|
foreground: 'hsl(var(--foreground))',
|
||||||
primary: {
|
primary: {
|
||||||
DEFAULT: "hsl(var(--primary))",
|
DEFAULT: 'hsl(var(--primary))',
|
||||||
foreground: "hsl(var(--primary-foreground))",
|
foreground: 'hsl(var(--primary-foreground))',
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
DEFAULT: "hsl(var(--secondary))",
|
DEFAULT: 'hsl(var(--secondary))',
|
||||||
foreground: "hsl(var(--secondary-foreground))",
|
foreground: 'hsl(var(--secondary-foreground))',
|
||||||
},
|
},
|
||||||
destructive: {
|
destructive: {
|
||||||
DEFAULT: "hsl(var(--destructive))",
|
DEFAULT: 'hsl(var(--destructive))',
|
||||||
foreground: "hsl(var(--destructive-foreground))",
|
foreground: 'hsl(var(--destructive-foreground))',
|
||||||
},
|
},
|
||||||
muted: {
|
muted: {
|
||||||
DEFAULT: "hsl(var(--muted))",
|
DEFAULT: 'hsl(var(--muted))',
|
||||||
foreground: "hsl(var(--muted-foreground))",
|
foreground: 'hsl(var(--muted-foreground))',
|
||||||
},
|
},
|
||||||
accent: {
|
accent: {
|
||||||
DEFAULT: "hsl(var(--accent))",
|
DEFAULT: 'hsl(var(--accent))',
|
||||||
foreground: "hsl(var(--accent-foreground))",
|
foreground: 'hsl(var(--accent-foreground))',
|
||||||
},
|
},
|
||||||
popover: {
|
popover: {
|
||||||
DEFAULT: "hsl(var(--popover))",
|
DEFAULT: 'hsl(var(--popover))',
|
||||||
foreground: "hsl(var(--popover-foreground))",
|
foreground: 'hsl(var(--popover-foreground))',
|
||||||
},
|
},
|
||||||
card: {
|
card: {
|
||||||
DEFAULT: "hsl(var(--card))",
|
DEFAULT: 'hsl(var(--card))',
|
||||||
foreground: "hsl(var(--card-foreground))",
|
foreground: 'hsl(var(--card-foreground))',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
lg: "var(--radius)",
|
lg: 'var(--radius)',
|
||||||
md: "calc(var(--radius) - 2px)",
|
md: 'calc(var(--radius) - 2px)',
|
||||||
sm: "calc(var(--radius) - 4px)",
|
sm: 'calc(var(--radius) - 4px)',
|
||||||
},
|
},
|
||||||
keyframes: {
|
keyframes: {
|
||||||
"accordion-down": {
|
'accordion-down': {
|
||||||
from: { height: 0 },
|
from: { height: 0 },
|
||||||
to: { height: "var(--radix-accordion-content-height)" },
|
to: { height: 'var(--radix-accordion-content-height)' },
|
||||||
},
|
},
|
||||||
"accordion-up": {
|
'accordion-up': {
|
||||||
from: { height: "var(--radix-accordion-content-height)" },
|
from: { height: 'var(--radix-accordion-content-height)' },
|
||||||
to: { height: 0 },
|
to: { height: 0 },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
animation: {
|
animation: {
|
||||||
"accordion-down": "accordion-down 0.2s ease-out",
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||||
"accordion-up": "accordion-up 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