diff options
| -rw-r--r-- | src/app/groups/layout.tsx | 6 | ||||
| -rw-r--r-- | src/app/layout.tsx | 30 | ||||
| -rw-r--r-- | src/app/page.tsx | 149 | ||||
| -rw-r--r-- | tailwind.config.js | 85 | ||||
| -rw-r--r-- | tailwind.config.ts | 20 |
5 files changed, 231 insertions, 59 deletions
diff --git a/src/app/groups/layout.tsx b/src/app/groups/layout.tsx index d8aff39..df7d39e 100644 --- a/src/app/groups/layout.tsx +++ b/src/app/groups/layout.tsx @@ -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> + ) } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2edc33c..2abc96a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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> diff --git a/src/app/page.tsx b/src/app/page.tsx index dedeb98..77dfed0 100644 --- a/src/app/page.tsx +++ b/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> + ) } diff --git a/tailwind.config.js b/tailwind.config.js index 0377ea1..03965fe 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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")], -}
\ No newline at end of file + plugins: [require('tailwindcss-animate')], +} diff --git a/tailwind.config.ts b/tailwind.config.ts deleted file mode 100644 index 1af3b8f..0000000 --- a/tailwind.config.ts +++ /dev/null @@ -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 |