payload-next-starter 1.0.1 → 1.0.4

package/bin/setup.js

@@ -20,7 +20,7 @@ if (!existsSync(join(targetDir, 'package.json'))) {
 
 const pkg = JSON.parse(readFileSync(join(targetDir, 'package.json'), 'utf8'))
 if (!pkg.dependencies?.next) {
-  console.error('❌ This doesn\'t appear to be a Next.js project.')
+  console.error("❌ This doesn't appear to be a Next.js project.")
   process.exit(1)
 }
 
@@ -42,27 +42,43 @@ try {
 
 // Copy payload.config.ts
 if (existsSync(join(templatesDir, 'payload.config.ts'))) {
-  copyFileSync(
-    join(templatesDir, 'payload.config.ts'),
-    join(targetDir, 'src/payload.config.ts')
-  )
+  copyFileSync(join(templatesDir, 'payload.config.ts'), join(targetDir, 'src/payload.config.ts'))
   console.log('  ✓ payload.config.ts')
 }
 
 // Copy collections
 if (existsSync(join(templatesDir, 'collections'))) {
-  cpSync(join(templatesDir, 'collections'), join(targetDir, 'src/collections'), { recursive: true, force: true })
+  cpSync(join(templatesDir, 'collections'), join(targetDir, 'src/collections'), {
+    recursive: true,
+    force: true,
+  })
   console.log('  ✓ collections/')
 }
 
 // Copy app routes
 if (existsSync(join(templatesDir, 'app/(payload)'))) {
-  cpSync(join(templatesDir, 'app/(payload)'), join(targetDir, 'src/app/(payload)'), { recursive: true, force: true })
+  cpSync(join(templatesDir, 'app/(payload)'), join(targetDir, 'src/app/(payload)'), {
+    recursive: true,
+    force: true,
+  })
   console.log('  ✓ app/(payload)/')
 }
 
+// Copy frontend pages
+if (existsSync(join(templatesDir, 'app/(frontend)'))) {
+  mkdirSync(join(targetDir, 'src/app/(frontend)'), { recursive: true })
+  cpSync(join(templatesDir, 'app/(frontend)'), join(targetDir, 'src/app/(frontend)'), {
+    recursive: true,
+    force: true,
+  })
+  console.log('  ✓ Frontend pages (about-us, contact-us, share)/')
+}
+
 if (existsSync(join(templatesDir, 'app/api/[...payload]'))) {
-  cpSync(join(templatesDir, 'app/api/[...payload]'), join(targetDir, 'src/app/api/[...payload]'), { recursive: true, force: true })
+  cpSync(join(templatesDir, 'app/api/[...payload]'), join(targetDir, 'src/app/api/[...payload]'), {
+    recursive: true,
+    force: true,
+  })
   console.log('  ✓ app/api/[...payload]/')
 }
 
@@ -75,16 +91,19 @@ const deps = [
   '@payloadcms/richtext-lexical',
   '@payloadcms/ui',
   'dotenv',
-  'cross-env'
+  'cross-env',
 ]
 
 try {
-  const pkgManager = existsSync(join(targetDir, 'pnpm-lock.yaml')) ? 'pnpm' :
-                     existsSync(join(targetDir, 'yarn.lock')) ? 'yarn' : 'npm'
+  const pkgManager = existsSync(join(targetDir, 'pnpm-lock.yaml'))
+    ? 'pnpm'
+    : existsSync(join(targetDir, 'yarn.lock'))
+      ? 'yarn'
+      : 'npm'
 
   execSync(`${pkgManager} add ${deps.join(' ')}`, {
     cwd: targetDir,
-    stdio: 'inherit'
+    stdio: 'inherit',
   })
   console.log('✓ Dependencies installed\n')
 } catch (e) {
@@ -116,24 +135,30 @@ export default withPayload(nextConfig)
   }
 } else {
   console.log('  ⚠ No next.config found, creating one...')
-  writeFileSync(join(targetDir, 'next.config.ts'), `import { withPayload } from '@payloadcms/next/withPayload'
+  writeFileSync(
+    join(targetDir, 'next.config.ts'),
+    `import { withPayload } from '@payloadcms/next/withPayload'
 
 const nextConfig = {
   // your config
 }
 
 export default withPayload(nextConfig)
-`)
+`,
+  )
   console.log('  ✓ next.config.ts created\n')
 }
 
 // Create .env.example
 if (!existsSync(join(targetDir, '.env'))) {
-  writeFileSync(join(targetDir, '.env.example'), `# PayloadCMS
+  writeFileSync(
+    join(targetDir, '.env.example'),
+    `# PayloadCMS
 DATABASE_URI=postgresql://user:password@host:5432/database
 PAYLOAD_SECRET=your-secret-key-here-at-least-16-chars
 NEXT_PUBLIC_SERVER_URL=http://localhost:3000
-`)
+`,
+  )
   console.log('  ✓ .env.example created')
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-next-starter",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "PayloadCMS starter for Next.js - install into any Next.js app",
   "license": "MIT",
   "type": "module",

package/templates/app/(frontend)/about-us/page.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export default function AboutUsPage() {
+  return (
+    <div className="about-us">
+      <div className="content">
+        <h1>About Us</h1>
+        <p>
+          Welcome to our company. We are dedicated to delivering exceptional
+          products and services that meet the needs of our customers. Our team
+          is passionate about innovation and committed to excellence.
+        </p>
+        <p>
+          Founded with a vision to make a difference, we have grown into a
+          trusted partner for businesses and individuals alike. Our mission is
+          to create value through quality, integrity, and customer-focused
+          solutions.
+        </p>
+      </div>
+    </div>
+  )
+}

package/templates/app/(frontend)/contact-us/page.tsx

@@ -0,0 +1,421 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+export default function ContactUsPage() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        minHeight: '100vh',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+      }}
+    >
+      {/* Sticky Sidebar Navigation */}
+      <nav
+        style={{
+          position: 'sticky',
+          top: 0,
+          height: '100vh',
+          width: '240px',
+          background: 'linear-gradient(180deg, #1e3a5f 0%, #0d2137 100%)',
+          padding: '40px 20px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '20px',
+          boxShadow: '4px 0 15px rgba(0,0,0,0.1)',
+        }}
+      >
+        <h2 style={{ color: '#fff', fontSize: '24px', marginBottom: '30px', fontWeight: 700 }}>
+          Navigation
+        </h2>
+        <Link
+          href="/"
+          style={{
+            color: '#e2e8f0',
+            textDecoration: 'none',
+            padding: '15px 20px',
+            borderRadius: '8px',
+            transition: 'all 0.3s ease',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            fontSize: '16px',
+            fontWeight: 500,
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = 'rgba(255,255,255,0.1)'
+            e.currentTarget.style.color = '#fff'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = 'transparent'
+            e.currentTarget.style.color = '#e2e8f0'
+          }}
+        >
+          <span>🏠</span> Home
+        </Link>
+        <Link
+          href="/about-us"
+          style={{
+            color: '#e2e8f0',
+            textDecoration: 'none',
+            padding: '15px 20px',
+            borderRadius: '8px',
+            transition: 'all 0.3s ease',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            fontSize: '16px',
+            fontWeight: 500,
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = 'rgba(255,255,255,0.1)'
+            e.currentTarget.style.color = '#fff'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = 'transparent'
+            e.currentTarget.style.color = '#e2e8f0'
+          }}
+        >
+          <span>ℹ️</span> About Us
+        </Link>
+        <Link
+          href="/contact-us"
+          style={{
+            background: 'rgba(255,255,255,0.15)',
+            color: '#fff',
+            textDecoration: 'none',
+            padding: '15px 20px',
+            borderRadius: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            fontSize: '16px',
+            fontWeight: 500,
+          }}
+        >
+          <span>📧</span> Contact Us
+        </Link>
+      </nav>
+
+      {/* Main Content */}
+      <main style={{ flex: 1, background: '#f8fafc' }}>
+        {/* Hero Section with Image */}
+        <div
+          style={{
+            position: 'relative',
+            height: '400px',
+            overflow: 'hidden',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Image
+            src="https://images.unsplash.com/photo-1577563908411-5077b6dc7624?w=1200&h=400&fit=crop"
+            alt="Contact us header"
+            fill
+            style={{ objectFit: 'cover' }}
+            priority
+          />
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              background:
+                'linear-gradient(135deg, rgba(30, 58, 95, 0.8) 0%, rgba(13, 33, 55, 0.6) 100%)',
+            }}
+          />
+          <div style={{ position: 'relative', zIndex: 1, textAlign: 'center', color: '#fff' }}>
+            <h1 style={{ fontSize: '48px', fontWeight: 800, marginBottom: '16px' }}>
+              Get In Touch
+            </h1>
+            <p style={{ fontSize: '20px', opacity: 0.9 }}>We would love to hear from you</p>
+          </div>
+        </div>
+
+        {/* Content Grid */}
+        <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '60px 40px' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '60px' }}>
+            {/* Contact Info Cards */}
+            <div>
+              <h2
+                style={{
+                  fontSize: '32px',
+                  color: '#1e3a5f',
+                  marginBottom: '30px',
+                  fontWeight: 700,
+                }}
+              >
+                Contact Information
+              </h2>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+                {/* Email Card */}
+                <div
+                  style={{
+                    background: '#fff',
+                    padding: '30px',
+                    borderRadius: '16px',
+                    boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '20px',
+                  }}
+                >
+                  <div
+                    style={{
+                      width: '60px',
+                      height: '60px',
+                      background: 'linear-gradient(135deg, #3b82f6 0%, #1e3a5f 100%)',
+                      borderRadius: '12px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: '28px',
+                    }}
+                  >
+                    📧
+                  </div>
+                  <div>
+                    <h3 style={{ fontSize: '18px', color: '#64748b', marginBottom: '8px' }}>
+                      Email
+                    </h3>
+                    <p style={{ fontSize: '18px', color: '#1e3a5f', fontWeight: 600 }}>
+                      contact@example.com
+                    </p>
+                  </div>
+                </div>
+
+                {/* Phone Card */}
+                <div
+                  style={{
+                    background: '#fff',
+                    padding: '30px',
+                    borderRadius: '16px',
+                    boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '20px',
+                  }}
+                >
+                  <div
+                    style={{
+                      width: '60px',
+                      height: '60px',
+                      background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                      borderRadius: '12px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: '28px',
+                    }}
+                  >
+                    📞
+                  </div>
+                  <div>
+                    <h3 style={{ fontSize: '18px', color: '#64748b', marginBottom: '8px' }}>
+                      Phone
+                    </h3>
+                    <p style={{ fontSize: '18px', color: '#1e3a5f', fontWeight: 600 }}>
+                      +1 (555) 123-4567
+                    </p>
+                  </div>
+                </div>
+
+                {/* Address Card */}
+                <div
+                  style={{
+                    background: '#fff',
+                    padding: '30px',
+                    borderRadius: '16px',
+                    boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '20px',
+                  }}
+                >
+                  <div
+                    style={{
+                      width: '60px',
+                      height: '60px',
+                      background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+                      borderRadius: '12px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: '28px',
+                    }}
+                  >
+                    📍
+                  </div>
+                  <div>
+                    <h3 style={{ fontSize: '18px', color: '#64748b', marginBottom: '8px' }}>
+                      Address
+                    </h3>
+                    <p style={{ fontSize: '18px', color: '#1e3a5f', fontWeight: 600 }}>
+                      123 Main Street, City, State 12345
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Modern Contact Form */}
+            <div>
+              <h2
+                style={{
+                  fontSize: '32px',
+                  color: '#1e3a5f',
+                  marginBottom: '30px',
+                  fontWeight: 700,
+                }}
+              >
+                Send a Message
+              </h2>
+              <form
+                style={{
+                  background: '#fff',
+                  padding: '40px',
+                  borderRadius: '20px',
+                  boxShadow: '0 10px 40px rgba(0,0,0,0.1)',
+                }}
+              >
+                <div style={{ marginBottom: '24px' }}>
+                  <label
+                    htmlFor="name"
+                    style={{
+                      display: 'block',
+                      fontSize: '14px',
+                      color: '#64748b',
+                      marginBottom: '8px',
+                      fontWeight: 500,
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                    }}
+                  >
+                    Your Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    placeholder="John Doe"
+                    style={{
+                      width: '100%',
+                      padding: '16px 20px',
+                      borderRadius: '12px',
+                      border: '2px solid #e2e8f0',
+                      fontSize: '16px',
+                      transition: 'all 0.3s ease',
+                      outline: 'none',
+                    }}
+                    onFocus={(e) => (e.target.style.borderColor = '#3b82f6')}
+                    onBlur={(e) => (e.target.style.borderColor = '#e2e8f0')}
+                  />
+                </div>
+
+                <div style={{ marginBottom: '24px' }}>
+                  <label
+                    htmlFor="email"
+                    style={{
+                      display: 'block',
+                      fontSize: '14px',
+                      color: '#64748b',
+                      marginBottom: '8px',
+                      fontWeight: 500,
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                    }}
+                  >
+                    Email Address
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    placeholder="john@example.com"
+                    style={{
+                      width: '100%',
+                      padding: '16px 20px',
+                      borderRadius: '12px',
+                      border: '2px solid #e2e8f0',
+                      fontSize: '16px',
+                      transition: 'all 0.3s ease',
+                      outline: 'none',
+                    }}
+                    onFocus={(e) => (e.target.style.borderColor = '#3b82f6')}
+                    onBlur={(e) => (e.target.style.borderColor = '#e2e8f0')}
+                  />
+                </div>
+
+                <div style={{ marginBottom: '24px' }}>
+                  <label
+                    htmlFor="message"
+                    style={{
+                      display: 'block',
+                      fontSize: '14px',
+                      color: '#64748b',
+                      marginBottom: '8px',
+                      fontWeight: 500,
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                    }}
+                  >
+                    Your Message
+                  </label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    rows={5}
+                    placeholder="Tell us how we can help..."
+                    style={{
+                      width: '100%',
+                      padding: '16px 20px',
+                      borderRadius: '12px',
+                      border: '2px solid #e2e8f0',
+                      fontSize: '16px',
+                      transition: 'all 0.3s ease',
+                      outline: 'none',
+                      resize: 'vertical',
+                    }}
+                    onFocus={(e) => (e.target.style.borderColor = '#3b82f6')}
+                    onBlur={(e) => (e.target.style.borderColor = '#e2e8f0')}
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  style={{
+                    width: '100%',
+                    padding: '18px 40px',
+                    background: 'linear-gradient(135deg, #3b82f6 0%, #1e3a5f 100%)',
+                    color: '#fff',
+                    border: 'none',
+                    borderRadius: '12px',
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                    transition: 'all 0.3s ease',
+                    boxShadow: '0 4px 15px rgba(59, 130, 246, 0.4)',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.transform = 'translateY(-2px)'
+                    e.currentTarget.style.boxShadow = '0 8px 25px rgba(59, 130, 246, 0.5)'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.transform = 'translateY(0)'
+                    e.currentTarget.style.boxShadow = '0 4px 15px rgba(59, 130, 246, 0.4)'
+                  }}
+                >
+                  Send Message →
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

