@@ -0,0 +1,5 @@ | |||||
{ | |||||
"projects": { | |||||
"default": "<your_project_name>" | |||||
} | |||||
} |
@@ -0,0 +1,27 @@ | |||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | |||||
# dependencies | |||||
/node_modules | |||||
/.pnp | |||||
.pnp.js | |||||
# testing | |||||
/coverage | |||||
# next.js | |||||
/.next/ | |||||
/out/ | |||||
# production | |||||
/build | |||||
# misc | |||||
.DS_Store | |||||
.env* | |||||
# debug | |||||
npm-debug.log* | |||||
yarn-debug.log* | |||||
yarn-error.log* | |||||
.vercel |
@@ -0,0 +1,30 @@ | |||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app). | |||||
## Getting Started | |||||
First, run the development server: | |||||
```bash | |||||
npm run dev | |||||
# or | |||||
yarn dev | |||||
``` | |||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. | |||||
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. | |||||
## Learn More | |||||
To learn more about Next.js, take a look at the following resources: | |||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. | |||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. | |||||
You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome! | |||||
## Deploy on ZEIT Now | |||||
The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/) from the creators of Next.js. | |||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. |
@@ -0,0 +1,14 @@ | |||||
{ | |||||
"name": "001-landing-next", | |||||
"description": "", | |||||
"formation": { | |||||
"web": { | |||||
"quantity": 1 | |||||
} | |||||
}, | |||||
"buildpacks": [ | |||||
{ | |||||
"url": "heroku/nodejs" | |||||
} | |||||
] | |||||
} |
@@ -0,0 +1,10 @@ | |||||
{ | |||||
"hosting": { | |||||
"public": "out", | |||||
"ignore": [ | |||||
"firebase.json", | |||||
"**/.*", | |||||
"**/node_modules/**" | |||||
] | |||||
} | |||||
} |
@@ -0,0 +1,5 @@ | |||||
{ | |||||
"compilerOptions": { | |||||
"baseUrl": "src" | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
# netlify.toml | |||||
[build] | |||||
command = "next build && next export" | |||||
publish = "out" |
@@ -0,0 +1,12 @@ | |||||
module.exports = { | |||||
siteUrl: 'https://startup-agency.vercel.app', | |||||
generateRobotsTxt: true, | |||||
// optional | |||||
// robotsTxtOptions: { | |||||
// additionalSitemaps: [ | |||||
// 'https://example.com/my-custom-sitemap-1.xml', | |||||
// 'https://example.com/my-custom-sitemap-2.xml', | |||||
// 'https://example.com/my-custom-sitemap-3.xml', | |||||
// ], | |||||
// }, | |||||
}; |
@@ -0,0 +1,8 @@ | |||||
const withPlugins = require('next-compose-plugins'); | |||||
const optimizedImages = require('next-optimized-images'); | |||||
const nextConfiguration = { | |||||
target: 'serverless', //will output independent pages that don't require a monolithic server. It's only compatible with next start or Serverless deployment platforms (like ZEIT Now) — you cannot use the custom server API. | |||||
}; | |||||
module.exports = withPlugins([optimizedImages], nextConfiguration); |
@@ -0,0 +1,36 @@ | |||||
{ | |||||
"name": "@landing/013-next", | |||||
"version": "0.0.1", | |||||
"private": true, | |||||
"scripts": { | |||||
"dev": "next dev", | |||||
"build": "next build", | |||||
"serve": "next start", | |||||
"export": "next export", | |||||
"postbuild": "next-sitemap" | |||||
}, | |||||
"dependencies": { | |||||
"@material-ui/core": "^4.11.3", | |||||
"next": "^10.0.5", | |||||
"next-compose-plugins": "^2.2.1", | |||||
"next-optimized-images": "^2.6.2", | |||||
"polished": "^4.0.5", | |||||
"rc-drawer": "^4.2.1", | |||||
"rc-tabs": "^11.7.3", | |||||
"react": "^17.0.1", | |||||
"react-dom": "^17.0.1", | |||||
"react-ga": "^3.3.0", | |||||
"react-icons": "^4.1.0", | |||||
"react-masonry-component": "^6.2.1", | |||||
"react-scroll": "^1.8.1", | |||||
"react-stickynode": "^3.0.4", | |||||
"swiper": "^6.4.5", | |||||
"theme-ui": "^0.3.5" | |||||
}, | |||||
"devDependencies": { | |||||
"imagemin-mozjpeg": "^9.0.0", | |||||
"imagemin-optipng": "^8.0.0", | |||||
"imagemin-svgo": "^8.0.0", | |||||
"next-sitemap": "^1.4.5" | |||||
} | |||||
} |
@@ -0,0 +1,2 @@ | |||||
User-agent: * | |||||
Sitemap: https://example.io/sitemap.xml |
@@ -0,0 +1,6 @@ | |||||
<?xml version="1.0" encoding="UTF-8"?> | |||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> | |||||
<url> | |||||
<loc>https://leerob.iosrc//index</loc> | |||||
</url> | |||||
</urlset> |
@@ -0,0 +1,24 @@ | |||||
import ReactGA from 'react-ga'; | |||||
export const initGA = () => { | |||||
console.log('GA init'); | |||||
ReactGA.initialize('UA-xxxxxxxxx-1'); | |||||
}; | |||||
export const logPageView = () => { | |||||
console.log(`Logging pageview for ${window.location.pathname}`); | |||||
ReactGA.set({ page: window.location.pathname }); | |||||
ReactGA.pageview(window.location.pathname); | |||||
}; | |||||
export const logEvent = (category = '', action = '') => { | |||||
if (category && action) { | |||||
ReactGA.event({ category, action }); | |||||
} | |||||
}; | |||||
export const logException = (description = '', fatal = false) => { | |||||
if (description) { | |||||
ReactGA.exception({ description, fatal }); | |||||
} | |||||
}; |
@@ -0,0 +1,107 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Flex, Image, Heading, Text } from 'theme-ui'; | |||||
import { rgba } from 'polished'; | |||||
import { Link } from 'components/link'; | |||||
const BlogPost = ({ post }) => { | |||||
return ( | |||||
<Box | |||||
as="article" | |||||
sx={styles.post} | |||||
className={`${post?.showDescription ? '' : 'no-description'} ${ | |||||
!!post?.thumbnail ? '' : 'no-thumbnail' | |||||
}`} | |||||
> | |||||
{!!post?.thumbnail && ( | |||||
<Flex as="figure" sx={styles.thumbnail}> | |||||
<Image src={post?.thumbnail} alt="post title" /> | |||||
</Flex> | |||||
)} | |||||
<Box className="content"> | |||||
<Heading as="h3" sx={styles.title}> | |||||
<Link path={post?.slug}>{post?.title}</Link> | |||||
</Heading> | |||||
{post?.showDescription && ( | |||||
<Text as="p" sx={styles.description}> | |||||
{post?.description} | |||||
</Text> | |||||
)} | |||||
</Box> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default BlogPost; | |||||
const styles = { | |||||
post: { | |||||
m: ['0 0 30px', null, null, '0 15px 30px'], | |||||
width: ['100%', null, null, 'calc(50% - 30px)', 'calc(33.33% - 30px)'], | |||||
':last-child': { | |||||
mb: 0, | |||||
}, | |||||
'&.no-thumbnail': { | |||||
'.content': { | |||||
backgroundColor: '#FBF5F1', | |||||
padding: '25px 25px 35px', | |||||
borderRadius: 5, | |||||
}, | |||||
}, | |||||
'&.no-description:not(.no-thumbnail)': { | |||||
figure: { | |||||
mb: 0, | |||||
}, | |||||
'.content': { | |||||
position: 'absolute', | |||||
left: 0, | |||||
top: 0, | |||||
right: 0, | |||||
bottom: 0, | |||||
display: 'flex', | |||||
alignItems: 'flex-end', | |||||
p: '0 11px 20px 20px', | |||||
zIndex: 0, | |||||
':before': { | |||||
background: | |||||
'linear-gradient(180.06deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.71) 99.95%)', | |||||
borderRadius: 5, | |||||
content: `''`, | |||||
position: 'absolute', | |||||
left: 0, | |||||
top: 0, | |||||
right: 0, | |||||
bottom: 0, | |||||
zIndex: -1, | |||||
opacity: 0.9, | |||||
}, | |||||
'h3 a': { | |||||
color: 'white', | |||||
textDecoration: 'none', | |||||
}, | |||||
}, | |||||
}, | |||||
}, | |||||
thumbnail: { | |||||
mb: [4], | |||||
img: { | |||||
borderRadius: 5, | |||||
}, | |||||
}, | |||||
title: { | |||||
fontWeight: 700, | |||||
fontSize: [2, null, null, 3, null, 4], | |||||
lineHeight: [1.5, null, null, null, null, 1.76], | |||||
letterSpacing: '-0.2px', | |||||
a: { | |||||
color: 'heading', | |||||
textDecoration: 'none', | |||||
}, | |||||
}, | |||||
description: { | |||||
color: rgba('#0F2137', 0.6), | |||||
lineHeight: 1.88, | |||||
mt: [2], | |||||
}, | |||||
}; |
@@ -0,0 +1,53 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Image, Text, Heading } from 'theme-ui'; | |||||
import { LearnMore } from 'components/link'; | |||||
const Service = ({ item }) => { | |||||
return ( | |||||
<Box sx={styles.serviceItem}> | |||||
<Box as="figure" sx={styles.figure}> | |||||
<Image src={item?.icon} alt="icon" /> | |||||
</Box> | |||||
<Box sx={styles.content}> | |||||
<Heading as="h3">{item?.title}</Heading> | |||||
<Text as="p">{item?.description}</Text> | |||||
{item?.moreLink && <LearnMore path={item?.moreLink} />} | |||||
</Box> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default Service; | |||||
const styles = { | |||||
serviceItem: { | |||||
display: [null, null, null, null, null, 'flex'], | |||||
textAlign: ['center', null, null, null, null, 'left'], | |||||
}, | |||||
figure: { | |||||
minWidth: [88, null, null, null, null, 70, 88], | |||||
mr: [null, null, null, null, null, 30], | |||||
mb: [2, null, null, null, null, 0], | |||||
img: { | |||||
maxWidth: [42, null, null, 60, 70, '100%'], | |||||
}, | |||||
}, | |||||
content: { | |||||
h3: { | |||||
color: 'heading', | |||||
fontWeight: 700, | |||||
fontFamily: 'body', | |||||
fontSize: [2, null, null, 17, 3], | |||||
lineHeight: [1.68], | |||||
}, | |||||
p: { | |||||
fontSize: [1, null, null, null, 2], | |||||
lineHeight: [1.88], | |||||
mt: [2], | |||||
}, | |||||
a: { | |||||
mt: [2, null, null, 3], | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,70 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Flex, Box, Image, Text, Heading, Link } from 'theme-ui'; | |||||
import { FaTwitter, FaGithub, FaDribbble } from 'react-icons/fa'; | |||||
const TeamMember = ({ member }) => { | |||||
return ( | |||||
<Box sx={styles.section}> | |||||
<Flex as="figure" sx={styles.avatar}> | |||||
<Image src={member?.avatar} alt={member?.name} /> | |||||
</Flex> | |||||
<Box sx={styles.about}> | |||||
<Heading as="h3">{member?.name}</Heading> | |||||
<Text as="p">{member?.designation}</Text> | |||||
<Box sx={styles.socialLinks}> | |||||
{member?.socialLinks?.map((social, index) => ( | |||||
<Link href={social?.link} key={index}> | |||||
{social?.name === 'twitter' && ( | |||||
<FaTwitter size="18px" color="#55ACEE" /> | |||||
)} | |||||
{social?.name === 'github' && ( | |||||
<FaGithub size="18px" color="#161614" /> | |||||
)} | |||||
{social?.name === 'dribbble' && ( | |||||
<FaDribbble | |||||
size="18px" | |||||
color="#B2215A" | |||||
style={{ backgroundColor: '#E74D89', borderRadius: 20 }} | |||||
/> | |||||
)} | |||||
</Link> | |||||
))} | |||||
</Box> | |||||
</Box> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default TeamMember; | |||||
const styles = { | |||||
avatar: { | |||||
alignItems: 'center', | |||||
justifyContent: 'center', | |||||
}, | |||||
about: { | |||||
mt: [4], | |||||
textAlign: ['center', null, null, 'left'], | |||||
h3: { | |||||
color: 'heading', | |||||
fontFamily: 'body', | |||||
fontSize: [3, null, 17, null, 4], | |||||
}, | |||||
p: { | |||||
color: '#7589A1', | |||||
letterSpacing: '-0.2px', | |||||
mt: [2], | |||||
}, | |||||
}, | |||||
socialLinks: { | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
justifyContent: ['center', null, null, 'left'], | |||||
mt: [3], | |||||
a: { | |||||
display: 'inline-flex', | |||||
mr: [2], | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,64 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import React from 'react'; | |||||
import { RiCheckboxBlankFill, RiCheckboxFill } from 'react-icons/ri'; | |||||
import { jsx, Flex } from 'theme-ui'; | |||||
import { rgba } from 'polished'; | |||||
const Checkbox = ({ id, label, onClick, checked, onChange, sx, ...props }) => { | |||||
return ( | |||||
<Flex sx={styles.checkbox} className={checked ? 'checked' : ''}> | |||||
{checked ? ( | |||||
<RiCheckboxFill size="24px" /> | |||||
) : ( | |||||
<RiCheckboxBlankFill size="24px" /> | |||||
)} | |||||
<input | |||||
id={id} | |||||
type="checkbox" | |||||
checked={checked ?? checked} | |||||
onChange={onChange} | |||||
{...props} | |||||
/> | |||||
{label && <label htmlFor={id}>{label}</label>} | |||||
</Flex> | |||||
); | |||||
}; | |||||
export default React.memo(Checkbox); | |||||
const styles = { | |||||
checkbox: { | |||||
// backgroundColor: '#EFF3F7', | |||||
position: 'relative', | |||||
borderRadius: '4px', | |||||
alignItems: 'center', | |||||
svg: { | |||||
position: 'absolute', | |||||
borderRadius: 4, | |||||
left: 0, | |||||
top: '-5px', | |||||
path: { | |||||
color: '#EFF3F7', | |||||
}, | |||||
}, | |||||
input: { | |||||
position: 'absolute', | |||||
opacity: 0, | |||||
visibility: 'hidden', | |||||
}, | |||||
label: { | |||||
cursor: 'pointer', | |||||
fontSize: '14px', | |||||
lineHeight: 1, | |||||
color: rgba('#9095AD', 0.9), | |||||
paddingLeft: 30, | |||||
zIndex: 10, | |||||
}, | |||||
'&.checked': { | |||||
'svg path': { | |||||
color: 'secondary', | |||||
}, | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,55 @@ | |||||
import React, { Fragment } from 'react'; | |||||
import { Box } from 'theme-ui'; | |||||
import RcDrawer from 'rc-drawer'; | |||||
const Drawer = ({ | |||||
className, | |||||
children, | |||||
closeButton, | |||||
closeButtonStyle, | |||||
drawerHandler, | |||||
toggleHandler, | |||||
open, | |||||
width, | |||||
placement, | |||||
drawerStyle, | |||||
closeBtnStyle, | |||||
...props | |||||
}) => { | |||||
return ( | |||||
<Fragment> | |||||
<RcDrawer | |||||
open={open} | |||||
onClose={toggleHandler} | |||||
className={`drawer ${className ? className : ''}`.trim()} | |||||
width={width} | |||||
placement={placement} | |||||
handler={false} | |||||
level={null} | |||||
duration="0.4s" | |||||
{...props} | |||||
> | |||||
{closeButton && ( | |||||
<Box as="div" onClick={toggleHandler} sx={closeBtnStyle}> | |||||
{closeButton} | |||||
</Box> | |||||
)} | |||||
<Box sx={drawerStyle}>{children}</Box> | |||||
</RcDrawer> | |||||
<Box | |||||
className="drawer__handler" | |||||
style={{ display: 'inline-block' }} | |||||
onClick={toggleHandler} | |||||
> | |||||
{drawerHandler} | |||||
</Box> | |||||
</Fragment> | |||||
); | |||||
}; | |||||
Drawer.defaultProps = { | |||||
width: '320px', | |||||
placement: 'left', | |||||
}; | |||||
export default Drawer; |
@@ -0,0 +1,138 @@ | |||||
import facebook from 'assets/images/icons/facebook.png'; | |||||
import twitter from 'assets/images/icons/twitter.png'; | |||||
import github from 'assets/images/icons/github.png'; | |||||
import dribbble from 'assets/images/icons/dribbble.png'; | |||||
export const menuItems = [ | |||||
{ | |||||
id: 2, | |||||
title: 'About Us', | |||||
items: [ | |||||
{ | |||||
path: '#!', | |||||
label: 'Home', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Thamrin Founder', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Why Us', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Blog', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 3, | |||||
title: 'Our Business Partner', | |||||
items: [ | |||||
{ | |||||
path: '#!', | |||||
label: 'Thamrin Brothers', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Nusa Sarana Citra Bakti', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Citra Lestari Mobilindo', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Citra Thamrin Motor', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Thamrin Citra Abadi', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Musi Lestari Indo Makmur', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Musi Indah Makmur', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 4, | |||||
title: 'Our Business Partner', | |||||
items: [ | |||||
{ | |||||
path: '#!', | |||||
label: 'BPR Berkat Sejati', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Citra Nusa Bakti', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Regis Institut', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Citra Mandiri Asih Sejati', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Thamrin Homes', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 5, | |||||
title: 'Connect', | |||||
items: [ | |||||
{ | |||||
path: '#!', | |||||
icon: facebook, | |||||
label: 'Facebook', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
icon: twitter, | |||||
label: 'Twitter', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
icon: github, | |||||
label: 'Github', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
icon: dribbble, | |||||
label: 'Dribbble', | |||||
}, | |||||
], | |||||
}, | |||||
]; | |||||
export const footerNav = [ | |||||
{ | |||||
path: '#!', | |||||
label: 'Home', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Advertise', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Supports', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'Marketing', | |||||
}, | |||||
{ | |||||
path: '#!', | |||||
label: 'FAQ', | |||||
}, | |||||
]; |
@@ -0,0 +1,102 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Text, Container } from 'theme-ui'; | |||||
import Logo from 'components/logo'; | |||||
import { Link } from 'components/link'; | |||||
import Widget from './widget'; | |||||
import { menuItems } from './footer.data'; | |||||
import { rgba } from 'polished'; | |||||
export default function Footer() { | |||||
return ( | |||||
<Box as="footer" sx={styles.footer}> | |||||
<Container> | |||||
<Box sx={styles.footerTopInner}> | |||||
<Box sx={styles.about}> | |||||
<Box sx={styles.logo}> | |||||
<Logo /> | |||||
</Box> | |||||
<Box sx={styles.terms}> | |||||
<Link path="#!">Terms of use</Link> | |||||
<Text as="span">|</Text> | |||||
<Link path="#!">Privacy</Link> | |||||
</Box> | |||||
<Text as="p" sx={styles.copyright}> | |||||
Copyright by {new Date().getFullYear()} Thamrin Group | |||||
</Text> | |||||
</Box> | |||||
{menuItems.map(({ id, title, items }) => ( | |||||
<Widget key={id} title={title} items={items} /> | |||||
))} | |||||
</Box> | |||||
</Container> | |||||
</Box> | |||||
); | |||||
} | |||||
const styles = { | |||||
footer: { | |||||
pt: [8], | |||||
pb: [8], | |||||
}, | |||||
footerTopInner: { | |||||
gap: [30, null, 50, '20px 50px', 17, 50], | |||||
display: ['grid'], | |||||
gridTemplateColumns: [ | |||||
'repeat(2, 1fr)', | |||||
null, | |||||
null, | |||||
'repeat(4, 1fr)', | |||||
'repeat(5, 1fr)', | |||||
], | |||||
}, | |||||
footerInner: { | |||||
borderTop: `1px solid #D9E0E7`, | |||||
display: ['block', null, 'flex'], | |||||
alignItems: 'center', | |||||
justifyContent: 'space-between', | |||||
padding: '35px 0 40px', | |||||
}, | |||||
about: { | |||||
display: [null, null, null, 'grid', 'block'], | |||||
gridTemplateColumns: '205px 1fr 1fr', | |||||
alignItems: ['center'], | |||||
gridRow: ['3/4', null, '1/1', '3/4', 'unset'], | |||||
gridColumn: ['1/3', null, '1/2', '1/5', 'unset'], | |||||
}, | |||||
logo: { | |||||
display: ['flex'], | |||||
justifyContent: ['center', null, null, 'unset'], | |||||
gridColumn: '1/2', | |||||
}, | |||||
terms: { | |||||
display: ['flex'], | |||||
gridColumn: '3/4', | |||||
alignItems: ['center', null, null, null, 'flex-start', 'center'], | |||||
flexDirection: ['row', null, null, null, 'column', 'row'], | |||||
justifyContent: [ | |||||
'center', | |||||
null, | |||||
'flex-start', | |||||
'center', | |||||
null, | |||||
'flex-start', | |||||
], | |||||
mt: [4, null, null, 0, 4], | |||||
a: { | |||||
color: 'heading', | |||||
}, | |||||
span: { | |||||
display: ['inline-flex', null, null, null, 'none', 'inline-flex'], | |||||
m: ['0 10px'], | |||||
}, | |||||
}, | |||||
copyright: { | |||||
color: rgba('#0F2137', 0.6), | |||||
fontSize: ['14px'], | |||||
mt: [3, null, null, -31, 3], | |||||
mr: [null, null, null, 'auto', 'unset'], | |||||
gridColumn: '2/3', | |||||
textAlign: ['center', null, 'left', 'center', 'left'], | |||||
}, | |||||
}; |
@@ -0,0 +1,51 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Heading, Image } from 'theme-ui'; | |||||
import { Link } from 'components/link'; | |||||
import { rgba } from 'polished'; | |||||
const Widget = ({ title, items }) => { | |||||
return ( | |||||
<Box sx={styles.footerWidget}> | |||||
<Heading as="h4">{title}</Heading> | |||||
<ul> | |||||
{items.map(({ path, label, icon }, i) => ( | |||||
<li key={i}> | |||||
{icon && <Image src={icon} alt={label} />} | |||||
<Link path={path} key={i} label={label} variant="footer" /> | |||||
</li> | |||||
))} | |||||
</ul> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default Widget; | |||||
const styles = { | |||||
footerWidget: { | |||||
h4: { | |||||
color: 'heading', | |||||
fontFamily: 'body', | |||||
fontSize: '18px', | |||||
fontWeight: 500, | |||||
lineHeight: 1.68, | |||||
letterSpacing: 'heading', | |||||
}, | |||||
ul: { | |||||
listStyle: 'none', | |||||
margin: '28px 0 0', | |||||
padding: 0, | |||||
li: { | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
img: { | |||||
mr: '15px', | |||||
}, | |||||
}, | |||||
a: { | |||||
color: rgba('#02073E', 0.8), | |||||
}, | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,26 @@ | |||||
export default [ | |||||
{ | |||||
path: 'home', | |||||
label: 'Home', | |||||
}, | |||||
{ | |||||
path: 'testimonials', | |||||
label: 'Business Partner', | |||||
}, | |||||
{ | |||||
path: 'team', | |||||
label: 'Team', | |||||
}, | |||||
{ | |||||
path: 'why-us', | |||||
label: 'Why Us', | |||||
}, | |||||
{ | |||||
path: 'blog', | |||||
label: 'Blog', | |||||
}, | |||||
{ | |||||
path: '', | |||||
label: '', | |||||
}, | |||||
]; |
@@ -0,0 +1,117 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Container, Button } from 'theme-ui'; | |||||
import Sticky from 'react-stickynode'; | |||||
import Logo from 'components/logo'; | |||||
import { NavLink } from 'components/link'; | |||||
import { DrawerProvider } from 'contexts/drawer/drawer-provider'; | |||||
import NavbarDrawer from './navbar-drawer'; | |||||
import menuItems from './header.data'; | |||||
import Image from 'assets/images/White.png' | |||||
export default function Header() { | |||||
return ( | |||||
<DrawerProvider> | |||||
<Box sx={styles.headerWrapper}> | |||||
<Sticky enabled={true} top={0} activeClass="is-sticky" innerZ={100}> | |||||
<Box as="header" sx={styles.header}> | |||||
<Container> | |||||
<Box sx={styles.headerInner}> | |||||
<Logo sx={styles.logo} /> | |||||
{/* <Image src={Image} /> */} | |||||
<Box as="nav" sx={styles.navbar} className="navbar"> | |||||
<Box as="ul" sx={styles.navList}> | |||||
{menuItems.map(({ path, label }, i) => ( | |||||
<li key={i}> | |||||
<NavLink path={path} label={label} /> | |||||
</li> | |||||
))} | |||||
</Box> | |||||
</Box> | |||||
<NavbarDrawer /> | |||||
</Box> | |||||
</Container> | |||||
</Box> | |||||
</Sticky> | |||||
</Box> | |||||
</DrawerProvider> | |||||
); | |||||
} | |||||
const styles = { | |||||
headerWrapper: { | |||||
backgroundColor: 'transparent', | |||||
'.is-sticky': { | |||||
header: { | |||||
backgroundColor: 'white', | |||||
boxShadow: '0 6px 13px rgba(38,78,118,0.1)', | |||||
paddingTop: '15px', | |||||
paddingBottom: '15px', | |||||
}, | |||||
}, | |||||
}, | |||||
header: { | |||||
position: 'fixed', | |||||
left: 0, | |||||
right: 0, | |||||
py: 4, | |||||
transition: 'all 0.3s ease-in-out 0s', | |||||
'&.is-mobile-menu': { | |||||
backgroundColor: 'white', | |||||
}, | |||||
}, | |||||
headerInner: { | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
justifyContent: 'space-between', | |||||
}, | |||||
logo: { | |||||
mr: [null, null, null, null, 6, 12], | |||||
}, | |||||
navbar: { | |||||
display: ['none', null, null, null, 'flex'], | |||||
alignItems: 'center', | |||||
flexGrow: 1, | |||||
// justifyContent: 'center', | |||||
}, | |||||
navList: { | |||||
display: ['flex'], | |||||
listStyle: 'none', | |||||
// marginLeft: 'auto', | |||||
flexGrow: 1, | |||||
p: 0, | |||||
'li:last-child': { | |||||
ml: ['auto'], | |||||
}, | |||||
'.nav-item': { | |||||
cursor: 'pointer', | |||||
fontWeight: 400, | |||||
padding: 0, | |||||
margin: [0, 0, 0, 0, '0 20px'], | |||||
}, | |||||
'.active': { | |||||
color: 'primary', | |||||
}, | |||||
}, | |||||
getStartedDesktop: { | |||||
color: 'primary', | |||||
display: ['none', 'none', 'none', 'none', 'flex'], | |||||
}, | |||||
getStartedMobile: { | |||||
color: 'primary', | |||||
fontSize: [1], | |||||
minHeight: 30, | |||||
m: ['0 15px 0 auto'], | |||||
padding: '0 11px', | |||||
display: ['flex', null, null, null, 'none'], | |||||
}, | |||||
closeButton: { | |||||
height: '32px', | |||||
padding: '4px', | |||||
minHeight: 'auto', | |||||
width: '32px', | |||||
ml: '3px', | |||||
path: { | |||||
stroke: 'text', | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,142 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { IoMdMenu } from 'react-icons/io'; | |||||
import React, { useContext } from 'react'; | |||||
import { jsx, Box, Image } from 'theme-ui'; | |||||
import { Link } from 'react-scroll'; | |||||
import { DrawerContext } from 'contexts/drawer/drawer-context'; | |||||
import Drawer from 'components/drawer'; | |||||
import Logo from 'components/logo'; | |||||
import menuItems from './header.data'; | |||||
import close from 'assets/images/icons/close.png'; | |||||
const DrawerNav = () => { | |||||
const { state, dispatch } = useContext(DrawerContext); | |||||
// Toggle drawer | |||||
const toggleHandler = React.useCallback(() => { | |||||
dispatch({ | |||||
type: 'TOGGLE', | |||||
}); | |||||
}, [dispatch]); | |||||
return ( | |||||
<Drawer | |||||
width="340px" | |||||
placement="right" | |||||
drawerHandler={ | |||||
<Box sx={styles.handler}> | |||||
<IoMdMenu size="26px" /> | |||||
</Box> | |||||
} | |||||
open={state?.isOpen} | |||||
toggleHandler={toggleHandler} | |||||
closeButton={ | |||||
<button sx={styles.closeButton}> | |||||
<Image src={close} alt="close" /> | |||||
</button> | |||||
} | |||||
maskStyle={styles.mask} | |||||
drawerStyle={styles.drawer} | |||||
closeBtnStyle={styles.close} | |||||
> | |||||
<Box sx={styles.wrapper}> | |||||
<Logo sx={styles.logo} /> | |||||
<Box as="ul" sx={styles.navbar}> | |||||
{menuItems.map(({ path, label }, i) => ( | |||||
<Box as="li" key={i}> | |||||
<Link | |||||
activeClass="active" | |||||
to={path} | |||||
spy={true} | |||||
smooth={true} | |||||
offset={-70} | |||||
duration={500} | |||||
> | |||||
{label} | |||||
</Link> | |||||
</Box> | |||||
))} | |||||
</Box> | |||||
</Box> | |||||
</Drawer> | |||||
); | |||||
}; | |||||
export default DrawerNav; | |||||
const styles = { | |||||
handler: { | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
justifyContent: 'center', | |||||
flexShrink: '0', | |||||
width: '26px', | |||||
cursor: 'pointer', | |||||
'@media screen and (min-width: 1024px)': { | |||||
display: 'none', | |||||
}, | |||||
}, | |||||
drawer: { | |||||
backgroundColor: 'white', | |||||
width: '100%', | |||||
height: '100%', | |||||
outline: 0, | |||||
}, | |||||
mask: { | |||||
opacity: 0.2, | |||||
}, | |||||
close: { | |||||
position: 'absolute', | |||||
top: 35, | |||||
right: 30, | |||||
zIndex: '1', | |||||
}, | |||||
closeButton: { | |||||
alignItems: 'center', | |||||
backgroundColor: 'transparent', | |||||
border: 0, | |||||
cursor: 'pointer', | |||||
display: 'flex', | |||||
p: 0, | |||||
}, | |||||
wrapper: { | |||||
height: '100%', | |||||
paddingTop: 30, | |||||
width: '100%', | |||||
}, | |||||
logo: { | |||||
ml: 30, | |||||
mb: 45, | |||||
}, | |||||
navbar: { | |||||
listStyle: 'none', | |||||
m: 0, | |||||
p: 0, | |||||
'li > a': { | |||||
backgroundColor: 'transparent', | |||||
color: 'heading', | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
minHeight: 44, | |||||
paddingLeft: 30, | |||||
position: 'relative', | |||||
transition: 'all 0.3s ease-in-out 0s', | |||||
'::before': { | |||||
backgroundColor: 'transparent', | |||||
content: `''`, | |||||
position: 'absolute', | |||||
height: '100%', | |||||
left: 0, | |||||
top: 0, | |||||
width: 2, | |||||
transition: 'all 0.3s ease-in-out 0s', | |||||
}, | |||||
}, | |||||
'.active': { | |||||
backgroundColor: '#F8F8F8', | |||||
'::before': { | |||||
backgroundColor: 'primary', | |||||
}, | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,119 @@ | |||||
import React from 'react'; | |||||
const Logo = ({ white, ...props }) => { | |||||
return ( | |||||
<svg viewBox="0 0 185.92 36.62" width={185.92} height={36.62} {...props}> | |||||
<defs> | |||||
<linearGradient | |||||
id="prefix__b" | |||||
x1={16.08} | |||||
y1={-16.52} | |||||
x2={10.26} | |||||
y2={20.44} | |||||
gradientUnits="userSpaceOnUse" | |||||
> | |||||
<stop offset={0} stopColor="#0096d9" /> | |||||
<stop offset={1} stopColor="#00c198" /> | |||||
</linearGradient> | |||||
<linearGradient | |||||
id="prefix__c" | |||||
x1={8.95} | |||||
y1={13.48} | |||||
x2={18.28} | |||||
y2={32.02} | |||||
gradientUnits="userSpaceOnUse" | |||||
> | |||||
<stop offset={0} stopColor="#002dd9" /> | |||||
<stop offset={1} stopColor="#00b2ab" /> | |||||
</linearGradient> | |||||
<linearGradient | |||||
id="prefix__a" | |||||
x1={23.33} | |||||
y1={-3.39} | |||||
x2={5.66} | |||||
y2={37.65} | |||||
gradientUnits="userSpaceOnUse" | |||||
> | |||||
<stop offset={0} stopColor="#3482c0" /> | |||||
<stop offset={0.45} stopColor="#96bede" /> | |||||
<stop offset={0.83} stopColor="#e1edf6" /> | |||||
<stop offset={1} stopColor="#fff" /> | |||||
</linearGradient> | |||||
<linearGradient | |||||
id="prefix__d" | |||||
x1={21.64} | |||||
y1={1.42} | |||||
x2={6.63} | |||||
y2={30.44} | |||||
xlinkHref="#prefix__a" | |||||
/> | |||||
<linearGradient | |||||
id="prefix__e" | |||||
x1={25.15} | |||||
y1={3.24} | |||||
x2={10.14} | |||||
y2={32.25} | |||||
gradientUnits="userSpaceOnUse" | |||||
> | |||||
<stop offset={0} stopColor="#569fa1" /> | |||||
<stop offset={0.36} stopColor="#97c4c5" /> | |||||
<stop offset={0.8} stopColor="#e2eeef" /> | |||||
<stop offset={1} stopColor="#fff" /> | |||||
</linearGradient> | |||||
<radialGradient | |||||
id="prefix__f" | |||||
cx={21.16} | |||||
cy={32.05} | |||||
r={27.25} | |||||
gradientUnits="userSpaceOnUse" | |||||
> | |||||
<stop offset={0} stopColor="#ff0" /> | |||||
<stop offset={1} /> | |||||
</radialGradient> | |||||
</defs> | |||||
<g data-name="Layer 2"> | |||||
<g data-name="Layer 1"> | |||||
<path | |||||
d="M39.64 22.9h2.85a1.86 1.86 0 00.9 1.4 3.67 3.67 0 002 .53 3.33 3.33 0 001.9-.5A1.5 1.5 0 0048 23a1.32 1.32 0 00-.54-1.1 4.91 4.91 0 00-1.83-.71l-1.84-.4Q40 20 40 16.9a3.81 3.81 0 011.5-3.13 6.14 6.14 0 013.89-1.19 6.07 6.07 0 013.89 1.16 3.86 3.86 0 011.5 3.08H48a1.77 1.77 0 00-.79-1.4 3 3 0 00-1.82-.52 3 3 0 00-1.77.48 1.49 1.49 0 00-.66 1.26 1.25 1.25 0 00.53 1.05 5.29 5.29 0 001.77.68l1.71.36A6.18 6.18 0 0150 20.14a3.42 3.42 0 011 2.56 3.93 3.93 0 01-1.55 3.3 6.63 6.63 0 01-4.17 1.2 6.65 6.65 0 01-4.06-1.2 3.9 3.9 0 01-1.58-3.1zM53.33 14h2.85v2.42h1.93v2.18h-1.93v5c0 .78.41 1.18 1.23 1.18a4.44 4.44 0 00.69-.05v2.1a6.12 6.12 0 01-1.36.11 4.1 4.1 0 01-2.63-.66 2.74 2.74 0 01-.78-2.2V18.6h-1.48v-2.15h1.48zm10.29 11a2.39 2.39 0 001.6-.55 1.74 1.74 0 00.66-1.39v-.76l-2.2.13a2.3 2.3 0 00-1.24.4 1.09 1.09 0 00-.43.9 1.1 1.1 0 00.44.93 1.83 1.83 0 001.17.34zm-.94 2.06a3.6 3.6 0 01-2.51-.89 2.92 2.92 0 01-1-2.28 2.68 2.68 0 011-2.24 5.43 5.43 0 013-.93l2.63-.15v-.7a1.4 1.4 0 00-.47-1.13 1.91 1.91 0 00-1.28-.41 2.2 2.2 0 00-1.28.35 1.44 1.44 0 00-.6.95h-2.53A3.21 3.21 0 0161 17.17a5.31 5.31 0 013.29-1 5.05 5.05 0 013.23 1 3.09 3.09 0 011.21 2.54v7.2h-2.8v-1.6h-.06a3.08 3.08 0 01-1.3 1.3 3.89 3.89 0 01-1.89.47zm7.85-.16V16.45h2.76v1.88h.06a2.86 2.86 0 01.91-1.52 2.43 2.43 0 011.58-.53 2.88 2.88 0 01.81.11v2.51a2.79 2.79 0 00-1-.17 2.16 2.16 0 00-1.64.62 2.39 2.39 0 00-.59 1.72v5.85zm8-12.89h2.85v2.42h1.94v2.17h-1.89v5c0 .78.41 1.18 1.23 1.18a4.68 4.68 0 00.7-.05v2.1A6.24 6.24 0 0182 27a4.15 4.15 0 01-2.64-.66 2.74 2.74 0 01-.78-2.2V18.6h-1.47v-2.15h1.47zm16 2.42v10.49h-2.69V25h-.06a3.07 3.07 0 01-3.13 2.08 3.71 3.71 0 01-2.75-1 4 4 0 01-1-2.87v-6.76h2.85v6.15a2.28 2.28 0 00.5 1.59 1.86 1.86 0 001.45.55 1.9 1.9 0 001.51-.63 2.4 2.4 0 00.55-1.67v-6zm8-.17a3.79 3.79 0 013.14 1.44 6.14 6.14 0 011.15 4 6.33 6.33 0 01-1.13 4 4.1 4.1 0 01-5.09.92 3.15 3.15 0 01-1.27-1.41h-.03v5.17h-2.85V16.45h2.81v1.82h.06a3.35 3.35 0 011.27-1.46 3.7 3.7 0 011.97-.53zm-1 8.51a2 2 0 001.77-.77 3.71 3.71 0 00.63-2.27 3.67 3.67 0 00-.63-2.26 2 2 0 00-1.69-.85 2 2 0 00-1.68.86 3.6 3.6 0 00-.64 2.25 3.73 3.73 0 00.63 2.27 2 2 0 001.69.79zm22.07-.32v2.45h-9.11V12.82h3v11.65zm5.55.55a2.39 2.39 0 001.6-.55 1.74 1.74 0 00.66-1.39v-.76l-2.2.13a2.3 2.3 0 00-1.24.4 1.09 1.09 0 00-.43.9 1.1 1.1 0 00.44.93 1.83 1.83 0 001.25.34zm-.94 2.06a3.59 3.59 0 01-2.51-.89 2.92 2.92 0 01-1-2.28 2.68 2.68 0 011-2.24 5.43 5.43 0 013-.93l2.63-.15v-.7a1.43 1.43 0 00-.47-1.13 1.91 1.91 0 00-1.28-.41 2.18 2.18 0 00-1.28.35 1.44 1.44 0 00-.6.95h-2.61a3.21 3.21 0 011.32-2.48 5.31 5.31 0 013.29-1 5.07 5.07 0 013.23 1 3.09 3.09 0 011.21 2.54v7.2h-2.76v-1.58h-.06a3.08 3.08 0 01-1.3 1.3 3.89 3.89 0 01-1.73.47zm7.85-.16V16.45h2.76v1.86h.18a3.26 3.26 0 011.25-1.52 3.6 3.6 0 012-.54 3.46 3.46 0 012.68 1 4.12 4.12 0 011 2.88v6.75H143v-6.12a2.31 2.31 0 00-.49-1.59 1.83 1.83 0 00-1.44-.55 2 2 0 00-1.52.63 2.39 2.39 0 00-.57 1.66v6zm15.41.16a3.75 3.75 0 01-3.11-1.45 6.21 6.21 0 01-1.15-4 6.11 6.11 0 011.15-3.93 3.79 3.79 0 013.13-1.45 3.53 3.53 0 012 .54 3.17 3.17 0 011.25 1.42v-5.37h2.86v14.1h-2.82v-1.8h-.05a3.09 3.09 0 01-1.26 1.42 3.67 3.67 0 01-1.92.54zm1-8.51a2 2 0 00-1.7.84 3.75 3.75 0 00-.61 2.27 3.76 3.76 0 00.61 2.28 2.15 2.15 0 003.39 0 3.72 3.72 0 00.63-2.28 3.67 3.67 0 00-.63-2.26 2 2 0 00-1.64-.83zm7.11 8.35V16.45h2.85v10.47zm2.51-12.05a1.52 1.52 0 01-1.09.42 1.49 1.49 0 01-1.08-.42 1.44 1.44 0 01-.44-1 1.38 1.38 0 01.44-1 1.46 1.46 0 011.08-.43 1.49 1.49 0 011.09.43 1.38 1.38 0 01.44 1 1.44 1.44 0 01-.39 1.02zm2.24 12.05V16.45h2.76v1.86h.06a3.26 3.26 0 011.25-1.52 3.6 3.6 0 012-.54 3.44 3.44 0 012.68 1 4.07 4.07 0 01.95 2.88v6.75h-2.85v-6.12a2.31 2.31 0 00-.49-1.59 1.79 1.79 0 00-1.43-.55 2 2 0 00-1.53.63 2.43 2.43 0 00-.56 1.66v6zm16.36-2.23a2.05 2.05 0 001.7-.8 3.48 3.48 0 00.64-2.23 3.6 3.6 0 00-.64-2.25 2 2 0 00-1.7-.84 2 2 0 00-1.68.84 3.69 3.69 0 00-.61 2.25 3.6 3.6 0 00.61 2.23 2 2 0 001.73.82zm-.05 6.17a5.84 5.84 0 01-3.36-.9 3.19 3.19 0 01-1.48-2.3h2.79a1.54 1.54 0 00.74.88 2.8 2.8 0 001.39.34 2.41 2.41 0 001.69-.56 1.85 1.85 0 00.61-1.47V25H183a3 3 0 01-1.24 1.37 3.89 3.89 0 01-2 .51 3.8 3.8 0 01-3.09-1.41 5.88 5.88 0 01-1.15-3.84 6.06 6.06 0 011.15-3.92 3.82 3.82 0 013.14-1.44 3.59 3.59 0 012 .54 3.37 3.37 0 011.27 1.45v-1.81h2.82v10.32a3.58 3.58 0 01-1.44 3 6 6 0 01-3.77 1.09z" | |||||
fill={white ? 'white' : '#0f2137'} | |||||
/> | |||||
<path | |||||
d="M19.8.53A15.73 15.73 0 004.65 26.89L22.17 9.37A5.29 5.29 0 0019.8.53z" | |||||
fill="url(#prefix__b)" | |||||
/> | |||||
<path | |||||
d="M6.65 36.09A15.73 15.73 0 0021.81 9.73L4.29 27.25a5.28 5.28 0 002.36 8.84z" | |||||
fill="url(#prefix__c)" | |||||
/> | |||||
<path | |||||
d="M21.81 9.73L4.29 27.25a5.28 5.28 0 002.36 8.84 15.72 15.72 0 005.75.44c-7.68-7.39 9.41-26.8 9.41-26.8z" | |||||
style={{ | |||||
mixBlendMode: 'multiply', | |||||
}} | |||||
fill="url(#prefix__a)" | |||||
/> | |||||
<g | |||||
style={{ | |||||
mixBlendMode: 'multiply', | |||||
}} | |||||
> | |||||
<path | |||||
d="M6.33 36c-2.49-7.7 12.45-23.21 15.09-25.87L4.29 27.25A5.28 5.28 0 006.33 36z" | |||||
fill="url(#prefix__d)" | |||||
/> | |||||
<path d="M21.75 9.79l.06-.06z" fill="url(#prefix__e)" /> | |||||
</g> | |||||
<path | |||||
d="M23.45 7.29L4.64 26.88 22.17 9.37a5.14 5.14 0 001.28-2.08z" | |||||
style={{ | |||||
mixBlendMode: 'screen', | |||||
}} | |||||
fill="url(#prefix__f)" | |||||
/> | |||||
</g> | |||||
</g> | |||||
</svg> | |||||
); | |||||
}; | |||||
export default Logo; |
@@ -0,0 +1,6 @@ | |||||
import React from 'react'; | |||||
import { Image as Img } from 'theme-ui'; | |||||
export default function Image({ src, ...rest }) { | |||||
return <Img src={src} {...rest} />; | |||||
} |
@@ -0,0 +1,26 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Input as InputField } from 'theme-ui'; | |||||
import { rgba } from 'polished'; | |||||
const Input = ({ ...props }) => { | |||||
return <InputField sx={styles.input} {...props} />; | |||||
}; | |||||
export default Input; | |||||
const styles = { | |||||
input: { | |||||
backgroundColor: '#EFF3F7', | |||||
borderRadius: '5px', | |||||
fontFamily: 'body', | |||||
flexGrow: 1, | |||||
p: ['0 24px'], | |||||
height: 'auto', | |||||
minHeight: '60px', | |||||
width: 'auto', | |||||
'::placeholder': { | |||||
color: rgba('#02073E', 0.4), | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,27 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Flex } from 'theme-ui'; | |||||
import React from 'react'; | |||||
import Header from './header/header'; | |||||
import Footer from './footer/footer'; | |||||
export default function Layout({ children }) { | |||||
return ( | |||||
<Flex | |||||
sx={{ | |||||
minHeight: '100vh', | |||||
flexDirection: 'column', | |||||
justifyContent: 'space-between', | |||||
}} | |||||
> | |||||
<Header /> | |||||
<main | |||||
sx={{ | |||||
variant: 'layout.main', | |||||
}} | |||||
> | |||||
{children} | |||||
</main> | |||||
<Footer /> | |||||
</Flex> | |||||
); | |||||
} |
@@ -0,0 +1,61 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import NextLink from 'next/link'; | |||||
import { jsx, Link as A } from 'theme-ui'; | |||||
import { Link as MenuLink } from 'react-scroll'; | |||||
import { HiOutlineChevronRight } from 'react-icons/hi'; | |||||
export function NavLink({ path, label, children, ...rest }) { | |||||
return ( | |||||
<MenuLink | |||||
to={path} | |||||
spy={true} | |||||
offset={-70} | |||||
smooth={true} | |||||
duration={500} | |||||
className="nav-item" | |||||
activeClass="active" | |||||
{...rest} | |||||
> | |||||
{label} | |||||
</MenuLink> | |||||
); | |||||
} | |||||
export function Link({ path, label, children, ...rest }) { | |||||
return ( | |||||
<NextLink href={path}> | |||||
<A {...rest}>{children ? children : label}</A> | |||||
</NextLink> | |||||
); | |||||
} | |||||
export function LearnMore({ path, label, children, ...rest }) { | |||||
return ( | |||||
<NextLink href={path}> | |||||
<A sx={styles.learnMore} {...rest}> | |||||
{label ?? 'Learn More'} <HiOutlineChevronRight /> | |||||
</A> | |||||
</NextLink> | |||||
); | |||||
} | |||||
const styles = { | |||||
learnMore: { | |||||
color: 'link', | |||||
cursor: 'pointer', | |||||
fontSize: [1, 1, 1, 2], | |||||
fontWeight: 500, | |||||
display: 'inline-flex', | |||||
alignItems: 'center', | |||||
svg: { | |||||
transition: 'margin-left 0.3s ease-in-out 0s', | |||||
ml: '3px', | |||||
}, | |||||
':hover': { | |||||
svg: { | |||||
ml: '5px', | |||||
}, | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,24 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx } from 'theme-ui'; | |||||
import { Link } from 'components/link'; | |||||
import LogoSvg from 'components/icons/logo'; | |||||
export default function Logo({ isSticky, footer, ...props }) { | |||||
return ( | |||||
<Link path="/" sx={styles.logo} {...props}> | |||||
<LogoSvg /> | |||||
</Link> | |||||
); | |||||
} | |||||
const styles = { | |||||
logo: { | |||||
alignItems: 'center', | |||||
cursor: 'pointer', | |||||
display: 'inline-flex', | |||||
svg: { | |||||
height: 'auto', | |||||
width: [128, null, '100%'], | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,43 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Heading, Text } from 'theme-ui'; | |||||
const SectionHeading = ({ title, description, ...props }) => { | |||||
return ( | |||||
<Box sx={styles.heading} {...props}> | |||||
<Heading sx={styles.title}>{title}</Heading> | |||||
<Text as="p" sx={styles.description}> | |||||
{description} | |||||
</Text> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default SectionHeading; | |||||
const styles = { | |||||
heading: { | |||||
textAlign: 'center', | |||||
maxWidth: 660, | |||||
margin: ['0 auto 60px'], | |||||
}, | |||||
title: { | |||||
fontFamily: 'heading', | |||||
fontWeight: 700, | |||||
fontSize: [5, null, null, 26, null, 30, 9], | |||||
lineHeight: [1.33, 1.33, 1.48], | |||||
letterSpacing: ['-0.5px', null, null, null, null, null, '-1px'], | |||||
img: { | |||||
ml: ['15px'], | |||||
position: 'relative', | |||||
top: '8px', | |||||
}, | |||||
}, | |||||
description: { | |||||
color: 'heading', | |||||
fontSize: [1, null, null, 2], | |||||
lineHeight: [1.58, 1.58, 1.58, 2.2], | |||||
maxWidth: ['none', 'none', 'none', 'none', 490], | |||||
margin: '15px auto 0', | |||||
}, | |||||
}; |
@@ -0,0 +1,58 @@ | |||||
import React from 'react'; | |||||
import Head from 'next/head'; | |||||
export default function SEO({ | |||||
description = 'startup landing descriptions', | |||||
author = 'RedQ, Inc', | |||||
meta, | |||||
title = 'startup landing title', | |||||
}) { | |||||
const metaData = [ | |||||
{ | |||||
name: `description`, | |||||
content: description, | |||||
}, | |||||
{ | |||||
property: `og:title`, | |||||
content: title, | |||||
}, | |||||
{ | |||||
property: `og:description`, | |||||
content: description, | |||||
}, | |||||
{ | |||||
property: `og:type`, | |||||
content: `website`, | |||||
}, | |||||
{ | |||||
name: `twitter:card`, | |||||
content: `summary`, | |||||
}, | |||||
{ | |||||
name: `twitter:creator`, | |||||
content: author, | |||||
}, | |||||
{ | |||||
name: `twitter:title`, | |||||
content: title, | |||||
}, | |||||
{ | |||||
name: `twitter:description`, | |||||
content: description, | |||||
}, | |||||
].concat(meta); | |||||
return ( | |||||
<Head> | |||||
<title>{title}</title> | |||||
{metaData.map(({ name, content }, i) => ( | |||||
<meta key={i} name={name} content={content} /> | |||||
))} | |||||
</Head> | |||||
); | |||||
} | |||||
SEO.defaultProps = { | |||||
lang: `en`, | |||||
meta: [], | |||||
description: ``, | |||||
}; |
@@ -0,0 +1,3 @@ | |||||
import { createContext } from 'react'; | |||||
export const DrawerContext = createContext({}); |
@@ -0,0 +1,25 @@ | |||||
import React, { useReducer } from 'react'; | |||||
import { DrawerContext } from './drawer-context'; | |||||
const initialState = { | |||||
isOpen: false, | |||||
}; | |||||
function reducer(state, action) { | |||||
switch (action.type) { | |||||
case 'TOGGLE': | |||||
return { | |||||
...state, | |||||
isOpen: !state.isOpen, | |||||
}; | |||||
default: | |||||
return state; | |||||
} | |||||
} | |||||
export const DrawerProvider = ({ children }) => { | |||||
const [state, dispatch] = useReducer(reducer, initialState); | |||||
return ( | |||||
<DrawerContext.Provider value={{ state, dispatch }}> | |||||
{children} | |||||
</DrawerContext.Provider> | |||||
); | |||||
}; |
@@ -0,0 +1,16 @@ | |||||
import { useEffect } from 'react'; | |||||
import Router from 'next/router'; | |||||
import { initGA, logPageView } from 'analytics'; | |||||
import 'rc-tabs/assets/index.css'; | |||||
import 'swiper/swiper-bundle.min.css'; | |||||
import 'rc-drawer/assets/index.css'; | |||||
export default function CustomApp({ Component, pageProps }) { | |||||
useEffect(() => { | |||||
initGA(); | |||||
logPageView(); | |||||
Router.events.on('routeChangeComplete', logPageView); | |||||
}, []); | |||||
return <Component {...pageProps} />; | |||||
} |
@@ -0,0 +1,27 @@ | |||||
import Document, { Html, Head, Main, NextScript } from 'next/document'; | |||||
class CustomDocument extends Document { | |||||
static async getInitialProps(ctx) { | |||||
const initialProps = await Document.getInitialProps(ctx); | |||||
return { ...initialProps }; | |||||
} | |||||
render() { | |||||
return ( | |||||
<Html lang="en-US"> | |||||
<Head> | |||||
<link | |||||
rel="stylesheet" | |||||
href="https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" | |||||
/> | |||||
</Head> | |||||
<body> | |||||
<Main /> | |||||
<NextScript /> | |||||
</body> | |||||
</Html> | |||||
); | |||||
} | |||||
} | |||||
export default CustomDocument; |
@@ -0,0 +1,32 @@ | |||||
import { ThemeProvider } from 'theme-ui'; | |||||
import theme from 'theme'; | |||||
import SEO from 'components/seo'; | |||||
import Layout from 'components/layout'; | |||||
import Banner from 'sections/home'; | |||||
import Services from 'sections/services'; | |||||
import Testimonials from 'sections/business-partner'; | |||||
import OurTeam from 'sections/our-team'; | |||||
import OtherServices from 'sections/core-value'; | |||||
import WhyUs from 'sections/why-us'; | |||||
import SubscribeUs from 'sections/subscribe-us'; | |||||
import Blog from 'sections/blog'; | |||||
export default function IndexPage() { | |||||
return ( | |||||
<ThemeProvider theme={theme}> | |||||
<Layout> | |||||
<SEO | |||||
title="Thamrin Group" | |||||
/> | |||||
<Banner /> | |||||
<OtherServices /> | |||||
<Testimonials /> | |||||
{/* <Services /> */} | |||||
<OurTeam /> | |||||
<WhyUs /> | |||||
<Blog /> | |||||
{/* <SubscribeUs /> */} | |||||
</Layout> | |||||
</ThemeProvider> | |||||
); | |||||
} |
@@ -0,0 +1,87 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Container } from 'theme-ui'; | |||||
import Masonry from 'react-masonry-component'; | |||||
import SectionHeading from 'components/section-heading'; | |||||
import BlogPost from 'components/cards/blog-post'; | |||||
import thumb1 from 'assets/images/blog/1.png'; | |||||
import thumb2 from 'assets/images/blog/2.png'; | |||||
import thumb3 from 'assets/images/blog/3.png'; | |||||
import thumb4 from 'assets/images/blog/4.png'; | |||||
const data = [ | |||||
{ | |||||
id: 1, | |||||
slug: '#how-to', | |||||
thumbnail: thumb1, | |||||
showDescription: true, | |||||
title: `How to work with prototype design with adobe xd featuring tools`, | |||||
description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`, | |||||
}, | |||||
{ | |||||
id: 2, | |||||
slug: '#how-to', | |||||
thumbnail: null, | |||||
showDescription: false, | |||||
title: `Anti bias receives honorable gift mention at Fast Company’s most Innovation by Design Awards`, | |||||
description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`, | |||||
}, | |||||
{ | |||||
id: 3, | |||||
slug: '#how-to', | |||||
thumbnail: thumb3, | |||||
showDescription: false, | |||||
title: `Multiple task wireframing with team management perform better`, | |||||
description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`, | |||||
}, | |||||
{ | |||||
id: 4, | |||||
slug: '#how-to', | |||||
thumbnail: thumb2, | |||||
showDescription: true, | |||||
title: `Multiple art board prototype with Figma`, | |||||
description: `Beyond launched anti bias, a Chrome extension that replaces LinkedIn profile photos`, | |||||
}, | |||||
{ | |||||
id: 5, | |||||
slug: '#how-to', | |||||
thumbnail: thumb4, | |||||
showDescription: false, | |||||
title: `Team presentation with latest user interface & experience reach more`, | |||||
description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`, | |||||
}, | |||||
]; | |||||
const masonryOptions = { originTop: true }; | |||||
const Blog = () => { | |||||
return ( | |||||
<Box as="section" id="blog" sx={styles.section}> | |||||
<Container> | |||||
<SectionHeading | |||||
sx={styles.heading} | |||||
title="Popular blog post we update everyday" | |||||
description="Focus only on the meaning, we take care of the design. As soon as the meeting end you can export in one click." | |||||
/> | |||||
<Masonry options={masonryOptions} sx={styles.postContainer}> | |||||
{data?.map((post) => ( | |||||
<BlogPost key={post.id} post={post} /> | |||||
))} | |||||
</Masonry> | |||||
</Container> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default Blog; | |||||
const styles = { | |||||
section: { | |||||
pt: [8, null, null, 9, null, 11], | |||||
pb: [8, null, null, 9, null, 11], | |||||
position: 'relative', | |||||
}, | |||||
heading: { | |||||
mb: [6, 6, 7, 11], | |||||
}, | |||||
}; |
@@ -0,0 +1,124 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Container, Image, Text } from 'theme-ui'; | |||||
import SectionHeading from 'components/section-heading'; | |||||
import Tabs, { TabPane } from 'rc-tabs'; | |||||
import { rgba } from 'polished'; | |||||
import quote from 'assets/images/icons/quote.png'; | |||||
import yamaha from 'assets/images/logos/yamaha.png'; | |||||
import suzuki from 'assets/images/logos/suzuki.png'; | |||||
import hino from 'assets/images/logos/hino.png'; | |||||
import mercedes from 'assets/images/logos/mercedes.png'; | |||||
import dribbble from 'assets/images/logos/dribbble.png'; | |||||
import React from 'react'; | |||||
import { makeStyles } from '@material-ui/core/styles'; | |||||
import Card from '@material-ui/core/Card'; | |||||
import CardActionArea from '@material-ui/core/CardActionArea'; | |||||
import CardActions from '@material-ui/core/CardActions'; | |||||
import CardContent from '@material-ui/core/CardContent'; | |||||
import CardMedia from '@material-ui/core/CardMedia'; | |||||
import Button from '@material-ui/core/Button'; | |||||
import Typography from '@material-ui/core/Typography'; | |||||
import Paper from '@material-ui/core/Paper'; | |||||
import Grid from '@material-ui/core/Grid'; | |||||
const useStyles = makeStyles({ | |||||
root: { | |||||
maxWidth: 600, | |||||
flexGrow: 1, | |||||
}, | |||||
}); | |||||
const Testimonials = () => { | |||||
const classes = useStyles(); | |||||
return ( | |||||
<Box as="section" id="testimonials" sx={styles.section}> | |||||
<Container> | |||||
<SectionHeading | |||||
sx={styles.heading} | |||||
title="Our Business Partner" | |||||
/> | |||||
</Container> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default Testimonials; | |||||
const styles = { | |||||
section: { | |||||
backgroundColor: rgba('#FFF5ED', 0.5), | |||||
pt: [7, null, null, 9, null, 10, 11], | |||||
pb: [9, null, null, 10, 11], | |||||
}, | |||||
tabs: { | |||||
border: 0, | |||||
flexDirection: ['column-reverse', null, null, null, null, 'column'], | |||||
'.rc-tabs-nav': { | |||||
mt: [8, null, null, 9, 11], | |||||
}, | |||||
'.rc-tabs-nav-wrap': { | |||||
borderTop: `1px solid ${rgba('#01070D', 0.1)}`, | |||||
justifyContent: 'center', | |||||
}, | |||||
'.rc-tabs-tab': { | |||||
backgroundColor: 'transparent', | |||||
// m: ['0 45px'], | |||||
}, | |||||
'.rc-tabs-tab-btn': { | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
lineHeight: 1, | |||||
outline: 0, | |||||
img: { | |||||
outline: 0, | |||||
maxWidth: [50, 65, null, 110, '80%', '100%'], | |||||
m: ['0 auto'], | |||||
}, | |||||
}, | |||||
'.rc-tabs-nav-list': { | |||||
flexGrow: 1, | |||||
justifyContent: 'space-evenly', | |||||
pt: [4, null, null, 7, 9], | |||||
}, | |||||
'.rc-tabs-tabpane': { | |||||
outline: 0, | |||||
blockquote: { | |||||
fontFamily: 'heading', | |||||
fontWeight: 400, | |||||
fontSize: [2, null, null, 3, 4, 6], | |||||
lineHeight: [1.87, null, null, 2.08], | |||||
position: 'relative', | |||||
maxWidth: 846, | |||||
margin: '0px auto', | |||||
pt: ['12px', null, null, '17px', '13px'], | |||||
pl: [35, 35, 35, 10, 11], | |||||
':before': { | |||||
background: `url(${quote}) no-repeat`, | |||||
content: `''`, | |||||
position: 'absolute', | |||||
width: 128, | |||||
height: 43, | |||||
left: ['-31px', null, null, '-16px', '-7px', 0], | |||||
top: ['1px', '1px', '1px', 0], | |||||
backgroundSize: ['75%', null, null, '100%'], | |||||
}, | |||||
}, | |||||
span: { | |||||
color: '#7E8896', | |||||
fontFamily: 'body', | |||||
display: 'flex', | |||||
fontWeight: 500, | |||||
fontSize: [0, 1, 1, 2], | |||||
lineHeight: 2.5, | |||||
mt: [1, null, null, 3], | |||||
}, | |||||
}, | |||||
'.rc-tabs-ink-bar': { | |||||
top: 0, | |||||
height: 2, | |||||
backgroundColor: '#A17857', | |||||
borderRadius: 5, | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,88 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Container } from 'theme-ui'; | |||||
import SectionHeading from 'components/section-heading'; | |||||
import Service from 'components/cards/service'; | |||||
import core1 from 'assets/images/icons/core1.png'; | |||||
import core2 from 'assets/images/icons/core2.png'; | |||||
import core3 from 'assets/images/icons/core3.png'; | |||||
import core4 from 'assets/images/icons/core4.png'; | |||||
import core5 from 'assets/images/icons/core5.png'; | |||||
const data = [ | |||||
{ | |||||
id: 1, | |||||
icon: core1, | |||||
title: 'INTEGRITY', | |||||
description: `Get your info tests delivered at home collect a sample from the your progress tests.`, | |||||
}, | |||||
{ | |||||
id: 2, | |||||
icon: core2, | |||||
title: 'CUSTOMER FOCUS', | |||||
description: `Get your info tests delivered at home collect a sample from the your progress tests.`, | |||||
}, | |||||
{ | |||||
id: 3, | |||||
icon: core3, | |||||
title: 'COMMUNICATION', | |||||
description: `Get your info tests delivered at home collect a sample from the your progress tests.`, | |||||
}, | |||||
{ | |||||
id: 4, | |||||
icon: core4, | |||||
title: 'CONTINUOUS IMPROVEMENT', | |||||
description: `Get your info tests delivered at home collect a sample from the your progress tests.`, | |||||
}, | |||||
{ | |||||
id: 6, | |||||
icon: core5, | |||||
title: 'TEAMWORK', | |||||
description: `Get your info tests delivered at home collect a sample from the your progress tests.`, | |||||
}, | |||||
]; | |||||
const OtherServices = () => { | |||||
return ( | |||||
<Box as="section" sx={styles.section}> | |||||
<Container> | |||||
<SectionHeading | |||||
sx={styles.heading} | |||||
title="Core Value Thamrin Group" | |||||
/> | |||||
<Box sx={styles.contentWrapper}> | |||||
{data?.map((item) => ( | |||||
<Service key={item.id} item={item} /> | |||||
))} | |||||
</Box> | |||||
</Container> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default OtherServices; | |||||
const styles = { | |||||
section: { | |||||
backgroundColor: '#F9FAFC', | |||||
pt: [9, 9, 9, 11], | |||||
pb: [9, 9, 9, 12, 12, 14], | |||||
}, | |||||
heading: { | |||||
mb: [6, null, null, 8, 9, null, 13], | |||||
p: { | |||||
maxWidth: 500, | |||||
margin: '10px auto 0', | |||||
}, | |||||
}, | |||||
contentWrapper: { | |||||
gap: ['30px 30px', '30px 30px', '30px 30px', '80px 30px'], | |||||
display: 'grid', | |||||
justifyContent: ['center', 'center', 'center', 'unset'], | |||||
gridTemplateColumns: [ | |||||
'repeat(1, 285px)', | |||||
'repeat(1, 325px)', | |||||
'repeat(1, 285px)', | |||||
'repeat(3, 1fr)', | |||||
], | |||||
}, | |||||
}; |
@@ -0,0 +1,79 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Container, Button, Image } from 'theme-ui'; | |||||
import { rgba } from 'polished'; | |||||
import SectionHeading from 'components/section-heading'; | |||||
import illustration from 'assets/images/welcome.png'; | |||||
const Banner = () => { | |||||
return ( | |||||
<Box as="section" id="home" sx={styles.section}> | |||||
<Container style={{width:"1700px"}}> | |||||
<Box sx={styles.contentWrapper}> | |||||
<SectionHeading | |||||
sx={styles.heading} | |||||
title="Selamat Datang di Thamrin Group" | |||||
/> | |||||
<Box as="figure" sx={styles.illustration}> | |||||
<Image src={illustration} alt="illustration"/> | |||||
</Box> | |||||
</Box> | |||||
</Container> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default Banner; | |||||
const styles = { | |||||
section: { | |||||
position: 'relative', | |||||
pt: [105, null, null, 140, 15, null, 170], | |||||
pb: [8, null, null, 0], | |||||
zIndex: 0, | |||||
':before': { | |||||
backgroundColor: rgba('#FFF5ED', 0.5), | |||||
content: ['none', null, null, `''`], | |||||
position: 'absolute', | |||||
left: 0, | |||||
right: 0, | |||||
bottom: 0, | |||||
height: 72, | |||||
zIndex: -1, | |||||
}, | |||||
}, | |||||
contentWrapper: { | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
flexDirection: 'column', | |||||
justifyContent: 'flex-end', | |||||
}, | |||||
heading: { | |||||
mb: [30], | |||||
maxWidth: [null, null, null, 500, 560, 730], | |||||
h2: { | |||||
fontSize: [8, null, null, 8, 9, 10, 11], | |||||
lineHeight: [1.57], | |||||
}, | |||||
p: { | |||||
fontSize: [1, null, null, 3], | |||||
lineHeight: [1.87, null, null, 2.33], | |||||
}, | |||||
}, | |||||
illustration: { | |||||
display: ['block', null, null, 'flex'], | |||||
position: 'relative', | |||||
img: { | |||||
display: ['none', null, null, 'block'], | |||||
maxWidth: ['90%'], | |||||
m: ['0 auto'], | |||||
}, | |||||
}, | |||||
buttonWrapper: { | |||||
textAlign: ['center'], | |||||
position: ['static', null, null, 'absolute'], | |||||
left: '50%', | |||||
top: 0, | |||||
transform: ['unset', null, null, 'translateX(-50%)'], | |||||
}, | |||||
}; |
@@ -0,0 +1,322 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { useRef, useState, useEffect } from 'react'; | |||||
import { jsx, Box, Container, Image } from 'theme-ui'; | |||||
import SwiperCore, { Navigation, Pagination } from 'swiper'; | |||||
import { Swiper, SwiperSlide } from 'swiper/react'; | |||||
import SectionHeading from 'components/section-heading'; | |||||
import TeamMember from 'components/cards/team-member'; | |||||
import avatar1 from 'assets/images/team/member1.png'; | |||||
import avatar2 from 'assets/images/team/member2.png'; | |||||
import avatar3 from 'assets/images/team/member3.png'; | |||||
import avatar4 from 'assets/images/team/member4.png'; | |||||
import arrowRight from 'assets/images/icons/arrow-right.png'; | |||||
SwiperCore.use([Navigation, Pagination]); | |||||
const data = [ | |||||
{ | |||||
id: 1, | |||||
avatar: avatar1, | |||||
name: 'Emmalee Mclain', | |||||
designation: 'Product Designer', | |||||
socialLinks: [ | |||||
{ | |||||
name: 'twitter', | |||||
link: 'http://twitter.com', | |||||
}, | |||||
{ | |||||
name: 'github', | |||||
link: 'http://github.com', | |||||
}, | |||||
{ | |||||
name: 'dribbble', | |||||
link: 'http://dribbble.com', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 2, | |||||
avatar: avatar2, | |||||
name: 'Daisy Morgan', | |||||
designation: 'Lead developer', | |||||
socialLinks: [ | |||||
{ | |||||
name: 'twitter', | |||||
link: 'http://twitter.com', | |||||
}, | |||||
{ | |||||
name: 'dribbble', | |||||
link: 'http://dribbble.com', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 3, | |||||
avatar: avatar3, | |||||
name: 'Ariyanna Hicks', | |||||
designation: 'Experience Designer', | |||||
socialLinks: [ | |||||
{ | |||||
name: 'twitter', | |||||
link: 'http://twitter.com', | |||||
}, | |||||
{ | |||||
name: 'github', | |||||
link: 'http://github.com', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 4, | |||||
avatar: avatar4, | |||||
name: 'Yamilet Hooker', | |||||
designation: 'User interface designer', | |||||
socialLinks: [ | |||||
{ | |||||
name: 'twitter', | |||||
link: 'http://twitter.com', | |||||
}, | |||||
{ | |||||
name: 'github', | |||||
link: 'http://github.com', | |||||
}, | |||||
{ | |||||
name: 'dribbble', | |||||
link: 'http://dribbble.com', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 5, | |||||
avatar: avatar1, | |||||
name: 'Emmalee Mclain', | |||||
designation: 'Product Designer', | |||||
socialLinks: [ | |||||
{ | |||||
name: 'twitter', | |||||
link: 'http://twitter.com', | |||||
}, | |||||
{ | |||||
name: 'github', | |||||
link: 'http://github.com', | |||||
}, | |||||
{ | |||||
name: 'dribbble', | |||||
link: 'http://dribbble.com', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 6, | |||||
avatar: avatar2, | |||||
name: 'Daisy Morgan', | |||||
designation: 'Lead developer', | |||||
socialLinks: [ | |||||
{ | |||||
name: 'twitter', | |||||
link: 'http://twitter.com', | |||||
}, | |||||
{ | |||||
name: 'dribbble', | |||||
link: 'http://dribbble.com', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 7, | |||||
avatar: avatar3, | |||||
name: 'Ariyanna Hicks', | |||||
designation: 'Experience Designer', | |||||
socialLinks: [ | |||||
{ | |||||
name: 'twitter', | |||||
link: 'http://twitter.com', | |||||
}, | |||||
{ | |||||
name: 'github', | |||||
link: 'http://github.com', | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: 8, | |||||
avatar: avatar4, | |||||
name: 'Yamilet Hooker', | |||||
designation: 'User interface designer', | |||||
socialLinks: [ | |||||
{ | |||||
name: 'twitter', | |||||
link: 'http://twitter.com', | |||||
}, | |||||
{ | |||||
name: 'github', | |||||
link: 'http://github.com', | |||||
}, | |||||
{ | |||||
name: 'dribbble', | |||||
link: 'http://dribbble.com', | |||||
}, | |||||
], | |||||
}, | |||||
]; | |||||
const OurTeam = () => { | |||||
const swiperRef = useRef(null); | |||||
const containerRef = useRef(null); | |||||
const [currentIndex, setCurrentIndex] = useState(0); | |||||
const [containerOffset, setContainerOffset] = useState({ | |||||
left: null, | |||||
top: null, | |||||
}); | |||||
const isEnd = swiperRef?.current?.swiper?.isEnd; | |||||
const handlePrev = () => { | |||||
swiperRef?.current?.swiper?.slidePrev(); | |||||
setInterval(() => { | |||||
setCurrentIndex(swiperRef?.current?.swiper?.activeIndex); | |||||
}, 100); | |||||
clearInterval(); | |||||
}; | |||||
const handleNext = () => { | |||||
swiperRef?.current?.swiper?.slideNext(); | |||||
setInterval(() => { | |||||
setCurrentIndex(swiperRef?.current?.swiper?.activeIndex); | |||||
}, 100); | |||||
clearInterval(); | |||||
}; | |||||
useEffect(() => { | |||||
setContainerOffset({ | |||||
left: containerRef.current.offsetLeft, | |||||
top: containerRef.current.offsetTop, | |||||
}); | |||||
}, [containerRef]); | |||||
const breakpoints = { | |||||
0: { | |||||
slidesPerView: 1, | |||||
spaceBetween: 0, | |||||
}, | |||||
768: { | |||||
slidesPerView: 3, | |||||
spaceBetween: 30, | |||||
}, | |||||
1024: { | |||||
slidesPerView: 4, | |||||
spaceBetween: 30, | |||||
}, | |||||
1601: { | |||||
slidesPerView: 5, | |||||
spaceBetween: 30, | |||||
}, | |||||
}; | |||||
return ( | |||||
<Box as="section" id="team" sx={styles.section}> | |||||
<Container ref={containerRef}> | |||||
<SectionHeading | |||||
sx={styles.heading} | |||||
title="Thamrin Group Founder" | |||||
// description="Build an incredible workplace and grow your business with Gusto’s all-in-one platform with amazing contents." | |||||
/> | |||||
</Container> | |||||
<Box | |||||
sx={{ | |||||
ml: currentIndex === 0 ? containerOffset?.left : 0, | |||||
...styles.teamWrapper, | |||||
}} | |||||
> | |||||
{currentIndex !== 0 && ( | |||||
<button | |||||
onClick={handlePrev} | |||||
className="swiper-arrow swiper-arrow-left" | |||||
> | |||||
<Image src={arrowRight} alt="arrow left" /> | |||||
</button> | |||||
)} | |||||
{!isEnd && ( | |||||
<button | |||||
className="swiper-arrow swiper-arrow-right" | |||||
onClick={handleNext} | |||||
> | |||||
<Image src={arrowRight} alt="arrow right" /> | |||||
</button> | |||||
)} | |||||
<Swiper | |||||
ref={swiperRef} | |||||
spaceBetween={30} | |||||
watchSlidesVisibility={true} | |||||
slidesPerView={5} | |||||
breakpoints={breakpoints} | |||||
> | |||||
{data?.map((item) => ( | |||||
<SwiperSlide key={item.id}> | |||||
<TeamMember member={item} /> | |||||
</SwiperSlide> | |||||
))} | |||||
</Swiper> | |||||
</Box> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default OurTeam; | |||||
const styles = { | |||||
section: { | |||||
pt: [11], | |||||
pb: [11, null, null, 12, null, 14], | |||||
}, | |||||
heading: { | |||||
p: { | |||||
maxWidth: 500, | |||||
m: '10px auto 0', | |||||
}, | |||||
}, | |||||
teamWrapper: { | |||||
position: 'relative', | |||||
pl: [6], | |||||
pr: [6, null, null, 0], | |||||
transition: '0.3s ease-in-out 0s', | |||||
'.swiper-arrow': { | |||||
backgroundColor: '#fff', | |||||
border: 0, | |||||
cursor: 'pointer', | |||||
padding: 0, | |||||
display: 'flex', | |||||
width: [30, null, null, null, 40, 60], | |||||
height: [30, null, null, null, 40, 60], | |||||
alignItems: 'center', | |||||
justifyContent: 'center', | |||||
boxShadow: '0px 7px 14px rgba(25, 60, 101, 0.06)', | |||||
borderRadius: '50%', | |||||
position: 'absolute', | |||||
zIndex: 2, | |||||
top: 'calc(50% - 40px)', | |||||
transform: 'translateY(-50%)', | |||||
outline: 0, | |||||
img: { | |||||
maxWidth: [8, 10, null, null, '100%'], | |||||
}, | |||||
}, | |||||
'.swiper-arrow-left': { | |||||
left: [3, null, null, null, 20, 50], | |||||
img: { | |||||
transform: 'rotate(180deg)', | |||||
marginLeft: '-4px', | |||||
}, | |||||
}, | |||||
'.swiper-arrow-right': { | |||||
right: [3, null, null, null, 20, 50], | |||||
img: { | |||||
marginRight: '-4px', | |||||
}, | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,74 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Container } from 'theme-ui'; | |||||
import { rgba } from 'polished'; | |||||
import SectionHeading from 'components/section-heading'; | |||||
import Service from 'components/cards/service'; | |||||
import icon1 from 'assets/images/icons/service1.png'; | |||||
import icon2 from 'assets/images/icons/service2.png'; | |||||
import icon3 from 'assets/images/icons/service3.png'; | |||||
const data = [ | |||||
{ | |||||
id: 1, | |||||
icon: icon1, | |||||
title: 'Marketing & advertising', | |||||
description: `Get your info tests delivered at home collect a sample from the your progress tests.`, | |||||
}, | |||||
{ | |||||
id: 3, | |||||
icon: icon2, | |||||
title: 'Ultimate development', | |||||
description: `Get your info tests delivered at home collect a sample from the your progress tests.`, | |||||
}, | |||||
{ | |||||
id: 4, | |||||
icon: icon3, | |||||
title: 'Business Enterprise', | |||||
description: `Get your info tests delivered at home collect a sample from the your progress tests.`, | |||||
}, | |||||
]; | |||||
const Services = () => { | |||||
return ( | |||||
<Box as="section" id="services" sx={styles.section}> | |||||
<Container> | |||||
<SectionHeading | |||||
sx={styles.heading} | |||||
title="Grow your startup with our Service" | |||||
description="Build an incredible workplace and grow your business with Gusto’s all-in-one platform with amazing contents." | |||||
/> | |||||
<Box sx={styles.contentWrapper}> | |||||
{data?.map((item) => ( | |||||
<Service key={item.id} item={item} /> | |||||
))} | |||||
</Box> | |||||
</Container> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default Services; | |||||
const styles = { | |||||
section: { | |||||
backgroundColor: rgba('#FFF5ED', 0.5), | |||||
pt: [11, 11, 11, 12, 12, 12, 14], | |||||
pb: [7, 7, 7, 9, 9, 10, 11], | |||||
}, | |||||
heading: { | |||||
maxWidth: [null, null, null, 455, 660], | |||||
mb: [6, null, null, 8, null, 9, 13], | |||||
}, | |||||
contentWrapper: { | |||||
gap: 30, | |||||
display: 'grid', | |||||
justifyContent: ['center', null, null, 'unset'], | |||||
gridTemplateColumns: [ | |||||
'repeat(1, 285px)', | |||||
'repeat(1, 325px)', | |||||
'repeat(1, 285px)', | |||||
'repeat(3, 1fr)', | |||||
], | |||||
}, | |||||
}; |
@@ -0,0 +1,143 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { useState, useCallback } from 'react'; | |||||
import { jsx, Box, Container, Button, Flex, Checkbox, Label } from 'theme-ui'; | |||||
import { rgba } from 'polished'; | |||||
import SectionHeading from 'components/section-heading'; | |||||
import Input from 'components/input'; | |||||
import illustration from 'assets/images/subscribe-bg.png'; | |||||
const SubscribeUs = () => { | |||||
const [checked, setChecked] = useState(false); | |||||
const handleSubmit = (e) => { | |||||
e.preventDefault(); | |||||
console.log('submitted.'); | |||||
}; | |||||
const handleCheckbox = useCallback(() => { | |||||
setChecked(!checked); | |||||
}, [checked]); | |||||
return ( | |||||
<Box as="section" sx={styles.section} variant="section.subscribe"> | |||||
<Container> | |||||
<Box sx={styles.contentWrapper}> | |||||
<SectionHeading | |||||
sx={styles.heading} | |||||
title="Like our service? Subscribe us" | |||||
description="We have more than thousand of creative entrepreneurs and stat joining our business" | |||||
/> | |||||
<Box as="form" sx={styles.subscribe} onSubmit={handleSubmit}> | |||||
<Flex sx={styles.inputGroup}> | |||||
<Label htmlFor="email" variant="styles.srOnly"> | |||||
</Label> | |||||
<Input | |||||
id="email" | |||||
type="email" | |||||
className="email-input" | |||||
placeholder="Enter Email address" | |||||
/> | |||||
<Button variant="secondary">Subscribe</Button> | |||||
</Flex> | |||||
<Box sx={styles.checkbox}> | |||||
<Label htmlFor="no_spam" className={checked ? 'checked' : ''}> | |||||
<Checkbox | |||||
id="no_spam" | |||||
onChange={handleCheckbox} | |||||
defaultChecked={checked} | |||||
/> | |||||
Don’t provide any promotional message. | |||||
</Label> | |||||
{/* <Checkbox | |||||
id="no_spam" | |||||
checked={checked} | |||||
onChange={handleCheckbox} | |||||
label="Don’t provide any promotional message." | |||||
/> */} | |||||
</Box> | |||||
</Box> | |||||
</Box> | |||||
</Container> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default SubscribeUs; | |||||
const styles = { | |||||
section: { | |||||
background: [ | |||||
'none', | |||||
null, | |||||
null, | |||||
`#F8F0EA url(${illustration}) no-repeat center bottom / contain`, | |||||
], | |||||
pt: [8, null, null, null, 10], | |||||
pb: [8, null, null, 9, 11], | |||||
}, | |||||
contentWrapper: { | |||||
backgroundColor: '#fff', | |||||
borderRadius: 15, | |||||
p: [null, null, null, '40px 110px 50px', '50px 50px', '40px'], | |||||
gap: '50px', | |||||
display: ['block', null, 'grid', 'block', 'grid'], | |||||
alignItems: 'center', | |||||
gridTemplateColumns: ['repeat(2, 1fr)'], | |||||
}, | |||||
heading: { | |||||
textAlign: ['center', null, 'left', 'center', 'left'], | |||||
mb: ['30px', null, null, null, 0], | |||||
ml: 0, | |||||
h2: { | |||||
fontSize: [6, null, null, null, null, 8, 9], | |||||
}, | |||||
p: { | |||||
lineHeight: 1.87, | |||||
marginTop: 1, | |||||
ml: ['auto', null, null, null, 0], | |||||
mr: ['auto', null, null, null, 0], | |||||
maxWidth: 420, | |||||
}, | |||||
}, | |||||
subscribe: { | |||||
'.email-input': { | |||||
mr: [0, null, null, '15px'], | |||||
minHeight: ['50px', '50px', '60px'], | |||||
}, | |||||
button: { | |||||
minHeight: ['50px', '50px', '60px'], | |||||
fontSize: ['14px', '14px', '16px'], | |||||
mt: ['15px', null, null, 0], | |||||
}, | |||||
}, | |||||
inputGroup: { | |||||
flexDirection: ['column', null, null, 'row'], | |||||
}, | |||||
checkbox: { | |||||
mt: ['24px'], | |||||
label: { | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
cursor: 'pointer', | |||||
fontSize: '14px', | |||||
fontWeight: 400, | |||||
lineHeight: 1.14, | |||||
color: rgba('#9095AD', 0.9), | |||||
zIndex: 10, | |||||
svg: { | |||||
path: { | |||||
fill: '#EFF3F7', | |||||
}, | |||||
}, | |||||
'&.checked': { | |||||
svg: { | |||||
path: { | |||||
fill: 'primary', | |||||
}, | |||||
}, | |||||
}, | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,191 @@ | |||||
/** @jsxRuntime classic */ | |||||
/** @jsx jsx */ | |||||
import { jsx, Box, Container, Heading, Text, Image } from 'theme-ui'; | |||||
import Tabs, { TabPane } from 'rc-tabs'; | |||||
import { RiCheckboxCircleFill } from 'react-icons/ri'; | |||||
import { rgba } from 'polished'; | |||||
import { LearnMore } from 'components/link'; | |||||
import tabImage1 from 'assets/images/tab-illustration-1.png'; | |||||
const data = [ | |||||
{ | |||||
id: 1, | |||||
tabTitle: 'Why you choose our service?', | |||||
title: `We will turn your idea in the successful business model framework`, | |||||
description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`, | |||||
moreLink: '#explore-more', | |||||
image: tabImage1, | |||||
list: [ | |||||
'Medical and vision', | |||||
'Life insurance', | |||||
'HSAs and FSAs', | |||||
'Commuter benefits', | |||||
], | |||||
}, | |||||
{ | |||||
id: 2, | |||||
tabTitle: 'What’s our business promise?', | |||||
title: `We will turn your idea in the successful business model framework`, | |||||
description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`, | |||||
moreLink: '#explore-more', | |||||
image: tabImage1, | |||||
list: [ | |||||
'Medical and vision', | |||||
'Life insurance', | |||||
'HSAs and FSAs', | |||||
'Commuter benefits', | |||||
], | |||||
}, | |||||
{ | |||||
id: 3, | |||||
tabTitle: 'What’s our role model plan?', | |||||
title: `We will turn your idea in the successful business model framework`, | |||||
description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`, | |||||
moreLink: '#explore-more', | |||||
image: tabImage1, | |||||
list: [ | |||||
'Medical and vision', | |||||
'Life insurance', | |||||
'HSAs and FSAs', | |||||
'Commuter benefits', | |||||
], | |||||
}, | |||||
]; | |||||
const WhyUs = () => { | |||||
return ( | |||||
<Box as="section" id="why-us" sx={styles.section}> | |||||
<Container> | |||||
<Tabs sx={styles.tabs} animated={{ tabPane: true }}> | |||||
{data?.map((item) => ( | |||||
<TabPane | |||||
key={item.id} | |||||
tab={<Heading as="h4">{item.tabTitle}</Heading>} | |||||
> | |||||
<Box> | |||||
<Heading>{item.title}</Heading> | |||||
<Text as="p" sx={styles.description}> | |||||
{item.description} | |||||
</Text> | |||||
<Box sx={styles.list}> | |||||
{item.list.map((item, i) => ( | |||||
<Box key={i} className="list-item"> | |||||
<RiCheckboxCircleFill | |||||
color="#3FDBB1" | |||||
size="20px" | |||||
sx={{ mr: 2 }} | |||||
/> | |||||
<span>{item}</span> | |||||
</Box> | |||||
))} | |||||
</Box> | |||||
<Box sx={styles.learnMore}> | |||||
<LearnMore path={item.moreLink} label="Explore more" /> | |||||
</Box> | |||||
</Box> | |||||
<Box sx={styles.illustration}> | |||||
<Image src={item.image} alt="illustration" /> | |||||
</Box> | |||||
</TabPane> | |||||
))} | |||||
</Tabs> | |||||
</Container> | |||||
</Box> | |||||
); | |||||
}; | |||||
export default WhyUs; | |||||
const styles = { | |||||
section: { | |||||
pt: [11, null, null, 12], | |||||
pb: [8, null, null, 9, null, 11], | |||||
}, | |||||
tabs: { | |||||
border: 0, | |||||
'.rc-tabs-nav': { | |||||
mb: [8, null, null, 9, 10, 9, 12], | |||||
}, | |||||
'.rc-tabs-nav-wrap': { | |||||
borderBottom: `1px solid ${rgba('#01070D', 0.1)}`, | |||||
justifyContent: 'center', | |||||
}, | |||||
'.rc-tabs-nav-list': { | |||||
flexGrow: 1, | |||||
justifyContent: 'space-evenly', | |||||
pb: [3, null, null, 5, null, 6], | |||||
}, | |||||
'.rc-tabs-tab-btn': { | |||||
outline: 0, | |||||
alignItems: 'center', | |||||
img: { | |||||
outline: 0, | |||||
}, | |||||
}, | |||||
'.rc-tabs-tab': { | |||||
backgroundColor: 'transparent', | |||||
// m: ['0 45px'], | |||||
h4: { | |||||
fontFamily: 'body', | |||||
fontSize: [0, null, null, 17, null, null, 4], | |||||
fontWeight: 700, | |||||
lineHeight: 1.5, | |||||
textAlign: ['center', null, null, null, 'left'], | |||||
whiteSpace: ['break-spaces', null, null, null, 'unset'], | |||||
}, | |||||
}, | |||||
'.rc-tabs-tabpane': { | |||||
display: ['flex', null, null, 'grid'], | |||||
flexDirection: ['column-reverse', null, null, 'unset'], | |||||
alignItems: 'center', | |||||
justifyContent: 'center', | |||||
gridTemplateColumns: [null, null, null, '0.9fr 1.1fr'], | |||||
outline: 0, | |||||
gap: [5, null, null, 11], | |||||
h2: { | |||||
color: 'heading', | |||||
fontSize: [24, null, null, 6, 26, 8, 40], | |||||
fontWeight: 700, | |||||
lineHeight: [1.45, null, null, 1.5], | |||||
letterSpacing: [null, null, null, '0.5px', null, '-1px'], | |||||
textAlign: ['center', null, null, 'left'], | |||||
}, | |||||
p: { | |||||
color: 'textSecondary', | |||||
fontSize: [1, null, null, 2, 17], | |||||
lineHeight: [1.87, null, null, 2, 2.48], | |||||
textAlign: ['center', null, null, 'left'], | |||||
mt: [4], | |||||
}, | |||||
'.list-item': { | |||||
fontSize: [0, null, null, 1, 2], | |||||
fontWeight: 500, | |||||
lineHeight: [2.8], | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
}, | |||||
}, | |||||
}, | |||||
list: { | |||||
mt: [5], | |||||
display: 'grid', | |||||
justifyContent: ['center', null, null, 'unset'], | |||||
gridTemplateColumns: ['repeat(2, 164px)', null, null, 'repeat(2, 180px)'], | |||||
}, | |||||
learnMore: { | |||||
mt: [4], | |||||
textAlign: ['center', null, null, 'left'], | |||||
a: { | |||||
fontSize: [null, null, null, 1, 2], | |||||
}, | |||||
}, | |||||
illustration: { | |||||
display: ['flex'], | |||||
alignItems: 'center', | |||||
justifyContent: 'center', | |||||
textAlign: [null, null, null, null, null, 'center'], | |||||
img: { | |||||
maxWidth: ['65%', null, null, '100%', null, '90%', '100%'], | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,339 @@ | |||||
export default { | |||||
// example colors with dark mode | |||||
colors: { | |||||
text: '#343D48', // body color and primary color | |||||
textSecondary: '#02073E', // secondary body color | |||||
heading: '#0F2137', // primary heading color | |||||
headingSecondary: '#343D48', // heading color | |||||
background: '#FFFFFF', // body background color | |||||
backgroundSecondary: '#F9FBFD', // secondary background color | |||||
borderColor: '#F3F4F5', // border color | |||||
primary: '#0A8080', // primary button and link color | |||||
secondary: '#DB4A87', // secondary color - can be used for hover states | |||||
muted: '#7B8188', // muted color | |||||
accent: '#609', // a contrast color for emphasizing UI | |||||
dark: '#10132D', | |||||
link: '#4F96FF', // default link color | |||||
// highlight a background color for highlighting text | |||||
modes: { | |||||
dark: { | |||||
text: '#fff', | |||||
background: '#000', | |||||
primary: '#0cf', | |||||
secondary: '#09c', | |||||
muted: '#111', | |||||
}, | |||||
}, | |||||
}, | |||||
fonts: { | |||||
body: 'DM Sans', | |||||
// body: | |||||
// 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', | |||||
heading: 'B612, sans-serif', | |||||
monospace: 'Menlo, monospace', | |||||
}, | |||||
fontSizes: [ | |||||
12, // 0 | |||||
14, // 1 | |||||
16, // 2 | |||||
18, // 3 | |||||
20, // 4 | |||||
22, // 5 | |||||
24, // 6 | |||||
28, // 7 | |||||
32, // 8 | |||||
36, // 9 | |||||
42, // 10 | |||||
48, // 11 | |||||
52, // 12 | |||||
64, //13 | |||||
], | |||||
fontWeights: { | |||||
body: 'normal', | |||||
// body: 400, | |||||
heading: 500, | |||||
// heading: 700, | |||||
bold: 700, | |||||
}, | |||||
lineHeights: { | |||||
body: 1.5, | |||||
// body: 1.5, | |||||
heading: 1.25, | |||||
// heading: 1.125, | |||||
}, | |||||
letterSpacings: { | |||||
body: 'normal', | |||||
caps: '0.2em', | |||||
heading: '-0.5px', | |||||
}, | |||||
space: [ | |||||
0, //0 | |||||
5, //1 | |||||
10, //2 | |||||
15, //3 | |||||
20, //4 | |||||
25, //5 | |||||
30, //6 | |||||
40, //7 | |||||
50, //8 | |||||
60, //9 | |||||
70, //10 | |||||
80, //11 | |||||
100, //12 | |||||
120, //13 | |||||
130, //14 | |||||
150, //15 | |||||
], | |||||
sizes: {}, | |||||
breakpoints: [ | |||||
'480px', | |||||
'640px', | |||||
'768px', | |||||
'1024px', | |||||
'1200px', | |||||
'1367px', | |||||
'1440px', | |||||
'1600px', | |||||
], | |||||
// variants can use custom, user-defined names | |||||
layout: { | |||||
container: { | |||||
maxWidth: ['100%', null, null, null, '970px', '1140px', '1260px'], | |||||
paddingLeft: [3, 6], | |||||
paddingRight: [3, 6], | |||||
m: '0 auto', | |||||
}, | |||||
toolbar: { | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
// justifyContent: 'space-between', | |||||
}, | |||||
main: {}, | |||||
footer: {}, | |||||
}, | |||||
section: { | |||||
banner: {}, | |||||
}, | |||||
text: { | |||||
heading: { | |||||
fontFamily: 'heading', | |||||
lineHeight: 'heading', | |||||
fontWeight: 'heading', | |||||
}, | |||||
heroTitle: { | |||||
fontSize: [4, null, null, 5, null, 5, 6], | |||||
fontWeight: 700, | |||||
letterSpacing: 'heading', | |||||
lineHeight: [1.4, null, null, null, null, null, 1.57], | |||||
}, | |||||
}, | |||||
links: { | |||||
bold: { | |||||
fontWeight: 'bold', | |||||
}, | |||||
logo: { | |||||
display: 'inline-flex', | |||||
}, | |||||
learnMore: { | |||||
display: 'inline-flex', | |||||
alignItems: 'center', | |||||
textDecoration: 'none', | |||||
fontWeight: 700, | |||||
color: 'primary', | |||||
}, | |||||
nav: { | |||||
display: ['none', null, 'inline-flex'], | |||||
p: 2, | |||||
}, | |||||
footer: { | |||||
display: 'flex', | |||||
px: 0, | |||||
color: 'inherit', | |||||
textDecoration: 'none', | |||||
fontSize: '14px', | |||||
lineHeight: 2.5, | |||||
}, | |||||
}, | |||||
images: { | |||||
avatar: { | |||||
width: 48, | |||||
height: 48, | |||||
borderRadius: 99999, | |||||
}, | |||||
}, | |||||
// variants for buttons | |||||
buttons: { | |||||
menu: { | |||||
display: ['block', null, null, null, 'none'], | |||||
svg: { | |||||
width: '32px', | |||||
}, | |||||
}, | |||||
default: { | |||||
backgroundColor: 'transparent', | |||||
fontFamily: 'body', | |||||
fontWeight: 'bold', | |||||
borderRadius: '5px', | |||||
cursor: 'pointer', | |||||
display: 'inline-flex', | |||||
alignItems: 'center', | |||||
justifyContent: 'center', | |||||
transition: '0.3s ease-in-out 0s', | |||||
whiteSpace: 'nowrap', | |||||
}, | |||||
primary: { | |||||
variant: 'buttons.default', | |||||
color: 'white', | |||||
bg: 'primary', | |||||
minHeight: ['50px', null, null, null, null, '60px'], | |||||
padding: ['0 25px', null, null, '0 30px'], | |||||
'&:hover': { | |||||
bg: 'dark', | |||||
}, | |||||
}, | |||||
primaryMd: { | |||||
variant: 'buttons.primary', | |||||
minHeight: '50px', | |||||
px: '25px', | |||||
}, | |||||
secondary: { | |||||
variant: 'buttons.primary', | |||||
color: 'white', | |||||
bg: 'secondary', | |||||
}, | |||||
muted: { | |||||
variant: 'buttons.default', | |||||
backgroundColor: '#EDF0F2', | |||||
color: 'text', | |||||
':hover': { | |||||
backgroundColor: 'primary', | |||||
color: '#fff', | |||||
}, | |||||
}, | |||||
white: { | |||||
variant: 'buttons.default', | |||||
backgroundColor: 'white', | |||||
color: '#020718', | |||||
}, | |||||
text: { | |||||
variant: 'buttons.default', | |||||
color: 'text', | |||||
}, | |||||
}, | |||||
cards: { | |||||
primary: { | |||||
padding: 2, | |||||
borderRadius: 4, | |||||
// boxShadow: '0 0 4px 1px rgba(0, 0, 0, 0.5)', | |||||
}, | |||||
offer: { | |||||
display: 'flex', | |||||
flexDirection: 'column', | |||||
justifyContent: 'center', | |||||
alignItems: 'center', | |||||
flex: ['1 1 calc(50% - 16px)', '1 1 20%'], | |||||
minHeight: 130, | |||||
m: 2, | |||||
background: '#FFFFFF', | |||||
border: '1px solid #EDEFF6', | |||||
borderRadius: 5, | |||||
}, | |||||
featureCard: { | |||||
display: 'flex', | |||||
alignItems: ['center', 'flex-start'], | |||||
flexDirection: ['column', 'row'], | |||||
p: [0, 3], | |||||
}, | |||||
}, | |||||
forms: { | |||||
label: { | |||||
fontSize: 1, | |||||
fontWeight: 'bold', | |||||
}, | |||||
input: { | |||||
borderRadius: 8, | |||||
borderColor: 'borderColor', | |||||
height: 60, | |||||
'&:focus': { | |||||
borderColor: 'primary', | |||||
boxShadow: (t) => `0 0 0 2px ${t.colors.primary}`, | |||||
outline: 'none', | |||||
}, | |||||
}, | |||||
}, | |||||
badges: { | |||||
primary: { | |||||
color: 'background', | |||||
bg: '#28A5FF', | |||||
borderRadius: 30, | |||||
p: '3px 11px', | |||||
fontSize: 1, | |||||
letterSpacing: '-0.5px', | |||||
}, | |||||
outline: { | |||||
color: 'primary', | |||||
bg: 'transparent', | |||||
boxShadow: 'inset 0 0 0 1px', | |||||
}, | |||||
}, | |||||
styles: { | |||||
// To add base, top-level styles to the <body> element, use theme.styles.root. | |||||
root: { | |||||
fontFamily: 'body', | |||||
lineHeight: 'body', | |||||
fontWeight: 'body', | |||||
}, | |||||
// h1-h6 Heading styles | |||||
h1: { | |||||
// fontFamily: 'none', | |||||
// variant: 'text.heading', | |||||
// fontSize: 6, | |||||
}, | |||||
h2: { | |||||
// fontFamily: 'none', | |||||
// variant: 'text.heading', | |||||
// fontSize: 5, | |||||
}, | |||||
h3: { | |||||
variant: 'text.heading', | |||||
fontSize: 4, | |||||
}, | |||||
h4: { | |||||
variant: 'text.heading', | |||||
fontSize: 3, | |||||
}, | |||||
h5: { | |||||
variant: 'text.heading', | |||||
fontSize: 2, | |||||
}, | |||||
h6: { | |||||
variant: 'text.heading', | |||||
fontSize: 1, | |||||
}, | |||||
// Divider styles | |||||
hr: { | |||||
border: 0, | |||||
borderBottom: '1px solid', | |||||
borderColor: '#D9E0E7', | |||||
}, | |||||
// also you can use other HTML elements style here | |||||
ul: { | |||||
listStyle: 'none', | |||||
}, | |||||
srOnly: { | |||||
border: '0 !important', | |||||
clip: 'rect(1px, 1px, 1px, 1px) !important', | |||||
clipPath: 'inset(50%) !important', | |||||
height: '1px !important', | |||||
margin: '-1px !important', | |||||
overflow: 'hidden !important', | |||||
padding: '0 !important', | |||||
position: 'absolute !important', | |||||
width: '1px !important', | |||||
whiteSpace: 'nowrap !important', | |||||
}, | |||||
}, | |||||
}; |
@@ -0,0 +1,7 @@ | |||||
{ | |||||
"build": { | |||||
"env": { | |||||
} | |||||
} | |||||
} |