Skip to content

Commit ccf8a47

Browse files
brionmariobrionmario
committed
chore: added basic functionality
1 parent b2cebbd commit ccf8a47

29 files changed

+3958
-232
lines changed

‎apps/www/app/custom.scss‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@import url('nelum-kuluna.css');
2+
3+
.underlined {
4+
position: relative;
5+
text-decoration: none !important;
6+
white-space: nowrap;
7+
8+
&:focus {
9+
outline: none;
10+
text-decoration: none !important;
11+
}
12+
13+
&:after {
14+
content: '';
15+
height: 2px;
16+
transform: scaleX(0);
17+
transition: transform 0.25s ease;
18+
transform-origin: left;
19+
left: 0;
20+
bottom: -4px;
21+
width: 100%;
22+
display: block;
23+
position: absolute;
24+
}
25+
26+
&:hover:after,
27+
&:focus:after,
28+
&.active:after {
29+
background-color: currentColor;
30+
transform: scaleX(1);
31+
}
32+
33+
@media (prefers-reduced-motion) {
34+
&:after {
35+
opacity: 0;
36+
transition: opacity 0.25s ease;
37+
}
38+
39+
&:hover:after,
40+
&:focus:after,
41+
&.active:after {
42+
opacity: 1;
43+
}
44+
}
45+
}
46+
47+
.hero {
48+
&__title {
49+
background: linear-gradient(90deg, #FF4B32 0%, #614BFF 100%);
50+
background-clip: text;
51+
-webkit-background-clip: text;
52+
-webkit-text-fill-color: transparent;
53+
}
54+
}
55+
56+
.navbar {
57+
transition: all 0.4s ease-in-out;
58+
border-bottom: 1px solid transparent;
59+
60+
&--scrolled {
61+
// background: var(--js-cmb-palette-background-main);
62+
border-bottom: 1px solid var(--js-cmb-pallette-divider);
63+
64+
.navbar__logo {
65+
padding: 0.5em;
66+
}
67+
}
68+
69+
&__logo {
70+
transition: padding 0.4s ease-in-out;
71+
}
72+
}

‎apps/www/app/fonts/GeistMonoVF.woff‎

-66.3 KB
Binary file not shown.

‎apps/www/app/fonts/GeistVF.woff‎

-64.7 KB
Binary file not shown.

‎apps/www/app/globals.css‎

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

‎apps/www/app/globals.scss‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
body {
6+
font-synthesis: none;
7+
}
8+
9+
@layer base {
10+
:root {
11+
--js-cmb-palette-primary-main: #ff4b32;
12+
--js-cmb-palette-secondary-main: #614bff;
13+
--js-cmb-palette-tertiary-main: #efdb50;
14+
--js-cmb-palette-background-main: #000000;
15+
--js-cmb-navbar-height: 4rem;
16+
--js-cmb-palette-primary-main: #5c6ac4;
17+
--js-cmb-pallette-divider: #e1e1e1;
18+
19+
--background: 0 0% 100%;
20+
--foreground: 0 0% 3.9%;
21+
--card: 0 0% 100%;
22+
--card-foreground: 0 0% 3.9%;
23+
--popover: 0 0% 100%;
24+
--popover-foreground: 0 0% 3.9%;
25+
--primary: 0 0% 9%;
26+
--primary-foreground: 0 0% 98%;
27+
--secondary: 0 0% 96.1%;
28+
--secondary-foreground: 0 0% 9%;
29+
--muted: 0 0% 96.1%;
30+
--muted-foreground: 0 0% 45.1%;
31+
--accent: 0 0% 96.1%;
32+
--accent-foreground: 0 0% 9%;
33+
--destructive: 0 84.2% 60.2%;
34+
--destructive-foreground: 0 0% 98%;
35+
--border: 0 0% 89.8%;
36+
--input: 0 0% 89.8%;
37+
--ring: 0 0% 3.9%;
38+
--chart-1: 12 76% 61%;
39+
--chart-2: 173 58% 39%;
40+
--chart-3: 197 37% 24%;
41+
--chart-4: 43 74% 66%;
42+
--chart-5: 27 87% 67%;
43+
--radius: 1rem;
44+
}
45+
46+
.dark {
47+
--js-cmb-palette-background-main: #000000;
48+
--js-cmb-pallette-divider: rgb(31 31 31);
49+
50+
--background: 0 0% 3.9%;
51+
--foreground: 0 0% 98%;
52+
--card: 0 0% 3.9%;
53+
--card-foreground: 0 0% 98%;
54+
--popover: 0 0% 3.9%;
55+
--popover-foreground: 0 0% 98%;
56+
--primary: 0 0% 98%;
57+
--primary-foreground: 0 0% 9%;
58+
--secondary: 0 0% 14.9%;
59+
--secondary-foreground: 0 0% 98%;
60+
--muted: 0 0% 14.9%;
61+
--muted-foreground: 0 0% 63.9%;
62+
--accent: 0 0% 14.9%;
63+
--accent-foreground: 0 0% 98%;
64+
--destructive: 0 62.8% 30.6%;
65+
--destructive-foreground: 0 0% 98%;
66+
--border: 0 0% 14.9%;
67+
--input: 0 0% 14.9%;
68+
--ring: 0 0% 83.1%;
69+
--chart-1: 220 70% 50%;
70+
--chart-2: 160 60% 45%;
71+
--chart-3: 30 80% 55%;
72+
--chart-4: 280 65% 60%;
73+
--chart-5: 340 75% 55%;
74+
}
75+
}
76+
77+
@layer base {
78+
* {
79+
@apply border-border;
80+
}
81+
82+
body {
83+
@apply bg-background text-foreground;
84+
}
85+
}
86+
87+
@layer utilities {
88+
89+
/* Hide scrollbar for Chrome, Safari and Opera */
90+
.no-scrollbar::-webkit-scrollbar {
91+
display: none;
92+
}
93+
94+
/* Hide scrollbar for Edge and Firefox */
95+
.no-scrollbar {
96+
-ms-overflow-style: none;
97+
/* Edge */
98+
scrollbar-width: none;
99+
/* Firefox */
100+
}
101+
102+
@keyframes slidein {
103+
from {
104+
transform: translate3d(0, 0, 0);
105+
}
106+
107+
to {
108+
transform: translate3d(-100%, 0, 0);
109+
}
110+
}
111+
112+
.focus-ring {
113+
@apply focus:outline-none focus-within:outline-none ring-current ring-offset-4 ring-offset-white transition duration-300 focus-within:ring-2 focus-within:ring-current hover:ring-2 hover:ring-current focus:ring-2 focus:ring-current disabled:ring-0 group-hover:ring-2 group-hover:ring-current group-focus:ring-2 group-focus:ring-current dark:ring-offset-gray-900;
114+
}
115+
116+
.focus-ring.danger {
117+
@apply ring-red-500 focus-within:ring-red-500 hover:ring-red-500 focus:ring-red-500 group-hover:ring-red-500 group-focus:ring-red-500 dark:focus-within:ring-red-500 dark:hover:ring-red-500 dark:focus:ring-red-500 dark:group-hover:ring-red-500 group-focus:dark:ring-red-500;
118+
}
119+
120+
.bg-secondary {
121+
@apply bg-gray-100 dark:bg-gray-800;
122+
}
123+
124+
.bg-tertiary {
125+
background-color: var(--js-cmb-palette-tertiary-main);
126+
}
127+
128+
.bg-alt {
129+
@apply bg-gray-200 dark:bg-gray-700;
130+
}
131+
132+
.bg-inverse {
133+
@apply bg-black dark:bg-white;
134+
}
135+
136+
.border-primary {
137+
@apply border-gray-900 dark:border-neutral-800;
138+
}
139+
140+
.border-secondary {
141+
@apply border-gray-200 dark:border-gray-600;
142+
}
143+
144+
.text-primary {
145+
@apply text-black dark:text-white;
146+
}
147+
148+
.text-secondary {
149+
@apply dark:text-slate-500 text-gray-500;
150+
}
151+
152+
.text-inverse {
153+
@apply text-white dark:text-black;
154+
}
155+
156+
.wrapper {
157+
position: relative;
158+
white-space: nowrap;
159+
display: inline-block;
160+
animation: slidein 120s linear infinite;
161+
filter: grayscale(100%);
162+
}
163+
}

‎apps/www/app/layout.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,16 @@
2323
*/
2424

2525
import type {Metadata} from 'next';
26-
import localFont from 'next/font/local';
27-
import './globals.css';
28-
import {NextFontWithVariable} from 'next/dist/compiled/@next/font';
26+
import {Space_Grotesk} from 'next/font/google';
27+
import {Inter} from 'next/font/google';
28+
import './globals.scss';
29+
import './custom.scss';
2930
import {ReactElement} from 'react';
31+
import {NextFont} from 'next/dist/compiled/@next/font';
3032
import ThemeProvider from '@/components/ThemeProvider';
3133

32-
const geistSans: NextFontWithVariable = localFont({
33-
src: './fonts/GeistVF.woff',
34-
variable: '--font-geist-sans',
35-
});
36-
37-
const geistMono: NextFontWithVariable = localFont({
38-
src: './fonts/GeistMonoVF.woff',
39-
variable: '--font-geist-mono',
40-
});
34+
const spaceGrotesk: NextFont = Space_Grotesk({subsets: ['latin'], weight: ['400', '500']});
35+
const inter = Inter({subsets: ['latin']});
4136

4237
export const metadata: Metadata = {
4338
title: 'Create Next App',
@@ -50,7 +45,7 @@ const RootLayout = ({
5045
children: React.ReactNode;
5146
}>): ReactElement => (
5247
<html lang="en">
53-
<body className={`${geistSans.variable} ${geistMono.variable}`}>
48+
<body className={`${spaceGrotesk.className} ${inter.className}`}>
5449
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
5550
{children}
5651
</ThemeProvider>

0 commit comments

Comments
 (0)