Skip to content

Commit 645c26c

Browse files
joao-gugeljoao-gugel
committed
feat: add setup page to public routes
1 parent 6589485 commit 645c26c

File tree

4 files changed

+323
-320
lines changed

4 files changed

+323
-320
lines changed

‎app/(auth)/layout.tsx

+17-9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import { ModeTogglePresentation } from "@/components/mode-toggle-presentation";
2+
3+
import Link from "next/link";
4+
15
import { ReactNode } from "react";
26

37
interface AuthLayoutProps {
@@ -6,16 +10,20 @@ interface AuthLayoutProps {
610

711
const AuthLayout = ({ children }: AuthLayoutProps) => {
812
return (
9-
<div className="min-w-full min-h-screen flex flex-col justify-start md:justify-center items-center">
10-
<div className="text-center w-full space-y-2 mb-5 mt-10 md:my-5">
11-
<h1 className="text-3xl md:text-6xl font-bold">
12-
in<span className="text-red-500">Control</span>
13-
</h1>
14-
<p className="text-medium md:text-xl text-base">
15-
Login to your account to be inControl.
16-
</p>
13+
<div className="relative">
14+
<header className="border h-16 flex items-center justify-center bg-glass fixed w-full">
15+
<nav className="w-full px-5 md:px-10 lg:max-w-[1300px] flex justify-between items-center">
16+
<Link href="/" className="text-xl font-bold md:text-3xl">
17+
in<span className="text-red-500">Control</span>
18+
</Link>
19+
<div className="flex items-center gap-2">
20+
<ModeTogglePresentation aria-label="change theme" />
21+
</div>
22+
</nav>
23+
</header>
24+
<div className="w-full min-h-screen flex justify-center items-center">
25+
{children}
1726
</div>
18-
{children}
1927
</div>
2028
);
2129
};

‎app/(setup)/page.tsx

+305-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,313 @@
1-
import { initialUser } from "@/lib/initial-user";
1+
import { ModeTogglePresentation } from "@/components/mode-toggle-presentation";
2+
import { Button } from "@/components/ui/button";
3+
4+
import {
5+
Card,
6+
CardContent,
7+
CardFooter,
8+
CardHeader,
9+
CardTitle,
10+
} from "@/components/ui/card";
11+
12+
import {
13+
Accordion,
14+
AccordionContent,
15+
AccordionItem,
16+
AccordionTrigger,
17+
} from "@/components/ui/accordion";
18+
19+
import {
20+
Coins,
21+
Github,
22+
Library,
23+
ListOrdered,
24+
LogIn,
25+
MoveRight,
26+
PieChart,
27+
Settings2,
28+
} from "lucide-react";
29+
30+
import Image from "next/image";
31+
32+
import Link from "next/link";
233

334
import { redirect } from "next/navigation";
435

5-
const SetupPage = async () => {
6-
const user = await initialUser();
36+
import { currentUser } from "@/lib/current-user";
37+
38+
const PresentationPage = async () => {
39+
const user = await currentUser();
740

841
if (user) return redirect("/home");
942

10-
return redirect("/sign-in");
43+
return (
44+
<main className="relative bg-gradient-to-b from-white to-[#f7f7f7] dark:from-black dark:to-[#0d0d0d]">
45+
<header className="border h-16 flex items-center justify-center bg-glass fixed w-full">
46+
<nav className="w-full px-5 md:px-10 lg:max-w-[1300px] flex justify-between items-center">
47+
<h1 className="text-xl font-bold md:text-3xl">
48+
in<span className="text-red-500">Control</span>
49+
</h1>
50+
<div className="flex items-center gap-2">
51+
<Link href="/sign-in" className="text-sm md:text-base">
52+
Login
53+
</Link>
54+
<ModeTogglePresentation aria-label="change theme" />
55+
</div>
56+
</nav>
57+
</header>
58+
<section className="w-full h-screen flex items-center justify-center">
59+
<div className="text-center px-5 lg:px-0">
60+
<h1 className="font-bold text-4xl md:text-6xl">Stay inControl</h1>
61+
<p className="mt-3 w-full md:w-[600px] lg:w-[700px] text-base md:text-lg lg:text-xl text-zinc-600 dark:text-zinc-400">
62+
Your easiest and simpliest way to control your finances, empowering
63+
you to manage your money with ease and transparency. Free.
64+
Accessible. Open Source.
65+
</p>
66+
<div className="space-x-2 md:space-x-4 mt-5">
67+
<Link href="/sign-in" aria-label="Go to login page">
68+
<Button variant="outline2" className="shadow-sm rounded-lg">
69+
<LogIn className="mr-2 w-4 h-4" /> Login
70+
</Button>
71+
</Link>
72+
<a
73+
href="https://github.com/jotavetech/incontrol3"
74+
target="_blank"
75+
aria-label="Go to project repository on github"
76+
>
77+
<Button variant="outline" className="shadow-sm rounded-lg">
78+
<Github className="mr-2 w-4 h-4" />
79+
Github
80+
</Button>
81+
</a>
82+
</div>
83+
<div className="w-full mt-7 lg:mt-8">
84+
<Image
85+
src="/images/homeWhite.png"
86+
width={1920}
87+
height={1080}
88+
className="object-cover w-full md:w-[700px] rounded-2xl shadow-xl dark:hidden"
89+
alt="inControl home page photo"
90+
/>
91+
<Image
92+
src="/images/homeBlack.png"
93+
width={1920}
94+
height={1080}
95+
className="object-cover w-full md:w-[700px] rounded-2xl shadow-xl hidden dark:block"
96+
alt="inControl home page photo"
97+
/>
98+
</div>
99+
</div>
100+
</section>
101+
<section className="w-full">
102+
<div className="text-center px-5 lg:px-0 w-full flex flex-col items-center">
103+
<h2 className="font-semibold text-2xl md:text-3xl">
104+
But Why inControl?
105+
</h2>
106+
<p className="mt-3 w-full md:w-[600px] lg:w-[700px] text-base md:text-lg lg:text-xl text-zinc-600 dark:text-zinc-400">
107+
If you are thinking about &ldquo;why should I use incontrol?&ldquo;
108+
I will list some amazing resources for you.
109+
</p>
110+
111+
<div className="max-w-full md:max-w-[1000px] flex gap-2 md:gap-5 mt-10 flex-wrap justify-center">
112+
<Card className="w-[320px] md:w-[300px] h-[300px] rounded-xl cursor-pointer shadow-sm hover:shadow-lg transition-shadow">
113+
<CardHeader>
114+
<CardTitle className="flex items-center text-xl justify-between">
115+
Filter Your Registers{" "}
116+
<Settings2 className="text-zinc-800 dark:text-zinc-400 " />
117+
</CardTitle>
118+
</CardHeader>
119+
<CardContent className="text-left text-lg">
120+
<p>
121+
With inControl you can see a list of your registration and
122+
filter by categories or date of the month.
123+
</p>
124+
</CardContent>
125+
<CardFooter>
126+
<Link
127+
href="/sign-in"
128+
className="text-zinc-800 dark:text-zinc-400 flex items-center gap-2 hover:translate-x-2 transition-transform"
129+
>
130+
Login <MoveRight />
131+
</Link>
132+
</CardFooter>
133+
</Card>
134+
<Card className="w-[320px] md:w-[300px] h-[300px] rounded-xl cursor-pointer shadow-sm hover:shadow-lg transition-shadow">
135+
<CardHeader>
136+
<CardTitle className="flex items-center text-xl justify-between">
137+
Order Your Registers{" "}
138+
<ListOrdered className="text-zinc-800 dark:text-zinc-400 " />
139+
</CardTitle>
140+
</CardHeader>
141+
<CardContent className="text-left text-lg">
142+
<p>
143+
In addition to that, you can also order the list of your
144+
transactions by date or amount value.
145+
</p>
146+
</CardContent>
147+
<CardFooter>
148+
<Link
149+
href="/sign-in"
150+
className="text-zinc-800 dark:text-zinc-400 flex items-center gap-2 hover:translate-x-2 transition-transform"
151+
>
152+
Login <MoveRight />
153+
</Link>
154+
</CardFooter>
155+
</Card>
156+
<Card className="w-[320px] md:w-[300px] h-[300px] rounded-xl cursor-pointer shadow-sm hover:shadow-lg transition-shadow">
157+
<CardHeader>
158+
<CardTitle className="flex items-center text-xl justify-between">
159+
Register Categories{" "}
160+
<Library className="text-zinc-800 dark:text-zinc-400 " />
161+
</CardTitle>
162+
</CardHeader>
163+
<CardContent className="text-left text-lg">
164+
<p>
165+
You can create a register by defining your category and type
166+
(expense) or (entry).
167+
</p>
168+
</CardContent>
169+
<CardFooter>
170+
<Link
171+
href="/sign-in"
172+
className="text-zinc-800 dark:text-zinc-400 flex items-center gap-2 hover:translate-x-2 transition-transform"
173+
>
174+
Login <MoveRight />
175+
</Link>
176+
</CardFooter>
177+
</Card>
178+
<Card className="w-[320px] md:w-[300px] h-[300px] rounded-xl cursor-pointer shadow-sm hover:shadow-lg transition-shadow">
179+
<CardHeader>
180+
<CardTitle className="flex items-center text-xl justify-between">
181+
Financial Status{" "}
182+
<Coins className="text-zinc-800 dark:text-zinc-400 " />
183+
</CardTitle>
184+
</CardHeader>
185+
<CardContent className="text-left text-lg">
186+
<p>
187+
InControl will show you how much money is remaining or
188+
missing, either overall or for the current month.
189+
</p>
190+
</CardContent>
191+
<CardFooter>
192+
<Link
193+
href="/sign-in"
194+
className="text-zinc-800 dark:text-zinc-400 flex items-center gap-2 hover:translate-x-2 transition-transform"
195+
>
196+
Login <MoveRight />
197+
</Link>
198+
</CardFooter>
199+
</Card>
200+
<Card className="w-[320px] md:w-[300px] h-[300px] rounded-xl cursor-pointer shadow-sm hover:shadow-lg transition-shadow">
201+
<CardHeader>
202+
<CardTitle className="flex items-center text-xl justify-between">
203+
Categories Graph{" "}
204+
<PieChart className="text-zinc-800 dark:text-zinc-400 " />
205+
</CardTitle>
206+
</CardHeader>
207+
<CardContent className="text-left text-lg">
208+
<p>
209+
On the Analytics page, you&apos;ll see graphs of your most
210+
frequently used transaction categories.
211+
</p>
212+
</CardContent>
213+
<CardFooter>
214+
<Link
215+
href="/sign-in"
216+
className="text-zinc-800 dark:text-zinc-400 flex items-center gap-2 hover:translate-x-2 transition-transform"
217+
>
218+
Login <MoveRight />
219+
</Link>
220+
</CardFooter>
221+
</Card>
222+
</div>
223+
</div>
224+
</section>
225+
<section className="w-full mt-20 flex flex-col items-center">
226+
<div className="text-center px-5 lg:px-0 ">
227+
<h1 className="font-bold text-4xl md:text-6xl">FAQ</h1>
228+
<p className="mt-3 w-full md:w-[600px] lg:w-[700px] text-base md:text-lg lg:text-xl text-zinc-600 dark:text-zinc-400">
229+
You might have some questions, so I&apos;ll try to answer some of
230+
them here to make your life easier.
231+
</p>
232+
</div>
233+
<div className="my-10 w-full px-10 flex justify-center">
234+
<Accordion type="multiple" className="w-full md:w-[600px]">
235+
<AccordionItem value="item-1">
236+
<AccordionTrigger>
237+
How do I add a new transaction?
238+
</AccordionTrigger>
239+
<AccordionContent>
240+
In the InControl navigation bar, you&apos;ll find an &ldquo;Add
241+
Record&ldquo; button. There, you can choose how you&apos;d like
242+
to create and submit it.
243+
</AccordionContent>
244+
</AccordionItem>
245+
<AccordionItem value="item-2">
246+
<AccordionTrigger>
247+
Can I categorize my registers?
248+
</AccordionTrigger>
249+
<AccordionContent>
250+
Yes, you can categorize your expenses at the time of creation.
251+
You&apos;ll have a &ldquo;category&ldquo; field where you can
252+
choose one of the listed categories.
253+
</AccordionContent>
254+
</AccordionItem>
255+
<AccordionItem value="item-3">
256+
<AccordionTrigger>
257+
How can I track my current balance?
258+
</AccordionTrigger>
259+
<AccordionContent>
260+
In the InControl menu, you&apos;ll find a card displaying your
261+
current month status, showing how much money is remaining or
262+
lacking for the month.
263+
</AccordionContent>
264+
</AccordionItem>
265+
<AccordionItem value="item-4">
266+
<AccordionTrigger>
267+
How do I view expense reports?
268+
</AccordionTrigger>
269+
<AccordionContent>
270+
On the analytics page, you&apos;ll also find an overall status
271+
and one for the current month. You can also view and export
272+
charts showing the categories in which you&apos;ve had the most
273+
records created.
274+
</AccordionContent>
275+
</AccordionItem>
276+
<AccordionItem value="item-5">
277+
<AccordionTrigger>
278+
How do I send bug reports or contribute to the project?
279+
</AccordionTrigger>
280+
<AccordionContent>
281+
To contribute to the project or submit your bug report, you can
282+
access our GitHub repository and create your issue or pull
283+
request by{" "}
284+
<a
285+
href="https://github.com/jotavetech/incontrol3"
286+
className="underline text-blue-900"
287+
target="_blank"
288+
>
289+
clicking here
290+
</a>
291+
.
292+
</AccordionContent>
293+
</AccordionItem>
294+
</Accordion>
295+
</div>
296+
</section>
297+
<footer className="w-full py-4 bg-white dark:bg-black text-center">
298+
<p>
299+
InControl is an app created with much ❤️ by{" "}
300+
<a
301+
href="https://beacons.ai/jotavetech"
302+
className="underline text-blue-900"
303+
target="_blank"
304+
>
305+
@jotavetech
306+
</a>
307+
</p>
308+
</footer>
309+
</main>
310+
);
11311
};
12312

13-
export default SetupPage;
313+
export default PresentationPage;

0 commit comments

Comments
 (0)