Landing page

author: Sebastien Castiel <sebastien@castiel.me> 2023-12-08 16:33:12 -0500
committer: Sebastien Castiel <sebastien@castiel.me> 2023-12-08 16:33:12 -0500
commit: 34c373272ba11077c2dfa31eee3736f51ffde684 (patch)
tree: 6ad4464bab615c4557ac77947c3b67978515a8a1 /src
parent: 92a21ff4c5df6e9f771cfbd140835dce3b6d7b0d (diff)
3 files changed, 180 insertions, 5 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>
+  )
 }
author	Sebastien Castiel <sebastien@castiel.me>	2023-12-08 16:33:12 -0500
committer	Sebastien Castiel <sebastien@castiel.me>	2023-12-08 16:33:12 -0500
commit	34c373272ba11077c2dfa31eee3736f51ffde684 (patch)
tree	6ad4464bab615c4557ac77947c3b67978515a8a1 /src
parent	92a21ff4c5df6e9f771cfbd140835dce3b6d7b0d (diff)