Skip to content

Commit 78f49fe

Browse files
committed
feat: new design
1 parent 978b803 commit 78f49fe

19 files changed

Lines changed: 1546 additions & 183 deletions

app/_components/Accordion.tsx

Lines changed: 0 additions & 36 deletions
This file was deleted.

app/_components/Navbar.tsx

Lines changed: 0 additions & 46 deletions
This file was deleted.

app/about/page.tsx

Lines changed: 0 additions & 20 deletions
This file was deleted.

app/faq/page.tsx

Lines changed: 114 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,117 @@
1-
import Accordion from '../_components/Accordion';
1+
import {
2+
Accordion,
3+
AccordionContent,
4+
AccordionItem,
5+
AccordionTrigger,
6+
} from '@/components/ui/accordion';
27

38
export default function FAQ() {
4-
return (
5-
<main className="flex flex-1 flex-col items-center px-4 py-20 md:justify-center md:py-0">
6-
<div className="mb-16 max-w-3xl w-full">
7-
<h1 className="text-4xl font-bold md:text-5xl">FAQ</h1>
8-
<p className="mt-4 text-gray-400">Frequently Asked Questions</p>
9-
<div className="mt-8 space-y-4">
10-
<Accordion question="What is Cobalt?">
11-
Cobalt is a mod for Minecraft 1.21.10 which speeds up the slow progression of Hypixel Skyblock; it is currently in development and is not yet available for download.
12-
</Accordion>
13-
<Accordion question="What is a Cobalt Addon?">
14-
An addon is a plugin for Cobalt which extends Cobalt&apos;s functionality by adding new features and commands.
15-
</Accordion>
16-
<Accordion question="Does Cobalt have a discord?">
17-
Yes, Cobalt has a discord server which can be found at <a href="https://discord.com/invite/GAhS8UfDyy" className="text-blue-400 hover:underline">discord.gg/GAhS8UfDyy</a>.
18-
</Accordion>
19-
<Accordion question="Is Cobalt safe to use?">
20-
The base mod and approved addons are safe from malware. However, Cobalt violates Hypixel&apos;s rules therefore we try our best to prevent bans, we cannot ensure that Cobalt will not cause you to get banned.
21-
</Accordion>
22-
<Accordion question="How do I install Cobalt?">
23-
As of right now, Cobalt is not available for download, once it is released, you can find the installation instructions here: First, install <a href="https://fabricmc.net/use/" className="text-blue-400 hover:underline">Fabric Loader</a> for Minecraft 1.21.10. Then, download the Cobalt mod file and place it in your <code className="bg-white/10 px-1.5 py-0.5 rounded text-sm">mods</code> folder located in your <code className="bg-white/10 px-1.5 py-0.5 rounded text-sm">.minecraft</code> directory. Launch Minecraft with the Fabric profile and you&apos;re ready to go.
24-
</Accordion>
25-
<Accordion question="Is Cobalt free?">
26-
Yes, Cobalt is free to use.
27-
</Accordion>
28-
<Accordion question="Can I contribute to Cobalt?">
29-
Not currently, after the mod is open source we will be open for contributions.
30-
</Accordion>
31-
<Accordion question="Will I get banned for using Cobalt?">
32-
While we work hard to prevent bans, we cannot ensure that Cobalt will not cause you to get banned.
33-
</Accordion>
34-
</div>
35-
</div>
36-
</main>
37-
)
9+
return (
10+
<main className="flex flex-1 flex-col items-center px-4 py-20 md:justify-center md:py-0">
11+
<div className="mb-16 max-w-3xl w-full">
12+
<h1 className="text-4xl font-bold md:text-5xl">FAQ</h1>
13+
<p className="mt-4 text-gray-400">
14+
Frequently Asked Questions
15+
</p>
16+
<Accordion type="single" collapsible className="mt-8 w-full">
17+
<AccordionItem value="item-1">
18+
<AccordionTrigger>What is Cobalt?</AccordionTrigger>
19+
<AccordionContent>
20+
Cobalt is a mod for Minecraft 1.21.10 which speeds up
21+
the slow progression of Hypixel Skyblock; it is
22+
currently in development and is not yet available for
23+
download.
24+
</AccordionContent>
25+
</AccordionItem>
26+
<AccordionItem value="item-2">
27+
<AccordionTrigger>
28+
What is a Cobalt Addon?
29+
</AccordionTrigger>
30+
<AccordionContent>
31+
An addon is a plugin for Cobalt which extends
32+
Cobalt&apos;s functionality by adding new features and
33+
commands.
34+
</AccordionContent>
35+
</AccordionItem>
36+
<AccordionItem value="item-3">
37+
<AccordionTrigger>
38+
Does Cobalt have a discord?
39+
</AccordionTrigger>
40+
<AccordionContent>
41+
Yes, Cobalt has a discord server which can be found at{' '}
42+
<a
43+
href="https://discord.com/invite/GAhS8UfDyy"
44+
className="text-blue-400 hover:underline"
45+
>
46+
discord.gg/GAhS8UfDyy
47+
</a>
48+
.
49+
</AccordionContent>
50+
</AccordionItem>
51+
<AccordionItem value="item-4">
52+
<AccordionTrigger>
53+
Is Cobalt safe to use?
54+
</AccordionTrigger>
55+
<AccordionContent>
56+
The base mod and approved addons are safe from malware.
57+
However, Cobalt violates Hypixel&apos;s rules therefore
58+
we try our best to prevent bans, we cannot ensure that
59+
Cobalt will not cause you to get banned.
60+
</AccordionContent>
61+
</AccordionItem>
62+
<AccordionItem value="item-5">
63+
<AccordionTrigger>
64+
How do I install Cobalt?
65+
</AccordionTrigger>
66+
<AccordionContent>
67+
As of right now, Cobalt is not available for download,
68+
once it is released, you can find the installation
69+
instructions here: First, install{' '}
70+
<a
71+
href="https://fabricmc.net/use/"
72+
className="text-blue-400 hover:underline"
73+
>
74+
Fabric Loader
75+
</a>{' '}
76+
for Minecraft 1.21.10. Then, download the Cobalt mod
77+
file and place it in your{' '}
78+
<code className="bg-white/10 px-1.5 py-0.5 rounded text-sm">
79+
mods
80+
</code>{' '}
81+
folder located in your{' '}
82+
<code className="bg-white/10 px-1.5 py-0.5 rounded text-sm">
83+
.minecraft
84+
</code>{' '}
85+
directory. Launch Minecraft with the Fabric profile and
86+
you&apos;re ready to go.
87+
</AccordionContent>
88+
</AccordionItem>
89+
<AccordionItem value="item-6">
90+
<AccordionTrigger>Is Cobalt free?</AccordionTrigger>
91+
<AccordionContent>
92+
Yes, Cobalt is free to use.
93+
</AccordionContent>
94+
</AccordionItem>
95+
<AccordionItem value="item-7">
96+
<AccordionTrigger>
97+
Can I contribute to Cobalt?
98+
</AccordionTrigger>
99+
<AccordionContent>
100+
Not currently, after the mod is open source we will be
101+
open for contributions.
102+
</AccordionContent>
103+
</AccordionItem>
104+
<AccordionItem value="item-8">
105+
<AccordionTrigger>
106+
Will I get banned for using Cobalt?
107+
</AccordionTrigger>
108+
<AccordionContent>
109+
While we work hard to prevent bans, we cannot ensure
110+
that Cobalt will not cause you to get banned.
111+
</AccordionContent>
112+
</AccordionItem>
113+
</Accordion>
114+
</div>
115+
</main>
116+
);
38117
}