package/templates/app/(frontend)/page.tsx

@@ -0,0 +1,59 @@
+import { headers as getHeaders } from 'next/headers.js'
+import Image from 'next/image'
+import { getPayload } from 'payload'
+import React from 'react'
+import { fileURLToPath } from 'url'
+
+import config from '@/payload.config'
+import './styles.css'
+
+export default async function HomePage() {
+  const headers = await getHeaders()
+  const payloadConfig = await config
+  const payload = await getPayload({ config: payloadConfig })
+  const { user } = await payload.auth({ headers })
+
+  const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
+
+  return (
+    <div className="home">
+      <div className="content">
+        <picture>
+          <source srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg" />
+          <Image
+            alt="Payload Logo"
+            height={65}
+            src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg"
+            width={65}
+          />
+        </picture>
+        {!user && <h1>Welcome to your new project. Magically TESt</h1>}
+        {user && <h1>Welcome back, {user.email}</h1>}
+        <div className="links">
+          <a
+            className="admin"
+            href={payloadConfig.routes.admin}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Go to admin panel
+          </a>
+          <a
+            className="docs"
+            href="https://payloadcms.com/docs"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Documentation
+          </a>
+        </div>
+      </div>
+      <div className="footer">
+        <p>Update this page by editing</p>
+        <a className="codeLink" href={fileURL}>
+          <code>app/(frontend)/page.tsx</code>
+        </a>
+      </div>
+    </div>
+  )
+}

