Adding docs for getting started and all components (#3)

* 💄 Add proper layout for gradient in bg

* 🛠️ Change prettier code format flow in scripts

* 💄 Add code block component for docs

* 💄 Add steps for project setup and config

* 🎨 Code format using prettier

* 💄 Docs layout <> Button code docs v1

* 🎨 Prettier code format

* 🔥 Remove prettier format after package/registry updates

* 🎨 Prettier code format

* 🚸 Improve project setup flow

app/components/(component-docs)/button/page.mdx

@@ -0,0 +1,9 @@
+import ComponentDocsHeader from '@/components/website/component-docs-header';
+import { SETUP_CODE } from '@/package/registry/setup-code.tsx';
+import { CodeBlock } from '@/components/website/code-block.tsx';
+
+<ComponentDocsHeader />
+
+<CodeBlock hasViewMore fileName={SETUP_CODE['button'].registerAt}>
+  {SETUP_CODE['button'].code}
+</CodeBlock>

app/components/(component-docs)/layout.tsx

@@ -0,0 +1,14 @@
+import { ResponsiveControl } from '@/components/layouts/responsive-control';
+import { ReactNode } from 'react';
+
+export default function ComponentDocsLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <div className="component-docs-layout markdown-content">
+      <ResponsiveControl className="">{children}</ResponsiveControl>
+    </div>
+  );
+}

app/components/common/components-list.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@/components/ui/button';
+import { ReactNode } from 'react';
+
+export type ComponentListItemType = {
+  name: string;
+  description: string;
+  path: string;
+  render: ReactNode;
+};
+export const ComponentsList: ComponentListItemType[] = [
+  {
+    name: 'Button',
+    description:
+      'A framer-motion supported button with size and design variants.',
+    path: '/components/button',
+    render: <Button>Button</Button>,
+  },
+];

app/components/page.tsx

@@ -0,0 +1,34 @@
+import { PageHeader } from '@/components/layouts/page-header';
+import { ResponsiveControl } from '@/components/layouts/responsive-control';
+import { ComponentBlock } from '@/components/website/component-block';
+import {
+  ComponentListItemType,
+  ComponentsList,
+} from './common/components-list';
+
+export default function ComponentsPage() {
+  return (
+    <div className="components-page relative z-50">
+      <PageHeader>
+        <ResponsiveControl>
+          <h2 className="font-semibold text-6xl">{'Components'}</h2>
+        </ResponsiveControl>
+      </PageHeader>
+      <div className="components-list-container mt-12">
+        <ResponsiveControl className="grid grid-cols-3 gap-6">
+          {ComponentsList.map(
+            (component: ComponentListItemType, index: number) => {
+              return (
+                <ComponentBlock
+                  key={index}
+                  componentData={component}
+                  animationThreshold={index}
+                />
+              );
+            },
+          )}
+        </ResponsiveControl>
+      </div>
+    </div>
+  );
+}

app/getting-started/page.tsx

@@ -0,0 +1,9 @@
+import { SetupSection } from '@/components/sections/setup-section';
+
+export default async function GettingStarted() {
+  return (
+    <div className="getting-started-page">
+      <SetupSection />
+    </div>
+  );
+}

app/globals.css

@@ -8,7 +8,7 @@ body {
 }
 
 html {
-  @apply bg-black;
+  @apply bg-neutral-900;
 }
 
 body {

app/layout.tsx

@@ -5,6 +5,7 @@ import { CSPostHogProvider } from '@/services/posthog/provider';
 import WebsiteNavigation from '@/components/sections/website-navigation';
 import FullPageGridDesign from '@/components/layouts/full-page-grid-design';
 import { TailwindIndicator } from '@/components/dev/tailwind-breakpoint-indicator';
+import { ResponsiveControl } from '@/components/layouts/responsive-control';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -28,7 +29,18 @@ export default function RootLayout({
           <div className="grid-design-container relative z-10">
             <FullPageGridDesign />
           </div>
-          <div className="content-on-top-grid relative z-20">
+          <div className="content-on-top-grid relative z-20 pb-24">
+            <ResponsiveControl className="relative">
+              {/* <div className="gradient-effects-container"> */}
+              <div className="bg-violet-600 bg-opacity-60 blur-[200px] w-[400px] h-[400px] rounded-full absolute top-[100px]" />
+              <div className="bg-blue-500 bg-opacity-60 blur-[200px] w-[400px] h-[400px] rounded-full absolute top-[200px] left-[400px]" />
+              <div className="bg-rose-600 bg-opacity-40 blur-[160px] w-[300px] h-[300px] rounded-full absolute top-[300px] left-[600px]" />
+              <div className="bg-pink-600 bg-opacity-60 blur-[140px] w-[140px] h-[400px] rounded-full absolute top-[200px] right-0" />
+              <div className="bg-violet-600 bg-opacity-60 blur-[200px] w-[400px] h-[400px] rounded-full absolute top-12 right-0" />
+              <div className="bg-blue-800 bg-opacity-60 blur-[140px] w-[140px] h-[400px] rounded-full absolute top-0 left-0" />
+              <div className="bg-pink-500 bg-opacity-60 blur-[140px] w-[140px] h-[400px] rounded-full absolute top-[300px] left-0" />
+              {/* </div> */}
+            </ResponsiveControl>
             <WebsiteNavigation />
             {children}
           </div>

app/page.tsx

@@ -1,8 +1,9 @@
 import LandingHeroSection from '@/components/sections/landing-hero-section';
+import { SetupSection } from '@/components/sections/setup-section';
 
 export default function Home(): JSX.Element {
   return (
-    <div className="landing-page">
+    <div className="landing-page grid grid-cols-1 gap-12">
       <LandingHeroSection />
     </div>
   );

common/content.ts

@@ -0,0 +1,5 @@
+export const SetupSectionContent = {
+  headline: 'Project Setup and Configurations',
+  description:
+    "In order to use the components and cookies you must have the following dependencies and configs in your project. Here's a step-by-step setup guide.",
+};

components/layouts/page-header.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/helpers/utils';
+import { forwardRef } from 'react';
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({ className, ...args }, ref) => {
+    return (
+      <header
+        ref={ref}
+        className={cn('my-24 relative border-y border-white/10', className)}
+        {...args}
+      />
+    );
+  },
+);
+
+PageHeader.displayName = 'PageHeader';

components/sections/landing-hero-section.tsx

@@ -1,9 +1,11 @@
+import Link from 'next/link';
+import { PageHeader } from '../layouts/page-header';
 import { ResponsiveControl } from '../layouts/responsive-control';
 import { Button } from '../ui/button';
 
 export default function LandingHeroSection() {
   return (
-    <main className="landing-hero-section my-24 relative border-y border-y-neutral-800/80">
+    <PageHeader className="landing-hero-section">
       <ResponsiveControl className="relative z-30">
         <h1 className="landing-hero-headline font-bold text-6xl leading-snug tracking-tighter max-lg:text-5xl max-md:text-3xl">
           Build your UI fast <br className="max-sm:hidden" />
@@ -21,25 +23,25 @@ export default function LandingHeroSection() {
         </div>
         <div className="hero-section-cta-container flex flex-row items-center justify-start gap-4 mt-12">
           <Button size="lg" className="max-md:hidden">
-            Explore Cookies
-          </Button>
-          <Button size="lg" withArrow variant="ghost" className="max-md:hidden">
-            Components
-          </Button>
-          <Button className="md:hidden">Explore Cookies</Button>
-          <Button withArrow variant="ghost" className="md:hidden">
-            Components
+            Setup Project
           </Button>
+          <Link href={'/components'}>
+            <Button
+              size="lg"
+              withArrow
+              variant="ghost"
+              className="max-md:hidden">
+              Components
+            </Button>
+          </Link>
+          <Button className="md:hidden">Setup Project</Button>
+          <Link href={'/components'}>
+            <Button withArrow variant="ghost" className="md:hidden">
+              Components
+            </Button>
+          </Link>
         </div>
       </ResponsiveControl>
-      <div className="gradient-effects-container">
-        <div className="bg-violet-600 bg-opacity-60 blur-[200px] w-[400px] h-[400px] rounded-full absolute -bottom-[200px]" />
-        <div className="bg-blue-500 bg-opacity-60 blur-[200px] w-[400px] h-[400px] rounded-full absolute -bottom-[200px] left-[400px]" />
-        <div className="bg-rose-600 bg-opacity-40 blur-[160px] w-[300px] h-[300px] rounded-full absolute -bottom-[300px] left-[600px]" />
-        <div className="bg-pink-600 bg-opacity-60 blur-[140px] w-[140px] h-[400px] rounded-full absolute top-0 left-0" />
-        <div className="bg-violet-600 bg-opacity-60 blur-[200px] w-[400px] h-[400px] rounded-full absolute -bottom-[200px] right-0" />
-        <div className="bg-blue-800 bg-opacity-60 blur-[140px] w-[140px] h-[400px] rounded-full absolute top-0 right-0" />
-      </div>
-    </main>
+    </PageHeader>
   );
 }

components/sections/setup-section.tsx

@@ -0,0 +1,132 @@
+import { SetupSectionContent } from '@/common/content';
+import { ResponsiveControl } from '../layouts/responsive-control';
+import { forwardRef } from 'react';
+import { cn } from '@/helpers/utils';
+import { PageHeader } from '../layouts/page-header';
+import { Button } from '../ui/button';
+import { CodeBlock } from '../website/code-block';
+import { SETUP_CODE } from '@/package/registry/setup-code';
+import Link from 'next/link';
+
+type SetupStepType = {
+  title: string;
+  description: string;
+  action?: {
+    name: string;
+    path: string;
+  };
+  code?:
+    | string
+    | {
+        content: string;
+        fileName: string;
+      };
+};
+
+export interface SetupSectionProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface SetupStepContainerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  stepContent: SetupStepType;
+  stepIndex: number;
+}
+
+const SetupData: SetupStepType[] = [
+  {
+    title: 'Have a basic NextJS + Typescript + Tailwind project setup',
+    description:
+      'The setup is going to require a NextJS app with Typescript & Tailwind. Make sure you have a simple project setup, If you have it already, you can go to the next step.',
+    code: `# using npm \nnpx create-next-app app-name \n\n# using yarn \nyarn create next-app app-name`,
+  },
+  {
+    title: 'Installing dependencies',
+    description:
+      'All the cookies, components and required utilities are using various npm dependencies. Install them as your first step to get started.',
+    code: 'yarn add lucide-react framer-motion clsx tailwind-merge',
+  },
+  {
+    title: 'Add configuration for animations',
+    description:
+      'The configurations are going to provide basic animations to your components. You can customize and add custom animations in this code.',
+    code: {
+      content: SETUP_CODE['animation-config'].code,
+      fileName: SETUP_CODE['animation-config'].registerAt,
+    },
+  },
+  {
+    title: 'Add cn() as to helpers',
+    description:
+      'Components are using cn() to combine the classNames, supporting tailwind-merge. All thanks to shadcn for writing this.',
+    code: {
+      content: SETUP_CODE.utils.code,
+      fileName: SETUP_CODE.utils.registerAt,
+    },
+  },
+];
+
+export const SetupSection = forwardRef<HTMLDivElement, SetupSectionProps>(
+  ({ className, ...args }, ref) => {
+    return (
+      <section ref={ref} className={cn('setup-section')} id="setup" {...args}>
+        <PageHeader>
+          <ResponsiveControl className={cn('relative', className)}>
+            <h2 className="font-semibold text-4xl">
+              {SetupSectionContent.headline}
+            </h2>
+            <div className="setup-description-wrapper mt-4">
+              <p className="w-[56ch] opacity-60">
+                {SetupSectionContent.description}
+              </p>
+            </div>
+            <div className="next-step-actions-wrapper mt-6">
+              <Link href={'/components'}>
+                <Button withArrow>Explore Components</Button>
+              </Link>
+            </div>
+          </ResponsiveControl>
+        </PageHeader>
+        <div className="mt-12 setup-steps-container">
+          <ResponsiveControl className="grid grid-cols-1 items-start gap-36">
+            {SetupData.map((setup, index) => {
+              return (
+                <SetupStepContainer
+                  key={index}
+                  stepContent={setup}
+                  stepIndex={index}
+                />
+              );
+            })}
+          </ResponsiveControl>
+        </div>
+      </section>
+    );
+  },
+);
+
+SetupSection.displayName = 'SetupSection';
+
+export const SetupStepContainer = forwardRef<
+  HTMLDivElement,
+  SetupStepContainerProps
+>(({ className, stepContent, stepIndex, ...args }, ref) => {
+  return (
+    <div ref={ref} className={cn('setup-step-container relative')} {...args}>
+      <div className="setup-step-body flex flex-row items-start gap-6">
+        <div className="setup-step-body-content-wrapper flex flex-col items-start gap-2 w-[600px] sticky top-12">
+          <h3 className="text-xl font-medium">{stepContent.title}</h3>
+          <p className="text-white/50 mt-2">{stepContent.description}</p>
+        </div>
+        {typeof stepContent.code === 'string' ? (
+          <CodeBlock>{stepContent.code}</CodeBlock>
+        ) : (
+          <CodeBlock fileName={stepContent.code?.fileName} hasViewMore>
+            {stepContent.code?.content}
+          </CodeBlock>
+        )}
+      </div>
+    </div>
+  );
+});
+
+SetupStepContainer.displayName = 'SetupStepContainer';

components/sections/website-navigation.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { ResponsiveControl } from '../layouts/responsive-control';
-import { NavbarLogo } from '../ui/navbar-logo';
+import { NavbarLogo } from '../website/navbar-logo';
 import { Button } from '../ui/button';
 
 type NavbarOptionType = { path: string; name: string };
@@ -12,7 +12,7 @@ const NavbarOptions: NavbarOptionType[] = [
 
 export default function WebsiteNavigation() {
   return (
-    <nav className="website-navigation py-4">
+    <nav className="website-navigation py-4 relative z-50">
       <ResponsiveControl className="flex flex-row items-center justify-between">
         <div className="logo-wrapper">
           <Link href={'/'}>
@@ -27,7 +27,10 @@ export default function WebsiteNavigation() {
               </Link>
             );
           })}
-          <Button>Explore Cookies</Button>
+          <Button variant="secondary">Explore Cookies</Button>
+          <Link href={'/getting-started'}>
+            <Button withArrow>Start Building</Button>
+          </Link>
         </div>
       </ResponsiveControl>
     </nav>

components/ui/button.tsx

@@ -25,7 +25,7 @@ export interface ButtonProps
 const ButtonVariantStyles: Record<ButtonVariantType, string> = {
   primary:
     'bg-gradient-to-b from-blue-500 to-blue-600 text-white shadow-md active:shadow',
-  secondary: 'bg-neutral-800 focus:ring-neutral-700',
+  secondary: 'bg-white/10 hover:bg-white/20 focus:ring-neutral-700',
   ghost: 'bg-transparent hover:bg-white/10',
 };