feat(docs): hero section responsive improved

2025-12-08 19:26:11 +00:00 · 2023-04-28 23:15:17 -03:00 · 2023-04-28 23:15:17 -03:00 · 8674a0bd89
commit 8674a0bd89
parent 1e7e2a13b5
14 changed files with 62 additions and 48 deletions
--- a/apps/docs/components/features-grid.tsx
+++ b/apps/docs/components/features-grid.tsx
@ -29,25 +29,26 @@ export const FeaturesGrid: React.FC<FeaturesGridProps> = ({features, ...props})
  };

  return (
-    <div className="flex gap-2" {...props}>
+    <div className="grid grid-cols-4 gap-4" {...props}>
      {features.map((feat: Feature, index: number) => (
-        <div key={`${feat.title}_${index}`}>
-          <Card
-            isBlurred
-            className="border-none before:bg-white/5 before:backdrop-blur-lg before:backdrop-saturate-[1.8]"
-            isPressable={!!feat.href}
-            onPress={() => handleClick(feat)}
-          >
-            <CardHeader>
-              <div>{feat.icon}</div>
-              <p>{feat.title}</p>
-              {feat.isExternal && <LinkIcon className="text-white" height={18} width={18} />}
-            </CardHeader>
-            <CardBody>
-              <p>{feat.description}</p>
-            </CardBody>
-          </Card>
-        </div>
+        <Card
+          key={`${feat.title}_${index}`}
+          isBlurred
+          className="border-none before:bg-white/5 before:backdrop-blur-lg before:backdrop-saturate-[1.8]"
+          isPressable={!!feat.href}
+          onPress={() => handleClick(feat)}
+        >
+          <CardHeader className="gap-2 pb-0">
+            <div className="flex justify-center p-2 rounded-full items-center bg-secondary-100 text-pink-500">
+              {feat.icon}
+            </div>
+            <p className="text-base font-semibold">{feat.title}</p>
+            {feat.isExternal && <LinkIcon className="text-white" height={18} width={18} />}
+          </CardHeader>
+          <CardBody>
+            <p className="font-light text-base text-neutral-700">{feat.description}</p>
+          </CardBody>
+        </Card>
      ))}
    </div>
  );
--- a/apps/docs/components/hero.tsx
+++ b/apps/docs/components/hero.tsx
@ -40,10 +40,11 @@ const FloatingComponents: React.FC = () => {
  };

  return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col relative w-1/2">
      <Switch
        classNames={{
-          base: "relative top-[80px] left-[240px] animate-[levitate_13s_ease_infinite_1s_reverse]",
+          base:
+            "absolute -top-[220px] -right-[40px] animate-[levitate_13s_ease_infinite_1s_reverse]",
          wrapper: "shadow-sm",
          startIcon: "text-white",
        }}
