diff --git a/.gitignore b/.gitignore index 8f322f0..17615d3 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ /node_modules /.pnp .pnp.js +.env # testing /coverage diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/globals.css b/app/globals.css deleted file mode 100644 index fd81e88..0000000 --- a/app/globals.css +++ /dev/null @@ -1,27 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} diff --git a/app/layout.js b/app/layout.js index c93f806..170b54a 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,17 +1,22 @@ -import './globals.css' -import { Inter } from 'next/font/google' - -const inter = Inter({ subsets: ['latin'] }) +import '@styles/globals.css'; export const metadata = { - title: 'Create Next App', - description: 'Generated by create next app', + title: 'Spokane Bitcoin Club', + description: 'Generated by Next.js', } - + export default function RootLayout({ children }) { - return ( + return ( - {children} + +
+
+
+ +
+ {children} +
+ ) } diff --git a/app/page.js b/app/page.js deleted file mode 100644 index c5a4932..0000000 --- a/app/page.js +++ /dev/null @@ -1,113 +0,0 @@ -import Image from 'next/image' - -export default function Home() { - return ( -
-
-

- Get started by editing  - app/page.js -

-
- - By{' '} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Explore the Next.js 13 playground. -

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ) -} diff --git a/app/page.jsx b/app/page.jsx new file mode 100644 index 0000000..63930f1 --- /dev/null +++ b/app/page.jsx @@ -0,0 +1,8 @@ + +const Home = () => { + return ( +
test page
+ ) +} + +export default Home; \ No newline at end of file diff --git a/jsconfig.json b/jsconfig.json index 2a2e4b3..9e9e698 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "paths": { - "@/*": ["./*"] + "@*": ["./*"] } } } diff --git a/public/assets/icons/copy.svg b/public/assets/icons/copy.svg new file mode 100644 index 0000000..00db920 --- /dev/null +++ b/public/assets/icons/copy.svg @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file diff --git a/public/assets/icons/link.svg b/public/assets/icons/link.svg new file mode 100644 index 0000000..5ec2f02 --- /dev/null +++ b/public/assets/icons/link.svg @@ -0,0 +1,36 @@ + + + + + + + diff --git a/public/assets/icons/loader.svg b/public/assets/icons/loader.svg new file mode 100644 index 0000000..67d1f30 --- /dev/null +++ b/public/assets/icons/loader.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/menu.svg b/public/assets/icons/menu.svg new file mode 100644 index 0000000..5a87c25 --- /dev/null +++ b/public/assets/icons/menu.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/public/assets/icons/tick.svg b/public/assets/icons/tick.svg new file mode 100644 index 0000000..0c8b474 --- /dev/null +++ b/public/assets/icons/tick.svg @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/public/assets/images/grid.svg b/public/assets/images/grid.svg new file mode 100644 index 0000000..8cab75a --- /dev/null +++ b/public/assets/images/grid.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/logo-text.svg b/public/assets/images/logo-text.svg new file mode 100644 index 0000000..604f736 --- /dev/null +++ b/public/assets/images/logo-text.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/logo.svg b/public/assets/images/logo.svg new file mode 100644 index 0000000..7caadc8 --- /dev/null +++ b/public/assets/images/logo.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css new file mode 100644 index 0000000..0fc9246 --- /dev/null +++ b/styles/globals.css @@ -0,0 +1,170 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* + Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them! +*/ + +.main { + width: 100vw; + min-height: 100vh; + position: fixed; + display: flex; + justify-content: center; + padding: 120px 24px 160px 24px; + pointer-events: none; +} + +.main:before { + background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%); + position: absolute; + content: ""; + z-index: 2; + width: 100%; + height: 100%; + top: 0; +} + +.main:after { + content: ""; + background-image: url("/assets/images/grid.svg"); + z-index: 1; + position: absolute; + width: 100%; + height: 100%; + top: 0; + opacity: 0.4; + filter: invert(1); +} + +.gradient { + height: fit-content; + z-index: 3; + width: 100%; + max-width: 640px; + background-image: radial-gradient( + at 27% 37%, + hsla(215, 98%, 61%, 1) 0px, + transparent 0% + ), + radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%), + radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%), + radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%), + radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%), + radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%), + radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%); + position: absolute; + content: ""; + width: 100%; + height: 100%; + filter: blur(100px) saturate(150%); + top: 80px; + opacity: 0.15; +} + +@media screen and (max-width: 640px) { + .main { + padding: 0; + } +} + +/* Tailwind Styles */ + +.app { + @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6; +} + +.black_btn { + @apply rounded-full border border-black bg-black py-1.5 px-5 text-white transition-all hover:bg-white hover:text-black text-center text-sm font-inter flex items-center justify-center; +} + +.outline_btn { + @apply rounded-full border border-black bg-transparent py-1.5 px-5 text-black transition-all hover:bg-black hover:text-white text-center text-sm font-inter flex items-center justify-center; +} + +.head_text { + @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl; +} + +.orange_gradient { + @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent; +} + +.green_gradient { + @apply bg-gradient-to-r from-green-400 to-green-500 bg-clip-text text-transparent; +} + +.blue_gradient { + @apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent; +} + +.desc { + @apply mt-5 text-lg text-gray-600 sm:text-xl max-w-2xl; +} + +.search_input { + @apply block w-full rounded-md border border-gray-200 bg-white py-2.5 font-satoshi pl-5 pr-12 text-sm shadow-lg font-medium focus:border-black focus:outline-none focus:ring-0; +} + +.copy_btn { + @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer; +} + +.glassmorphism { + @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-5; +} + +.prompt_layout { + @apply space-y-6 py-8 sm:columns-2 sm:gap-6 xl:columns-3; +} + +/* Feed Component */ +.feed { + @apply mt-16 mx-auto w-full max-w-xl flex justify-center items-center flex-col gap-2; +} + +/* Form Component */ +.form_textarea { + @apply w-full flex rounded-lg h-[200px] mt-2 p-3 text-sm text-gray-500 outline-0; +} + +.form_input { + @apply w-full flex rounded-lg mt-2 p-3 text-sm text-gray-500 outline-0; +} + +/* Nav Component */ +.logo_text { + @apply max-sm:hidden font-satoshi font-semibold text-lg text-black tracking-wide; +} + +.dropdown { + @apply absolute right-0 top-full mt-3 w-full p-5 rounded-lg bg-white min-w-[210px] flex flex-col gap-2 justify-end items-end; +} + +.dropdown_link { + @apply text-sm font-inter text-gray-700 hover:text-gray-500 font-medium; +} + +/* PromptCard Component */ +.prompt_card { + @apply flex-1 break-inside-avoid rounded-lg border border-gray-300 bg-white/20 bg-clip-padding p-6 pb-4 backdrop-blur-lg backdrop-filter md:w-[360px] w-full h-fit; +} + +.flex-center { + @apply flex justify-center items-center; +} + +.flex-start { + @apply flex justify-start items-start; +} + +.flex-end { + @apply flex justify-end items-center; +} + +.flex-between { + @apply flex justify-between items-center; +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 8c4d1b2..c7d3af4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,12 +7,14 @@ module.exports = { ], theme: { extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + fontFamily: { + satoshi: ['Satoshi', 'sans-serif'], + inter: ['Inter', 'sans-serif'], }, + colors: { + 'primary-orange': '#FF5722', + } }, }, plugins: [], -} +} \ No newline at end of file