Merge pull request #163 from premieroctet/feature/homepage

feat: add homepage

apps/docs/components/Footer.tsx

@@ -0,0 +1,22 @@
+import { GitHubIcon } from "./Hero";
+
+const Footer = () => (
+  <footer className="border-t border-gray-300 w-full p-6 border-dashed">
+    <div className="max-w-6xl border-3 mx-auto flex gap-2 items-center">
+      <img src="/logo.svg" width="40px" />
+      <a href="https://www.premieroctet.com/" className="font-semibold">
+        by Premier Octet
+      </a>
+      <div className="ml-auto text-sm text-black font-light gap-3 flex">
+        <a
+          href="https://github.com/premieroctet/next-admin"
+          className="flex items-center gap-2"
+        >
+          <GitHubIcon /> GitHub
+        </a>
+      </div>
+    </div>
+  </footer>
+);
+
+export default Footer;

apps/docs/components/Header.tsx

@@ -0,0 +1,29 @@
+import { GitHubIcon } from "./Hero";
+
+const Header = () => (
+  <header className="border-b border-gray-300 w-full p-4 border-dashed">
+    <div className="max-w-6xl border-3 mx-auto flex gap-2 items-center">
+      <img src="/logo.svg" width="40px" />
+      <div className="font-semibold">Next Admin</div>
+      <div className="ml-auto text-sm text-gray-500 font-light gap-4 flex">
+        <a
+          className="hover:text-gray-700"
+          href="https://next-admin-po.vercel.app/en/admin"
+        >
+          Demo
+        </a>
+        <a className="hover:text-gray-700" href="https://next-admin.js.org">
+          Docs
+        </a>
+        <a
+          href="https://github.com/premieroctet/next-admin"
+          className="hover:text-gray-700 flex items-center gap-1"
+        >
+          <GitHubIcon /> GitHub
+        </a>
+      </div>
+    </div>
+  </header>
+);
+
+export default Header;