@ -55,7 +56,7 @@ const FloatingComponents: React.FC = () => {
      />

      <Input
-        className="relative top-[140px] left-[240px] animate-[levitate_10s_ease_infinite] w-[200px]"
+        className="absolute -top-[130px] -right-[120px] animate-[levitate_10s_ease_infinite] w-[200px]"
        color="secondary"
        defaultValue="NextUI"
        label="Input"
@ -67,7 +68,7 @@ const FloatingComponents: React.FC = () => {

      <Card
        isFooterBlurred
-        className="relative top-[-40px] left-[80px] h-[120px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
+        className="absolute -top-[260px] right-[100px] h-[120px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
        radius="2xl"
      >
        <Image
@ -83,9 +84,11 @@ const FloatingComponents: React.FC = () => {

      <Tabs
        aria-label="Floating tabs example"
-        className="relative -left-[144px] top-[-80px] animate-[levitate_17s_ease_infinite_1s]"
+        className=""
        classNames={{
+          base: "absolute left-[170px] -top-[160px] h-10 animate-[levitate_17s_ease_infinite_1s]",
          tabList: "max-w-[200px] bg-content1 shadow-sm",
+          panel: "hidden",
        }}
        radius="full"
        size="xs"
@ -95,15 +98,15 @@ const FloatingComponents: React.FC = () => {
        <TabItem key="files" title="Files" />
      </Tabs>

-      <UserTwitterCard className="relative -left-[240px] top-[-80px] animate-[levitate_16s_ease_infinite] border-none" />
+      <UserTwitterCard className="absolute left-[80px] -top-[80px] animate-[levitate_16s_ease_infinite] border-none" />

-      <Card className="relative left-[90px] -top-[220px] animate-[levitate_18s_ease_infinite] right-8 shadow-lg z-10 max-w-fit border-none">
+      <Card className="absolute right-[110px] -top-[60px] animate-[levitate_18s_ease_infinite] shadow-lg z-10 max-w-fit border-none">
        <CardBody>
          <NextUILogo small size={60} />
        </CardBody>
      </Card>

-      <div className="relative z-10 -top-[310px] -right-[200px] animate-[levitate_14s_ease_infinite_1s]">
+      <div className="absolute z-10 -top-[40px] -right-[230px] animate-[levitate_14s_ease_infinite_1s]">
        <Pagination
          isCompact
          showControls
@ -128,7 +131,7 @@ const FloatingComponents: React.FC = () => {
        placement="top"
      >
        <Button
-          className="relative -left-[120px] -top-[180px] max-w-fit animate-[levitate_14s_ease_infinite_0.5s]"
+          className="absolute left-[200px] top-[160px] max-w-fit animate-[levitate_14s_ease_infinite_0.5s]"
          color="secondary"
          size="sm"
          variant="flat"
@ -137,7 +140,7 @@ const FloatingComponents: React.FC = () => {
        </Button>
      </Tooltip>

-      <Card className="relative left-[220px] -top-[320px] animate-[levitate_16s_ease_infinite] right-8 shadow-lg z-10 max-w-fit border-none">
+      <Card className="absolute right-[10px] top-[30px] animate-[levitate_16s_ease_infinite] shadow-lg z-10 max-w-fit border-none">
        <CardBody>
          <Spinner color="secondary" size="xl" />
        </CardBody>
@ -145,7 +148,7 @@ const FloatingComponents: React.FC = () => {

      <Card
        isFooterBlurred
-        className="relative left-10 -top-[380px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
+        className="absolute right-[60px] top-[100px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
        radius="2xl"
      >
        <Image className="object-cover" height={200} src="/images/hero-card.jpeg" width={200} />
@ -162,7 +165,7 @@ const FloatingComponents: React.FC = () => {

 export const Hero = () => {
  return (
-    <section className="flex relative  w-full flex-nowrap justify-between items-center h-[calc(100vh_-_64px)] max-h-[800px]">
+    <section className="flex relative w-full flex-nowrap justify-between items-center h-[calc(100vh_-_64px)] 2xl:h-[calc(84vh_-_64px)]">
      <div className="flex flex-col gap-6 w-1/2">
        <div>
          <h1 className="text-5xl tracking-tight inline font-semibold">Make&nbsp;</h1>
@ -195,10 +198,10 @@ export const Hero = () => {
          </Button>
        </div>
      </div>
-      <div className="relative h-full">
-        <FloatingComponents />
-      </div>
-      <DynamicLopperBG className="absolute -top-1/2 -z-50" />
+
+      <FloatingComponents />
+
+      <DynamicLopperBG className="absolute translate-y-[10%] -z-50" />
    </section>
  );
 };
--- a/apps/docs/components/icons/devices.tsx
+++ b/apps/docs/components/icons/devices.tsx
@ -3,6 +3,7 @@ import {IconSvgProps} from "@/types";
 export const DevicesIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
  <svg
    aria-hidden="true"
+    fill="none"
    focusable="false"
    height={size || height}
    role="presentation"
--- a/apps/docs/components/icons/flash.tsx
+++ b/apps/docs/components/icons/flash.tsx
@ -3,6 +3,7 @@ import {IconSvgProps} from "@/types";
 export const FlashIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
  <svg
    aria-hidden="true"
+    fill="none"
    focusable="false"
    height={size || height}
    role="presentation"
--- a/apps/docs/components/icons/magic.tsx
+++ b/apps/docs/components/icons/magic.tsx
@ -3,6 +3,7 @@ import {IconSvgProps} from "@/types";
 export const MagicIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
  <svg
    aria-hidden="true"
+    fill="none"
    focusable="false"
    height={size || height}
    role="presentation"
--- a/apps/docs/content/landing/index.tsx
+++ b/apps/docs/content/landing/index.tsx
@ -18,13 +18,13 @@ export default {
    {
      title: "Themeable",
      description:
-        "Provides a simple way to customize default themes, you can change the colors, fonts, breakpoints and everything you need.",
+        "Provides a plugin to customize default themes, you can change all semantic tokens or create an entire new theme.",
      icon: <MagicIcon className="text-pink-500" />,
    },
    {
      title: "Fast",
      description:
-        "Avoids unnecessary styles props at runtime, making it more performant than other UI libraries.",
+        "Built on top of Tailwind CSS, which means no runtime styles, and no unnecessary classes in your bundle.",
      icon: <FlashIcon className="text-pink-500" />,
    },
    {
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@ -5,4 +5,9 @@

 html {
  overflow-y: scroll !important;
+  height: 100vh;
+}
+
+body, #__next {
+  height: 100%;
 }
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@ -14,7 +14,9 @@ module.exports = {
  darkMode: "class",
  theme: {
    fontFamily: {
-      sans: ["Inter", ...defaultConfig.theme.fontFamily.sans],
+      sans: [ "Inter var, sans-serif",{
+        fontFeatureSettings:'"cv02","cv03","cv04","cv11"',
+      }, ...defaultConfig.theme.fontFamily.sans],
    },
    extend: {
      backgroundImage: {
--- a/packages/components/avatar/stories/avatar.stories.tsx
+++ b/packages/components/avatar/stories/avatar.stories.tsx
@ -98,7 +98,7 @@ export const CustomSize = Template.bind({});
 CustomSize.args = {
  ...defaultProps,
  classNames: {
-    base: "w-32 h-32 text-md",
+    base: "w-32 h-32 text-base",
  },
 };

@ -108,7 +108,7 @@ CustomSizeImg.args = {
  src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
  name: "Junior",
  classNames: {
-    base: "w-32 h-32 text-md",
+    base: "w-32 h-32 text-base",
  },
 };

--- a/packages/components/tabs/src/use-tabs.ts
+++ b/packages/components/tabs/src/use-tabs.ts
@ -75,7 +75,7 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
    [...Object.values(variantProps), className],
  );

-  const tabListStyles = clsx(className, classNames?.tabList);
+  const baseStyles = clsx(className, classNames?.base);

  const context = useMemo<ContextType<T>>(
    () => ({
@ -97,13 +97,13 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
  );

  const getBaseProps: PropGetter = (props) => ({
-    className: slots.base({class: clsx(classNames?.base, props?.className)}),
+    className: slots.base({class: clsx(baseStyles, props?.className)}),
    ...mergeProps(filterDOMProps(otherProps, {labelable: true}), props),
  });

  const getTabListProps: PropGetter = (props) => ({
    ref: domRef,
-    className: slots.tabList({class: clsx(tabListStyles, props?.className)}),
+    className: slots.tabList({class: clsx(classNames?.tabList, props?.className)}),
    ...mergeProps(tabListProps, props),
    id: tabListId,
  });
--- a/packages/core/theme/src/components/avatar.ts
+++ b/packages/core/theme/src/components/avatar.ts
@ -73,7 +73,7 @@ const avatar = tv({
        base: "w-12 h-12 text-sm",
      },
      xl: {
-        base: "w-16 h-16 text-md",
+        base: "w-16 h-16 text-base",
      },
    },
    color: {
--- a/packages/core/theme/src/components/badge.ts
+++ b/packages/core/theme/src/components/badge.ts
@ -80,7 +80,7 @@ const badge = tv({
        badge: "px-1 text-sm",
      },
      xl: {
-        badge: "px-1 text-md",
+        badge: "px-1 text-base",
      },
    },
    placement: {
--- a/packages/core/theme/src/components/button.ts
+++ b/packages/core/theme/src/components/button.ts
@ -383,7 +383,7 @@ const button = tv({
 //   xs: "px-2 h-6 text-xs",
 //   sm: "px-3 h-8 text-sm",
 //   md: "px-4 h-10 text-base",
-//   lg: "px-6 h-12 text-md",
+//   lg: "px-6 h-12 text-base",
 //   xl: "px-8 h-14 text-lg",
 // },

--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@ -130,7 +130,7 @@ const input = tv({
        label: "text-xs",
        inputWrapper: "h-8 px-2",
        input: "text-xs",
-        clearButton: "text-md",
+        clearButton: "text-base",
      },
      md: {
        inputWrapper: "h-10",
@ -144,7 +144,7 @@ const input = tv({
      },
      xl: {
        inputWrapper: "h-14",
-        input: "text-md",
+        input: "text-base",
        clearButton: "text-xl right-3.5",
      },
    },
@ -746,7 +746,7 @@ const input = tv({
      size: "xl",
      class: {
        label: [
-          "text-md",
+          "text-base",
          "group-focus-within:text-sm",
          "group-focus-within:-translate-y-3",
          "group-[.is-filled]:text-sm",