feat: add homepage

premieroctet · Mar 5, 2024 · 460b030 · 460b030
1 parent 48ee292
commit 460b030
Show file tree

Hide file tree

Showing 21 changed files with 897 additions and 0 deletions.
diff --git a/apps/website/.eslintrc.json b/apps/website/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/apps/website/.gitignore b/apps/website/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/website/README.md b/apps/website/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/apps/website/next.config.mjs b/apps/website/next.config.mjs
@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'pbs.twimg.com',
+            },
+        ],
+    },
+};
+
+export default nextConfig;
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "website",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.1.1",
+    "clsx": "^2.1.0",
+    "framer-motion": "^11.0.8",
+    "mini-svg-data-uri": "^1.4.4",
+    "next": "14.1.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwind-merge": "^2.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  }
+}
diff --git a/apps/website/postcss.config.js b/apps/website/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/website/src/app/favicon.ico b/apps/website/src/app/favicon.ico
diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Next Admin - Full-featured Admin for Next.js and Prisma",
+  description: "Ready-to-go Admin for Next.js and Prisma",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { Hero } from "@/components/Hero";
+import Subtitle from "@/components/Subtitle";
+import { FeaturesBento } from "@/components/bento/FeaturesBento";
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between px-10">
+      <Header />
+      <Hero />
+      <div className="w-full bg-grid-small-black/[0.2]">
+        <div className="max-w-4xl mx-auto flex flex-col gap-10">
+          <Subtitle>Getting Started</Subtitle>
+          <div className="bg-black text-white font-mono px-5 py-3 rounded-md mx-auto inline-block shadow-[0_10px_20px_rgba(230,253,238,1)]">
+            yarn add @premieroctet/next-admin prisma-json-schema-generator
+          </div>
+        </div>
+        <Subtitle>Features</Subtitle>
+        <FeaturesBento />
+      </div>
+      <Footer />
+    </main>
+  );
+}
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/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;
diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/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;
diff --git a/apps/website/src/components/Hero.tsx b/apps/website/src/components/Hero.tsx
@@ -0,0 +1,48 @@
+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 rounded-md flex md:items-center md:justify-center bg-transparent antialiased relative overflow-hidden border-b border-dashed">
+      <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 bg-opacity-50">
+          Full-featured Admin
+          <br /> for Next.js
+        </h1>
+        <p className="mt-4 font-normal text-2xl text-black 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">
+          <a
+            href="https://next-admin.js.org"
+            target="_blank"
+            className="bg-black rounded-lg px-6 py-3 text-white text-md font-semibold hover:bg-gray-800 transition-colors duration-300 ease-in-out"
+          >
+            Documentation
+          </a>
+          <a
+            href="https://github.com/premieroctet/next-admin"
+            target="_blank"
+            className="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
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/website/src/components/Subtitle.tsx b/apps/website/src/components/Subtitle.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+const Subtitle = ({ children }: { children: ReactNode }) => {
+  return (
+    <h2 className="text-3xl 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;