Remove Boilerplate

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

app/(auth-pages)/forgot-password/page.tsx

@@ -13,7 +13,7 @@ export default function ForgotPassword({
 }) {
   return (
     <>
-      <form className="flex-1 flex flex-col w-full gap-2 text-foreground [&>input]:mb-6 min-w-64 max-w-64 mx-auto">
+      <form className="mx-auto flex w-full min-w-64 max-w-64 flex-1 flex-col gap-2 text-foreground [&>input]:mb-6">
         <div>
           <h1 className="text-2xl font-medium">Reset Password</h1>
           <p className="text-sm text-secondary-foreground">
@@ -23,7 +23,7 @@ export default function ForgotPassword({
             </Link>
           </p>
         </div>
-        <div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
+        <div className="mt-8 flex flex-col gap-2 [&>input]:mb-3">
           <Label htmlFor="email">Email</Label>
           <Input name="email" placeholder="[email protected]" required />
           <SubmitButton formAction={forgotPasswordAction}>

app/(auth-pages)/layout.tsx

@@ -4,6 +4,6 @@ export default async function Layout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="max-w-7xl flex flex-col gap-12 items-start">{children}</div>
+    <div className="flex max-w-7xl flex-col items-start gap-12">{children}</div>
   );
 }

app/(auth-pages)/sign-in/page.tsx

@@ -7,18 +7,18 @@ import Link from "next/link";
 
 export default function Login({ searchParams }: { searchParams: Message }) {
   return (
-    <form className="flex-1 flex flex-col min-w-64">
+    <form className="flex min-w-64 flex-1 flex-col">
       <h1 className="text-2xl font-medium">Sign in</h1>
       <p className="text-sm text-foreground">
         Don't have an account?{" "}
-        <Link className="text-foreground font-medium underline" href="/sign-up">
+        <Link className="font-medium text-foreground underline" href="/sign-up">
           Sign up
         </Link>
       </p>
-      <div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
+      <div className="mt-8 flex flex-col gap-2 [&>input]:mb-3">
         <Label htmlFor="email">Email</Label>
         <Input name="email" placeholder="[email protected]" required />
-        <div className="flex justify-between items-center">
+        <div className="flex items-center justify-between">
           <Label htmlFor="password">Password</Label>
           <Link
             className="text-xs text-foreground underline"

app/(auth-pages)/sign-up/page.tsx

@@ -9,23 +9,23 @@ import { SmtpMessage } from "../smtp-message";
 export default function Signup({ searchParams }: { searchParams: Message }) {
   if ("message" in searchParams) {
     return (
-      <div className="w-full flex-1 flex items-center h-screen sm:max-w-md justify-center gap-2 p-4">
+      <div className="flex h-screen w-full flex-1 items-center justify-center gap-2 p-4 sm:max-w-md">
         <FormMessage message={searchParams} />
       </div>
     );
   }
 
   return (
     <>
-      <form className="flex flex-col min-w-64 max-w-64 mx-auto">
+      <form className="mx-auto flex min-w-64 max-w-64 flex-col">
         <h1 className="text-2xl font-medium">Sign up</h1>
-        <p className="text-sm text text-foreground">
+        <p className="text text-sm text-foreground">
           Already have an account?{" "}
-          <Link className="text-primary font-medium underline" href="/sign-in">
+          <Link className="font-medium text-primary underline" href="/sign-in">
             Sign in
           </Link>
         </p>
-        <div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
+        <div className="mt-8 flex flex-col gap-2 [&>input]:mb-3">
           <Label htmlFor="email">Email</Label>
           <Input name="email" placeholder="[email protected]" required />
           <Label htmlFor="password">Password</Label>

app/(auth-pages)/smtp-message.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export function SmtpMessage() {
   return (
-    <div className="bg-muted/50 px-5 py-3 border rounded-md flex gap-4">
+    <div className="flex gap-4 rounded-md border bg-muted/50 px-5 py-3">
       <InfoIcon size={16} className="mt-0.5" />
       <div className="flex flex-col gap-1">
         <small className="text-sm text-secondary-foreground">
@@ -14,7 +14,7 @@ export function SmtpMessage() {
           <Link
             href="https://supabase.com/docs/guides/auth/auth-smtp"
             target="_blank"
-            className="text-primary/50 hover:text-primary flex items-center text-sm gap-1"
+            className="flex items-center gap-1 text-sm text-primary/50 hover:text-primary"
           >
             Learn more <ArrowUpRight size={14} />
           </Link>

app/globals.css

@@ -2,6 +2,25 @@
 @tailwind components;
 @tailwind utilities;
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-lexend);
+}
+
+p,
+button,
+label,
+input,
+select,
+textarea,
+a {
+  font-family: var(--font-manjari);
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;

app/layout.tsx

@@ -1,21 +1,33 @@
-import DeployButton from "@/components/deploy-button";
-import { EnvVarWarning } from "@/components/env-var-warning";
-import HeaderAuth from "@/components/header-auth";
-import { ThemeSwitcher } from "@/components/theme-switcher";
-import { hasEnvVars } from "@/utils/supabase/check-env-vars";
 import { GeistSans } from "geist/font/sans";
 import { ThemeProvider } from "next-themes";
-import Link from "next/link";
+import { Lexend, Manjari } from "next/font/google";
 import "./globals.css";
 
 const defaultUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
   : "http://localhost:3000";
 
+const lexend = Lexend({
+  subsets: ["latin"],
+  variable: "--font-lexend",
+});
+
+const manjari = Manjari({
+  subsets: ["latin"],
+  variable: "--font-manjari",
+  weight: ["100", "400", "700"],
+});
+
 export const metadata = {
   metadataBase: new URL(defaultUrl),
-  title: "Next.js and Supabase Starter Kit",
-  description: "The fastest way to build apps with Next.js and Supabase",
+  title: "Songscribe",
+  description: "The fastest way to turn any song into sheet music",
+  icons: {
+    icon: {
+      url: "favicon.png",
+      type: "image/png",
+    },
+  },
 };
 
 export default function RootLayout({
@@ -24,45 +36,26 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={GeistSans.className} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`${lexend.variable} ${manjari.variable}`}
+      suppressHydrationWarning
+    >
       <body className="bg-background text-foreground">
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
-          <main className="min-h-screen flex flex-col items-center">
-            <div className="flex-1 w-full flex flex-col gap-20 items-center">
-              <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
-                <div className="w-full max-w-5xl flex justify-between items-center p-3 px-5 text-sm">
-                  <div className="flex gap-5 items-center font-semibold">
-                    <Link href={"/"}>Next.js Supabase Starter</Link>
-                    <div className="flex items-center gap-2">
-                      <DeployButton />
-                    </div>
-                  </div>
-                  {!hasEnvVars ? <EnvVarWarning /> : <HeaderAuth />}
-                </div>
-              </nav>
-              <div className="flex flex-col gap-20 max-w-5xl p-5">
+          <main className="flex min-h-screen flex-col items-center">
+            <div className="flex w-full flex-1 flex-col items-center gap-20">
+              <nav className="flex h-16 w-full justify-center border-b border-b-foreground/10"></nav>
+              <div className="flex max-w-5xl flex-col gap-20 p-5">
                 {children}
               </div>
 
-              <footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16">
-                <p>
-                  Powered by{" "}
-                  <a
-                    href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
-                    target="_blank"
-                    className="font-bold hover:underline"
-                    rel="noreferrer"
-                  >
-                    Supabase
-                  </a>
-                </p>
-                <ThemeSwitcher />
-              </footer>
+              <footer className="mx-auto flex w-full items-center justify-center gap-8 border-t py-16 text-center text-xs"></footer>
             </div>
           </main>
         </ThemeProvider>

app/page.tsx

@@ -1,15 +1,9 @@
-import Hero from "@/components/hero";
-import ConnectSupabaseSteps from "@/components/tutorial/connect-supabase-steps";
-import SignUpUserSteps from "@/components/tutorial/sign-up-user-steps";
-import { hasEnvVars } from "@/utils/supabase/check-env-vars";
-
 export default async function Index() {
   return (
     <>
-      <Hero />
-      <main className="flex-1 flex flex-col gap-6 px-4">
-        <h2 className="font-medium text-xl mb-4">Next steps</h2>
-        {hasEnvVars ? <SignUpUserSteps /> : <ConnectSupabaseSteps />}
+      <main className="flex flex-1 flex-col gap-6 px-4">
+        <h1 className="mb-4 text-xl font-semibold">Songscribe</h1>
+        <p>The fastest way to turn any song into sheet music</p>
       </main>
     </>
   );

app/protected/page.tsx

@@ -15,22 +15,22 @@ export default async function ProtectedPage() {
   }
 
   return (
-    <div className="flex-1 w-full flex flex-col gap-12">
+    <div className="flex w-full flex-1 flex-col gap-12">
       <div className="w-full">
-        <div className="bg-accent text-sm p-3 px-5 rounded-md text-foreground flex gap-3 items-center">
+        <div className="flex items-center gap-3 rounded-md bg-accent p-3 px-5 text-sm text-foreground">
           <InfoIcon size="16" strokeWidth={2} />
           This is a protected page that you can only see as an authenticated
           user
         </div>
       </div>
-      <div className="flex flex-col gap-2 items-start">
-        <h2 className="font-bold text-2xl mb-4">Your user details</h2>
-        <pre className="text-xs font-mono p-3 rounded border max-h-32 overflow-auto">
+      <div className="flex flex-col items-start gap-2">
+        <h2 className="mb-4 text-2xl font-bold">Your user details</h2>
+        <pre className="max-h-32 overflow-auto rounded border p-3 font-mono text-xs">
           {JSON.stringify(user, null, 2)}
         </pre>
       </div>
       <div>
-        <h2 className="font-bold text-2xl mb-4">Next steps</h2>
+        <h2 className="mb-4 text-2xl font-bold">Next steps</h2>
         <FetchDataSteps />
       </div>
     </div>

app/protected/reset-password/page.tsx

@@ -10,7 +10,7 @@ export default async function ResetPassword({
   searchParams: Message;
 }) {
   return (
-    <form className="flex flex-col w-full max-w-md p-4 gap-2 [&>input]:mb-4">
+    <form className="flex w-full max-w-md flex-col gap-2 p-4 [&>input]:mb-4">
       <h1 className="text-2xl font-medium">Reset password</h1>
       <p className="text-sm text-foreground/60">
         Please enter your new password below.

components/form-message.tsx

@@ -5,19 +5,19 @@ export type Message =
 
 export function FormMessage({ message }: { message: Message }) {
   return (
-    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
+    <div className="flex w-full max-w-md flex-col gap-2 text-sm">
       {"success" in message && (
-        <div className="text-foreground border-l-2 border-foreground px-4">
+        <div className="border-l-2 border-foreground px-4 text-foreground">
           {message.success}
         </div>
       )}
       {"error" in message && (
-        <div className="text-destructive-foreground border-l-2 border-destructive-foreground px-4">
+        <div className="border-l-2 border-destructive-foreground px-4 text-destructive-foreground">
           {message.error}
         </div>
       )}
       {"message" in message && (
-        <div className="text-foreground border-l-2 px-4">{message.message}</div>
+        <div className="border-l-2 px-4 text-foreground">{message.message}</div>
       )}
     </div>
   );