apps/docs/components/Hero.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { Spotlight } from "./effects/Spotlight";
+
+export const GitHubIcon = () => (
+  <svg viewBox="0 0 24 24" aria-hidden="true" className="h-6 w-6">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"
+    ></path>
+  </svg>
+);
+
+export function Hero() {
+  return (
+    <div className="h-[35rem] w-full flex md:items-center md:justify-center bg-transparent antialiased relative overflow-hidden border-b border-dashed dark:border-b-stone-500">
+      <Spotlight
+        className="-top-40 left-0 md:left-60 md:-top-20"
+        fill="#82e9a6"
+      />
+      <div className=" p-4 max-w-7xl  mx-auto relative z-10  w-full pt-20 md:pt-0">
+        <h1 className="text-4xl md:text-7xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-b from-black/70 to-black/90 dark:text-white bg-opacity-50">
+          Full-featured Admin
+          <br /> for Next.js
+        </h1>
+        <p className="mt-4 font-normal text-2xl text-black dark:text-white max-w-xl text-center mx-auto">
+          Ready-to-go Admin for Next.js and Prisma
+        </p>
+        <div className="mt-10 max-w-xl text-center mx-auto flex flex-raw gap-4 justify-center">
+          <Link
+            href="/docs"
+            className="bg-black dark:bg-white dark:hover:bg-gray-700 rounded-lg px-6 py-3 text-white dark:text-black text-md font-semibold hover:bg-gray-800 dark:hover:bg-white/80 transition-colors duration-300 ease-in-out"
+          >
+            Documentation
+          </Link>
+          <Link
+            href="https://github.com/premieroctet/next-admin"
+            target="_blank"
+            className="dark:text-white dark:fill-white dark:hover:text-black dark:hover:fill-black rounded-lg px-6 py-3 text-black text-md font-semibold hover:bg-gray-100 transition-colors duration-300 ease-in-out border border-gray-300 flex gap-2"
+          >
+            <GitHubIcon />
+            View on GitHub
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/docs/components/Logo.js

@@ -15,6 +15,14 @@ const Logo = ({ width }) => (
         animation-iteration-count: infinite;
     }
 
+    .selection-effect {
+      stroke: #000;
+    }
+
+    .dark .selection-effect {
+        stroke: #fff;
+    }
+
     @keyframes selectionEffect {
         from {
             stroke-opacity: 1;
@@ -57,7 +65,6 @@ const Logo = ({ width }) => (
         y1="32"
         x2="93"
         y2="32"
-        stroke="#CB31EA"
         strokeWidth="4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -68,7 +75,6 @@ const Logo = ({ width }) => (
         y1="22"
         x2="99"
         y2="22"
-        stroke="#CB31EA"
         strokeWidth="4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -79,7 +85,6 @@ const Logo = ({ width }) => (
         y1="42"
         x2="89"
         y2="42"
-        stroke="#CB31EA"
         strokeWidth="4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -91,6 +96,6 @@ const Logo = ({ width }) => (
       </clipPath>
     </defs>
   </svg>
-)
+);
 
-export default Logo
+export default Logo;

apps/docs/components/Subtitle.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+const Subtitle = ({ children }: { children: ReactNode }) => {
+  return (
+    <h2 className="text-3xl dark:text-white font-semibold text-center bg-clip-text text-transparent bg-gradient-to-b from-black/70 to-black/90 bg-opacity-50 mt-10">
+      {children}
+    </h2>
+  );
+};
+
+export default Subtitle;

apps/docs/components/bento/FeaturesBento.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { cn } from "@/utils/cn";
+import {
+  BoltIcon,
+  CircleStackIcon,
+  CursorArrowRaysIcon,
+  LanguageIcon,
+  MagnifyingGlassIcon,
+  ShieldCheckIcon,
+} from "@heroicons/react/24/outline";
+import { BentoGrid, BentoGridItem } from "../effects/BentoGrid";
+import {
+  SkeletonFive,
+  SkeletonFour,
+  SkeletonOne,
+  SkeletonSix,
+  SkeletonThree,
+  SkeletonTwo,
+} from "./Skeletons";
+
+const items = [
+  {
+    title: "App Router support",
+    description: (
+      <span className="text-sm">
+        Built-in support for Next.js App Router and Page Router
+      </span>
+    ),
+    header: <SkeletonOne />,
+    className: "md:col-span-1",
+    icon: <BoltIcon className="h-5 w-5 text-neutral-500" />,
+  },
+  {
+    title: "CRUD ready",
+    description: (
+      <span className="text-sm">
+        Easily create, read, update and delete your data
+      </span>
+    ),
+    header: <SkeletonTwo />,
+    className: "md:col-span-1",
+    icon: <CursorArrowRaysIcon className="h-5 w-5 text-neutral-500" />,
+  },
+  {
+    title: "Prisma.js Support",
+    description: (
+      <span className="text-sm">
+        Just add our generator and you are good to go
+      </span>
+    ),
+    header: <SkeletonThree />,
+    className: "md:col-span-1",
+    icon: <CircleStackIcon className="h-5 w-5 text-neutral-500" />,
+  },
+  {
+    title: "Search and Filter",
+    description: (
+      <span className="text-sm">
+        Visualize, search and filter your data with ease
+      </span>
+    ),
+    header: <SkeletonFour />,
+    className: "md:col-span-1",
+    icon: <MagnifyingGlassIcon className="h-5 w-5 text-neutral-500" />,
+  },
+
+  {
+    title: "TypeScript",
+    description: (
+      <span className="text-sm">
+        Built with TypeScript: browse your code with confidence
+      </span>
+    ),
+    header: <SkeletonFive />,
+    className: "md:col-span-1",
+    icon: <ShieldCheckIcon className="h-5 w-5 text-neutral-500" />,
+  },
+  {
+    title: "i18n support",
+    description: (
+      <span className="text-sm">
+        Built-in support for i18n and multiple languages
+      </span>
+    ),
+    header: <SkeletonSix />,
+    className: "md:col-span-1",
+    icon: <LanguageIcon className="h-5 w-5 text-neutral-500" />,
+  },
+];
+
+export function FeaturesBento() {
+  return (
+    <BentoGrid className="max-w-4xl mx-auto md:auto-rows-[20rem] py-10">
+      {items.map((item, i) => (
+        <BentoGridItem
+          key={i}
+          title={item.title}
+          description={item.description}
+          header={item.header}
+          className={cn("[&>p:text-lg]", item.className)}
+          icon={item.icon}
+        />
+      ))}
+    </BentoGrid>
+  );
+}