Merge pull request #16 from Design-System-Project/feat/landing-page

add landing page placeholder

.gitignore

@@ -32,7 +32,6 @@ dist/
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
 
 certificates
 

apps/dashboard/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/dashboard/next.config.mjs

@@ -15,31 +15,6 @@ const nextConfig = {
       },
     ],
   },
-  async headers() {
-    return [
-      {
-        source: '/api/:path*',
-        headers: [
-          {
-            key: 'Access-Control-Allow-Credentials',
-            value: 'true',
-          },
-          {
-            key: 'Access-Control-Allow-Origin',
-            value: '*', // TODO: Perhaps set figma origin instead?
-          },
-          {
-            key: 'Access-Control-Allow-Methods',
-            value: 'POST, PUT, DELETE, OPTIONS',
-          },
-          {
-            key: 'Access-Control-Allow-Headers',
-            value: 'Content-Type, Authorization',
-          },
-        ],
-      },
-    ];
-  },
 
   reactStrictMode: true,
 

apps/dashboard/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "prettier": "@ds-project/prettier",
   "scripts": {
-    "dev": "next dev --experimental-https",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint",

apps/dashboard/src/app/(home)/layout.tsx

@@ -0,0 +1,20 @@
+import { Footer } from '@/components/footer';
+import { NavigationBar } from '@/components/navigation-bar/navigation-bar';
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <header className="sticky top-0 w-full flex justify-center">
+        <NavigationBar />
+      </header>
+      <main className="flex min-h-screen w-full flex-col items-center py-2">
+        {children}
+      </main>
+      <Footer />
+    </>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { GetStartedBanner } from '@/components/banners/get-started-banner/get-started-banner';
+import { VisionBanner } from '@/components/banners/vision-banner/vision-banner';
+import { Hero } from '@/components/hero';
+
+export default function Home() {
+  return (
+    <>
+      <div className="mx-4">
+        <Hero />
+      </div>
+      <div className="max-w-screen-lg mx-4">
+        <VisionBanner />
+        <GetStartedBanner />
+      </div>
+    </>
+  );
+}

apps/dashboard/src/app/(dashboard)/integrations/providers/figma/_components/provider.tsx → apps/dashboard/src/app/app/integrations/providers/figma/_components/provider.tsx

@@ -32,7 +32,9 @@ export async function FigmaProvider() {
       </Button>
 
       <Button>
-        <Link href="/integrations/providers/figma/resources">Resources</Link>
+        <Link href="/app/integrations/providers/figma/resources">
+          Resources
+        </Link>
       </Button>
     </div>
   );

apps/dashboard/src/app/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import '../globals.css';
+import { AppNavigation } from '@/components';
+import { api } from '@ds-project/api/rsc';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'DS Project',
+  description: 'Manage Design System',
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const projects = await api.projects.account();
+  const user = await api.users.current();
+
+  return (
+    <>
+      <header className="sticky top-0 w-full">
+        <AppNavigation
+          className="px-2 pt-2"
+          projects={projects}
+          email={user?.email ?? 'Account'}
+        />
+      </header>
+      <main className="flex min-h-screen w-full flex-col items-center py-2">
+        {children}
+      </main>
+    </>
+  );
+}

apps/dashboard/src/app/auth/callback/route.ts

@@ -6,7 +6,7 @@ export async function GET(request: Request) {
   const { searchParams, origin } = new URL(request.url);
   const code = searchParams.get('code');
   // if "next" is in param, use it as the redirect URL
-  const next = searchParams.get('next') ?? '/';
+  const next = searchParams.get('next') ?? '/app';
 
   if (code) {
     const supabase = createServerClient<Database>();

apps/dashboard/src/app/auth/layout.tsx

@@ -1,9 +1,4 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import '../globals.css';
-import { cn } from '@/lib/css';
-
-const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'DS Project',
@@ -16,15 +11,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={cn(
-          'min-h-screen flex flex-col justify-center items-center',
-          inter.className
-        )}
-      >
-        {children}
-      </body>
-    </html>
+    <div className={'min-h-screen flex flex-col justify-center items-center'}>
+      {children}
+    </div>
   );
 }

apps/dashboard/src/app/layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { cn } from '@/lib/css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'DS Project',
+  description: 'Manage Design System',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={cn(
+          'flex flex-col items-center bg-zinc-100 min-h-screen',
+          inter.className
+        )}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

apps/dashboard/src/components/navigation/navigation.tsx → apps/dashboard/src/components/app-navigation/navigation.tsx

