Merge pull request #6 from kitravee/4-create-landing-page

4 create landing page
kitravee · Aug 13, 2024 · abaade3 · abaade3
2 parents 1761e63 + aac8492
commit abaade3
Show file tree

Hide file tree

Showing 21 changed files with 60 additions and 90 deletions.
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
@@ -1,11 +1,11 @@
 import Image from "next/image";
-import { Button } from "@repo/ui/button";
+// import { Button } from "@repo/ui/button";
 import styles from "./page.module.css";
 
 export default function Home() {
   return (
     <div className={styles.page}>
-      <main className={styles.main}>
+      {/* <main className={styles.main}>
         <Image
           className={styles.logo}
           src="/next.svg"
@@ -49,7 +49,7 @@ export default function Home() {
         <Button appName="docs" className={styles.secondary}>
           Open alert
         </Button>
-      </main>
+      </main> */}
       <footer className={styles.footer}>
         <a
           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"

diff --git a/apps/web/src/app/components/layout/app-header.tsx b/apps/web/src/app/components/layout/app-header.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import { FrameIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
-import { Badge } from "@repo/ui/badge";
-import { buttonVariants } from "@repo/ui/button";
+import { Badge, buttonVariants } from "@repo/ui";
 import Link from "next/link";
 import { FC } from "react";
 import { ModeToggle } from "../ui";

diff --git a/apps/web/src/app/components/ui/mode-toggle.tsx b/apps/web/src/app/components/ui/mode-toggle.tsx
@@ -4,13 +4,13 @@ import * as React from "react";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 
-import { Button } from "@repo/ui/button";
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@repo/ui/dropdown-menu";
+} from "@repo/ui";
 
 export const ModeToggle: React.FC = () => {
   const { setTheme } = useTheme();

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning={true}>
       <body
         className={`${geistSans.variable} ${geistMono.variable} relative flex w-full flex-col justify-center overflow-x-hidden scroll-smooth bg-background font-sans`}
       >

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -3,12 +3,11 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@repo/ui/accordion";
+} from "@repo/ui";
 import { AppHeader } from "./components/layout/app-header";
-import { ShinyButton } from "@repo/ui/shiny-button";
+import { ShinyButton } from "@repo/ui";
 import { AnimatedBeamDemo } from "./presentation/animated-beam-demo";
 import { AppFooter } from "./components/layout";
-import { buttonVariants } from "@repo/ui/button";
 import Link from "next/link";
 
 export default function Home() {
@@ -18,12 +17,12 @@ export default function Home() {
       <main>
         <section id="hero" className="container">
           <div className="flex flex-col gap-6 md:gap-8 justify-center align-middle pt-5 md:pt-28">
-            <h1 className="text-black dark:text-white relative mx-0 max-w-[43.5rem] pt-5 md:mx-auto md:px-4 md:py-2 text-left tracking-tighter text-balance md:text-center font-semibold md:text-7xl lg:text-7xl sm:text-7xl text-5xl">
+            <h1 className="font-sans text-black dark:text-white relative mx-0 max-w-[43.5rem] pt-5 md:mx-auto md:px-4 md:py-2 text-left tracking-tighter text-balance md:text-center font-semibold md:text-7xl lg:text-7xl sm:text-7xl text-5xl">
               Unify Your Digital Ecosystem
             </h1>
             <div className="flex md:justify-center">
               <div className="max-w-xl text-left md:text-center">
-                <p className="text-balance text-base tracking-tight text-black/75 dark:font-medium dark:text-white/75 md:text-lg ">
+                <p className="font-mono text-balance text-base tracking-tight text-black/75 dark:font-medium dark:text-white/75 md:text-lg ">
                   streamlines your business by unifying digital tools and
                   processes into a seamless, easy-to-manage platform, empowering
                   you to optimize operations and drive growth effortlessly.
@@ -42,7 +41,7 @@ export default function Home() {
           </div>
         </section>
         <section id="demo">
-          <div className="pb-20">
+          <div className="container pb-20">
             <AnimatedBeamDemo />
           </div>
         </section>
@@ -51,16 +50,3 @@ export default function Home() {
     </div>
   );
 }
-
-const Test = () => {
-  return (
-    <Accordion type="single" collapsible>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It adheres to the WAI-ARIA design pattern.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};
diff --git a/apps/web/src/app/presentation/animated-beam-demo.tsx b/apps/web/src/app/presentation/animated-beam-demo.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { FrameIcon } from "@radix-ui/react-icons";
-import { AnimatedBeam } from "@repo/ui/animated-beam";
-import { cn } from "@repo/ui/utils";
+import { AnimatedBeam } from "@repo/ui";
+// import { AnimatedBeam } from "@repo/ui/animated-beam";
+import { cn } from "@repo/ui";
 import React, { FC, forwardRef, useRef } from "react";
 
 const Circle = forwardRef<
@@ -151,8 +152,8 @@ const Icons = {
         y2="40.615"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" stop-color="#2aa4f4"></stop>
-        <stop offset="1" stop-color="#007ad9"></stop>
+        <stop offset="0" stopColor="#2aa4f4"></stop>
+        <stop offset="1" stopColor="#007ad9"></stop>
       </linearGradient>
       <path
         fill="url(#Ld6sqrtcxMyckEl6xeDdMa_uLWV5A9vXIPu_gr1)"
@@ -180,13 +181,13 @@ const Icons = {
         r="44.899"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" stop-color="#fd5"></stop>
-        <stop offset=".328" stop-color="#ff543f"></stop>
-        <stop offset=".348" stop-color="#fc5245"></stop>
-        <stop offset=".504" stop-color="#e64771"></stop>
-        <stop offset=".643" stop-color="#d53e91"></stop>
-        <stop offset=".761" stop-color="#cc39a4"></stop>
-        <stop offset=".841" stop-color="#c837ab"></stop>
+        <stop offset="0" stopColor="#fd5"></stop>
+        <stop offset=".328" stopColor="#ff543f"></stop>
+        <stop offset=".348" stopColor="#fc5245"></stop>
+        <stop offset=".504" stopColor="#e64771"></stop>
+        <stop offset=".643" stopColor="#d53e91"></stop>
+        <stop offset=".761" stopColor="#cc39a4"></stop>
+        <stop offset=".841" stopColor="#c837ab"></stop>
       </radialGradient>
       <path
         fill="url(#yOrnnhliCrdS2gy~4tD8ma_Xy10Jcu1L2Su_gr1)"
@@ -200,8 +201,8 @@ const Icons = {
         gradientTransform="matrix(1 0 0 .6663 0 1.849)"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" stop-color="#4168c9"></stop>
-        <stop offset=".999" stop-color="#4168c9" stop-opacity="0"></stop>
+        <stop offset="0" stopColor="#4168c9"></stop>
+        <stop offset=".999" stopColor="#4168c9" stopOpacity="0"></stop>
       </radialGradient>
       <path
         fill="url(#yOrnnhliCrdS2gy~4tD8mb_Xy10Jcu1L2Su_gr2)"

diff --git a/apps/web/src/app/presentation/bento-demo.tsx b/apps/web/src/app/presentation/bento-demo.tsx
@@ -5,7 +5,7 @@ import {
   GlobeIcon,
   InputIcon,
 } from "@radix-ui/react-icons";
-import { BentoCard, BentoGrid } from "@repo/ui/bento-grid";
+import { BentoCard, BentoGrid } from "@repo/ui";
 
 const features = [
   {

diff --git a/packages/ui/components.json b/packages/ui/components.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -2,19 +2,8 @@
   "name": "@repo/ui",
   "version": "0.0.0",
   "private": true,
-  "exports": {
-    "./button": "./src/components/ui/button.tsx",
-    "./animated-beam": "./src/components/magicui/animated-beam.tsx",
-    "./accordion": "./src/components/ui/accordion.tsx",
-    "./badge": "./src/components/ui/badge.tsx",
-    "./bento-grid": "./src/components/magicui/bento-grid.tsx",
-    "./dropdown-menu": "./src/components/ui/dropdown-menu.tsx",
-    "./particles": "./src/components/magicui/particles.tsx",
-    "./pulsating-button": "./src/components/magicui/pulsating-button.tsx",
-    "./animated-shiny-text": "./src/components/magicui/animated-shiny-text.tsx",
-    "./shiny-button": "./src/components/magicui/shiny-button.tsx",
-    "./utils": "./src/libs/utils.ts"
-  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "generate:component": "turbo gen react-component"

diff --git a/packages/ui/src/components/magicui/animated-beam.tsx b/packages/ui/src/components/magicui/animated-beam.tsx
@@ -2,8 +2,7 @@
 
 import { RefObject, useEffect, useId, useState } from "react";
 import { motion } from "framer-motion";
-
-import { cn } from "@/src/libs/utils";
+import { cn } from "../../libs/utils";
 
 export interface AnimatedBeamProps {
   className?: string;
@@ -130,7 +129,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
       xmlns="http://www.w3.org/2000/svg"
       className={cn(
         "pointer-events-none absolute left-0 top-0 transform-gpu stroke-2",
-        className,
+        className
       )}
       viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
     >

diff --git a/packages/ui/src/components/magicui/animated-shiny-text.tsx b/packages/ui/src/components/magicui/animated-shiny-text.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties, FC, ReactNode } from "react";
 
-import { cn } from "@/src/libs/utils";
+import { cn } from "../../libs/utils";
 
 interface AnimatedShinyTextProps {
   children: ReactNode;

diff --git a/packages/ui/src/components/magicui/bento-grid.tsx b/packages/ui/src/components/magicui/bento-grid.tsx
@@ -1,8 +1,8 @@
 import { ReactNode } from "react";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
 
-import { cn } from "@/src/libs/utils";
-import { Button } from "@/src/components/ui/button";
+import { Button } from "../../components/ui/button";
+import { cn } from "../../libs/utils";
 
 export const BentoGrid = ({
   children,

diff --git a/packages/ui/src/components/magicui/marquee.tsx b/packages/ui/src/components/magicui/marquee.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/src/libs/utils";
+import { cn } from "../../libs/utils";
 
 interface MarqueeProps {
   className?: string;
@@ -28,7 +28,7 @@ export default function Marquee({
           "flex-row": !vertical,
           "flex-col": vertical,
         },
-        className,
+        className
       )}
     >
       {Array(repeat)

diff --git a/packages/ui/src/components/magicui/pulsating-button.tsx b/packages/ui/src/components/magicui/pulsating-button.tsx
@@ -2,7 +2,7 @@
 
 import React, { FC } from "react";
 
-import { cn } from "@/src/libs/utils";
+import { cn } from "../../libs/utils";
 
 interface PulsatingButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

diff --git a/packages/ui/src/components/magicui/shiny-button.tsx b/packages/ui/src/components/magicui/shiny-button.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { cn } from "../../libs/utils";
 import { motion, type AnimationProps } from "framer-motion";
 
-import { cn } from "@/src/libs/utils";
 import { FC } from "react";
 
 const animationProps = {

diff --git a/packages/ui/src/components/ui/accordion.tsx b/packages/ui/src/components/ui/accordion.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 // import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/src/libs/utils";
+import { cn } from "../../libs/utils";
 
 const Accordion = AccordionPrimitive.Root;
 

diff --git a/packages/ui/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/src/libs/utils";
+import { cn } from "../../libs/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/src/libs/utils";
+import { cn } from "../../libs/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",

diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -8,7 +8,7 @@ import {
   DotFilledIcon,
 } from "@radix-ui/react-icons";
 
-import { cn } from "@/src/libs/utils";
+import { cn } from "../../libs/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -0,0 +1,16 @@
+export * from "./libs/utils";
+
+export * from "./components/magicui/animated-beam";
+export * from "./components/magicui/animated-shiny-text";
+export * from "./components/magicui/bento-grid";
+export * from "./components/magicui/marquee";
+export * from "./components/magicui/particles";
+export * from "./components/magicui/pulsating-button";
+export * from "./components/magicui/shiny-button";
+
+export * from "./components/ui/accordion";
+export * from "./components/ui/badge";
+export * from "./components/ui/button";
+export * from "./components/ui/dropdown-menu";
+
+export * from "./libs/utils";
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -2,11 +2,8 @@
   "extends": "@repo/typescript-config/react-library.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "paths": {
-      "@/*": ["./*"]
-    },
     "outDir": "dist"
   },
-  "include": ["src", "components/ui/accordion.tsx"],
-  "exclude": ["node_modules", "dist"]
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
 }