fix 404 and move guides under getting started

apps/docs/app/getting-started/layout.tsx

@@ -7,7 +7,7 @@ import SubHeader from "@/app/ui/layout/subHeader/SubHeader";
 import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
 import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
 import { allGettingStarteds } from "contentlayer/generated";
-import { useSelectedLayoutSegment } from "next/navigation";
+import { notFound, useSelectedLayoutSegment } from "next/navigation";
 import type { ReactNode } from "react";
 
 export default function GettingStartedLayout({ children }: { children: ReactNode }) {
@@ -16,12 +16,12 @@ export default function GettingStartedLayout({ children }: { children: ReactNode
 
     const pageContent = allGettingStarteds.find(page => page.slug === type && page.section === section);
     if (!pageContent) {
-        return null;
+        return notFound();
     }
 
     const sectionLinks = getSectionLinks(pageContent);
     const allGettingStartedsLinks = getPageLinks(allGettingStarteds, {
-        order: ["overview", "installation-path", "advanced-options"]
+        order: ["overview", "installation-path", "advanced-options", "guides"]
     });
 
     return (

apps/docs/app/guides/layout.tsx

@@ -7,7 +7,7 @@ import SubHeader from "@/app/ui/layout/subHeader/SubHeader";
 import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
 import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
 import { allGuides } from "contentlayer/generated";
-import { useSelectedLayoutSegment } from "next/navigation";
+import { notFound, useSelectedLayoutSegment } from "next/navigation";
 import type { ReactNode } from "react";
 
 export default function GuideLayout({ children }: { children: ReactNode }) {
@@ -21,7 +21,7 @@ export default function GuideLayout({ children }: { children: ReactNode }) {
     const pageContent = allGuides.find(icon => icon.slug === type && icon.section === section);
 
     if (!pageContent) {
-        return null;
+        return notFound();
     }
 
     const sectionLinks = getSectionLinks(pageContent);

apps/docs/app/icons/layout.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import type { ReactNode } from "react";
-import { allIcons } from "contentlayer/generated";
-import { useSelectedLayoutSegment } from "next/navigation";
+import getPageLinks from "@/app/lib/getPageLinks";
+import getSectionLinks from "@/app/lib/getSectionLinks";
 import Sidebar from "@/app/ui/layout/sidebar/Sidebar";
 import SubHeader from "@/app/ui/layout/subHeader/SubHeader";
 import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
-import getSectionLinks from "@/app/lib/getSectionLinks";
 import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
-import getPageLinks from "@/app/lib/getPageLinks";
+import { allIcons } from "contentlayer/generated";
+import { notFound, useSelectedLayoutSegment } from "next/navigation";
+import type { ReactNode } from "react";
 
 export default function TokenLayout({ children }: { children: ReactNode }) {
     const selectedLayoutSegment = useSelectedLayoutSegment();
@@ -17,7 +17,7 @@ export default function TokenLayout({ children }: { children: ReactNode }) {
     const pageContent = allIcons.find(icon => icon.slug === type && icon.section === section);
 
     if (!pageContent) {
-        return null;
+        return notFound;
     }
 
     const sectionLinks = getSectionLinks(pageContent);

apps/docs/app/tokens/layout.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import type { ReactNode } from "react";
-import { allTokens } from "contentlayer/generated";
-import { useSelectedLayoutSegment } from "next/navigation";
+import getPageLinks from "@/app/lib/getPageLinks";
+import getSectionLinks from "@/app/lib/getSectionLinks";
 import Sidebar from "@/app/ui/layout/sidebar/Sidebar";
 import SubHeader from "@/app/ui/layout/subHeader/SubHeader";
 import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
 import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
-import getSectionLinks from "@/app/lib/getSectionLinks";
-import getPageLinks from "@/app/lib/getPageLinks";
+import { allTokens } from "contentlayer/generated";
+import { notFound, useSelectedLayoutSegment } from "next/navigation";
+import type { ReactNode } from "react";
 
 export default function TokenLayout({ children }: { children: ReactNode }) {
     const selectedLayoutSegment = useSelectedLayoutSegment();
@@ -17,7 +17,7 @@ export default function TokenLayout({ children }: { children: ReactNode }) {
     const pageContent = allTokens.find(token => token.slug === type && token.section === section);
 
     if (!pageContent) {
-        return null;
+        return notFound;
     }
 
     const sectionLinks = getSectionLinks(pageContent);

apps/docs/configs/navigation.ts

@@ -20,11 +20,6 @@ export const navigation: NavItem[] = [
         "path": "/icons/overview/introduction",
         "status": "ready"
     },
-    {
-        "label": "Guides",
-        "path": "/guides/overview/introduction",
-        "status": "ready"
-    },
     {
         "label": "Components",
         "path": "/components/component-list",

apps/docs/content/guides/guides/components.mdx → apps/docs/content/getting-started/guides/components.mdx

@@ -102,7 +102,7 @@ Add event handlers for more control, ensuring events continue propagating as exp
 ```
 
 #### Controlled Properties
-You can control the component's behavior by passing a controlled property.
+You can control the component's behavior by passing a controlled property.
 
 ```tsx
 <PopoverTrigger {...rest} open={isHovered}>

apps/docs/content/getting-started/overview/installation.mdx

@@ -30,3 +30,10 @@ Looking for a more tailored or specialized setup? Hopper offers advanced options
 {/* TODO */}
 - [Micro Frontend Architecture](#): Integrate Hopper into modular, micro-frontend-based projects. <Tag>Coming Soon</Tag>
 - [Granular CSS Imports](#): Optimize performance by importing only the CSS needed for specific components. <Tag>Coming Soon</Tag>
+
+## Guides
+
+Explore our collection of guides designed to help you get the most out of Hopper. From styling tips to advanced customization techniques, these resources are here to support your journey with our design system. Check back often as we continue to expand with more tutorials and best practices.
+
+- **Text Crop**: Discover how to achieve perfect vertical text alignment with our Text Crop guide. Learn how to compensate for uneven whitespace in web fonts and improve the appearance of your text using simple, effective CSS techniques. [Learn more about Text Crop](./guides/text-crop)
+- **Customizing Components**: Explore the flexibility of Hopper and Orbiter with our Customizing Components guide. This article introduces various customization options, from minimal styling adjustments to building entirely new components, categorized into distinct tiers to help you make the best choice for your needs. [Learn more about Customizing Components](./guides/components)