feat(docs): hero in progress, some components fixed

apps/docs/components/demos/index.ts

@@ -0,0 +1 @@
+export * from "./user-twitter-card";

apps/docs/components/demos/user-twitter-card.tsx

@@ -0,0 +1,48 @@
+import {useState} from "react";
+import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@nextui-org/react";
+
+export const UserTwitterCard = () => {
+  const [isFollowed, setIsFollowed] = useState(false);
+
+  return (
+    <Card className="max-w-[300px]">
+      <CardHeader className="justify-between">
+        <div className="flex gap-5">
+          <Avatar isBordered radius="full" size="md" src="/avatars/avatar-1.png" />
+          <div className="flex flex-col items-start justify-center">
+            <h4 className="text-base font-semibold leading-none text-neutral-600">Zoey Lang</h4>
+            <h5 className="text-sm tracking-tight text-neutral-400">@zoeylang</h5>
+          </div>
+        </div>
+        <Button
+          className={isFollowed ? "bg-foreground text-foreground border-neutral-400" : ""}
+          color="primary"
+          radius="full"
+          size="sm"
+          variant={isFollowed ? "bordered" : "solid"}
+          onPress={() => setIsFollowed(!isFollowed)}
+        >
+          {isFollowed ? "Unfollow" : "Follow"}
+        </Button>
+      </CardHeader>
+      <CardBody className="px-3 py-0">
+        <p className="text-sm pl-px text-neutral-400">
+          Full-stack developer, @getnextui lover she/her&nbsp;
+          <span aria-label="confetti" role="img">
+            🎉
+          </span>
+        </p>
+      </CardBody>
+      <CardFooter className="gap-3">
+        <div className="flex gap-1">
+          <p className="font-semibold text-neutral-400 text-sm">4</p>
+          <p className=" text-neutral-400 text-sm">Following</p>
+        </div>
+        <div className="flex gap-1">
+          <p className="font-semibold text-neutral-400 text-sm">97.1K</p>
+          <p className="text-neutral-400 text-sm">Followers</p>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};

apps/docs/components/docs-navbar.tsx

@@ -11,7 +11,12 @@ import {
   Link,
   Button,
   Kbd,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  DropdownTrigger,
 } from "@nextui-org/react";
+import {ChevronDownIcon} from "@nextui-org/shared-icons";
 
 import {NextUILogo, ThemeSwitch} from "@/components";
 import {TwitterIcon, GithubIcon, DiscordIcon, HeartFilledIcon} from "@/components/icons";
@@ -32,33 +37,67 @@ export const DocsNavbar = () => {
     "Log Out",
   ];
 
+  const searchInput = (
+    <Input
+      aria-label="Search"
+      classNames={{
+        input: "text-sm",
+      }}
+      endContent={
+        <Kbd className="hidden lg:inline-block" keys={["command"]}>
+          K
+        </Kbd>
+      }
+      labelPosition="outside"
+      placeholder="Search..."
+      type="search"
+    />
+  );
+
   return (
     <Navbar maxWidth="xl" position="sticky" onMenuOpenChange={setIsMenuOpen}>
-      <NavbarContent justify="start">
-        <NavbarMenuToggle
-          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
-          className="sm:hidden"
-        />
-        <NavbarBrand>
+      <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
+        <NavbarBrand className="gap-3">
           <NextUILogo />
+          <Dropdown placement="bottom-start">
+            <DropdownTrigger>
+              <Button
+                className="hidden sm:flex gap-0.5"
+                endIcon={<ChevronDownIcon className="text-xs" />}
+                radius="full"
+                size="xs"
+                variant="flat"
+              >
+                v2.0.0
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu
+              aria-label="NextUI versions"
+              defaultSelectedKeys={["v2"]}
+              selectionMode="single"
+            >
+              <DropdownItem key="v2">v2.0.0</DropdownItem>
+              <DropdownItem key="v1">v1.0.0</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         </NavbarBrand>
       </NavbarContent>
-      <NavbarContent className="hidden sm:flex" justify="center">
+      <NavbarContent className="hidden lg:flex" justify="center">
         <NavbarItem as={Link} color="foreground" href="#">
           Docs
         </NavbarItem>
         <NavbarItem isActive as={Link} href="#">
           Components
         </NavbarItem>
-        <NavbarItem as={Link} color="foreground" href="#">
-          Showcase
-        </NavbarItem>
         <NavbarItem as={Link} color="foreground" href="#">
           Figma
         </NavbarItem>
       </NavbarContent>
-      <NavbarContent justify="end">
-        <NavbarItem className="flex gap-2">
+      <NavbarContent className="flex w-full sm:hidden" justify="center">
+        <NavbarItem>{searchInput}</NavbarItem>
+      </NavbarContent>
+      <NavbarContent className="basis-1/5 sm:basis-full" justify="end">
+        <NavbarItem className="hidden sm:flex gap-2">
           <Link isExternal href="https://twitter.com/getnextui">
             <TwitterIcon className="text-neutral-400" />
           </Link>
@@ -70,17 +109,8 @@ export const DocsNavbar = () => {
           </Link>
           <ThemeSwitch />
         </NavbarItem>
-        <NavbarItem>
-          <Input
-            classNames={{
-              input: "text-sm",
-            }}
-            endContent={<Kbd keys={["command"]}>K</Kbd>}
-            labelPosition="outside"
-            placeholder="Search..."
-          />
-        </NavbarItem>
-        <NavbarItem>
+        <NavbarItem className="hidden sm:flex">{searchInput}</NavbarItem>
+        <NavbarItem className="hidden sm:flex">
           <Button
             isExternal
             as={Link}
@@ -94,6 +124,10 @@ export const DocsNavbar = () => {
             Sponsor
           </Button>
         </NavbarItem>
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="sm:hidden"
+        />
       </NavbarContent>
       <NavbarMenu>
         {menuItems.map((item, index) => (

apps/docs/components/hero.tsx

@@ -0,0 +1,140 @@
+import {useState, useEffect} from "react";
+import {
+  Button,
+  Input,
+  Tooltip,
+  Card,
+  Image,
+  CardFooter,
+  CardBody,
+  Switch,
+  Spinner,
+  Pagination,
+} from "@nextui-org/react";
+import {ArrowRightIcon, MoonFilledIcon, SunFilledIcon} from "@nextui-org/shared-icons";
+import {useTheme} from "next-themes";
+import dynamic from "next/dynamic";
+
+import {GithubIcon} from "@/components/icons";
+import {UserTwitterCard} from "@/components/demos";
+
+const DynamicLopperBG = dynamic(() => import("./looper-bg").then((mod) => mod.LooperBg), {
+  ssr: true,
+});
+
+const FloatingComponents: React.FC = () => {
+  const {theme, setTheme} = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  const isSelected = theme === "dark" && mounted;
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const onChange = () => {
+    theme === "light" ? setTheme("dark") : setTheme("light");
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Input
+        className="w-[200px]"
+        color="secondary"
+        defaultValue="NextUI"
+        label="Input"
+        labelPosition="outside"
+        radius="xl"
+        variant="bordered"
+        onClear={() => {}}
+      />
+
+      <Switch
+        classNames={{
+          startIcon: "text-white",
+        }}
+        endIcon={<MoonFilledIcon />}
+        isSelected={isSelected}
+        size="xl"
+        startIcon={<SunFilledIcon />}
+        onChange={onChange}
+      />
+
+      <UserTwitterCard />
+
+      <Tooltip
+        isOpen
+        showArrow
+        className="text-sm"
+        color="secondary"
+        content="Developers love Next.js"
+        placement="top"
+      >
+        <Button className="max-w-fit" color="secondary" size="sm" variant="flat">
+          Tooltip
+        </Button>
+      </Tooltip>
+
+      <Card isFooterBlurred className="max-w-fit" radius="2xl">
+        <Image className="object-cover" height={400} src="/images/hero-card.png" />
+        <CardFooter className="bg-white/10 justify-between py-2 rounded-none absolute -bottom-0.5 z-10">
+          <p className="text-xs text-white/80">Available soon.</p>
+          <Button color="secondary" radius="full" size="xs" variant="flat">
+            Notify me
+          </Button>
+        </CardFooter>
+      </Card>
+
+      <Card className="max-w-fit border-none">
+        <CardBody>
+          <Spinner color="secondary" size="xl" />
+        </CardBody>
+      </Card>
+
+      <Pagination isCompact showControls showShadow initialPage={6} total={10} />
+    </div>
+  );
+};
+
+export const Hero = () => {
+  return (
+    <section className="flex relative w-full flex-nowrap justify-between items-center h-[calc(84vh_-_64px)]">
+      <div className="flex flex-col gap-6 w-2/3">
+        <div>
+          <h1 className="text-6xl tracking-tight inline font-semibold">Make&nbsp;</h1>
+          <h1 className="text-6xl tracking-tight inline font-semibold bg-clip-text text-transparent bg-gradient-to-b from-[#FF1CF7] to-[#b249f8]">
+            beautiful&nbsp;
+          </h1>
+          <h1 className="text-6xl tracking-tight inline font-semibold">
+            websites regardless of your design experience.
+          </h1>
+        </div>
+        <h4 className="font-normal text-xl text-neutral-500">
+          Beautiful, fast and modern React UI library.
+        </h4>
+        <div className="flex items-center gap-4">
+          <Button
+            color="primary"
+            endIcon={
+              <ArrowRightIcon
+                className="group-data-[hover=true]:translate-x-0.5 transition-transform"
+                strokeWidth={2}
+              />
+            }
+            radius="full"
+            size="lg"
+          >
+            Get Started
+          </Button>
+          <Button radius="full" size="lg" startIcon={<GithubIcon />} variant="bordered">
+            Github
+          </Button>
+        </div>
+      </div>
+      <div>
+        <FloatingComponents />
+      </div>
+      <DynamicLopperBG className="absolute top-0 -z-50" />
+    </section>
+  );
+};

apps/docs/components/index.ts

@@ -1,3 +1,5 @@
 export * from "./nextui-logo";
 export * from "./docs-navbar";
 export * from "./theme-switch";
+export * from "./hero";
+export * from "./looper-bg";

apps/docs/components/theme-switch.tsx

@@ -14,6 +14,7 @@ export const ThemeSwitch: FC<{}> = () => {
   };
 
   const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = useSwitch({
+    isSelected: theme === "light",
     onChange,
   });
 

apps/docs/package.json

@@ -12,6 +12,7 @@
     "@vercel/analytics": "^0.1.11",
     "@nextui-org/react": "workspace:*",
     "@nextui-org/theme": "workspace:*",
+    "@nextui-org/shared-icons": "workspace:*",
     "next": "13.3.0",
     "next-themes": "^0.2.1",
     "react": "^18.0.0",

apps/docs/pages/index.tsx

@@ -1,9 +1,10 @@
 import {DefaultLayout} from "@/layouts";
+import {Hero} from "@/components";
 
 const IndexPage = () => {
   return (
     <DefaultLayout>
-      <p>Welcome to NextUI v2</p>
+      <Hero />
     </DefaultLayout>
   );
 };

apps/docs/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#000000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

apps/docs/public/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "NextUI",
+  "short_name": "NextUI",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

apps/docs/public/robots.txt

@@ -0,0 +1,9 @@
+# *
+User-agent: *
+Allow: /
+
+# Host
+Host: https://nextui.org
+
+# Sitemaps
+Sitemap: https://nextui.org/sitemap.xml

apps/docs/tailwind.config.js

@@ -1,5 +1,8 @@
 const { nextui } = require("@nextui-org/theme/dist/plugin");
 
+// get tailwindcss default config
+const defaultConfig = require("tailwindcss/defaultConfig");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -8,7 +11,11 @@ module.exports = {
     "./layouts/**/*.{js,ts,jsx,tsx,mdx}",
     "../../packages/core/theme/dist/**/*.{js,ts,jsx,tsx}"
   ],
+  darkMode: "class",
   theme: {
+    fontFamily: {
+      sans: ["Inter", ...defaultConfig.theme.fontFamily.sans],
+    },
     extend: {
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",

apps/docs/tsconfig.json

@@ -1,27 +1,14 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "jsx": "preserve"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

packages/components/pagination/src/pagination.tsx

@@ -3,7 +3,7 @@ import {PaginationItemValue} from "@nextui-org/use-pagination";
 import {useCallback} from "react";
 import {PaginationItemType} from "@nextui-org/use-pagination";
 import {ChevronIcon, EllipsisIcon, ForwardIcon} from "@nextui-org/shared-icons";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx, dataAttr} from "@nextui-org/shared-utils";
 
 import {UsePaginationProps, usePagination} from "./use-pagination";
 import PaginationItem from "./pagination-item";
@@ -81,7 +81,11 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
             value={value}
             onPress={onNext}
           >
-            <ChevronIcon className="rotate-180" />
+            <ChevronIcon
+              className={slots.chevronNext({
+                class: classNames?.chevronNext,
+              })}
+            />
           </PaginationItem>
         );
       }
@@ -100,12 +104,11 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
                 : setPage(activePage + dotsJump <= total ? activePage + dotsJump : total)
             }
           >
-            <EllipsisIcon className="group-hover:hidden" />
-            {isBefore ? (
-              <ForwardIcon className="hidden group-hover:block rotate-180" />
-            ) : (
-              <ForwardIcon className="hidden group-hover:block" />
-            )}
+            <EllipsisIcon className={slots?.ellipsis({class: classNames?.ellipsis})} />
+            <ForwardIcon
+              className={slots?.forwardIcon({class: classNames?.forwardIcon})}
+              data-before={dataAttr(isBefore)}
+            />
           </PaginationItem>
         );
       }

packages/components/pagination/src/use-pagination.ts

@@ -68,6 +68,9 @@ interface Props extends Omit<HTMLNextUIProps<"ul">, "onChange"> {
    *    item: "item-classes",
    *    next: "next-classes", // next button classes
    *    cursor: "cursor-classes", // this is the one that moves when an item is selected
+   *    forwardIcon: "forward-icon-classes", // forward icon
+   *    ellipsis: "ellipsis-classes", // ellipsis icon
+   *    chevronNext: "chevron-next-classes", // chevron next icon
    * }} />
    * ```
    */

packages/core/theme/src/components/button.ts

@@ -23,6 +23,7 @@ import {colorVariants} from "../utils";
 const button = tv({
   base: [
     "z-0",
+    "group",
     "relative",
     "inline-flex",
     "items-center",

packages/core/theme/src/components/card.ts

@@ -28,6 +28,7 @@ const card = tv({
       "outline-none",
       "text-foreground",
       "box-border",
+      "bg-background",
       "dark:bg-content1",
       "border border-neutral-100",
       // focus ring
@@ -162,7 +163,7 @@ const card = tv({
     },
     isFooterBlurred: {
       true: {
-        footer: "backdrop-blur-xl backdrop-saturate-200",
+        footer: "bg-background/10 backdrop-blur backdrop-saturate-150",
       },
     },
     isDisabled: {

packages/core/theme/src/components/navbar.ts

@@ -55,9 +55,11 @@ const navbar = tv({
       "flex",
       "items-center",
       "justify-center",
-      "border-b",
-      "border-neutral-100",
-      "shadow-md",
+      "shadow-lg",
+      "shadow-neutral-300/40",
+      "dark:border-b",
+      "dark:border-neutral-100",
+      "dark:shadow-none",
     ],
     wrapper: [
       "flex",

packages/core/theme/src/components/pagination.ts

@@ -35,6 +35,9 @@ const pagination = tv({
       "origin-center",
       "left-0",
     ],
+    forwardIcon: "hidden group-hover:block data-[before=true]:rotate-180",
+    ellipsis: "group-hover:hidden",
+    chevronNext: "rotate-180",
   },
   variants: {
     variant: {

packages/utilities/shared-icons/src/arrow-right.tsx

@@ -0,0 +1,31 @@
+import {IconSvgProps} from "./types";
+
+export const ArrowRightIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...otherProps}
+  >
+    <path
+      d="M16.835 6.91821L23.9166 13.9999L16.835 21.0815"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth={strokeWidth}
+    />
+    <path
+      d="M4.08325 14H23.7183"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth={strokeWidth}
+    />
+  </svg>
+);

packages/utilities/shared-icons/src/index.ts

@@ -28,3 +28,4 @@ export * from "./lock-filled";
 export * from "./edit";
 export * from "./delete";
 export * from "./eye";
+export * from "./arrow-right";

pnpm-lock.yaml

@@ -272,6 +272,9 @@ importers:
       '@nextui-org/react':
         specifier: workspace:*
         version: link:../../packages/core/react
+      '@nextui-org/shared-icons':
+        specifier: workspace:*
+        version: link:../../packages/utilities/shared-icons
       '@nextui-org/theme':
         specifier: workspace:*
         version: link:../../packages/core/theme