@@ -17,13 +17,17 @@ import { HomeButton } from '../home-button';
 import type { SelectProjects } from '@ds-project/database/schema';
 import { AccountMenu } from '../account-menu/acocunt-menu';
 
-interface NavigationProps {
+interface AppNavigationProps {
   className?: string;
   projects?: Pick<SelectProjects, 'id' | 'name'>[];
   email: string;
 }
 
-export function Navigation({ className, projects, email }: NavigationProps) {
+export function AppNavigation({
+  className,
+  projects,
+  email,
+}: AppNavigationProps) {
   return (
     <nav
       className={cn(
@@ -55,14 +59,14 @@ export function Navigation({ className, projects, email }: NavigationProps) {
         <NavigationMenu>
           <NavigationMenuList>
             <NavigationMenuItem>
-              <Link href="/tokens" legacyBehavior passHref>
+              <Link href="/app/tokens" legacyBehavior passHref>
                 <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                   Tokens
                 </NavigationMenuLink>
               </Link>
             </NavigationMenuItem>
             <NavigationMenuItem>
-              <Link href="/integrations" legacyBehavior passHref>
+              <Link href="/app/integrations" legacyBehavior passHref>
                 <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                   Integrations
                 </NavigationMenuLink>

apps/dashboard/src/components/banners/community-banner/community-banner.tsx

@@ -0,0 +1,37 @@
+import { Icons, Text } from '@ds-project/components';
+import Link from 'next/link';
+import Image from 'next/image';
+import discordIcon from './discord-icon.png';
+import { Button } from '@/components/button';
+
+export function CommunityBanner() {
+  return (
+    <article
+      id="community"
+      className="relative overflow-hidden flex flex-col gap-4 border border-zinc-600 rounded-md p-10 bg-zinc-900 text-zinc-50"
+    >
+      <header>
+        <Text size="lg">
+          <h3>Join the community</h3>
+        </Text>
+      </header>
+      <div className="flex gap-2">
+        <Button asChild>
+          <Link href="https://discord.gg/AKza6Mqr">
+            <Icons.DiscordLogoIcon className="mr-2" /> Join our Discord
+          </Link>
+        </Button>
+        <Button asChild mode="dark">
+          <Link href="https://github.com/Design-System-Project/platform">
+            <Icons.GitHubLogoIcon className="mr-2" /> Star us on GitHub
+          </Link>
+        </Button>
+      </div>
+      <Image
+        src={discordIcon}
+        alt=""
+        className="object-cover absolute size-64 -right-0 -top-10"
+      />
+    </article>
+  );
+}

apps/dashboard/src/components/banners/community-banner/index.ts

@@ -0,0 +1 @@
+export * from './community-banner';

apps/dashboard/src/components/banners/get-started-banner/get-started-banner.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@/components/button';
+import { Icons, Text } from '@ds-project/components';
+import Link from 'next/link';
+
+export function GetStartedBanner() {
+  return (
+    <section className="w-full min-h-[40vh] flex justify-center items-center">
+      <div className="flex w-full flex-col gap-4 border border-zinc-200 rounded-md p-10 bg-zinc-50 text-zinc-950 items-center">
+        <Text size="lg" align={'center'}>
+          <h4>
+            Get started with DS and elevate the developer experience and
+            productivity across your design and engineering teams
+          </h4>
+        </Text>
+        <div>
+          <Button asChild mode="dark">
+            <Link href="/app">
+              Get Started <Icons.ArrowRightIcon />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/dashboard/src/components/banners/get-started-banner/index.ts

@@ -0,0 +1 @@
+export * from './get-started-banner';

apps/dashboard/src/components/banners/vision-banner/_components/card.tsx

@@ -0,0 +1,19 @@
+import { Text } from '@ds-project/components';
+
+interface CardProps {
+  title: string;
+  description: string;
+}
+export function Card({ description, title }: CardProps) {
+  return (
+    <div className="h-full p-4 rounded-md border bg-white border-zinc-300 flex gap-4 flex-col">
+      <div className="w-full h-44 bg-zinc-800 rounded-md"></div>
+      <Text size="base" weight="medium" leading="tight">
+        <h2>{title}</h2>
+      </Text>
+      <Text size="sm" weight="light" leading="loose">
+        <p>{description}</p>
+      </Text>
+    </div>
+  );
+}

apps/dashboard/src/components/banners/vision-banner/index.ts

@@ -0,0 +1 @@
+export * from './vision-banner';