Skip to content

Commit

Permalink
feat: improve styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjaminshafii
benjaminshafii committed Nov 8, 2024
1 parent 4c8fd31 commit 9eeafa5
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 140 deletions.
3 changes: 0 additions & 3 deletions web/app/components/license-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,6 @@ const LicenseForm = () => {
</>
) : (
<div className="text-center">
<h1 className="text-gray-800 text-5xl font-extrabold dark:text-gray-500">
Become a Pro user
</h1>
<div className="mt-6">
<CheckoutButton />
</div>
Expand Down
203 changes: 109 additions & 94 deletions web/app/dashboard/lifetime/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,133 @@
import { Button } from "@/components/ui/button";
import { UserButton } from "@clerk/nextjs";
import { LicenseForm } from "@/app/components/license-form";


import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default async function LifetimeAccessPage() {
if (process.env.ENABLE_USER_MANAGEMENT !== "true") {
return <div>User management is disabled</div>;
return (
<div className="p-4 border border-stone-300 text-center text-xl">
User management is disabled
</div>
);
}

return (
<div className="min-h-screen p-4 bg-gray-100 font-mono">
<div className="max-w-6xl mx-auto">
<h1 className="text-4xl font-bold mb-8 border-b-4 border-black pb-2">Lifetime Access Setup</h1>
<div className="min-h-screen bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800">
<main className="container mx-auto px-4 py-12">
<h1 className="text-4xl font-bold mb-8">Lifetime Access Setup</h1>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="grid md:grid-cols-2 gap-12">
<div>
<h2 className="text-2xl font-bold mb-4 uppercase">Watch Tutorial</h2>
<div className="aspect-video">
<iframe
className="w-full h-full"
src="https://www.youtube.com/embed/hOobrzAlW3Q?controls=1&modestbranding=1&showinfo=0"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
<Card className="p-4 bg-transparent bg-center bg-cover">
<CardContent>
<div className="aspect-video mb-4">
<iframe
className="w-full h-full rounded-lg shadow-lg"
src="https://www.youtube.com/embed/hOobrzAlW3Q?controls=1&modestbranding=1&showinfo=0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
</CardContent>
</Card>

<div className="mt-8">
<h2 className="text-2xl font-bold mb-4 uppercase">Generate License</h2>
<div className="border-2 border-black p-4">
<Card className="mt-8 p-4 bg-transparent">
<CardHeader>
<CardTitle>Generate License</CardTitle>
</CardHeader>
<CardContent>
<LicenseForm />
</div>
</div>
</CardContent>
</Card>
</div>

<div>
<h2 className="text-2xl font-bold mb-4 uppercase">Setup Instructions</h2>
<ol className="list-decimal list-inside space-y-4">
<li className="border-2 border-black p-4">
<strong>Deploy your instance:</strong>
<div className="flex gap-4 mt-2 items-center">
<a
href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdifferent-ai%2Ffile-organizer-2000%2Ftree%2Fmaster%2Fweb&env=OPENAI_API_KEY,SOLO_API_KEY&envDescription=For%20SOLO_API_KEY%2C%20enter%20your%20lifetime%20license%20key%20you%20generated%20on%20the%20dashboard&envLink=https%3A%2F%2Fgithub.com%2Fdifferent-ai%2Ffile-organizer-2000%2Fblob%2Fmaster%2Ftutorials%2Fenv-vars.md&project-name=file-organizer-2000&repository-name=file-organizer-2000&build-command=npm%20run%20build:self-host"
target="_blank"
rel="noopener noreferrer"
>
<img
src="https://vercel.com/button"
alt="Deploy with Vercel"
className="hover:bg-gray-200 transition-colors"
/>
</a>
or
<a
href="https://render.com/deploy?repo=https://github.com/different-ai/file-organizer-2000"
target="_blank"
rel="noopener noreferrer"
>
<img
src="https://render.com/images/deploy-to-render-button.svg"
alt="Deploy to Render"
className="rounded-md hover:bg-gray-200 transition-colors"
/>
</a>
</div>
<ul className="list-disc list-inside mt-4 text-sm">
<li>You'll need to sign up/in on Vercel and GitHub.</li>
<li>
During deployment, enter your{" "}
<Card className="p-4 bg-transparent">
<CardContent>
<ol className="space-y-4">
<li className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
<strong>Deploy your instance:</strong>
<div className="flex gap-4 mt-2 items-center">
<a
href="https://platform.openai.com/api-keys"
href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdifferent-ai%2Ffile-organizer-2000%2Ftree%2Fmaster%2Fweb&env=OPENAI_API_KEY,SOLO_API_KEY&envDescription=For%20SOLO_API_KEY%2C%20enter%20your%20lifetime%20license%20key%20you%20generated%20on%20the%20dashboard&envLink=https%3A%2F%2Fgithub.com%2Fdifferent-ai%2Ffile-organizer-2000%2Fblob%2Fmaster%2Ftutorials%2Fenv-vars.md&project-name=file-organizer-2000&repository-name=file-organizer-2000&build-command=npm%20run%20build:self-host"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline"
>
OpenAI API Key
<img
src="https://vercel.com/button"
alt="Deploy with Vercel"
className="hover:bg-gray-200 transition-colors"
/>
</a>
. Make sure you have added credits to your account.
</li>
<li>
For the SOLO_API_KEY, use the license key generated in the "Generate License" section below.
</li>
</ul>
<p className="mt-4 text-sm">
<strong>Note on Render:</strong> Deployment on Render costs €7/month. However, Render provides automatic updates for your installation, ensuring you always have the latest version.
</p>
</li>
<li className="border-2 border-black p-4">
<strong>Configure plugin:</strong>
<ul className="list-disc list-inside mt-2">
<li>Go to Obsidian settings</li>
<li>Enable "Self-Hosting" toggle</li>
<li>Enter your Vercel URL</li>
</ul>
</li>
<li className="border-2 border-black p-4">
<strong>Activate license:</strong>
<ul className="list-disc list-inside mt-2">
<li>Enter license key in plugin settings</li>
<li>Click "Activate" button</li>
</ul>
</li>
</ol>
</div>
or
<a
href="https://render.com/deploy?repo=https://github.com/different-ai/file-organizer-2000"
target="_blank"
rel="noopener noreferrer"
>
<img
src="https://render.com/images/deploy-to-render-button.svg"
alt="Deploy to Render"
className="rounded-md hover:bg-gray-200 transition-colors"
/>
</a>
</div>
<ul className="list-disc list-inside mt-4 text-sm">
<li>You'll need to sign up/in on Vercel and GitHub.</li>
<li>
During deployment, enter your{" "}
<a
href="https://platform.openai.com/api-keys"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline"
>
OpenAI API Key
</a>
. Make sure you have added credits to your account.
</li>
<li>
For the SOLO_API_KEY, use the license key generated in the "Generate License" section below.
</li>
</ul>
<p className="mt-4 text-sm">
<strong>Note on Render:</strong> Deployment on Render costs €7/month. However, Render provides automatic updates for your installation, ensuring you always have the latest version.
</p>
</li>
<li className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
<strong>Configure plugin:</strong>
<ul className="list-disc list-inside mt-2">
<li>Go to Obsidian settings</li>
<li>Enable "Self-Hosting" toggle</li>
<li>Enter your Vercel URL</li>
</ul>
</li>
<li className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
<strong>Activate license:</strong>
<ul className="list-disc list-inside mt-2">
<li>Enter license key in plugin settings</li>
<li>Click "Activate" button</li>
</ul>
</li>
</ol>
</CardContent>
</Card>
</div>

<div className="mt-12 text-center">
<h2 className="text-2xl font-bold mb-4 uppercase">Get the Plugin</h2>
<a href="obsidian://show-plugin?id=fileorganizer2000">
<Button className="w-full max-w-xs bg-black text-white hover:bg-gray-800">Download</Button>
</a>
<p className="mt-3 text-sm">Requires Obsidian app.</p>
</div>
</div>
<footer className="mt-12 text-center">
<Card className="p-4 bg-transparent inline-block">
<CardHeader>
<CardTitle className="text-center mb-3">Get the Plugin</CardTitle>
</CardHeader>
<CardContent>
<a href="obsidian://show-plugin?id=fileorganizer2000">
<Button className="w-full" variant="default">Download</Button>
</a>
<p className="mt-3 text-sm text-muted-foreground">Requires Obsidian app.</p>
</CardContent>
</Card>
</footer>
</main>
</div>
);
}
85 changes: 44 additions & 41 deletions web/app/dashboard/subscribers/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,64 @@
import { LicenseForm } from "@/app/components/license-form";
import { Button } from "@/components/ui/button";
import { ArrowDownIcon } from "@/components/ui/icons";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function SubscribersDashboard() {
if (process.env.ENABLE_USER_MANAGEMENT !== "true") {
return (
<div className="p-4 border-4 border-black text-center font-mono text-xl">
<div className="p-4 border border-stone-300 text-center text-xl">
User management is disabled
</div>
);
}
return (
<div className="min-h-screen p-4 bg-white font-mono">
<div className="max-w-6xl mx-auto">
<h1 className="text-4xl font-bold mb-8 border-b-4 border-black pb-2 uppercase">
Subscriber Dashboard
<div className="min-h-screen bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800">
<main className="container mx-auto px-4 py-12">
<h1 className="text-4xl font-bold mb-8">
Welcome to File Organizer 2000
</h1>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="border-4 border-black p-4">
<h2 className="text-2xl font-bold mb-4 uppercase">
Watch Tutorial
</h2>
<div className="aspect-video mb-4">
<iframe
className="w-full h-full border-2 border-black"
src="https://www.youtube.com/embed/XZTpbECqZps?controls=1&modestbranding=1&showinfo=0"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
</div>
<div className="grid md:grid-cols-2 gap-12">
{/* Tutorial Card */}
<Card className="p-4 bg-transparent bg-center bg-cover">
<CardHeader>
<CardTitle className="text-center mb-3">How do I use the plugin?</CardTitle>
</CardHeader>
<CardContent>
<div className="aspect-video mb-4">
<iframe
className="w-full h-full rounded-lg shadow-lg"
src="https://www.youtube.com/embed/XZTpbECqZps?controls=1&modestbranding=1&showinfo=0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
</CardContent>
</Card>

<div className="border-4 border-black p-4">
<h2 className="text-2xl font-bold mb-4 uppercase">
Generate License
</h2>
<div className="p-4 mb-8">
<LicenseForm />
</div>
{/* License Card */}
<Card className="p-4 bg-transparent bg-center bg-cover">
<CardContent>
<div className="mb-8">
<LicenseForm />
</div>

<div className="text-center p-4">
<ArrowDownIcon className="mx-auto h-12 w-12 text-black" />
<p className="text-2xl font-bold mt-2 mb-4 uppercase">
Get the plugin
</p>
<a href="obsidian://show-plugin?id=fileorganizer2000">
<Button className="w-full bg-black text-white hover:bg-gray-800 uppercase">
Download
</Button>
</a>
<p className="mt-3 text-sm">Requires Obsidian app.</p>
</div>
</div>
<div className="text-center">
<ArrowDownIcon className="mx-auto h-12 w-12" />
<p className="text-2xl font-bold mt-2 mb-4">
Get the plugin
</p>
<a href="obsidian://show-plugin?id=fileorganizer2000">
<Button className="w-full" variant="default">
Download
</Button>
</a>
<p className="mt-3 text-sm text-muted-foreground">Requires Obsidian app.</p>
</div>
</CardContent>
</Card>
</div>
</div>
</main>
</div>
);
}
2 changes: 1 addition & 1 deletion web/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function RootLayout({
<header className="p-4 border-b border-stone-300">
<nav className="max-w-9xl mx-auto flex items-center space-x-6 justify-between w-full">
<div className=" sm:block">
<Link href="/dashboard">
<Link href="/">
<Logo />
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion web/components/ui/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as React from "react";
import { cn } from "@/lib/utils";

const buttonVariants = cva(
"inline-flex items-center justify-center text-sm font-bold uppercase border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50",
"inline-flex items-center justify-center text-sm font-medium border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 rounded-lg",
{
variants: {
variant: {
Expand Down

0 comments on commit 9eeafa5

Please sign in to comment.