fix himalaya

red-ninjas · Nov 2, 2023 · 3998752 · 3998752
1 parent 6ecebee
commit 3998752
Show file tree

Hide file tree

Showing 11 changed files with 186 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@himalaya-ui/core",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "main": "dist/bundle/index.js",
   "module": "dist/bundle/esm/index.js",
   "types": "dist/bundle/esm/index.d.ts",

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { Code } from 'components/icons';
 import {
   Button,
   ContentLayout,
@@ -9,52 +8,42 @@ import {
   Footer,
   FooterBottom,
   FooterNavigation,
-  GradientWord,
-  Grid,
   Hero,
   Link,
   PageLayout,
   Section,
   Text,
   useTheme,
 } from 'components';
+import { Code } from 'components/icons';
 import ThemeProvider from 'components/use-context/theme-provider';
 import { capitalize } from 'components/utils/collections';
 import { Background, Facts, Partners, Portfolio, RunningSlogan, Services } from 'lib/components';
-import metaData from '../lib/data/metadata.json';
 import { BrandLogo } from 'lib/components/icons';
+import metaData from '../lib/data/metadata.json';
 
 export default function Index() {
   const theme = useTheme();
   return (
     <>
       <div className="hero">
         <div className="hero-inner">
-          <Hero>
-            <Grid.Container gap={0} justify="center">
-              <Grid lg={22} justify="center">
-                <Hero.Tag>HIMALAYA UI</Hero.Tag>
-              </Grid>
-              <Grid lg={22} justify="center">
-                <Hero.Title>
-                  Scaling Heights of <GradientWord>Design Excellence</GradientWord>: Your UI Journey{' '}
-                  <span style={{ textDecoration: 'underline', fontWeight: 300 }}>Begins Here!</span>
-                </Hero.Title>
-              </Grid>
-              <Grid lg={18} justify="center">
-                <Hero.Desc>
-                  Elevate your Next.js web development with our open-source UI library, offering a comprehensive suite of customizable components for building
-                  modern and user-friendly interfaces.
-                </Hero.Desc>
-              </Grid>
-            </Grid.Container>
+          <Hero style={{ maxWidth: 1020 }}>
+            <Hero.Tag>HIMALAYA UI</Hero.Tag>
+            <Hero.Title>
+              Scaling Heights of Design Excellence: Your UI Journey <span style={{ textDecoration: 'underline', fontWeight: 300 }}>Begins Here!</span>
+            </Hero.Title>
+            <Hero.Desc>
+              Elevate your Next.js web development with our open-source UI library, offering a comprehensive suite of customizable components for building
+              modern and user-friendly interfaces.
+            </Hero.Desc>
             <Hero.Actions>
-              <Link href={'/guide/'}>
+              <Link href={'/guide/introduction'}>
                 <Button type="primary" auto icon={<Code></Code>} scale={1.3}>
                   Documentation
                 </Button>
               </Link>
-              <Link href={'/guide/'}>
+              <Link href={'/guide/installation'}>
                 <Button type="secondary" scale={1.3}>
                   Installation
                 </Button>
@@ -70,9 +59,15 @@ export default function Index() {
       <Section>
         <Services></Services>
       </Section>
-      <FadeInEffect blur={10} transition={1000}>
-        <Partners></Partners>
-      </FadeInEffect>
+
+      <ThemeProvider themeType="dark">
+        <PageLayout>
+          <FadeInEffect blur={10} transition={1000}>
+            <Partners></Partners>
+          </FadeInEffect>
+        </PageLayout>
+      </ThemeProvider>
+
       <ThemeProvider themeType="light">
         <PageLayout>
           <Section>
@@ -88,7 +83,7 @@ export default function Index() {
       <Section>
         <Facts></Facts>
       </Section>
-      <ThemeProvider themeType="light">
+      <ThemeProvider themeType={theme.type == 'light' ? 'dark' : 'light'}>
         <PageLayout>
           <RunningSlogan></RunningSlogan>
         </PageLayout>
@@ -147,8 +142,8 @@ export default function Index() {
         .hero-bg {
           position: absolute;
           width: 100%;
-          bottom: -5px;
-          opacity: 0.5;
+          top: 0;
+          height: 100%;
           --color-face-1: ${theme.palette.accents_0};
           --color-face-2: ${theme.palette.accents_2};
           --color-face-3: ${theme.palette.accents_4};

diff --git a/src/components/hero/hero-actions.tsx b/src/components/hero/hero-actions.tsx
@@ -1,18 +1,21 @@
 'use client';
 
+import useScale, { withScale } from '../use-scale';
 import { PropsWithChildren } from 'react';
 
-const HeroActions: React.FC<PropsWithChildren> = ({ ...props }) => {
+const HeroActions: React.FC<PropsWithChildren> = ({ children, ...props }) => {
+  const { SCALES } = useScale();
   return (
-    <div className="actions">
-      {props.children}
+    <div className="actions" {...props}>
+      {children}
       <style jsx>{`
         .actions {
           display: inline-flex;
           flex-wrap: wrap;
           gap: 12px;
           align-items: center;
-          margin-top: 64px;
+          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};
+          margin: ${SCALES.mt(2)} ${SCALES.mr(0, 'auto')} ${SCALES.mb(0, 'auto')} ${SCALES.ml(0, 'auto')};
           justify-content: center;
         }
       `}</style>
@@ -21,4 +24,4 @@ const HeroActions: React.FC<PropsWithChildren> = ({ ...props }) => {
 };
 
 HeroActions.displayName = 'HimalayaHeroActions';
-export default HeroActions;
+export default withScale(HeroActions);
diff --git a/src/components/hero/hero-desc.tsx b/src/components/hero/hero-desc.tsx
@@ -1,28 +1,30 @@
 'use client';
 
-import useTheme from '../use-theme';
-import Text from '../text';
 import { PropsWithChildren } from 'react';
 import { useScale, withScale } from '../use-scale';
+import useTheme from '../use-theme';
+import { HeroCoreProps } from './share';
 
-const HeroDesc: React.FC<PropsWithChildren> = ({ ...props }) => {
+const HeroDesc: React.FC<PropsWithChildren<HeroCoreProps>> = ({ Tag = 'h2', children, ...props }: PropsWithChildren<HeroCoreProps>) => {
   const theme = useTheme();
   const { SCALES } = useScale();
 
   return (
-    <Text
-      h2
-      mt={'24px'}
-      mb={0}
-      font={SCALES.font(5, 'clamp(16px, 3vw, 20px)')}
-      style={{
-        fontWeight: '400',
-        color: theme.palette.accents_5,
-        wordBreak: 'break-word',
-      }}
-    >
-      {props.children}
-    </Text>
+    <Tag className="desc" {...props}>
+      {children}
+
+      <style jsx>{`
+        .desc {
+          font-size: ${SCALES.font(1.3)};
+          word-break: break-word;
+          font-weight: 400;
+          display: inline-block;
+          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};
+          margin: ${SCALES.mt(0, 'auto')} ${SCALES.mr(0, 'auto')} ${SCALES.mb(0, 'auto')} ${SCALES.ml(0, 'auto')};
+          color: ${theme.palette.accents_5};
+        }
+      `}</style>
+    </Tag>
   );
 };
 

diff --git a/src/components/hero/hero-tag.tsx b/src/components/hero/hero-tag.tsx
@@ -12,11 +12,12 @@ const HeroTag: React.FC<PropsWithChildren<HeroTagProps>> = ({
   gradient,
   textColor,
   background,
+  Tag = 'h6',
 }: PropsWithChildren<HeroTagProps>) => {
   const theme = useTheme();
   const { SCALES } = useScale();
   return (
-    <h6 className={useClasses('tag', { gradient: hasGradient })}>
+    <Tag className={useClasses('tag', { gradient: hasGradient })}>
       {children}
       <style jsx>{`
         .tag {
@@ -29,14 +30,16 @@ const HeroTag: React.FC<PropsWithChildren<HeroTagProps>> = ({
           background: ${background || 'transparent'};
           display: inline-block;
           word-break: break-word;
-          padding: ${SCALES.pt(0.45)} ${SCALES.pr(1.9)} ${SCALES.pb(0.45)} ${SCALES.pl(1.9)};
-          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};
 
           --start-color: ${gradient ? gradient.from : theme.palette.gradient_1.from};
           --end-color: ${gradient ? gradient.to : theme.palette.gradient_1.to};
           --font-color: ${textColor || theme.palette.accents_8};
+
           color: var(--font-color);
           overflow: hidden;
+
+          padding: ${SCALES.pt(0.45)} ${SCALES.pr(1.9)} ${SCALES.pb(0.45)} ${SCALES.pl(1.9)};
+          margin: ${SCALES.mt(0, 'auto')} ${SCALES.mr(0, 'auto')} ${SCALES.mb(0, 'auto')} ${SCALES.ml(0, 'auto')};
         }
 
         .gradient {
@@ -45,7 +48,7 @@ const HeroTag: React.FC<PropsWithChildren<HeroTagProps>> = ({
           color: var(--font-color);
         }
       `}</style>
-    </h6>
+    </Tag>
   );
 };
 

diff --git a/src/components/hero/hero-title.tsx b/src/components/hero/hero-title.tsx
@@ -1,15 +1,30 @@
 'use client';
 
-import useScale, { withScale } from '../use-scale';
 import { PropsWithChildren } from 'react';
-import Text from '../text';
+import useScale, { withScale } from '../use-scale';
+import { HeroCoreProps } from './share';
+import useTheme from '../use-theme';
 
-const HeroTitle: React.FC<PropsWithChildren> = ({ ...props }) => {
+const HeroTitle: React.FC<PropsWithChildren<HeroCoreProps>> = ({ Tag = 'h1', children, ...props }: PropsWithChildren<HeroCoreProps>) => {
   const { SCALES } = useScale();
+  const theme = useTheme();
   return (
-    <Text h1 mt={'24px'} mb={0} font={SCALES.font(5, 'clamp(36px, 8vw, 72px)')} style={{ fontWeight: '800', lineHeight: '1.2', willChange: 'transform' }}>
-      {props.children}
-    </Text>
+    <Tag className="title" {...props}>
+      {children}
+      <style jsx>{`
+        .title {
+          font-size: ${SCALES.font(5, 'clamp(36px, 8vw, 78px)')};
+          word-break: break-word;
+          font-weight: 800;
+          will-change: transform;
+          line-height: 1.2;
+          color: ${theme.palette.foreground};
+          display: inline-block;
+          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};
+          margin: ${SCALES.mt(0, 'auto')} ${SCALES.mr(0, 'auto')} ${SCALES.mb(0, 'auto')} ${SCALES.ml(0, 'auto')};
+        }
+      `}</style>
+    </Tag>
   );
 };
 

diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx
@@ -1,23 +1,23 @@
 'use client';
 
+import { PropsWithChildren } from 'react';
 import { ArrowDown } from '../icons';
+import { ContentLayout } from '../layout';
+import useLayout from '../use-layout';
 import { useScale, withScale } from '../use-scale';
 import useTheme from '../use-theme';
-import { ContentLayout } from '../layout';
-import { PropsWithChildren } from 'react';
-import { HeroProps } from './share';
+import { HeroPropsNative } from './share';
 
-const Hero: React.FC<PropsWithChildren<HeroProps>> = ({ children, withDownArrow = true }) => {
+const Hero: React.FC<PropsWithChildren<HeroPropsNative>> = ({ children, withDownArrow = true, ...props }) => {
   const theme = useTheme();
+  const layout = useLayout();
   const { SCALES } = useScale();
 
   return (
     <>
-      <header className="hero full-height valign bord-thin-bottom">
+      <header {...props} className="hero full-height valign bord-thin-bottom">
         <ContentLayout>
-          <div className="hero-inner">
-            <div className="hero-title">{children}</div>
-          </div>
+          <div className="hero-inner">{children}</div>
         </ContentLayout>
         {withDownArrow && (
           <div className="arrow-down main-bg">
@@ -36,7 +36,7 @@ const Hero: React.FC<PropsWithChildren<HeroProps>> = ({ children, withDownArrow
           border-bottom: 1px solid ${theme.palette.border};
           min-height: calc(${SCALES.height(0, '100vh')} - ${withDownArrow ? 50 : 0}px);
           padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};
-          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};
+          margin: ${SCALES.mt(0)} ${SCALES.mr(0, 'auto')} ${SCALES.mb(0)} ${SCALES.ml(0, 'auto')};
         }
         .actions {
           display: inline-flex;
@@ -85,19 +85,18 @@ const Hero: React.FC<PropsWithChildren<HeroProps>> = ({ children, withDownArrow
           transform: rotate(90deg);
         }
 
-        .hero-title {
-          margin-top: ${withDownArrow ? 50 : 0}px;
-          text-align: center;
-        }
         .hero-inner {
           --bs-gutter-x: 1.5rem;
           --bs-gutter-y: 0;
           display: flex;
           flex-wrap: wrap;
           margin-top: calc(var(--bs-gutter-y) * -1);
           justify-content: center;
-
+          margin-top: ${withDownArrow ? 50 : 0}px;
           margin-bottom: ${withDownArrow ? 100 : 0}px;
+          text-align: center;
+          gap: ${layout.gap};
+          flex-direction: column;
         }
         .container {
           width: 100%;

diff --git a/src/components/hero/share.ts b/src/components/hero/share.ts
@@ -1,9 +1,19 @@
 import { Gradient } from 'components/themes/presets';
+import { HTMLAttributes } from 'react';
 export interface HeroProps {
   extraPaddingDown?: number;
   withDownArrow?: boolean;
 }
-export interface HeroTagProps {
+
+
+type NativeAttrs = Omit<HTMLAttributes<HTMLDivElement>, keyof HeroProps>;
+export type HeroPropsNative = HeroProps & NativeAttrs;
+
+export interface HeroCoreProps {
+  Tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+export interface HeroTagProps extends HeroCoreProps {
   hasGradient?: boolean;
   background?: string;
   gradient?: Gradient;