add pages
Seto Elkahfi committed
Jul 30, 2024 at 00:47 UTC
8fb79437319973ec3399e341f4cdfa4af2577c06
13 files changed
+295
-60
frontend/splitfire-web/app/_components/footer.tsx
new
+45
@@ -0,0 +1,45 @@
1
+import Link from "next/link";
2
+
3
+export default function Footer() {
4
+ return (
5
+ <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
6
+ <Link href="/just-play" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
7
+ <h2 className="mb-3 text-2xl font-semibold">
8
+ Just play!
9
+ </h2>
10
+ <p className="m-0 max-w-[30ch] text-sm opacity-50">
11
+ No hassle. No waste time.
12
+ </p>
13
+ </Link>
14
+
15
+ <Link href="/learn" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
16
+ <h2 className="mb-3 text-2xl font-semibold">
17
+ Learn!{" "}
18
+ </h2>
19
+ <p className="m-0 max-w-[30ch] text-sm opacity-50">
20
+ Learn, practice, repeat! When you're done, just play!
21
+ </p>
22
+ </Link>
23
+
24
+ <Link href="/community" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
25
+ <h2 className="mb-3 text-2xl font-semibold">
26
+ Community{" "}
27
+ </h2>
28
+ <p className="m-0 max-w-[30ch] text-sm opacity-50">
29
+ Play with your friends.
30
+ </p>
31
+ </Link>
32
+ <Link href="/download" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
33
+ <h2 className="mb-3 text-2xl font-semibold">
34
+ Download desktop app{" "}
35
+ <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
36
+ ->
37
+ </span>
38
+ </h2>
39
+ <p className="m-0 max-w-[30ch] text-sm opacity-50">
40
+ And start playing now!
41
+ </p>
42
+ </Link>
43
+ </div>
44
+ );
45
+}
frontend/splitfire-web/app/_components/header.tsx
new
+24
@@ -0,0 +1,24 @@
1
+import Link from "next/link";
2
+import Image from "next/image";
3
+
4
+export default function Header() {
5
+ return (
6
+ <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
7
+ <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
8
+ <Link href="/about" className="underline">SplitFire</Link>
9
+ <code className="font-mono font-bold">intelligent expression engine.</code>
10
+ </p>
11
+ <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
12
+ <Link href="/" className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0">
13
+ <Image
14
+ src="/128x128@2x.png"
15
+ alt="SplitFire logo"
16
+ width={100}
17
+ height={24}
18
+ priority
19
+ />
20
+ </Link>
21
+ </div>
22
+ </div>
23
+ );
24
+}
\ No newline at end of file
frontend/splitfire-web/app/about/layout.tsx
new
+22
@@ -0,0 +1,22 @@
1
+import type { Metadata } from "next";
2
+import { Inter } from "next/font/google";
3
+import "./../globals.css";
4
+
5
+const inter = Inter({ subsets: ["latin"] });
6
+
7
+export const metadata: Metadata = {
8
+ title: "About",
9
+ description: "Learn more about Splitfire",
10
+};
11
+
12
+export default function RootLayout({
13
+ children,
14
+}: Readonly<{
15
+ children: React.ReactNode;
16
+}>) {
17
+ return (
18
+ <html lang="en">
19
+ <body className={inter.className}>{children}</body>
20
+ </html>
21
+ );
22
+}
frontend/splitfire-web/app/about/page.tsx
new
+24
@@ -0,0 +1,24 @@
1
+import Footer from "../_components/footer";
2
+import Header from "../_components/header";
3
+
4
+export default function Home() {
5
+ return (
6
+ <main className="flex min-h-screen flex-col items-center justify-between p-24">
7
+ <Header />
8
+ <div className="relative z-[-1] before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
9
+ <h1 className="text-6xl text-transparent bg-clip-text bg-gradient-to-br from-sky-500 to-blue-500 dark:from-sky-900 dark:to-blue-900 sm:text-8xl">
10
+ SplitFire
11
+ </h1>
12
+ <div>
13
+ <p>
14
+ SplitFire is a free and open-source software that allows you to
15
+ easily create backing tracks for your music. It is designed to be
16
+ simple and easy to use, so you can focus on making music.
17
+ </p>
18
+ </div>
19
+ </div>
20
+
21
+ <Footer />
22
+ </main>
23
+ );
24
+}
frontend/splitfire-web/app/community/layout.tsx
new
+22
@@ -0,0 +1,22 @@
1
+import type { Metadata } from "next";
2
+import { Inter } from "next/font/google";
3
+import "./../globals.css";
4
+
5
+const inter = Inter({ subsets: ["latin"] });
6
+
7
+export const metadata: Metadata = {
8
+ title: "Community",
9
+ description: "Join the community and start playing!",
10
+};
11
+
12
+export default function RootLayout({
13
+ children,
14
+}: Readonly<{
15
+ children: React.ReactNode;
16
+}>) {
17
+ return (
18
+ <html lang="en">
19
+ <body className={inter.className}>{children}</body>
20
+ </html>
21
+ );
22
+}
frontend/splitfire-web/app/community/page.tsx
new
+23
@@ -0,0 +1,23 @@
1
+import Footer from "../_components/footer";
2
+import Header from "../_components/header";
3
+
4
+export default function Home() {
5
+ return (
6
+ <main className="flex min-h-screen flex-col items-center justify-between p-24">
7
+ <Header />
8
+ <div className="relative z-[-1] before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
9
+ <h1 className="text-6xl text-transparent bg-clip-text bg-gradient-to-br from-sky-500 to-blue-500 dark:from-sky-900 dark:to-blue-900 sm:text-8xl">
10
+ Community
11
+ </h1>
12
+ <ul>
13
+ <li>Export your playlist.</li>
14
+ <li>Join the community.</li>
15
+ <li>Start playing.</li>
16
+ <li>Start sharing.</li>
17
+ </ul>
18
+ </div>
19
+
20
+ <Footer />
21
+ </main>
22
+ );
23
+}
frontend/splitfire-web/app/download/layout.tsx
new
+22
@@ -0,0 +1,22 @@
1
+import type { Metadata } from "next";
2
+import { Inter } from "next/font/google";
3
+import "./../globals.css";
4
+
5
+const inter = Inter({ subsets: ["latin"] });
6
+
7
+export const metadata: Metadata = {
8
+ title: "Download free desktop app",
9
+ description: "Download Splitfire for free and start playing!",
10
+};
11
+
12
+export default function RootLayout({
13
+ children,
14
+}: Readonly<{
15
+ children: React.ReactNode;
16
+}>) {
17
+ return (
18
+ <html lang="en">
19
+ <body className={inter.className}>{children}</body>
20
+ </html>
21
+ );
22
+}
frontend/splitfire-web/app/download/page.tsx
new
+21
@@ -0,0 +1,21 @@
1
+import Footer from "../_components/footer";
2
+import Header from "../_components/header";
3
+
4
+export default function Home() {
5
+ return (
6
+ <main className="flex min-h-screen flex-col items-center justify-between p-24">
7
+ <Header />
8
+ <div className="relative z-[-1] before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
9
+ <h1 className="text-6xl text-transparent bg-clip-text bg-gradient-to-br from-sky-500 to-blue-500 dark:from-sky-900 dark:to-blue-900 sm:text-8xl box width-mx">
10
+ Free Download!
11
+ </h1>
12
+ <ul>
13
+ <li>Download our free desktop app</li>
14
+ <li>Windows, Mac, and Linux.</li>
15
+ </ul>
16
+ </div>
17
+
18
+ <Footer />
19
+ </main>
20
+ );
21
+}
frontend/splitfire-web/app/just-play/layout.tsx
new
+22
@@ -0,0 +1,22 @@
1
+import type { Metadata } from "next";
2
+import { Inter } from "next/font/google";
3
+import "./../globals.css";
4
+
5
+const inter = Inter({ subsets: ["latin"] });
6
+
7
+export const metadata: Metadata = {
8
+ title: "Just play!",
9
+ description: "No more wasting time looking for perfect pitch",
10
+};
11
+
12
+export default function RootLayout({
13
+ children,
14
+}: Readonly<{
15
+ children: React.ReactNode;
16
+}>) {
17
+ return (
18
+ <html lang="en">
19
+ <body className={inter.className}>{children}</body>
20
+ </html>
21
+ );
22
+}
frontend/splitfire-web/app/just-play/page.tsx
new
+22
@@ -0,0 +1,22 @@
1
+import Footer from "../_components/footer";
2
+import Header from "../_components/header";
3
+
4
+export default function Home() {
5
+ return (
6
+ <main className="flex min-h-screen flex-col items-center justify-between p-24">
7
+ <Header />
8
+ <div className="relative z-[-1] before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
9
+ <h1 className="text-6xl text-transparent bg-clip-text bg-gradient-to-br from-sky-500 to-blue-500 dark:from-sky-900 dark:to-blue-900 sm:text-8xl">
10
+ Just play!
11
+ </h1>
12
+ <ul>
13
+ <li>No more wasting time looking for perfect pithc</li>
14
+ <li>No more wasting time preparing backing track</li>
15
+ <li>Just plug your soundcard and play!</li>
16
+ </ul>
17
+ </div>
18
+
19
+ <Footer />
20
+ </main>
21
+ );
22
+}
frontend/splitfire-web/app/learn/layout.tsx
new
+22
@@ -0,0 +1,22 @@
1
+import type { Metadata } from "next";
2
+import { Inter } from "next/font/google";
3
+import "./../globals.css";
4
+
5
+const inter = Inter({ subsets: ["latin"] });
6
+
7
+export const metadata: Metadata = {
8
+ title: "Learn",
9
+ description: "Learn, practice, and repeat",
10
+};
11
+
12
+export default function RootLayout({
13
+ children,
14
+}: Readonly<{
15
+ children: React.ReactNode;
16
+}>) {
17
+ return (
18
+ <html lang="en">
19
+ <body className={inter.className}>{children}</body>
20
+ </html>
21
+ );
22
+}
frontend/splitfire-web/app/learn/page.tsx
new
+22
@@ -0,0 +1,22 @@
1
+import Footer from "../_components/footer";
2
+import Header from "../_components/header";
3
+
4
+export default function Home() {
5
+ return (
6
+ <main className="flex min-h-screen flex-col items-center justify-between p-24">
7
+ <Header />
8
+ <div className="relative z-[-1] before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
9
+ <h1 className="text-6xl text-transparent bg-clip-text bg-gradient-to-br from-sky-500 to-blue-500 dark:from-sky-900 dark:to-blue-900 sm:text-8xl">
10
+ Learn!
11
+ </h1>
12
+ <ul>
13
+ <li>Start learning.</li>
14
+ <li>Start practicing.</li>
15
+ <li>Start playing.</li>
16
+ </ul>
17
+ </div>
18
+
19
+ <Footer />
20
+ </main>
21
+ );
22
+}
frontend/splitfire-web/app/page.tsx
+4
-60
@@ -1,73 +1,17 @@
1
-import Image from "next/image";
2
-import Link from "next/link";
1
+import Footer from "./_components/footer";
2
+import Header from "./_components/header";
3
4
export default function Home() {
5
return (
6
<main className="flex min-h-screen flex-col items-center justify-between p-24">
7
- <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
8
- <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
9
- <Link href="/about" className="underline">SplitFire</Link>
10
- <code className="font-mono font-bold">intelligent expression engine.</code>
11
- </p>
12
- <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
13
- <Link href="/" className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0">
14
- <Image
15
- src="/128x128@2x.png"
16
- alt="SplitFire logo"
17
- width={100}
18
- height={24}
19
- priority
20
- />
21
- </Link>
22
- </div>
23
- </div>
24
-
25
-
7
+ <Header />
8
<div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
9
<h1 className="text-6xl font-bold text-center text-transparent bg-clip-text bg-gradient-to-br from-sky-500 to-blue-500 dark:from-sky-900 dark:to-blue-900 sm:text-8xl">
10
Just play!
11
</h1>
12
</div>
13
32
- <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
33
- <Link href="/just-play" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
34
- <h2 className="mb-3 text-2xl font-semibold">
35
- Just play!
36
- </h2>
37
- <p className="m-0 max-w-[30ch] text-sm opacity-50">
38
- No hassle. No waste time.
39
- </p>
40
- </Link>
41
-
42
- <Link href="/learn" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
43
- <h2 className="mb-3 text-2xl font-semibold">
44
- Learn!{" "}
45
- </h2>
46
- <p className="m-0 max-w-[30ch] text-sm opacity-50">
47
- Learn, practice, repeat! When you're done, just play!
48
- </p>
49
- </Link>
50
-
51
- <Link href="/community" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
52
- <h2 className="mb-3 text-2xl font-semibold">
53
- Community{" "}
54
- </h2>
55
- <p className="m-0 max-w-[30ch] text-sm opacity-50">
56
- Play with your friends.
57
- </p>
58
- </Link>
59
- <Link href="/download" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
60
- <h2 className="mb-3 text-2xl font-semibold">
61
- Download desktop app{" "}
62
- <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
63
- ->
64
- </span>
65
- </h2>
66
- <p className="m-0 max-w-[30ch] text-sm opacity-50">
67
- And start playing now!
68
- </p>
69
- </Link>
70
- </div>
14
+ <Footer />
15
</main>
16
);
17
}