commit cec647f2e59ccfd6d4fe54020c7f8da4ac1df5ec Author: Yusmardianto Date: Wed Mar 31 13:39:43 2021 +0700 initial commit diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 0000000..f99c7ee --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "" + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d6bb394 --- /dev/null +++ b/.gitignore @@ -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 diff --git a/README.md b/README.md new file mode 100644 index 0000000..06b9f04 --- /dev/null +++ b/README.md @@ -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. diff --git a/app.json b/app.json new file mode 100644 index 0000000..448a75a --- /dev/null +++ b/app.json @@ -0,0 +1,14 @@ +{ + "name": "001-landing-next", + "description": "", + "formation": { + "web": { + "quantity": 1 + } + }, + "buildpacks": [ + { + "url": "heroku/nodejs" + } + ] +} diff --git a/firebase.json b/firebase.json new file mode 100644 index 0000000..c5c5209 --- /dev/null +++ b/firebase.json @@ -0,0 +1,10 @@ +{ + "hosting": { + "public": "out", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ] + } +} diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..1a7e339 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "baseUrl": "src" + } +} \ No newline at end of file diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..3c8c960 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,4 @@ +# netlify.toml +[build] + command = "next build && next export" + publish = "out" \ No newline at end of file diff --git a/next-sitemap.js b/next-sitemap.js new file mode 100644 index 0000000..b1379bf --- /dev/null +++ b/next-sitemap.js @@ -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', + // ], + // }, +}; diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..be13b77 --- /dev/null +++ b/next.config.js @@ -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); diff --git a/package.json b/package.json new file mode 100644 index 0000000..634f70b --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..4965832 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..3145ad0 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Sitemap: https://example.io/sitemap.xml \ No newline at end of file diff --git a/public/sitemap.xml b/public/sitemap.xml new file mode 100644 index 0000000..ee3524a --- /dev/null +++ b/public/sitemap.xml @@ -0,0 +1,6 @@ + + + + https://leerob.iosrc//index + + diff --git a/src/analytics/index.js b/src/analytics/index.js new file mode 100644 index 0000000..6aa1505 --- /dev/null +++ b/src/analytics/index.js @@ -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 }); + } +}; diff --git a/src/assets/images/White.png b/src/assets/images/White.png new file mode 100644 index 0000000..76842f8 Binary files /dev/null and b/src/assets/images/White.png differ diff --git a/src/assets/images/banner-illustration.png b/src/assets/images/banner-illustration.png new file mode 100644 index 0000000..84322e6 Binary files /dev/null and b/src/assets/images/banner-illustration.png differ diff --git a/src/assets/images/blog/1.png b/src/assets/images/blog/1.png new file mode 100644 index 0000000..e2a053b Binary files /dev/null and b/src/assets/images/blog/1.png differ diff --git a/src/assets/images/blog/2.png b/src/assets/images/blog/2.png new file mode 100644 index 0000000..1e6a069 Binary files /dev/null and b/src/assets/images/blog/2.png differ diff --git a/src/assets/images/blog/3.png b/src/assets/images/blog/3.png new file mode 100644 index 0000000..3b4de11 Binary files /dev/null and b/src/assets/images/blog/3.png differ diff --git a/src/assets/images/blog/4.png b/src/assets/images/blog/4.png new file mode 100644 index 0000000..f594a49 Binary files /dev/null and b/src/assets/images/blog/4.png differ diff --git a/src/assets/images/icons/arrow-right.png b/src/assets/images/icons/arrow-right.png new file mode 100644 index 0000000..88023c3 Binary files /dev/null and b/src/assets/images/icons/arrow-right.png differ diff --git a/src/assets/images/icons/close.png b/src/assets/images/icons/close.png new file mode 100644 index 0000000..4fdae98 Binary files /dev/null and b/src/assets/images/icons/close.png differ diff --git a/src/assets/images/icons/core1.png b/src/assets/images/icons/core1.png new file mode 100644 index 0000000..3602c04 Binary files /dev/null and b/src/assets/images/icons/core1.png differ diff --git a/src/assets/images/icons/core2.png b/src/assets/images/icons/core2.png new file mode 100644 index 0000000..58e2ca6 Binary files /dev/null and b/src/assets/images/icons/core2.png differ diff --git a/src/assets/images/icons/core3.png b/src/assets/images/icons/core3.png new file mode 100644 index 0000000..faeaecb Binary files /dev/null and b/src/assets/images/icons/core3.png differ diff --git a/src/assets/images/icons/core4.png b/src/assets/images/icons/core4.png new file mode 100644 index 0000000..12be299 Binary files /dev/null and b/src/assets/images/icons/core4.png differ diff --git a/src/assets/images/icons/core5.png b/src/assets/images/icons/core5.png new file mode 100644 index 0000000..0b76d51 Binary files /dev/null and b/src/assets/images/icons/core5.png differ diff --git a/src/assets/images/icons/dribbble.png b/src/assets/images/icons/dribbble.png new file mode 100644 index 0000000..8577eff Binary files /dev/null and b/src/assets/images/icons/dribbble.png differ diff --git a/src/assets/images/icons/facebook.png b/src/assets/images/icons/facebook.png new file mode 100644 index 0000000..5cccf7b Binary files /dev/null and b/src/assets/images/icons/facebook.png differ diff --git a/src/assets/images/icons/github.png b/src/assets/images/icons/github.png new file mode 100644 index 0000000..13c8566 Binary files /dev/null and b/src/assets/images/icons/github.png differ diff --git a/src/assets/images/icons/quote.png b/src/assets/images/icons/quote.png new file mode 100644 index 0000000..d071c16 Binary files /dev/null and b/src/assets/images/icons/quote.png differ diff --git a/src/assets/images/icons/service1.png b/src/assets/images/icons/service1.png new file mode 100644 index 0000000..3ec2344 Binary files /dev/null and b/src/assets/images/icons/service1.png differ diff --git a/src/assets/images/icons/service2.png b/src/assets/images/icons/service2.png new file mode 100644 index 0000000..40e41d1 Binary files /dev/null and b/src/assets/images/icons/service2.png differ diff --git a/src/assets/images/icons/service3.png b/src/assets/images/icons/service3.png new file mode 100644 index 0000000..e8eff17 Binary files /dev/null and b/src/assets/images/icons/service3.png differ diff --git a/src/assets/images/icons/service4.png b/src/assets/images/icons/service4.png new file mode 100644 index 0000000..479c3f0 Binary files /dev/null and b/src/assets/images/icons/service4.png differ diff --git a/src/assets/images/icons/service5.png b/src/assets/images/icons/service5.png new file mode 100644 index 0000000..4a8b023 Binary files /dev/null and b/src/assets/images/icons/service5.png differ diff --git a/src/assets/images/icons/service6.png b/src/assets/images/icons/service6.png new file mode 100644 index 0000000..ab2d584 Binary files /dev/null and b/src/assets/images/icons/service6.png differ diff --git a/src/assets/images/icons/service7.png b/src/assets/images/icons/service7.png new file mode 100644 index 0000000..3ec2344 Binary files /dev/null and b/src/assets/images/icons/service7.png differ diff --git a/src/assets/images/icons/service8.png b/src/assets/images/icons/service8.png new file mode 100644 index 0000000..40e41d1 Binary files /dev/null and b/src/assets/images/icons/service8.png differ diff --git a/src/assets/images/icons/service9.png b/src/assets/images/icons/service9.png new file mode 100644 index 0000000..b6597ba Binary files /dev/null and b/src/assets/images/icons/service9.png differ diff --git a/src/assets/images/icons/twitter.png b/src/assets/images/icons/twitter.png new file mode 100644 index 0000000..7ba40de Binary files /dev/null and b/src/assets/images/icons/twitter.png differ diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000..f5e42c6 Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/assets/images/logos/dribbble.png b/src/assets/images/logos/dribbble.png new file mode 100644 index 0000000..65b97fa Binary files /dev/null and b/src/assets/images/logos/dribbble.png differ diff --git a/src/assets/images/logos/google.png b/src/assets/images/logos/google.png new file mode 100644 index 0000000..a1d2b86 Binary files /dev/null and b/src/assets/images/logos/google.png differ diff --git a/src/assets/images/logos/hino.png b/src/assets/images/logos/hino.png new file mode 100644 index 0000000..0063f77 Binary files /dev/null and b/src/assets/images/logos/hino.png differ diff --git a/src/assets/images/logos/honda.png b/src/assets/images/logos/honda.png new file mode 100644 index 0000000..44129bb Binary files /dev/null and b/src/assets/images/logos/honda.png differ diff --git a/src/assets/images/logos/mercedes.png b/src/assets/images/logos/mercedes.png new file mode 100644 index 0000000..0c58673 Binary files /dev/null and b/src/assets/images/logos/mercedes.png differ diff --git a/src/assets/images/logos/microsoft.png b/src/assets/images/logos/microsoft.png new file mode 100644 index 0000000..5767e01 Binary files /dev/null and b/src/assets/images/logos/microsoft.png differ diff --git a/src/assets/images/logos/paypal.png b/src/assets/images/logos/paypal.png new file mode 100644 index 0000000..9105650 Binary files /dev/null and b/src/assets/images/logos/paypal.png differ diff --git a/src/assets/images/logos/suzuki.png b/src/assets/images/logos/suzuki.png new file mode 100644 index 0000000..13f205d Binary files /dev/null and b/src/assets/images/logos/suzuki.png differ diff --git a/src/assets/images/logos/uber.png b/src/assets/images/logos/uber.png new file mode 100644 index 0000000..d078f05 Binary files /dev/null and b/src/assets/images/logos/uber.png differ diff --git a/src/assets/images/logos/yamaha.png b/src/assets/images/logos/yamaha.png new file mode 100644 index 0000000..5717392 Binary files /dev/null and b/src/assets/images/logos/yamaha.png differ diff --git a/src/assets/images/subscribe-bg.png b/src/assets/images/subscribe-bg.png new file mode 100644 index 0000000..37ed48a Binary files /dev/null and b/src/assets/images/subscribe-bg.png differ diff --git a/src/assets/images/tab-illustration-1.png b/src/assets/images/tab-illustration-1.png new file mode 100644 index 0000000..ec84b36 Binary files /dev/null and b/src/assets/images/tab-illustration-1.png differ diff --git a/src/assets/images/team/member1.png b/src/assets/images/team/member1.png new file mode 100644 index 0000000..c75be8c Binary files /dev/null and b/src/assets/images/team/member1.png differ diff --git a/src/assets/images/team/member2.png b/src/assets/images/team/member2.png new file mode 100644 index 0000000..72b213a Binary files /dev/null and b/src/assets/images/team/member2.png differ diff --git a/src/assets/images/team/member3.png b/src/assets/images/team/member3.png new file mode 100644 index 0000000..0955f9f Binary files /dev/null and b/src/assets/images/team/member3.png differ diff --git a/src/assets/images/team/member4.png b/src/assets/images/team/member4.png new file mode 100644 index 0000000..b61fb6e Binary files /dev/null and b/src/assets/images/team/member4.png differ diff --git a/src/assets/images/welcome.png b/src/assets/images/welcome.png new file mode 100644 index 0000000..7c0a9bb Binary files /dev/null and b/src/assets/images/welcome.png differ diff --git a/src/components/cards/blog-post.js b/src/components/cards/blog-post.js new file mode 100644 index 0000000..affc158 --- /dev/null +++ b/src/components/cards/blog-post.js @@ -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 ( + + {!!post?.thumbnail && ( + + post title + + )} + + + + {post?.title} + + {post?.showDescription && ( + + {post?.description} + + )} + + + ); +}; + +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], + }, +}; diff --git a/src/components/cards/service.js b/src/components/cards/service.js new file mode 100644 index 0000000..e258eef --- /dev/null +++ b/src/components/cards/service.js @@ -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 ( + + + icon + + + {item?.title} + {item?.description} + {item?.moreLink && } + + + ); +}; + +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], + }, + }, +}; diff --git a/src/components/cards/team-member.js b/src/components/cards/team-member.js new file mode 100644 index 0000000..04e49e4 --- /dev/null +++ b/src/components/cards/team-member.js @@ -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 ( + + + {member?.name} + + + {member?.name} + {member?.designation} + + {member?.socialLinks?.map((social, index) => ( + + {social?.name === 'twitter' && ( + + )} + {social?.name === 'github' && ( + + )} + {social?.name === 'dribbble' && ( + + )} + + ))} + + + + ); +}; + +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], + }, + }, +}; diff --git a/src/components/checkbox.js b/src/components/checkbox.js new file mode 100644 index 0000000..06b93a1 --- /dev/null +++ b/src/components/checkbox.js @@ -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 ( + + {checked ? ( + + ) : ( + + )} + + {label && } + + ); +}; + +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', + }, + }, + }, +}; diff --git a/src/components/drawer.js b/src/components/drawer.js new file mode 100644 index 0000000..03f1687 --- /dev/null +++ b/src/components/drawer.js @@ -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 ( + + + {closeButton && ( + + {closeButton} + + )} + {children} + + + {drawerHandler} + + + ); +}; + +Drawer.defaultProps = { + width: '320px', + placement: 'left', +}; + +export default Drawer; diff --git a/src/components/footer/footer.data.js b/src/components/footer/footer.data.js new file mode 100644 index 0000000..4440ce0 --- /dev/null +++ b/src/components/footer/footer.data.js @@ -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', + }, +]; diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js new file mode 100644 index 0000000..5547961 --- /dev/null +++ b/src/components/footer/footer.js @@ -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 ( + + + + + + + + + Terms of use + | + Privacy + + + Copyright by {new Date().getFullYear()} Thamrin Group + + + {menuItems.map(({ id, title, items }) => ( + + ))} + + + + ); +} + +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'], + }, +}; diff --git a/src/components/footer/widget.js b/src/components/footer/widget.js new file mode 100644 index 0000000..b43ad6c --- /dev/null +++ b/src/components/footer/widget.js @@ -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 ( + + {title} +
    + {items.map(({ path, label, icon }, i) => ( +
  • + {icon && {label}} + +
  • + ))} +
