diff --git a/public/blur.png b/public/blur.png new file mode 100644 index 0000000..313a85f Binary files /dev/null and b/public/blur.png differ diff --git a/public/crosshair.svg b/public/crosshair.svg new file mode 100644 index 0000000..68535ae --- /dev/null +++ b/public/crosshair.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/gradient.webp b/public/gradient.webp new file mode 100644 index 0000000..2e3cc08 Binary files /dev/null and b/public/gradient.webp differ 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/src/app/(app)/globals.scss b/src/app/(app)/globals.scss index c79504e..cacb631 100644 --- a/src/app/(app)/globals.scss +++ b/src/app/(app)/globals.scss @@ -1,37 +1,191 @@ -html, -body { - font-family: 'Roboto', 'Inter', sans-serif; +* { + box-sizing: border-box; } -.container { - max-width: 37.5rem; - padding: 0 2rem; - margin-left: auto; - margin-right: auto; +html { + width: 100%; + height: 100%; + background-color: #000000; +} + +body { + color: #ffffff; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 0 20px; +} + +main { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + min-height: 100vh; + max-width: 800px; + margin: 0 auto; + padding-block: 80px; + border-inline-width: 1px; + border-inline-style: solid; + border-image: linear-gradient(180deg, #ffffff00, #ffffff00, #ffffff1a, #ffffff00) 1; + + @media screen and (max-width: 600px) { + padding-block: 20px; + } +} + +article { + position: relative; + display: flex; + flex-direction: column; + gap: 20px; + padding: 60px 80px; + + @media screen and (max-width: 600px) { + padding: 40px 40px; + } +} + +.badge { + display: flex; + align-items: center; + gap: 10px; + color: #fff; + font-size: 14px; + font-style: normal; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 2.6px; } h1 { + color: #ffffff; font-size: 4rem; -} + font-weight: 600; + line-height: normal; + letter-spacing: -0.02rem; + margin: 0; -.rainbow { - font-family: monospace; - letter-spacing: 5px; - background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - animation: rainbow_animation 6s ease-in-out infinite; - background-size: 400% 100%; -} - -@keyframes rainbow_animation { - 0%, - 100% { - background-position: 0 0; - } - - 50% { - background-position: 100% 0; + @media screen and (max-width: 600px) { + font-size: 2rem; + } +} + +p { + color: #ffffff; + font-size: 16px; + font-weight: 300; + line-height: 28px; + margin: 0; +} + +a { + color: #ffffff; + text-decoration: underline; + transition: color 0.2s ease-out; + + &:hover { + color: #ffffff80; + } +} + +.codeBlock { + position: relative; + background-color: #00000066; + margin: 0; + padding: 0; + + pre { + margin: 0; + padding: 60px 80px; + overflow-x: scroll; + + @media screen and (max-width: 600px) { + padding: 40px 40px; + } + + &::before { + content: ''; + display: block; + position: absolute; + top: 0; + left: calc(50% - 50vw); + width: 100vw; + height: 1px; + background: linear-gradient(90deg, #ffffff00, #ffffff1a, #ffffff1a, #ffffff00); + z-index: 1; + } + + &::after { + content: url('/crosshair.svg'); + display: block; + height: 19px; + width: 19px; + position: absolute; + top: -9px; + left: -10px; + } + } + + code { + font-size: 14px; + line-height: 2; + } + + &::before { + content: ''; + display: block; + position: absolute; + bottom: 0; + left: calc(50% - 50vw); + width: 100vw; + height: 1px; + background: linear-gradient(90deg, #ffffff00, #ffffff1a, #ffffff1a, #ffffff00); + z-index: 1; + } + + &::after { + content: url('/crosshair.svg'); + display: block; + height: 19px; + width: 19px; + position: absolute; + bottom: -9px; + right: -10px; + } +} + +.background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + + div.blur { + display: block; + position: absolute; + width: 100%; + height: 100%; + background: url('/blur.png'); + background-repeat: repeat; + background-size: 400px 400px; + background-blend-mode: soft-light, normal; + backdrop-filter: blur(60px); + } + + div.gradient { + display: block; + position: absolute; + width: 100%; + height: 100%; + background: url('/gradient.webp'); + background-size: cover; + background-position: center; + z-index: -2; } } diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx index df46f46..26f9544 100644 --- a/src/app/(app)/layout.tsx +++ b/src/app/(app)/layout.tsx @@ -1,13 +1,17 @@ import React from 'react' import './globals.scss' +import { Inter } from 'next/font/google' + +const inter = Inter({ + subsets: ['latin'], + display: 'swap', +}) /* Our app sits here to not cause any conflicts with payload's root layout */ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => { return ( - - -
{children}
- + + {children} ) } diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx index 1f78e3f..9d23bee 100644 --- a/src/app/(app)/page.tsx +++ b/src/app/(app)/page.tsx @@ -1,56 +1,51 @@ -import Example from '@/components/Example' +import { Badge } from '@/components/Badge' +import { Background } from '@/components/Background' import Link from 'next/link' import React from 'react' const Page = () => { return ( -
-

- Payload 3.0 BETA! -

-

- This BETA is rapidly evolving, you can report any bugs against{' '} - - the repo - {' '} - or in the{' '} - - dedicated channel in Discord - - . -

- -

- - Payload is running at /admin - -

- -

- - /my-route - {' '} - contains an example of a custom route running the Local API. -

- - - -

You can use the Local API in your server components like this:

- 
-        
-          {`import { getPayload } from 'payload'
+    <>
+      

+        

+          
+          
Payload 3.0

+          

+            This BETA is rapidly evolving, you can report any bugs against{' '}
+            
+              the repo
+            {' '}
+            or in the{' '}
+            
+              dedicated channel in Discord
+            
+            . Payload is running at /admin. An example of a custom route
+            running the Local API can be found at /my-route.
+          

+          
You can use the Local API in your server components like this:

+        

+        

+          
+            
+              {`import { getPayload } from 'payload'
 import configPromise from "@payload-config";
 const payload = await getPayload({ config: configPromise })
 
 const data = await payload.find({
   collection: 'posts',
-})`}
-        
-      

-
+}) + +return +`} + + + + + + ) } diff --git a/src/components/Background.tsx b/src/components/Background.tsx new file mode 100644 index 0000000..c829a87 --- /dev/null +++ b/src/components/Background.tsx @@ -0,0 +1,8 @@ +export const Background = () => { + return ( +
+
+
+
+ ) +} diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx new file mode 100644 index 0000000..6ac4d69 --- /dev/null +++ b/src/components/Badge.tsx @@ -0,0 +1,20 @@ +export const Badge = () => { + return ( + + + + + + Beta + + ) +}