docs: Add admin section to home page

Author: aXenDeveloper

apps/docs/src/app/(home)/page.tsx

@@ -4,6 +4,7 @@ import { buttonVariants } from '@vitnode/core/components/ui/button';
 import { cn } from '@vitnode/core/lib/utils';
 import { CallToActionSection } from './sections/call-to-action';
 import { PoweringBySection } from './sections/powering-by/powering-by';
+import { AdminSection } from './sections/admin/admin';
 
 export const metadata: Metadata = {
   title: 'VitNode: Extendable Framework for Building Apps',
@@ -43,7 +44,6 @@ export default function HomePage() {
                 }),
               )}
               href="/docs/dev"
-              prefetch
             >
               Get Started
             </Link>
@@ -79,6 +79,7 @@ export default function HomePage() {
       </section>
 
       <PoweringBySection />
+      <AdminSection />
 
       <CallToActionSection />
     </div>

apps/docs/src/app/(home)/sections/admin/admin.tsx

@@ -0,0 +1,79 @@
+import { CpuIcon, LockIcon, SparklesIcon, ZapIcon } from 'lucide-react';
+import Image from 'next/image';
+import debugPanelImg from './debug_panel.png';
+
+export const AdminSection = () => {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-6xl space-y-12 px-6">
+        <div className="flex items-center justify-center text-center">
+          <h2 className="max-w-xl text-4xl font-semibold">
+            Powerful AdminCP brings together all management tools
+          </h2>
+        </div>
+        <div className="relative rounded-3xl p-3 md:-mx-8 lg:col-span-3">
+          <div className="aspect-88/36 relative">
+            <div className="bg-linear-to-t z-1 from-background absolute inset-0 to-transparent"></div>
+            <Image
+              src={debugPanelImg}
+              className="hidden dark:block"
+              alt="payments illustration dark"
+              width={2797}
+              height={1137}
+            />
+            <Image
+              src={debugPanelImg}
+              className="dark:hidden"
+              alt="payments illustration light"
+              width={2797}
+              height={1137}
+            />
+          </div>
+        </div>
+        <div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <CpuIcon className="size-4" />
+              <h3 className="text-sm font-medium">Powerful</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              Manage users, content and settings from one powerful command
+              center.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <CpuIcon className="size-4" />
+              <h3 className="text-sm font-medium">Powerful</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              Manage users, content and settings from one powerful command
+              center.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <LockIcon className="size-4" />
+              <h3 className="text-sm font-medium">Powerful</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              Manage users, content and settings from one powerful command
+              center.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <SparklesIcon className="size-4" />
+
+              <h3 className="text-sm font-medium">Powerful</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              Manage users, content and settings from one powerful command
+              center.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};

apps/docs/src/app/(home)/sections/admin/debug_panel.png

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { InfiniteSlider } from '../../../../components/infinite-slider';
+import { InfiniteSlider } from '@/components/infinite-slider';
 import { NextJSLogo } from './logos/nextjs';
 import { HonoJSLogo } from './logos/honojs';
 import { TailwindCSSLogo } from './logos/tailwindcss';
@@ -70,16 +70,6 @@ export const PoweringBySection = () => {
 
             <div className="bg-linear-to-r from-background absolute inset-y-0 left-0 w-20"></div>
             <div className="bg-linear-to-l from-background absolute inset-y-0 right-0 w-20"></div>
-            {/* <ProgressiveBlur
-              className="pointer-events-none absolute left-0 top-0 h-full w-20"
-              direction="left"
-              blurIntensity={1}
-            />
-            <ProgressiveBlur
-              className="pointer-events-none absolute right-0 top-0 h-full w-20"
-              direction="right"
-              blurIntensity={1}
-            /> */}
           </div>
         </div>
       </div>