app/globals.css

Lines changed: 86 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,97 @@
11
@import 'tailwindcss';
2-
3-
:root {
4-
--background: #121212;
5-
--foreground: #f8f9fa;
6-
}
2+
@import 'tw-animate-css';
73

84
::selection {
95
background-color: #6eb7e7;
106
color: var(--background);
117
}
128

139
body {
14-
color: var(--foreground);
15-
background: var(--background);
1610
font-family: var(--font-inter), sans-serif;
1711
letter-spacing: 0.02em;
1812
}
13+
14+
@theme inline {
15+
--radius-sm: calc(var(--radius) - 4px);
16+
--radius-md: calc(var(--radius) - 2px);
17+
--radius-lg: var(--radius);
18+
--radius-xl: calc(var(--radius) + 4px);
19+
--color-background: var(--background);
20+
--color-foreground: var(--foreground);
21+
--color-card: var(--card);
22+
--color-card-foreground: var(--card-foreground);
23+
--color-popover: var(--popover);
24+
--color-popover-foreground: var(--popover-foreground);
25+
--color-primary: var(--primary);
26+
--color-primary-foreground: var(--primary-foreground);
27+
--color-secondary: var(--secondary);
28+
--color-secondary-foreground: var(--secondary-foreground);
29+
--color-muted: var(--muted);
30+
--color-muted-foreground: var(--muted-foreground);
31+
--color-accent: var(--accent);
32+
--color-accent-foreground: var(--accent-foreground);
33+
--color-destructive: var(--destructive);
34+
--color-border: var(--border);
35+
--color-input: var(--input);
36+
--color-ring: var(--ring);
37+
--color-chart-1: var(--chart-1);
38+
--color-chart-2: var(--chart-2);
39+
--color-chart-3: var(--chart-3);
40+
--color-chart-4: var(--chart-4);
41+
--color-chart-5: var(--chart-5);
42+
--color-sidebar: var(--sidebar);
43+
--color-sidebar-foreground: var(--sidebar-foreground);
44+
--color-sidebar-primary: var(--sidebar-primary);
45+
--color-sidebar-primary-foreground: var(
46+
--sidebar-primary-foreground
47+
);
48+
--color-sidebar-accent: var(--sidebar-accent);
49+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
50+
--color-sidebar-border: var(--sidebar-border);
51+
--color-sidebar-ring: var(--sidebar-ring);
52+
}
53+
54+
:root {
55+
--radius: 0.625rem;
56+
--background: oklch(0.145 0 0);
57+
--foreground: oklch(0.985 0 0);
58+
--card: oklch(0.205 0 0);
59+
--card-foreground: oklch(0.985 0 0);
60+
--popover: oklch(0.205 0 0);
61+
--popover-foreground: oklch(0.985 0 0);
62+
--primary: oklch(0.922 0 0);
63+
--primary-foreground: oklch(0.205 0 0);
64+
--secondary: oklch(0.269 0 0);
65+
--secondary-foreground: oklch(0.985 0 0);
66+
--muted: oklch(0.269 0 0);
67+
--muted-foreground: oklch(0.708 0 0);
68+
--accent: oklch(0.269 0 0);
69+
--accent-foreground: oklch(0.985 0 0);
70+
--destructive: oklch(0.704 0.191 22.216);
71+
--border: oklch(1 0 0 / 10%);
72+
--input: oklch(1 0 0 / 15%);
73+
--ring: oklch(0.556 0 0);
74+
--chart-1: oklch(0.488 0.243 264.376);
75+
--chart-2: oklch(0.696 0.17 162.48);
76+
--chart-3: oklch(0.769 0.188 70.08);
77+
--chart-4: oklch(0.627 0.265 303.9);
78+
--chart-5: oklch(0.645 0.246 16.439);
79+
--sidebar: oklch(0.205 0 0);
80+
--sidebar-foreground: oklch(0.985 0 0);
81+
--sidebar-primary: oklch(0.488 0.243 264.376);
82+
--sidebar-primary-foreground: oklch(0.985 0 0);
83+
--sidebar-accent: oklch(0.269 0 0);
84+
--sidebar-accent-foreground: oklch(0.985 0 0);
85+
--sidebar-border: oklch(1 0 0 / 10%);
86+
--sidebar-ring: oklch(0.556 0 0);
87+
}
88+
89+
@layer base {
90+
* {
91+
@apply border-border outline-ring/50;
92+
}
93+
94+
body {
95+
@apply bg-background text-foreground;
96+
}
97+
}

app/layout.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Metadata, Viewport } from 'next';
22
import { Inter } from 'next/font/google';
3-
import Navbar from './_components/Navbar';
3+
import Navbar from '@/components/Navbar';
44
import './globals.css';
55

66
const inter = Inter({
@@ -35,7 +35,9 @@ export default function RootLayout({
3535
}>) {
3636
return (
3737
<html lang="en">
38-
<body className={`${inter.variable} antialiased overflow-x-hidden flex flex-col min-h-screen`}>
38+
<body
39+
className={`${inter.variable} antialiased overflow-x-hidden flex flex-col min-h-screen`}
40+
>
3941
<Navbar />
4042
{children}
4143
</body>

0 commit comments

Comments
 (0)