package/templates/app/(frontend)/share/page.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+
+export default function SharePage() {
+  return (
+    <div className="share">
+      <div className="content">
+        <h1>Share</h1>
+        <p>
+          Share our content with your friends and followers. Spread the word
+          and help us grow our community.
+        </p>
+
+        <div className="share-sections">
+          <div className="share-card">
+            <h2>Social Media</h2>
+            <p>Follow us and share our posts on your favorite platforms:</p>
+            <ul>
+              <li>
+                <a href="https://twitter.com/share" target="_blank" rel="noopener noreferrer">
+                  Twitter
+                </a>
+              </li>
+              <li>
+                <a href="https://facebook.com/share" target="_blank" rel="noopener noreferrer">
+                  Facebook
+                </a>
+              </li>
+              <li>
+                <a href="https://linkedin.com/share" target="_blank" rel="noopener noreferrer">
+                  LinkedIn
+                </a>
+              </li>
+              <li>
+                <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
+                  Instagram
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div className="share-card">
+            <h2>Refer a Friend</h2>
+            <p>
+              Know someone who would benefit from our services? Share your
+              unique referral link and earn rewards.
+            </p>
+            <div className="referral-box">
+              <input
+                type="text"
+                value="https://example.com/ref/YOUR-CODE"
+                readOnly
+              />
+              <button>Copy Link</button>
+            </div>
+          </div>
+
+          <div className="share-card">
+            <h2>Newsletter</h2>
+            <p>
+              Stay updated with our latest news and updates. Subscribe to our
+              newsletter and share it with others.
+            </p>
+            <form className="newsletter-form">
+              <input type="email" placeholder="Enter your email" />
+              <button type="submit">Subscribe</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/app/(frontend)/styles.css

@@ -0,0 +1,164 @@
+:root {
+  --font-mono: 'Roboto Mono', monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 18px;
+  line-height: 32px;
+
+  background: rgb(0, 0, 0);
+  -webkit-font-smoothing: antialiased;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: system-ui;
+  font-size: 18px;
+  line-height: 32px;
+
+  margin: 0;
+  color: rgb(1000, 1000, 1000);
+
+  @media (max-width: 1024px) {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  margin: 40px 0;
+  font-size: 64px;
+  line-height: 70px;
+  font-weight: bold;
+
+  @media (max-width: 1024px) {
+    margin: 24px 0;
+    font-size: 42px;
+    line-height: 42px;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 38px;
+    line-height: 38px;
+  }
+
+  @media (max-width: 400px) {
+    font-size: 32px;
+    line-height: 32px;
+  }
+}
+
+p {
+  margin: 24px 0;
+
+  @media (max-width: 1024px) {
+    margin: calc(var(--base) * 0.75) 0;
+  }
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    opacity: 0.8;
+    outline: none;
+  }
+
+  &:active {
+    opacity: 0.7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}
+
+.home {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100vh;
+  padding: 45px;
+  max-width: 1024px;
+  margin: 0 auto;
+  overflow: hidden;
+
+  @media (max-width: 400px) {
+    padding: 24px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+
+    h1 {
+      text-align: center;
+    }
+  }
+
+  .links {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    a {
+      text-decoration: none;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+    }
+
+    .admin {
+      color: rgb(0, 0, 0);
+      background: rgb(1000, 1000, 1000);
+      border: 1px solid rgb(0, 0, 0);
+    }
+
+    .docs {
+      color: rgb(1000, 1000, 1000);
+      background: rgb(0, 0, 0);
+      border: 1px solid rgb(1000, 1000, 1000);
+    }
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    @media (max-width: 1024px) {
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    .codeLink {
+      text-decoration: none;
+      padding: 0 0.5rem;
+      background: rgb(60, 60, 60);
+      border-radius: 4px;
+    }
+  }
+}