updated landing page (#263)

packages/documentation/components/switch/widget-variants.tsx

@@ -10,7 +10,7 @@ export const Default = (
 );
 
 export const LabelOutside = (
-  <Switch label="Settings" labelOutside focusable checked />
+  <Switch label="Settings" labelOutside focusable checked width={200} />
 );
 
 export const CheckIcon = (

packages/documentation/home/landing/hero-content.tsx

@@ -1,10 +1,10 @@
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// import { faGithub } from '@fortawesome/free-brands-svg-icons';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, isDark } from '@lib';
 import cx from 'classnames';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router';
-import { Badges } from '../badges';
+// import { Badges } from '../badges';
 import { Sink1, Sink2, Sink3 } from './kitchen-sink';
 import styles from './styles/hero-content.module.scss';
 
@@ -21,9 +21,9 @@ const HeroContent = () => {
     [isDarkMode]
   );
 
-  const openGithubLinkOnNewTab = () => {
-    window.open('https://github.com/prabhuignoto/react-creme', '_blank');
-  };
+  // const openGithubLinkOnNewTab = () => {
+  //   window.open('https://github.com/prabhuignoto/react-creme', '_blank');
+  // };
 
   return (
     <div className={styles.content}>
@@ -40,16 +40,16 @@ const HeroContent = () => {
             size="lg"
             type="primary"
           ></Button>
-          <Button
+          {/* <Button
             label="Github"
             size="lg"
             style={{ width: '100px' }}
             onClick={openGithubLinkOnNewTab}
           >
             <FontAwesomeIcon icon={faGithub} size="1x" />
-          </Button>
+          </Button> */}
         </div>
-        <Badges />
+        {/* <Badges /> */}
       </div>
       <div className={styles.right_column}>
         <Sink1 isDark={isDarkMode} />

packages/documentation/home/landing/kitchen-sink.tsx

@@ -1,10 +1,17 @@
 import cx from 'classnames';
 import { FunctionComponent } from 'react';
-import { CheckBox, Image, Rate, Slider, Switch } from '../../../lib/components';
+import {
+  CheckBox,
+  DataGrid,
+  Gallery,
+  Rate,
+  Slider,
+  Switch,
+} from '../../../lib/components';
 import { Default as FormGroup } from '../../components/form-group/widget-variants';
 // import { IconsSmall as MenuBar } from '../../components/menu-bar/widget-variants';
-import { SuccessBig } from '../../components/progress/widget-variants';
-import { Circle } from '../../components/skeleton/widget-variants';
+// import { SuccessBig } from '../../components/progress/widget-variants';
+// import { Circle } from '../../components/skeleton/widget-variants';
 import styles from './styles/kitchen-sink.module.scss';
 
 export type SinkProps = {
@@ -18,14 +25,14 @@ const Sink1: FunctionComponent<SinkProps> = ({ isDark }) => {
         <Slider knobShape="square" disableTooltip start={1} end={5} />
       </div>
       <div className={styles.widget}>
-        <Switch size="md" width={80} />
+        <Switch size="md" width={80} checked />
       </div>
-      <div className={cx(styles.widget, styles.hide_on_mobiles)}>
+      {/* <div className={cx(styles.widget, styles.hide_on_mobiles)}>
         <Switch size="sm" width={80} label="checked" />
-      </div>
-      <div className={styles.widget}>
+      </div> */}
+      {/* <div className={styles.widget}>
         <Switch size="sm" width={80} label="On" showCheckIcon checked />
-      </div>
+      </div> */}
       <div className={styles.widget}>
         <Rate size="lg" iconCount={3} value={2} />
       </div>
@@ -38,15 +45,24 @@ const Sink1: FunctionComponent<SinkProps> = ({ isDark }) => {
   );
 };
 
+const picks = ['fire', 'water', 'earth', 'air', 'lightning', 'metal', 'wood'];
+
+// generate random images from unsplash
+const images = Array.from({ length: 8 }, () => {
+  const randomIndex = Math.floor(Math.random() * picks.length);
+  const target = picks.splice(randomIndex, 1)[0];
+  return `https://source.unsplash.com/random/500x500?${target}`;
+});
+
 const Sink2: FunctionComponent<SinkProps> = ({ isDark }) => {
   return (
     <div className={cx(styles.sink, styles.sink2, isDark ? styles.dark : '')}>
       <div className={styles.widget}>
-        <Image
-          width={400}
-          height={250}
-          loaderSize="lg"
-          src="https://bit.ly/3q1ID4W"
+        <Gallery
+          imagesURL={images}
+          gridDimension={[4, 2]}
+          gap={10}
+          imageDimension={150}
         />
       </div>
     </div>
@@ -58,11 +74,42 @@ const Sink3: FunctionComponent<SinkProps> = ({ isDark }) => {
     <div className={cx(styles.sink, styles.sink3, isDark ? styles.dark : '')}>
       {/* <div className={styles.widget}>{SmallTree}</div> */}
       <div className={styles.widget}>
-        <div className={styles.widget_wrap}>{Circle}</div>
+        {/* <div className={styles.widget_wrap}>{Circle}</div> */}
         <div className={styles.widget_wrap}>
           <div className={styles.widget_wrap_2}>
-            {SuccessBig}
+            {/* {SuccessBig} */}
             {/* {MenuBar} */}
+            <DataGrid
+              columns={[
+                { name: 'Company', type: 'string' },
+                { name: 'Headquarters', type: 'string' },
+                { name: 'Revenue', type: 'number' },
+              ]}
+              data={[
+                {
+                  Company: 'Apple',
+                  Headquarters: 'Cupertino, California',
+                  Revenue: 274515,
+                },
+                {
+                  Company: 'Samsung Electronics',
+                  Headquarters: 'Suwon, South Korea',
+                  Revenue: 211940,
+                },
+                {
+                  Company: 'Foxconn',
+                  Headquarters: 'New Taipei City, Taiwan',
+                  Revenue: 129533,
+                },
+                {
+                  Company: 'Alphabet',
+                  Headquarters: 'Mountain View, California',
+                  Revenue: 161857,
+                },
+              ]}
+              border
+              layoutStyle="comfortable"
+            />
           </div>
         </div>
       </div>

packages/documentation/home/landing/landing.tsx

@@ -1,9 +1,11 @@
 import { faAccessibleIcon } from '@fortawesome/free-brands-svg-icons';
 import {
+  faBolt,
   faCog,
   faCubes,
+  faDumbbell,
   faPalette,
-  faScrewdriverWrench,
+  faSun,
   faWrench,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -14,8 +16,8 @@ import styles from './styles/landing.module.scss';
 
 const features: ProductFeatureProps[] = [
   {
-    description: `Build enterprise grade react applications with confidence and ease`,
-    icon: <FontAwesomeIcon icon={faCog} key="feather" size="2x" />,
+    description: `Build enterprise grade beautiful and robust React applications with confidence and ease`,
+    icon: <FontAwesomeIcon icon={faBolt} key="feather" size="2x" />,
     title: 'Robust UI components',
   },
   {
@@ -24,27 +26,35 @@ const features: ProductFeatureProps[] = [
     title: 'Customizable UI elements',
   },
   {
-    description: `Ready to use components for common scenarios and use cases`,
+    description: `Ready to use high-quality UI components for common scenarios and use cases`,
     icon: <FontAwesomeIcon icon={faCubes} key="feather2" size="2x" />,
     title: '45+ UI Components',
   },
   {
-    description: `Accessibility is one of the core principles of react-creme and the components are built with industry standard Accessibility`,
+    description: `Fully accessible UI components with support for keyboard navigation and screen readers`,
     icon: <FontAwesomeIcon icon={faAccessibleIcon} key="feather" size="2x" />,
     title: 'Best in class Accessibility',
   },
   {
-    description: `Customize the colors of the UI elements with ease`,
+    description: `Customize the colors of the components to match your brand identity`,
     icon: <FontAwesomeIcon icon={faPalette} key="feather2" size="2x" />,
     title: 'Solid support for color schemes',
   },
   {
-    description: `Type safe and robust UI Components`,
-    icon: (
-      <FontAwesomeIcon icon={faScrewdriverWrench} key="feather2" size="2x" />
-    ),
+    description: `Brings in the power of Typescript to build robust and type safe applications`,
+    icon: <FontAwesomeIcon icon={faDumbbell} key="feather2" size="2x" />,
     title: 'Built with Typescript',
   },
+  {
+    description: 'Support for light and dark themes. Dark mode out of the box',
+    icon: <FontAwesomeIcon icon={faSun} key="feather" size="2x" />,
+    title: 'Light and Dark themes',
+  },
+  {
+    description: 'Easily configurable components with sensible defaults',
+    icon: <FontAwesomeIcon icon={faCog} key="feather" size="2x" />,
+    title: 'Configurable components',
+  },
 ];
 
 const LandingPage = () => {

packages/documentation/home/landing/product-feature.tsx

@@ -39,7 +39,9 @@ const ProductFeature: FunctionComponent<ProductFeatureProps> = ({
   return (
     <div className={featureClass}>
       <header className={styles.header}>
-        <div className={iconClass}>{icon}</div>
+        <div className={styles.icon_container}>
+          <div className={iconClass}>{icon}</div>
+        </div>
         <h3 className={titleClass}>{title}</h3>
       </header>
       <p className={descriptionClass}>{description}</p>
@@ -50,10 +52,15 @@ const ProductFeature: FunctionComponent<ProductFeatureProps> = ({
 const ProductFeatures: FunctionComponent<{ items: ProductFeatureProps[] }> = ({
   items,
 }) => {
+  const isDarkMode = useMemo(() => isDark(), []);
+
   return (
     <ul className={styles.features}>
       {items.map((item, index) => (
-        <li key={index} className={styles.feature_item}>
+        <li
+          key={index}
+          className={cx(styles.feature_item, isDarkMode ? styles.dark : '')}
+        >
           <ProductFeature key={index} {...item} />
         </li>
       ))}

packages/documentation/home/landing/styles/hero-content.module.scss

@@ -73,7 +73,6 @@
   display: flex;
   flex-direction: column;
   width: 95%;
-  // border: 1px solid yellow;
 
   @media (min-width: 1024px) {
     align-self: flex-end;
@@ -82,6 +81,7 @@
     grid-template-columns: 1fr 1fr;
     justify-items: center;
     width: 100%;
+    padding: 1rem;
   }
 }
 

packages/documentation/home/landing/styles/hero.module.scss

@@ -3,6 +3,8 @@
   display: flex;
   justify-content: center;
   width: 100%;
+  // curved border
+  // clip-path: polygon(0 50%, 100% 0, 100% 85%, 0 100%);
 
   @media (min-width: 768px) {
     min-height: 1080px;
@@ -13,18 +15,10 @@
   }
 
   &:not(.dark) {
-    background: linear-gradient(
-      to left bottom,
-      rgba(#bfdbf7, 1) 20%,
-      rgba(#e1e5f2, 1)
-    );
+    background: linear-gradient(to right, #f93, #fc3, #f93);
   }
 
   &.dark {
-    background: linear-gradient(
-      to right bottom,
-      rgba(#b8c0ff, 0.3) 10%,
-      rgba(#1e1e1e, 0.9)
-    );
+    background: linear-gradient(to right, #1c2237, #292d47, #1c2237);
   }
 }

packages/documentation/home/landing/styles/kitchen-sink.module.scss

@@ -2,7 +2,7 @@
   align-items: center;
   background: #fff;
   border-radius: 12px;
-  height: 300px;
+  height: 320px;
   justify-items: center;
   padding: 0.5rem;
   width: calc(100% - 1rem);
@@ -15,7 +15,7 @@
 .sink1 {
   // height: 160px;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   justify-items: center;
 
@@ -25,18 +25,26 @@
   }
 
   @media (min-width: 768px) {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+    // min-width: 400px;
+    width: calc(100% - 1rem);
   }
 }
 
 .sink2 {
   display: none;
   margin: 1rem 0;
+
   @media (min-width: 1024px) {
     display: grid;
     grid-template-columns: 1fr;
     margin: 0;
   }
+
+  @media (min-width: 768px) {
+    // min-width: 400px;
+    width: calc(100% - 1rem);
+  }
 }
 
 .sink3 {
@@ -49,12 +57,12 @@
   // border: 1px solid red;
 
   @media (min-width: 300px) and (max-width: 767px) {
-    min-height: 300px;
+    min-height: 400px;
   }
 
   @media (min-width: 768px) {
     display: grid;
-    grid-column: 1 / 3;
+    grid-column: 1 / 4;
     grid-template-columns: 1fr 1fr;
     min-height: 350px;
   }

packages/documentation/home/landing/styles/landing.module.scss

@@ -10,8 +10,9 @@
   display: flex;
   justify-content: center;
   width: 100%;
+  margin: 2rem 0;
 
   @media (min-width: 768px) {
-    // padding-top: 3rem;
+    padding: 3rem 0;
   }
 }