+
+ ); +}; + +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), + }, + }, + }, +}; diff --git a/src/components/header/header.data.js b/src/components/header/header.data.js new file mode 100644 index 0000000..6095ec9 --- /dev/null +++ b/src/components/header/header.data.js @@ -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: '', + }, +]; diff --git a/src/components/header/header.js b/src/components/header/header.js new file mode 100644 index 0000000..59ecd24 --- /dev/null +++ b/src/components/header/header.js @@ -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 ( + + + + + + + + {/* */} + + + {menuItems.map(({ path, label }, i) => ( +
  • + +
  • + ))} +
    +
    + +
    +
    +
    +
    +
    +
    + ); +} + +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', + }, + }, +}; diff --git a/src/components/header/navbar-drawer.js b/src/components/header/navbar-drawer.js new file mode 100644 index 0000000..71be4a5 --- /dev/null +++ b/src/components/header/navbar-drawer.js @@ -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 ( + + + + } + open={state?.isOpen} + toggleHandler={toggleHandler} + closeButton={ + + } + maskStyle={styles.mask} + drawerStyle={styles.drawer} + closeBtnStyle={styles.close} + > + + + + {menuItems.map(({ path, label }, i) => ( + + + {label} + + + ))} + + + + ); +}; +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', + }, + }, + }, +}; diff --git a/src/components/icons/logo.js b/src/components/icons/logo.js new file mode 100644 index 0000000..9a034f0 --- /dev/null +++ b/src/components/icons/logo.js @@ -0,0 +1,119 @@ +import React from 'react'; + +const Logo = ({ white, ...props }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Logo; diff --git a/src/components/image.js b/src/components/image.js new file mode 100644 index 0000000..b40015f --- /dev/null +++ b/src/components/image.js @@ -0,0 +1,6 @@ +import React from 'react'; +import { Image as Img } from 'theme-ui'; + +export default function Image({ src, ...rest }) { + return ; +} diff --git a/src/components/input.js b/src/components/input.js new file mode 100644 index 0000000..6251353 --- /dev/null +++ b/src/components/input.js @@ -0,0 +1,26 @@ +/** @jsxRuntime classic */ +/** @jsx jsx */ +import { jsx, Input as InputField } from 'theme-ui'; +import { rgba } from 'polished'; + +const Input = ({ ...props }) => { + return ; +}; + +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), + }, + }, +}; diff --git a/src/components/layout.js b/src/components/layout.js new file mode 100644 index 0000000..fdac669 --- /dev/null +++ b/src/components/layout.js @@ -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 ( + +
    +
    + {children} +
    +