From 6e9c438bfacca7a7af15f2aecdd8e3177d98e0cf Mon Sep 17 00:00:00 2001
From: Jordan <gilliamja.te@gmail.com>
Date: Thu, 30 May 2024 16:28:20 -0400
Subject: [PATCH] fix: mobile

---
 apps/www/app/(app)/docs/layout.tsx            |  2 +-
 apps/www/app/(app)/page.tsx                   | 19 +++++++++----------
 apps/www/components/animate/list.tsx          |  2 +-
 apps/www/components/announcement.tsx          |  2 +-
 apps/www/config/docs.ts                       | 18 +++++-------------
 .../example/bg-animate-button-demo.tsx        |  2 +-
 .../default/example/bg-media-demo.tsx         |  2 +-
 .../default/example/family-button-demo.tsx    |  2 +-
 .../default/example/tweet-grid-demo.tsx       |  9 +++++++--
 apps/www/registry/default/ui/tweet-grid.tsx   |  4 +++-
 10 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/apps/www/app/(app)/docs/layout.tsx b/apps/www/app/(app)/docs/layout.tsx
index 678c57c..041a88b 100644
--- a/apps/www/app/(app)/docs/layout.tsx
+++ b/apps/www/app/(app)/docs/layout.tsx
@@ -17,7 +17,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
     >
       <div className="border-b pt-12">
         {/* <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"> */}
-        <div className="flex-1 items-start bg-[#FAFAFA] px-12 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10 dark:bg-[#171517]">
+        <div className="flex-1 items-start bg-[#FAFAFA] sm:px-12 px-6 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10 dark:bg-[#171517]">
           <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
             <ScrollArea className="h-full py-6 pr-6 lg:py-8">
               <DocsSidebarNav items={docsConfig.sidebarNav} />
diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx
index 02f1912..9f9a713 100644
--- a/apps/www/app/(app)/page.tsx
+++ b/apps/www/app/(app)/page.tsx
@@ -32,33 +32,32 @@ export default function IndexPage() {
             </FadeIn>
             <FadeIn>
               <GradientHeading
-                size="xxl"
+                size="xl"
                 weight="bold"
-                className="text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]"
+                className="text-center text-xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]"
               >
                 Components crafted for Design Engineers
               </GradientHeading>
             </FadeIn>
 
             <FadeIn>
-              <div className="flex flex-wrap items-center justify-center gap-1 text-center text-lg font-light text-foreground  md:text-2xl md:font-normal">
+              <div className="flex flex-wrap items-center justify-center gap-1 text-center text-base  text-foreground  md:text-2xl md:font-normal leading-3 md:leading-6">
                 <span>Ready-to-use</span>
-                <div className="-rotate-45 rounded-full border border-black/10 p-1 shadow-lg">
-                  <ReactIcon className="h-6 w-6   " aria-hidden="true" />
+                <div className="-rotate-45 rounded-full border border-black/10 p-1 shadow-lg hidden md:block">
+                  <ReactIcon className=" h-6 w-6   " aria-hidden="true" />
                 </div>
                 <span> components for your React apps.</span>
 
+                <span>Shadcn compatible.</span>
                 <div className="rounded-full border border-black/10 p-1 shadow-lg">
                   <Icons.logo className="h-5 w-5" />
                 </div>
-
-                <span>Shadcn compatible.</span>
                 <span>Styled with tailwindcss.</span>
-                <div className="-rotate-45 rounded-full border border-black/10 p-1 shadow-lg">
+                <div className="-rotate-45 rounded-full border border-black/10 p-1 shadow-lg hidden md:block ">
                   <TailwindCSSIcon className="h-6 w-6  " aria-hidden="true" />
                 </div>
-                <span>Copy and paste. Open Source. Typed. </span>
-                <div className="rounded-xs border border-black/10 p-1 shadow-lg ">
+                <span className="">Copy and paste. Open Source. Typed. </span>
+                <div className="rounded-xs border border-black/10 p-1 shadow-lg hidden md:block">
                   <TypeScriptIcon className="h-6 w-6 " aria-hidden="true" />
                 </div>
               </div>
diff --git a/apps/www/components/animate/list.tsx b/apps/www/components/animate/list.tsx
index 24a868e..4059db5 100644
--- a/apps/www/components/animate/list.tsx
+++ b/apps/www/components/animate/list.tsx
@@ -243,7 +243,7 @@ const List: React.FC<ListProps> = ({
   renderItem,
 }) => {
   return (
-    <div className="mb-9 rounded-2xl  border border-black/5 p-6 shadow-sm ">
+    <div className="mb-9 rounded-2xl  border border-black/5 p-2 md:p-6 shadow-sm ">
       <div className=" overflow-auto  p-4">
         <div className="flex flex-col space-y-2">
           <div className="">
diff --git a/apps/www/components/announcement.tsx b/apps/www/components/announcement.tsx
index 3cd9fd1..6fcebf5 100644
--- a/apps/www/components/announcement.tsx
+++ b/apps/www/components/announcement.tsx
@@ -24,7 +24,7 @@ export function Announcement() {
       rel="noreferrer"
     >
       <Blocks className="h-4 w-4 group-hover:rotate-6 group-hover:fill-cyan-300" />{" "}
-      <Separator className="mx-2 h-4" orientation="vertical" />{" "}
+      <Separator className="mx-2 h-4 bg-neutral-900" orientation="vertical" />{" "}
       <span>Introducing Cult Templates</span>
       <ArrowRightIcon className="ml-1 h-4 w-4" />
       {/* <BgNoiseWrapper> */}
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index d11040a..05716ce 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -7,26 +7,18 @@ interface DocsConfig {
 
 export const docsConfig: DocsConfig = {
   mainNav: [
-    {
-      title: "Documentation",
-      href: "/docs",
-    },
+    // {
+    //   title: "Documentation",
+    //   href: "/docs",
+    // },
     {
       title: "Components",
-      href: "/docs/components/accordion",
+      href: "/docs/components/dynamic-island",
     },
     {
       title: "Themes",
       href: "/themes",
     },
-    {
-      title: "Examples",
-      href: "/examples",
-    },
-    {
-      title: "Blocks",
-      href: "/blocks",
-    },
   ],
   sidebarNav: [
     {
diff --git a/apps/www/registry/default/example/bg-animate-button-demo.tsx b/apps/www/registry/default/example/bg-animate-button-demo.tsx
index 33b82cb..f985996 100644
--- a/apps/www/registry/default/example/bg-animate-button-demo.tsx
+++ b/apps/www/registry/default/example/bg-animate-button-demo.tsx
@@ -27,7 +27,7 @@ const animations: Animations[] = ["spin", "pulse", "spin-slow", "spin-fast"]
 export const BgAnimateButtonsDemo = () => {
   return (
     <div className="w-full max-w-4xl">
-      <div className=" px-12 md:px-24 flex flex-col justify-center  rounded-lg space-y-4">
+      <div className=" sm:px-12 md:px-24 flex flex-col justify-center  rounded-lg space-y-4">
         {/* Roundings Grid */}
 
         <div className="grid grid-cols-3 gap-4">
diff --git a/apps/www/registry/default/example/bg-media-demo.tsx b/apps/www/registry/default/example/bg-media-demo.tsx
index c475d2b..4640f44 100644
--- a/apps/www/registry/default/example/bg-media-demo.tsx
+++ b/apps/www/registry/default/example/bg-media-demo.tsx
@@ -3,7 +3,7 @@ import BackgroundMedia from "../ui/bg-media"
 export default function BgMediaDemo() {
   return (
     <div className="w-full ">
-      <div className="min-w-[20rem] ">
+      <div className="md:min-w-[20rem] ">
         <BackgroundMedia
           type="video"
           variant="light"
diff --git a/apps/www/registry/default/example/family-button-demo.tsx b/apps/www/registry/default/example/family-button-demo.tsx
index 0b4a304..bffbaf7 100644
--- a/apps/www/registry/default/example/family-button-demo.tsx
+++ b/apps/www/registry/default/example/family-button-demo.tsx
@@ -159,7 +159,7 @@ export function OgImageSection() {
           initial={false}
           animate={{ height: bounds.height }}
         >
-          <div className="p-6" ref={ref}>
+          <div className="md:p-6 p-2" ref={ref}>
             <AnimatePresence
               custom={direction}
               mode="popLayout"
diff --git a/apps/www/registry/default/example/tweet-grid-demo.tsx b/apps/www/registry/default/example/tweet-grid-demo.tsx
index 0c0a9f4..011b985 100644
--- a/apps/www/registry/default/example/tweet-grid-demo.tsx
+++ b/apps/www/registry/default/example/tweet-grid-demo.tsx
@@ -21,14 +21,19 @@ const exampleTweets = [
 
 export default function TweetGridDemo({}) {
   return (
-    <div className="pb-12 max-w-4xl">
+    <div className="pb-12 md:max-w-4xl max-w-md">
       <div className="flex w-full justify-center pb-12">
         <GradientHeading size="xl" weight="black">
           Join the club
         </GradientHeading>
       </div>
       <div className="flex items-center justify-center w-full">
-        <TweetGrid tweets={exampleTweets} columns={2} spacing="lg" />
+        <TweetGrid
+          className="w-80 md:w-full "
+          tweets={exampleTweets}
+          columns={2}
+          spacing="lg"
+        />
       </div>
     </div>
   )
diff --git a/apps/www/registry/default/ui/tweet-grid.tsx b/apps/www/registry/default/ui/tweet-grid.tsx
index ae2cb28..3c62c19 100644
--- a/apps/www/registry/default/ui/tweet-grid.tsx
+++ b/apps/www/registry/default/ui/tweet-grid.tsx
@@ -38,15 +38,17 @@ export interface TweetGridProps
   extends VariantProps<typeof tweetGridVariants>,
     VariantProps<typeof tweetItemVariants> {
   tweets: string[]
+  className?: string
 }
 
 export const TweetGrid: React.FC<TweetGridProps> = ({
   tweets,
   columns,
   spacing,
+  className,
 }) => {
   return (
-    <div className={cn(tweetGridVariants({ columns }))}>
+    <div className={cn(tweetGridVariants({ columns }), className)}>
       {tweets.map((tweetId, i) => (
         <div
           key={`${tweetId}-${i}`}