├── static ├── now.json └── launch.png ├── .firebaserc ├── src ├── fonts │ ├── BlendaScript.otf │ └── font.css ├── images │ ├── avatar │ │ ├── boy.png │ │ ├── girl.png │ │ └── girl2.png │ ├── showcase │ │ ├── anteelo.png │ │ └── italic.png │ ├── hero-illustration │ │ └── card-img.png │ ├── icons │ │ ├── intro1.svg │ │ ├── open.svg │ │ ├── intro4.svg │ │ ├── intro3.svg │ │ ├── doc.svg │ │ ├── intro2.svg │ │ ├── colors.svg │ │ └── components.svg │ ├── logo-sketch.svg │ ├── atomize-icon.svg │ ├── feature-icons │ │ ├── 4.svg │ │ ├── 2.svg │ │ ├── 1.svg │ │ ├── 5.svg │ │ ├── 6.svg │ │ └── 3.svg │ └── react.svg ├── components │ ├── common │ │ ├── ColorList.js │ │ ├── DocsWrapper.js │ │ ├── ColorDiv.js │ │ ├── ShowCodeButton.js │ │ ├── codeTheme.js │ │ └── InfoCodeSidebar.js │ ├── utilitiesSidebarComponent │ │ ├── IconName.js │ │ ├── IsOpen.js │ │ ├── OnExit.js │ │ ├── OnClose.js │ │ ├── OnEnter.js │ │ ├── IconSize.js │ │ ├── OnExited.js │ │ ├── Disabled.js │ │ ├── IsLoading.js │ │ ├── OnEntering.js │ │ ├── OnExiting.js │ │ ├── Undetermine.js │ │ ├── TargetHover.js │ │ ├── ActiveShadow.js │ │ ├── ActiveColor.js │ │ ├── InactiveShadow.js │ │ ├── IconColor.js │ │ ├── InactiveColor.js │ │ ├── Overflow.js │ │ ├── FocusBg.js │ │ ├── Width.js │ │ ├── Height.js │ │ ├── MaxWidth.js │ │ ├── MinWidth.js │ │ ├── FocusBorderColor.js │ │ ├── MaxHeight.js │ │ ├── MinHeight.js │ │ ├── IconHoverColor.js │ │ ├── TagUtility.js │ │ ├── DropdownMenuUtil.js │ │ ├── Direction.js │ │ ├── FocusTextColor.js │ │ ├── FocusShadow.js │ │ ├── Cursor.js │ │ ├── Prefix.js │ │ ├── Suffix.js │ │ ├── FlexWrap.js │ │ ├── Transform.js │ │ ├── OpenSuffix.js │ │ ├── CloseSuffix.js │ │ ├── TextTransform.js │ │ ├── TextDecor.js │ │ ├── FlexDir.js │ │ ├── Position.js │ │ ├── BackgroundImage.js │ │ ├── Responsive.js │ │ ├── BackgroundPosition.js │ │ ├── TextColor.js │ │ ├── BackgroundSize.js │ │ ├── FlexGrow.js │ │ ├── Border.js │ │ ├── Justify.js │ │ ├── HoverTextColor.js │ │ ├── TextAlign.js │ │ ├── FontFamily.js │ │ ├── Align.js │ │ ├── TextWeight.js │ │ ├── Shadows.js │ │ ├── Display.js │ │ ├── BorderColor.js │ │ ├── Transition.js │ │ ├── HoverShadow.js │ │ ├── Margin.js │ │ ├── Padding.js │ │ ├── TextSize.js │ │ ├── Background.js │ │ ├── Order.js │ │ ├── Rounded.js │ │ ├── BorderRadius.js │ │ └── Flex.js │ ├── homepage │ │ ├── uicomponents │ │ │ ├── Notification.js │ │ │ ├── Buttons.js │ │ │ ├── UserEdit.js │ │ │ ├── CardComponent.js │ │ │ ├── LoginForm.js │ │ │ └── FollowCard.js │ │ └── craft.css │ ├── image.js │ ├── font.css │ ├── functions │ │ ├── CurrentDeviceDocs.js │ │ └── ScrollToDocs.js │ ├── theme-setup │ │ ├── Breakpoints.js │ │ ├── AvailableColors.js │ │ ├── FontFamily.js │ │ ├── FontSize.js │ │ ├── Shadows.js │ │ ├── ColumnCount.js │ │ ├── BorderRadius.js │ │ └── Transition.js │ ├── layout.js │ ├── atoms │ │ ├── TextDocs.js │ │ ├── DivDocs.js │ │ └── ImageDocs.js │ ├── seo.js │ ├── grid-components │ │ └── ContainerDocs.js │ └── introduction │ │ └── Intro.js ├── pages │ ├── docs │ │ └── react │ │ │ ├── functions.js │ │ │ ├── grid.js │ │ │ ├── molecules.js │ │ │ ├── theme.js │ │ │ ├── atoms.js │ │ │ ├── intro.js │ │ │ ├── showcase.js │ │ │ ├── spacing.js │ │ │ ├── ui-templates.js │ │ │ └── responsive.js │ ├── 404.js │ └── index.js └── html.js ├── .prettierrc ├── firebase.json ├── gatsby-node.js ├── gatsby-browser.js ├── gatsby-ssr.js ├── LICENSE ├── .gitignore ├── package.json ├── 404.html ├── gatsby-config.js └── index.html /static/now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "alias": ["atomizecode.com"] 4 | } 5 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "atomize-6455e" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /static/launch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proksh/atomize-docs/HEAD/static/launch.png -------------------------------------------------------------------------------- /src/fonts/BlendaScript.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proksh/atomize-docs/HEAD/src/fonts/BlendaScript.otf -------------------------------------------------------------------------------- /src/images/avatar/boy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proksh/atomize-docs/HEAD/src/images/avatar/boy.png -------------------------------------------------------------------------------- /src/images/avatar/girl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proksh/atomize-docs/HEAD/src/images/avatar/girl.png -------------------------------------------------------------------------------- /src/images/avatar/girl2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proksh/atomize-docs/HEAD/src/images/avatar/girl2.png -------------------------------------------------------------------------------- /src/images/showcase/anteelo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proksh/atomize-docs/HEAD/src/images/showcase/anteelo.png -------------------------------------------------------------------------------- /src/images/showcase/italic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proksh/atomize-docs/HEAD/src/images/showcase/italic.png -------------------------------------------------------------------------------- /src/fonts/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "headings"; 3 | font-weight: 600; 4 | src: url("./BlendaScript.otf"); 5 | } 6 | -------------------------------------------------------------------------------- /src/images/hero-illustration/card-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proksh/atomize-docs/HEAD/src/images/hero-illustration/card-img.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "public", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Node APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/react/node-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Browser APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/react/browser-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/react/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /src/images/icons/intro1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/images/icons/open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/images/icons/intro4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/images/icons/intro3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/images/icons/doc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/common/ColorList.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div } from "atomize" 3 | 4 | import ColorDiv from "./ColorDiv.js" 5 | 6 | const ColorList = ({ colorName, ...rest }) => { 7 | return ( 8 |
9 | {[9, 8, 7, 6, 5, 4, 3, 2, 1].map(number => ( 10 | 15 | ))} 16 |
17 | ) 18 | } 19 | 20 | export default ColorList 21 | -------------------------------------------------------------------------------- /src/components/common/DocsWrapper.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text } from "atomize" 3 | import Sidebar from "../../components/common/Sidebar" 4 | 5 | const DocsWrapper = ({ siteTitle, children }) => ( 6 |
7 | 8 |
15 | {children} 16 |
17 |
18 | ) 19 | 20 | export default DocsWrapper 21 | -------------------------------------------------------------------------------- /src/images/icons/intro2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/IconName.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const shadowCode1 = `// Add 7 | name="Add" 8 | 9 | // Dribbble 10 | name="Dribbble"` 11 | 12 | const IconName = () => { 13 | return ( 14 | 15 | 16 | Icon name are to given in name props. You can click on the icon to copy 17 | the code. 18 | 19 | 20 | ) 21 | } 22 | 23 | export default IconName 24 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/IsOpen.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// Open 7 | isOpen={true} 8 | 9 | // Closed 10 | isOpen={false}` 11 | 12 | const IsOpen = () => { 13 | return ( 14 | 15 | 16 | isOpen is a booleon props which is used for the open state. 17 | 18 | 19 | ) 20 | } 21 | 22 | export default IsOpen 23 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/OnExit.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// on exit 7 | onExit={() => console.log('exit')}` 8 | 9 | const OnExit = () => { 10 | return ( 11 | 12 | 13 | onExit is a function will be fired when the component starts 14 | exit. 15 | 16 | 17 | ) 18 | } 19 | 20 | export default OnExit 21 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/OnClose.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// on close 7 | onClose={() => console.log('closing')}` 8 | 9 | const OnClose = () => { 10 | return ( 11 | 12 | 13 | onClose is a function will be fired when the component is 14 | closing. 15 | 16 | 17 | ) 18 | } 19 | 20 | export default OnClose 21 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/OnEnter.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// on enter 7 | onEnter={() => console.log('enter')}` 8 | 9 | const OnEnter = () => { 10 | return ( 11 | 12 | 13 | onEnter is a function will be fired when the component starts 14 | to enter. 15 | 16 | 17 | ) 18 | } 19 | 20 | export default OnEnter 21 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/IconSize.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const shadowCode1 = `// px 7 | size="20px" 8 | 9 | // rem 10 | size="1rem" 11 | 12 | // % 13 | size="100%"` 14 | 15 | const IconSize = () => { 16 | return ( 17 | 18 | 19 | Icon Size are to given as {"size={value}"}. Default value is 20 | 24px. 21 | 22 | 23 | ) 24 | } 25 | 26 | export default IconSize 27 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/OnExited.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// on exited 7 | onExited={() => console.log('exited')}` 8 | 9 | const OnExited = () => { 10 | return ( 11 | 12 | 13 | onExited is a function will be fired when the component has 14 | been exited. 15 | 16 | 17 | ) 18 | } 19 | 20 | export default OnExited 21 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Disabled.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// disabled 7 | disabled={true} 8 | 9 | // Not disabled 10 | disabled={false}` 11 | 12 | const Disabled = () => { 13 | return ( 14 | 15 | 16 | disabled is a booleon props which is used for the disabled 17 | state. 18 | 19 | 20 | ) 21 | } 22 | 23 | export default Disabled 24 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/IsLoading.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// loading 7 | isLoading={true} 8 | 9 | // Not loading 10 | isLoading={false}` 11 | 12 | const IsLoading = () => { 13 | return ( 14 | 15 | 16 | isLoading is a booleon props which is used for the loading 17 | state. 18 | 19 | 20 | ) 21 | } 22 | 23 | export default IsLoading 24 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/OnEntering.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// on enter 7 | onEntering={() => console.log('entering')}` 8 | 9 | const OnEnter = () => { 10 | return ( 11 | 12 | 13 | onEntering is a function which will be fired when the 14 | component is entering (i.e. during animation). 15 | 16 | 17 | ) 18 | } 19 | 20 | export default OnEnter 21 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/OnExiting.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// on exiting 7 | onExiting={() => console.log('exiting')}` 8 | 9 | const OnExiting = () => { 10 | return ( 11 | 12 | 13 | onExiting is a function will be fired when the component is 14 | exiting (i.e. during exit animation). 15 | 16 | 17 | ) 18 | } 19 | 20 | export default OnExiting 21 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Undetermine.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// undetermine 7 | undetermine={true} 8 | 9 | // Not undetermine 10 | undetermine={false}` 11 | 12 | const Undetermine = () => { 13 | return ( 14 | 15 | 16 | undetermine is a booleon props which is used for the 17 | undetermine state. 18 | 19 | 20 | ) 21 | } 22 | 23 | export default Undetermine 24 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/TargetHover.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// hover target 7 | targetHover={true} 8 | 9 | // click target 10 | targetHover={false}` 11 | 12 | const TargetHover = () => { 13 | return ( 14 | 15 | 16 | targethover is a booleon props which is used for changing the 17 | target from click to hover. 18 | 19 | 20 | ) 21 | } 22 | 23 | export default TargetHover 24 | -------------------------------------------------------------------------------- /src/pages/docs/react/functions.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ScrollToDocs from "../../../components/functions/ScrollToDocs" 3 | import CurrentDeviceDocs from "../../../components/functions/CurrentDeviceDocs" 4 | 5 | import Layout from "../../../components/layout" 6 | import SEO from "../../../components/seo" 7 | import DocsWrapper from "../../../components/common/DocsWrapper" 8 | 9 | const Functions = () => ( 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | 22 | export default Functions 23 | -------------------------------------------------------------------------------- /src/components/common/ColorDiv.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text } from "atomize" 3 | 4 | const ColorDiv = ({ colorName, shade = "" }) => { 5 | return ( 6 |
7 |
14 | 20 | {colorName} 21 |
22 | {shade} 23 | 24 |
25 | ) 26 | } 27 | 28 | export default ColorDiv 29 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/ActiveShadow.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// Responsive 7 | activeShadow={{ xs: '3', sm: '2' }} 8 | 9 | // 2 10 | activeShadow="2" 11 | 12 | // 3 13 | activeShadow="3" 14 | 15 | // 4 16 | activeShadow="4"` 17 | 18 | const ActiveShadow = () => { 19 | return ( 20 | 21 | 22 | activeShadow is used for the shadow when state is active. 23 | 24 | 25 | ) 26 | } 27 | 28 | export default ActiveShadow 29 | -------------------------------------------------------------------------------- /src/pages/docs/react/grid.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import ContainerDocs from "../../../components/grid-components/ContainerDocs" 4 | import RowColDocs from "../../../components/grid-components/RowColDocs" 5 | 6 | import Layout from "../../../components/layout" 7 | import SEO from "../../../components/seo" 8 | import DocsWrapper from "../../../components/common/DocsWrapper" 9 | 10 | const Grid = () => ( 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | ) 22 | 23 | export default Grid 24 | -------------------------------------------------------------------------------- /src/components/common/ShowCodeButton.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Button } from "atomize" 3 | 4 | const ShowCodeButton = ({ selectedValue, onClick, value }) => { 5 | return ( 6 | 23 | ) 24 | } 25 | 26 | export default ShowCodeButton 27 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/ActiveColor.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// info 7 | activeColor="info800" 8 | 9 | // success 10 | activeColor="success800" 11 | 12 | // warning 13 | activeColor="warning800" 14 | 15 | // danger 16 | activeColor="danger800"` 17 | 18 | const ActiveColor = () => { 19 | return ( 20 | 21 | 22 | activeColor is used for the color when state is active. 23 | 24 | 25 | ) 26 | } 27 | 28 | export default ActiveColor 29 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/InactiveShadow.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// Responsive 7 | inactiveShadow={{ xs: '3', sm: '2' }} 8 | 9 | // 2 10 | inactiveShadow="2" 11 | 12 | // 3 13 | inactiveShadow="3" 14 | 15 | // 4 16 | inactiveShadow="4"` 17 | 18 | const InactiveShadow = () => { 19 | return ( 20 | 21 | 22 | inactiveShadow is used for the shadow when state is inactive. 23 | 24 | 25 | ) 26 | } 27 | 28 | export default InactiveShadow 29 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/IconColor.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const shadowCode1 = `// info700 7 | color="info700" 8 | 9 | // warning700 10 | color="warning700" 11 | 12 | // danger700 13 | color="danger700" 14 | 15 | // success700 16 | color="success700"` 17 | 18 | const IconColor = () => { 19 | return ( 20 | 21 | 22 | Icon color are to given as {"color={value}"}. Value can be 23 | any color from the theme. 24 | 25 | 26 | ) 27 | } 28 | 29 | export default IconColor 30 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/InactiveColor.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// info 7 | inactiveColor="info800" 8 | 9 | // success 10 | inactiveColor="success800" 11 | 12 | // warning 13 | inactiveColor="warning800" 14 | 15 | // danger 16 | inactiveColor="danger800"` 17 | 18 | const InactiveColor = () => { 19 | return ( 20 | 21 | 22 | inactiveColor is used for the color when state is not active. 23 | 24 | 25 | ) 26 | } 27 | 28 | export default InactiveColor 29 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Overflow.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const cursorCode1 = `// Directional 7 | overflow="visible scroll" 8 | 9 | // scroll 10 | overflow="scroll" 11 | 12 | // hidden 13 | overflow="hidden" 14 | 15 | // visible 16 | overflow="visible" 17 | 18 | // auto 19 | overflow="auto"` 20 | 21 | const Overflow = () => { 22 | return ( 23 | 24 | 25 | Overflow can be defined by {"overflow={value}"} 26 | 27 | 28 | ) 29 | } 30 | 31 | export default Overflow 32 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/FocusBg.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// bg warning 7 | focusBg="warning700" 8 | 9 | // bg info 10 | focusBg="info700" 11 | 12 | // bg danger 13 | focusBg="danger700" 14 | 15 | // bg success 16 | focusBg="success700"` 17 | 18 | const FocusBackground = () => { 19 | return ( 20 | 21 | 22 | focusBg can be used to specify the background color on focus. 23 | 24 | 25 | ) 26 | } 27 | 28 | export default FocusBackground 29 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Width.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const paddingCode1 = `// Normal Width 7 | w="3rem" 8 | 9 | // Responsive Width 10 | w={{ xs: 'auto', md: '100vw' }}` 11 | 12 | const Width = () => { 13 | return ( 14 | 15 | 16 | To keep the design under 8px grid, we keep the html font size to 16px. 17 | Though you can use any value to height & width. We recommend using{" "} 18 | rem to specify Height & Width. 19 | 20 | 21 | ) 22 | } 23 | 24 | export default Width 25 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Height.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const paddingCode1 = `// Normal Height 7 | h="3rem" 8 | 9 | // Responsive Height 10 | h={{ xs: 'auto', md: '100vh' }}` 11 | 12 | const Height = () => { 13 | return ( 14 | 15 | 16 | To keep the design under 8px grid, we keep the html font size to 16px. 17 | Though you can use any value to height & width. We recommend using{" "} 18 | rem to specify Height & Width. 19 | 20 | 21 | ) 22 | } 23 | 24 | export default Height 25 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/MaxWidth.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const paddingCode1 = `// Normal Width 7 | maxW="3rem" 8 | 9 | // Responsive Width 10 | maxW={{ xs: 'auto', md: '100vw' }}` 11 | 12 | const MaxWidth = () => { 13 | return ( 14 | 15 | 16 | To keep the design under 8px grid, we keep the html font size to 16px. 17 | Though you can use any value to height & width. We recommend using{" "} 18 | rem to specify Height & Width. 19 | 20 | 21 | ) 22 | } 23 | 24 | export default MaxWidth 25 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/MinWidth.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const paddingCode1 = `// Normal Width 7 | minW="3rem" 8 | 9 | // Responsive Width 10 | minW={{ xs: 'auto', md: '100vw' }}` 11 | 12 | const MinWidth = () => { 13 | return ( 14 | 15 | 16 | To keep the design under 8px grid, we keep the html font size to 16px. 17 | Though you can use any value to height & width. We recommend using{" "} 18 | rem to specify Height & Width. 19 | 20 | 21 | ) 22 | } 23 | 24 | export default MinWidth 25 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/FocusBorderColor.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const borderCode2 = `// Info 7 | foucsBorderColor="info800" 8 | 9 | // Warning 10 | foucsBorderColor="warning800" 11 | 12 | // Danger 13 | foucsBorderColor="danger800" 14 | 15 | // Success 16 | foucsBorderColor="success800"` 17 | 18 | const FocusBorderColor = () => { 19 | return ( 20 | 21 | 22 | focusBorderColor can be given to change the border color on 23 | focus. 24 | 25 | 26 | ) 27 | } 28 | 29 | export default FocusBorderColor 30 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/MaxHeight.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const paddingCode1 = `// Normal Height 7 | maxH="3rem" 8 | 9 | // Responsive Height 10 | maxH={{ xs: 'auto', md: '100vh' }}` 11 | 12 | const MaxHeight = () => { 13 | return ( 14 | 15 | 16 | To keep the design under 8px grid, we keep the html font size to 16px. 17 | Though you can use any value to height & width. We recommend using{" "} 18 | rem to specify Height & Width. 19 | 20 | 21 | ) 22 | } 23 | 24 | export default MaxHeight 25 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/MinHeight.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const paddingCode1 = `// Normal Height 7 | minH="3rem" 8 | 9 | // Responsive Height 10 | minH={{ xs: 'auto', md: '100vh' }}` 11 | 12 | const MinHeight = () => { 13 | return ( 14 | 15 | 16 | To keep the design under 8px grid, we keep the html font size to 16px. 17 | Though you can use any value to height & width. We recommend using{" "} 18 | rem to specify Height & Width. 19 | 20 | 21 | ) 22 | } 23 | 24 | export default MinHeight 25 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/IconHoverColor.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const shadowCode1 = `// info700 7 | hoverColor="info700" 8 | 9 | // warning700 10 | hoverColor="warning700" 11 | 12 | // danger700 13 | hoverColor="danger700" 14 | 15 | // success700 16 | hoverColor="success700"` 17 | 18 | const IconHoverColor = () => { 19 | return ( 20 | 21 | 22 | Icon color can be changed on hover by {"hoverColor={value}"}. 23 | Value can be any color from the theme. 24 | 25 | 26 | ) 27 | } 28 | 29 | export default IconHoverColor 30 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/TagUtility.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import { Div, Text, Tag, Row, Col } from "atomize" 4 | 5 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 6 | 7 | const shadowCode1 = `// Span 8 | tag="span" 9 | 10 | // Label 11 | tag="label" 12 | 13 | // h1 14 | tag="h1" 15 | 16 | // header 17 | tag="header" 18 | 19 | // section 20 | tag="section"` 21 | 22 | const TagUtility = () => { 23 | return ( 24 | 25 | 26 | Tag can be given in order to change the default tag to some other by{" "} 27 | {"tag={value}"} 28 | 29 | 30 | ) 31 | } 32 | 33 | export default TagUtility 34 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/DropdownMenuUtil.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// Menu 7 | menu={ 8 | 9 | {["Option 1", "Option 2", "Option 3"].map((name, index) => ( 10 | 11 | {name} 12 | 13 | ))} 14 | 15 | }` 16 | 17 | const DropdownMenuUtil = () => { 18 | return ( 19 | 20 | 21 | menu is used define the content inside the dropdown menu. It 22 | must be wrapped around the {""}. 23 | 24 | 25 | ) 26 | } 27 | 28 | export default DropdownMenuUtil 29 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Direction.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const backgroundCode = `// bottomleft 7 | direction="bottomleft" 8 | 9 | // bottomright 10 | direction="bottomright" 11 | 12 | // topright 13 | direction="topright" 14 | 15 | // topleft 16 | direction="topleft" 17 | 18 | // righttop 19 | direction="righttop" 20 | 21 | // lefttop 22 | direction="lefttop"` 23 | 24 | const Direction = () => { 25 | return ( 26 | 27 | 28 | direction is used to specify the direction in which menu 29 | opens. Its values can be any one of below. 30 | 31 | 32 | ) 33 | } 34 | 35 | export default Direction 36 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/FocusTextColor.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import { Text, Tag, Div } from "atomize" 4 | 5 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 6 | 7 | const textCode1 = `// Responsive 8 | focusTextColor={{ xs: 'medium', md: 'black' }} 9 | 10 | // info700 11 | focusTextColor="info700" 12 | 13 | // warning700 14 | focusTextColor="warning700" 15 | 16 | // danger700 17 | focusTextColor="danger700" 18 | 19 | // success700 20 | focusTextColor="success700"` 21 | 22 | const FocusTextColor = () => { 23 | return ( 24 | 25 | 26 | Focus Text Color can be changed by passing{" "} 27 | {"focusTextColor={value}"}. 28 | 29 | 30 | ) 31 | } 32 | 33 | export default FocusTextColor 34 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | 4 | import { Div, Text, Button } from "atomize" 5 | import Layout from "../components/layout" 6 | import SEO from "../components/seo" 7 | 8 | const NotFoundPage = () => ( 9 | 10 | 11 |
19 | 20 | Not Found 21 | 22 | 23 | You just hit a route that doesn't exist... the sadness. 24 | 25 | 26 | 29 | 30 |
31 | 32 | ) 33 | 34 | export default NotFoundPage 35 | -------------------------------------------------------------------------------- /src/pages/docs/react/molecules.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import DropdownDocs from "../../../components/molecules/DropdownDocs" 4 | import ModalDocs from "../../../components/molecules/ModalDocs" 5 | import SideDrawerDocs from "../../../components/molecules/SideDrawerDocs" 6 | import NotificationDocs from "../../../components/molecules/NotificationDocs" 7 | 8 | import Layout from "../../../components/layout" 9 | import SEO from "../../../components/seo" 10 | import DocsWrapper from "../../../components/common/DocsWrapper" 11 | 12 | const Molecules = () => ( 13 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ) 26 | 27 | export default Molecules 28 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/FocusShadow.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import { Div, Text, Tag, Row, Col } from "atomize" 4 | 5 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 6 | 7 | const shadowCode1 = `// Responsive 8 | focusShadow={{ xs: '4', md: '3', lg: '1' }} 9 | 10 | // Shadow 1 11 | focusShadow="1" 12 | 13 | // Shadow 2 14 | focusShadow="2" 15 | 16 | // Shadow 3 17 | focusShadow="3" 18 | 19 | // Shadow 4 20 | focusShadow="4" 21 | 22 | // Shadow 5 23 | focusShadow="5"` 24 | 25 | const FocusShadow = () => { 26 | return ( 27 | 28 | 29 | Focus Shadow can be changed through {"focusShadow={value}"}. 30 | You can edit or add shadows by 31 | using theme. 32 | 33 | 34 | ) 35 | } 36 | 37 | export default FocusShadow 38 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Cursor.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const cursorCode1 = `// not-allowed 7 | cursor="not-allowed" 8 | 9 | // pointer 10 | cursor="pointer" 11 | 12 | // crosshair 13 | cursor="crosshair"` 14 | 15 | const Cursor = () => { 16 | return ( 17 | 18 | 19 | Cursor can be defined by {"cursor={value}"} 20 | 21 |
22 | not-allowed 23 |
24 |
25 | pointer 26 |
27 |
28 | crosshair 29 |
30 | 31 | ) 32 | } 33 | 34 | export default Cursor 35 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Prefix.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const displayCode1 = `// Left Icon 7 | prefix={ 8 | 15 | } 16 | 17 | // Right Icon 18 | prefix={ 19 | 26 | }` 27 | 28 | const Prefix = () => { 29 | return ( 30 | 31 | 32 | prefix is used to place something before the component. 33 | Generally used to place the icons with the component. 34 | 35 | 36 | ) 37 | } 38 | 39 | export default Prefix 40 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Suffix.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const displayCode1 = `// Left Icon 7 | suffix={ 8 | 15 | } 16 | 17 | // Right Icon 18 | suffix={ 19 | 26 | }` 27 | 28 | const Suffix = () => { 29 | return ( 30 | 31 | 32 | suffix is used to place something after the component. 33 | Generally used to place the icons with the component. 34 | 35 | 36 | ) 37 | } 38 | 39 | export default Suffix 40 | -------------------------------------------------------------------------------- /src/images/logo-sketch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/FlexWrap.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const paddingCode1 = `// Wrap 7 | flexWrap="wrap" 8 | 9 | // No Wrap 10 | flexWrap="nowrap" 11 | 12 | // Reverse Wrap 13 | flexWrap="wrap-reverse" 14 | 15 | // Responsive Flex Wrap 16 | flexWrap={{ xs: 'nowrap', md: 'wrap' }}` 17 | 18 | const FlexWrap = () => { 19 | return ( 20 | <> 21 | 22 | 23 | flexWrap is equivalent to flex-wrap. It is used to define 24 | weather the blocks inside the flex needs to be wraped when their size 25 | is greater than it. 26 | 27 | 28 | Note: flexWrap only works when display flex. 29 | 30 | 31 | 32 | ) 33 | } 34 | 35 | export default FlexWrap 36 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/Transform.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Div, Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const transformCode1 = `// Responsive Transform 7 | transform={{ xs: 'translateY(50%)', md: 'translateY(0)' }} 8 | 9 | // Translate 10 | transform='translate(50%, 50%)' 11 | 12 | // Scale 13 | transform='scale(1.3, 1)' 14 | 15 | // Skew 16 | transform='skew(1.1, 1.5)'` 17 | 18 | const Transform = () => { 19 | return ( 20 | 21 | 22 | Transform can be defined by {"transform={value}"} 23 | 24 | {/*
25 |
31 |
*/} 32 | 33 | ) 34 | } 35 | 36 | export default Transform 37 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/OpenSuffix.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const displayCode1 = `// Left Icon 7 | openSuffix={ 8 | 15 | } 16 | 17 | // Right Icon 18 | openSuffix={ 19 | 26 | }` 27 | 28 | const OpenSuffix = () => { 29 | return ( 30 | 31 | 32 | openSuffix is used to place something after the component 33 | when the component is active. Generally used to place the icons with the 34 | component. 35 | 36 | 37 | ) 38 | } 39 | 40 | export default OpenSuffix 41 | -------------------------------------------------------------------------------- /src/images/atomize-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/CloseSuffix.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text, Tag } from "atomize" 3 | 4 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 5 | 6 | const displayCode1 = `// Left Icon 7 | closeSuffix={ 8 | 15 | } 16 | 17 | // Right Icon 18 | closeSuffix={ 19 | 26 | }` 27 | 28 | const CloseSuffix = () => { 29 | return ( 30 | 31 | 32 | closeSuffix is used to place something after the component 33 | when the component is inactive. Generally used to place the icons with 34 | the component. 35 | 36 | 37 | ) 38 | } 39 | 40 | export default CloseSuffix 41 | -------------------------------------------------------------------------------- /src/components/utilitiesSidebarComponent/TextTransform.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import { Text, Tag, Div } from "atomize" 4 | 5 | import InfoCodeSidebar from "../common/InfoCodeSidebar" 6 | 7 | const textCode1 = `// uppercase 8 | textTransform="uppercase" 9 | 10 | // lowercase 11 | textTransform="lowercase" 12 | 13 | // capitalize 14 | textTransform="capitalize"` 15 | 16 | const TextTransform = () => { 17 | return ( 18 | 19 | 20 | Text Transform can be given to text by{" "} 21 | {"textTransform={value}"}. 22 | 23 | 24 | 25 | uppercase 26 | 27 | 28 | lowercase 29 | 30 | 31 | capitalize 32 | 33 | 34 | ) 35 | } 36 | 37 | export default TextTransform 38 | -------------------------------------------------------------------------------- /src/components/homepage/uicomponents/Notification.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import { Text, Div, Icon } from "atomize" 4 | 5 | const Notification = ({ ...rest }) => ( 6 |
21 |
22 | 28 | Notification Message 29 |
30 | 31 |
32 | ) 33 | 34 | Notification.defaultProps = { 35 | pos: { xs: "static", md: "absolute" }, 36 | m: { xs: "1rem", md: "0" }, 37 | d: { xs: "none", lg: "flex" }, 38 | } 39 | 40 | export default Notification 41 | -------------------------------------------------------------------------------- /src/images/icons/colors.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/image.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useStaticQuery, graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | /* 6 | * This component is built using `gatsby-image` to automatically serve optimized 7 | * images with lazy loading and reduced file sizes. The image is loaded using a 8 | * `useStaticQuery`, which allows us to load the image from directly within this 9 | * component, rather than having to pass the image data down from pages. 10 | * 11 | * For more information, see the docs: 12 | * - `gatsby-image`: https://gatsby.dev/gatsby-image 13 | * - `useStaticQuery`: https://www.gatsbyjs.org/docs/react/use-static-query/ 14 | */ 15 | 16 | const Image = () => { 17 | const data = useStaticQuery(graphql` 18 | query { 19 | placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { 20 | childImageSharp { 21 | fluid(maxWidth: 300) { 22 | ...GatsbyImageSharpFluid 23 | } 24 | } 25 | } 26 | } 27 | `) 28 | 29 | return 30 | } 31 | 32 | export default Image 33 | -------------------------------------------------------------------------------- /src/images/feature-icons/4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import Layout from "../components/layout" 4 | import SEO from "../components/seo" 5 | import Header from "../components/common/header" 6 | import HeroSection from "../components/homepage/HeroSection" 7 | import Introducing from "../components/homepage/Introducing" 8 | import Features from "../components/homepage/Features" 9 | import Craft from "../components/homepage/Craft" 10 | import DesignDevelopment from "../components/homepage/DesignDevelopment" 11 | import GetStartedBanner from "../components/homepage/GetStartedBanner" 12 | import Footer from "../components/homepage/Footer" 13 | 14 | const IndexPage = () => ( 15 | 16 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |