├── CONTRIBUTING.md
├── public
    ├── favicon.ico
    ├── assets
    │   ├── prewedding-home.png
    │   ├── gallery-mobile
    │   │   ├── photo-1.png
    │   │   ├── photo-2.png
    │   │   ├── photo-3.png
    │   │   ├── photo-4.png
    │   │   └── photo-5.png
    │   ├── prewedding-home-dekstop.png
    │   └── icons
    │   │   ├── home.svg
    │   │   ├── location.svg
    │   │   ├── chat.svg
    │   │   ├── calender.svg
    │   │   ├── gallery.svg
    │   │   ├── resepsi.svg
    │   │   └── ring.svg
    └── vercel.svg
├── .babelrc
├── postcss.config.js
├── .prettierrc.js
├── pages
    ├── _app.js
    └── index.js
├── jsconfig.json
├── components
    └── Layout
    │   ├── Layout.js
    │   ├── Header.js
    │   └── Footer.js
├── .gitignore
├── styles
    └── tailwind.css
├── package.json
├── tailwind.config.js
├── .all-contributorsrc
└── README.md


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nmdlnd/ibarin/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [ "next/babel" ],
3 |   "plugins": [ "inline-react-svg" ]
4 | }


--------------------------------------------------------------------------------
/public/assets/prewedding-home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nmdlnd/ibarin/HEAD/public/assets/prewedding-home.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/assets/gallery-mobile/photo-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nmdlnd/ibarin/HEAD/public/assets/gallery-mobile/photo-1.png


--------------------------------------------------------------------------------
/public/assets/gallery-mobile/photo-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nmdlnd/ibarin/HEAD/public/assets/gallery-mobile/photo-2.png


--------------------------------------------------------------------------------
/public/assets/gallery-mobile/photo-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nmdlnd/ibarin/HEAD/public/assets/gallery-mobile/photo-3.png


--------------------------------------------------------------------------------
/public/assets/gallery-mobile/photo-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nmdlnd/ibarin/HEAD/public/assets/gallery-mobile/photo-4.png


--------------------------------------------------------------------------------
/public/assets/gallery-mobile/photo-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nmdlnd/ibarin/HEAD/public/assets/gallery-mobile/photo-5.png


--------------------------------------------------------------------------------
/public/assets/prewedding-home-dekstop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nmdlnd/ibarin/HEAD/public/assets/prewedding-home-dekstop.png


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   arrowParens: 'always',
3 |   singleQuote: true,
4 |   tabWidth: 2,
5 |   trailingComa: 'none',
6 | };
7 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import "../styles/tailwind.css";
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />;
5 | }
6 | 
7 | export default MyApp;
8 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "@/components/*": ["components/*"],
 6 |       "@/pages/*": ["pages/*"],
 7 |       "@/public/*": ["public/*"],
 8 |       "@/styles/*": ["styles/*"]
 9 |     }
10 |   }
11 | }


--------------------------------------------------------------------------------
/public/assets/icons/home.svg:
--------------------------------------------------------------------------------
1 | <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M14 6.414L9.5 1.914L2.414 9H4V17H7V11H12V17H15V9H16.586L15 7.414V4H14V6.414ZM0 10L9.5 0.5L13 4V3H16V7L19 10H16V17.998H11V11.998H8V17.998H3V10H0Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/components/Layout/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Footer from './Footer';
 3 | import Header from './Header';
 4 | 
 5 | const Layout = ({ children }) => {
 6 |   return (
 7 |     <>
 8 |       <Header />
 9 |       <div className="bg-dark-500 w-full">
10 |         <div className="max-w-screen-2xl mx-auto ">{children}</div>
11 |       </div>
12 |       <Footer />
13 |     </>
14 |   );
15 | };
16 | 
17 | export default Layout;
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/styles/tailwind.css:
--------------------------------------------------------------------------------
 1 | /* purgecss start ignore */
 2 | @import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Habibi&family=Montserrat:wght@300;400;500;600;700&display=swap");
 3 | 
 4 | @tailwind base;
 5 | @tailwind components;
 6 | html {
 7 |   font-family: "Montserrat", sans-serif;
 8 | }
 9 | .font-habibi {
10 |   font-family: "Habibi", serif;
11 | }
12 | .font-great-vibes {
13 |   font-family: "Great Vibes", cursive;
14 | }
15 | .bg-blur-2px {
16 |   filter: blur(2px);
17 | }
18 | p {
19 |   @apply tracking-wide;
20 | }
21 | /* purgecss end ignore */
22 | @tailwind utilities;
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-landing-vpn",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev ",
 7 |     "build": "NODE_ENV=production next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@fullhuman/postcss-purgecss": "^3.0.0",
12 |     "autoprefixer": "^10.1.0",
13 |     "next": "10.0.3",
14 |     "postcss": "^8.2.1",
15 |     "react": "17.0.1",
16 |     "react-dom": "17.0.1",
17 |     "tailwindcss": "^2.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "all-contributors-cli": "^6.20.0",
21 |     "babel-plugin-inline-react-svg": "^1.1.2"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/public/assets/icons/location.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 21.1886C16.5716 16.1029 18.8574 12.2915 18.8574 9.75203C18.8574 5.94403 15.7876 2.85718 12.0002 2.85718C8.21278 2.85718 5.14307 5.94403 5.14307 9.75203C5.14307 12.2915 7.42878 16.104 12.0002 21.1897V21.1886Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M12.0001 12.5715C13.578 12.5715 14.8572 11.2923 14.8572 9.71432C14.8572 8.13636 13.578 6.85718 12.0001 6.85718C10.4221 6.85718 9.14294 8.13636 9.14294 9.71432C9.14294 11.2923 10.4221 12.5715 12.0001 12.5715Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/public/assets/icons/chat.svg:
--------------------------------------------------------------------------------
1 | <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M3 0H16C16.7956 0 17.5587 0.316071 18.1213 0.87868C18.6839 1.44129 19 2.20435 19 3V12C19 12.7956 18.6839 13.5587 18.1213 14.1213C17.5587 14.6839 16.7956 15 16 15H11.414L7.707 18.707C7.56715 18.8468 7.38898 18.942 7.19503 18.9806C7.00108 19.0192 6.80005 18.9993 6.61735 18.9237C6.43465 18.848 6.27848 18.7199 6.1686 18.5555C6.05871 18.391 6.00004 18.1978 6 18V15H3C2.20435 15 1.44129 14.6839 0.87868 14.1213C0.316071 13.5587 0 12.7956 0 12V3C0 2.20435 0.316071 1.44129 0.87868 0.87868C1.44129 0.316071 2.20435 0 3 0ZM16 1H3C2.46957 1 1.96086 1.21071 1.58579 1.58579C1.21071 1.96086 1 2.46957 1 3V12C1 12.5304 1.21071 13.0391 1.58579 13.4142C1.96086 13.7893 2.46957 14 3 14H7V18L11 14H16C16.5304 14 17.0391 13.7893 17.4142 13.4142C17.7893 13.0391 18 12.5304 18 12V3C18 2.46957 17.7893 1.96086 17.4142 1.58579C17.0391 1.21071 16.5304 1 16 1Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme');
 2 | 
 3 | module.exports = {
 4 |   purge: [
 5 |     './pages/*.js',
 6 |     './pages/**/*.js',
 7 |     './components/*.js',
 8 |     './components/**/*.js',
 9 |   ],
10 |   theme: {
11 |     boxShadow: {
12 |       DEFAULT: '#11130f 0px 14px 20px;',
13 |     },
14 |     maxWidth: {
15 |       'screen-2xl': '1440px',
16 |       'screen-xl': '1280px',
17 |       'screen-lg': '1024px',
18 |       'screen-md': '768px',
19 |       'screen-sm': '640px',
20 |     },
21 |     extend: {
22 |       colors: {
23 |         'grey-chez': {
24 |           300: '#CBCFCD',
25 |           400: '#9BA19A',
26 |           500: '#8D8B8C',
27 |         },
28 |         brown: {
29 |           500: '#7E7464',
30 |         },
31 |         dark: {
32 |           500: '#23261E',
33 |           450: 'hsla(83,12%,13%,0.4)',
34 |         },
35 |       },
36 |       gridTemplateRows: {
37 |         // Simple 8 row grid
38 | 
39 |         7: 'repeat(7, minmax(0, 1fr))',
40 |       },
41 |     },
42 |   },
43 |   variants: {},
44 |   plugins: [],
45 | };
46 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/public/assets/icons/calender.svg:
--------------------------------------------------------------------------------
1 | <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M4 0H5C5.26522 0 5.51957 0.105357 5.70711 0.292893C5.89464 0.48043 6 0.734784 6 1V2H11V1C11 0.734784 11.1054 0.48043 11.2929 0.292893C11.4804 0.105357 11.7348 0 12 0H13C13.2652 0 13.5196 0.105357 13.7071 0.292893C13.8946 0.48043 14 0.734784 14 1V2C14.7956 2 15.5587 2.31607 16.1213 2.87868C16.6839 3.44129 17 4.20435 17 5V16C17 16.7956 16.6839 17.5587 16.1213 18.1213C15.5587 18.6839 14.7956 19 14 19H3C2.20435 19 1.44129 18.6839 0.87868 18.1213C0.316071 17.5587 0 16.7956 0 16V5C0 4.20435 0.316071 3.44129 0.87868 2.87868C1.44129 2.31607 2.20435 2 3 2V1C3 0.734784 3.10536 0.48043 3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM12 2H13V1H12V2ZM5 2V1H4V2H5ZM3 3C2.46957 3 1.96086 3.21071 1.58579 3.58579C1.21071 3.96086 1 4.46957 1 5V6H16V5C16 4.46957 15.7893 3.96086 15.4142 3.58579C15.0391 3.21071 14.5304 3 14 3H3ZM1 16C1 16.5304 1.21071 17.0391 1.58579 17.4142C1.96086 17.7893 2.46957 18 3 18H14C14.5304 18 15.0391 17.7893 15.4142 17.4142C15.7893 17.0391 16 16.5304 16 16V7H1V16ZM9 11H14V16H9V11ZM10 12V15H13V12H10Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/.all-contributorsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "projectName": "ibarin",
 3 |   "projectOwner": "adeka-factory",
 4 |   "repoType": "github",
 5 |   "repoHost": "https://github.com",
 6 |   "files": [
 7 |     "README.md"
 8 |   ],
 9 |   "imageSize": 100,
10 |   "commit": true,
11 |   "commitConvention": "gitmoji",
12 |   "contributors": [
13 |     {
14 |       "login": "ffadilaputra",
15 |       "name": "Ivan Fadila Putra",
16 |       "avatar_url": "https://avatars.githubusercontent.com/u/6916297?v=4",
17 |       "profile": "https://ffadilaputra.space/",
18 |       "contributions": [
19 |         "doc",
20 |         "projectManagement",
21 |         "review"
22 |       ]
23 |     },
24 |     {
25 |       "login": "naufaldi",
26 |       "name": "Naufaldi",
27 |       "avatar_url": "https://avatars.githubusercontent.com/u/13159420?v=4",
28 |       "profile": "https://naufaldi.xyz",
29 |       "contributions": [
30 |         "code",
31 |         "review"
32 |      ]
33 |      },
34 |       "login": "aurakanzaa",
35 |       "name": "aura kanza",
36 |       "avatar_url": "https://avatars.githubusercontent.com/u/18681884?v=4",
37 |       "profile": "https://www.linkedin.com/in/aura-kanza-caesaria-734361163/",
38 |       "contributions": [
39 |         "design"      ]
40 |     }
41 |   ],
42 |   "contributorsPerLine": 7,
43 |   "skipCi": true
44 | }
45 | 


--------------------------------------------------------------------------------
/components/Layout/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Header = () => {
 4 |   return (
 5 |     <div className="hidden lg:block fixed top-0 right-0 left-0 bg-transparent  px-8   z-20">
 6 |       <div className="max-w-screen-2xl w-full mx-auto grid grid-cols-2">
 7 |         <ul className="flex w-full text-sm lg:text-base text-white bg-dark-500 py-4 rounded-l-full rounded-r-full">
 8 |           <li className="py-3 px-4 xl:px-8 border border-white rounded-l-full rounded-r-full mx-1 xl:mx-3 text-sm xl:text-base cursor-pointer">
 9 |             {' '}
10 |             Beranda
11 |           </li>
12 |           <li className="py-3 px-4 xl:px-8 border border-transparent hover:border-white rounded-l-full rounded-r-full mx-1 xl:mx-3 cursor-pointer">
13 |             {' '}
14 |             Akad & Resepsi
15 |           </li>
16 |           <li className="py-3 px-4 xl:px-8 border border-transparent hover:border-white rounded-l-full rounded-r-full mx-1 xl:mx-3 cursor-pointer">
17 |             {' '}
18 |             Galeri
19 |           </li>
20 |           <li className="py-3 px-4 xl:px-8 border border-transparent hover:border-white rounded-l-full rounded-r-full mx-1 xl:mx-3 cursor-pointer">
21 |             {' '}
22 |             Ucapan
23 |           </li>
24 |         </ul>
25 |       </div>
26 |     </div>
27 |   );
28 | };
29 | 
30 | export default Header;
31 | 


--------------------------------------------------------------------------------
/components/Layout/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Home from '../../public/assets/icons/home.svg';
 3 | import Calender from '../../public/assets/icons/calender.svg';
 4 | import Gallery from '../../public/assets/icons/gallery.svg';
 5 | import Chat from '../../public/assets/icons/chat.svg';
 6 | 
 7 | const Footer = () => {
 8 |   return (
 9 |     <div className=" fixed lg:hidden bottom-0 mb-1 mx-1 right-0 left-0 z-20">
10 |       <div className="bg-dark-500 w-full px-6 rounded-full shadow border-opacity-20 border border-white">
11 |         <ul className=" flex items-center justify-evenly text-white text-xs font-light py-2 md:py-3">
12 |           <li className="flex items-center font-medium  flex-col px-2 py-1">
13 |             <Home className="h-6 w-6 mb-1" />
14 |             <p>Beranda</p>
15 |           </li>
16 |           <li className="flex items-center  flex-col px-2 py-1">
17 |             <Calender className="h-6 w-6 mb-1" />
18 |             <p>Resepsi</p>
19 |           </li>
20 |           <li className="flex items-center  flex-col px-2 py-1">
21 |             <Gallery className="h-6 w-6 mb-1" />
22 |             <p>Galeri</p>
23 |           </li>
24 |           <li className="flex items-center  flex-col px-2 py-1">
25 |             <Chat className="h-6 w-6 mb-1" />
26 |             <p>Ucapan</p>
27 |           </li>
28 |         </ul>
29 |       </div>
30 |     </div>
31 |   );
32 | };
33 | 
34 | export default Footer;
35 | 


--------------------------------------------------------------------------------
/public/assets/icons/gallery.svg:
--------------------------------------------------------------------------------
1 | <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M3 0H16C16.7956 0 17.5587 0.316071 18.1213 0.87868C18.6839 1.44129 19 2.20435 19 3V16C19 16.7956 18.6839 17.5587 18.1213 18.1213C17.5587 18.6839 16.7956 19 16 19H3C2.20435 19 1.44129 18.6839 0.87868 18.1213C0.316071 17.5587 0 16.7956 0 16V3C0 2.20435 0.316071 1.44129 0.87868 0.87868C1.44129 0.316071 2.20435 0 3 0ZM3 1C2.46957 1 1.96086 1.21071 1.58579 1.58579C1.21071 1.96086 1 2.46957 1 3V14.586L5.293 10.293L7.793 12.793L12.793 7.793L18 13V3C18 2.46957 17.7893 1.96086 17.4142 1.58579C17.0391 1.21071 16.5304 1 16 1H3ZM7.793 14.207L5.293 11.707L1 16C1 16.5304 1.21071 17.0391 1.58579 17.4142C1.96086 17.7893 2.46957 18 3 18H16C16.5304 18 17.0391 17.7893 17.4142 17.4142C17.7893 17.0391 18 16.5304 18 16V14.414L12.793 9.207L7.793 14.207ZM5.5 3C6.16304 3 6.79893 3.26339 7.26777 3.73223C7.73661 4.20107 8 4.83696 8 5.5C8 6.16304 7.73661 6.79893 7.26777 7.26777C6.79893 7.73661 6.16304 8 5.5 8C4.83696 8 4.20107 7.73661 3.73223 7.26777C3.26339 6.79893 3 6.16304 3 5.5C3 4.83696 3.26339 4.20107 3.73223 3.73223C4.20107 3.26339 4.83696 3 5.5 3ZM5.5 4C5.10218 4 4.72064 4.15804 4.43934 4.43934C4.15804 4.72064 4 5.10218 4 5.5C4 5.89782 4.15804 6.27936 4.43934 6.56066C4.72064 6.84196 5.10218 7 5.5 7C5.89782 7 6.27936 6.84196 6.56066 6.56066C6.84196 6.27936 7 5.89782 7 5.5C7 5.10218 6.84196 4.72064 6.56066 4.43934C6.27936 4.15804 5.89782 4 5.5 4Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/assets/icons/resepsi.svg:
--------------------------------------------------------------------------------
 1 | <svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 | <rect x="0.5" y="0.5" width="64" height="64" fill="url(#pattern0)"/>
 3 | <defs>
 4 | <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
 5 | <use xlink:href="#image0" transform="scale(0.015625)"/>
 6 | </pattern>
 7 | <image id="image0" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAFzklEQVR4nO2bSWxVVRjH/wdKJcpQhiIoJWqUVsAEpJCIBWPEhS4EE92YEEgMiStXLjFqggzGqIm4cCEgO+JGYzSxDeDQYkwrCYMSpwVD0TBUxNDKUH4u7nf7bl/ve+9O791C+k9e+t453/+b7jnfPefcW6cKAJolrZX0pKS7JTVJcpLOSvpN0gFJnzvnjlXSdVMBaAX2ER3twKN5+50awARgB3DDArsAfASsAZqBO+zTDKwFdgJ9JjsIvANMzDuORACmAfstmH5gMzAlAm8qsMU42MiZVAufM4NdeT/408DSBDpajQvwDTAhAqce2A6cAXqBbUB9DJup+EFFOwLBz42toKBnbiAJb0eQ3xZST7bGsJeK7ytptTnfn+TKh+hbBgyYztYKsr3m9Aqgzb73xrCViu8r8av95ljE8jr9K/NVBTkASv2OYCcVX3jVHLxqPzUycbiOWUAP8F2grYHC3eH+agWQlj9O3iJHkj51zv0TlRgwOEvSPklLJQ3d/pxzFyV9Zj+fi6u3ZgA6LGlrEnBnAUeNf9SSEex/logIcBIhIn/kXQL4xTrnZxm8yTSPcCFdAFnxtwadvGSNk4uc7wS6CQ+sYvAmN9lkrpRJZGgAZXKfmI93t4PgXQK4XCIBPWEBRg3eZP0EXMoigCz4I/qBU9Y2v0iwEThifceBOSFtsys41+LLZhVAWn5xf52k45LmSlog6Ve/wzl3Dlgtr8IvktRuXYskHZP0hHPubAX/Ftjfk2Vkzki6C2iTt82WpDgLmXR84DVLys4S/cEhX3HYF3F3G+eVMjJbGYktMfyPxQ+bAgutrY8SCyFLQjclimIJTgPwt+l+oIxcvQXRi7eH2EL8zVBkfugUwdu5xcp8BMe2m86yS+Fao1QCHsHbuAxQYfMS0chy0zUILE6rL0uEJsA6PrC+tNvhJgo7tHeBr4GDRTJ5tpVMQD3e4sdPwrJYkWvoyvvBtwN1YQbzbgtNgAlMoVAPBvCKS0OEwBvw5vx/geAbRkOwsRJgQhOB9ygcivYBu/A2Ni3AJPu0WNtuCtV+EG/Y1wX0HQC6imzk1XawYgICwiuIfyw+qgpeGIoT4MoJ+wT72iFpoaTpkq5LOmWfDnlnCb9n72728ONxzlWMfYgQacikc2ocsAd4s5p2zFa8eGqUgKfNzA1inksksDUsnnHVNBYDL9lfJ2ljno6MQLVHADAPuA5cM1PnqeKjtdE4AjZKGi9pr6QeSTMkPZ+rR0FUcwTgrRT9leNK4EX73lWZndjm6CiCeAuuDab+mLXdTmFRtZIIzxYT2B0WT1054YwMrpf3zGC2fRolzZEUPHv4UJKcc/3AHkkvS/rW+OflvYxxVt7pzzlJ7c65L6vtux9A4hEAzKQ0ruCdR35B4FG6FcVOvKe910twz9csnrRTAHg94Pg+vBOo6RG5DrgTWAr8bDquAutS+FPbBJiODeY4wCfEuM3hvbTh7+P/BZ5K6UvtE2B6VgMXTV0XMDMC557AlT8DLMnAj3wSYLoWU7jt/QQ0lpF9EPjTZI8ATRn5kF8CTF8TcNLUvlBGzq8d3SR8bF9C77B4ar4SdM6dkrfyk6Qfy4gesr/9SR7bZ4YqjID5pvIvwFnbeGA98ExAbhreCdNAnKIZwX7uU2Cjqdxrv5cAP1DAfqDF+g5b26oM7ec7BST5wRwG3pfULWm5pBOS+iQ9LukQsEnS9yb7WM299FGFEXDCVPonyFeBt/DePm0EPqZwIOvLdGRoP78pANzLcHQCD4XIrcK7Tfq4TJKXH8N9yDUBy03dBasFJQ8mgduAV/GK4DUiLJwi+pBfAkxfGzAjhvw84OEM7eebgLxRHM9oOBLLFbEPRPCOq1ZUwZdqoss51xbWkWQE3IzTIbnPYzXgFsdYAiLI9EoSt8B/hAEr7etpvy3KXWCXpE2SOm+hUjD0TmSUBLwhaVDSOkn3VcujGuEPSXskZfY64BjGMIYxjOFmxv9ib0l9ZkgXywAAAABJRU5ErkJggg=="/>
 8 | </defs>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/public/assets/icons/ring.svg:
--------------------------------------------------------------------------------
 1 | <svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 | <rect y="0.5" width="36" height="36" fill="url(#pattern0)"/>
 3 | <defs>
 4 | <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
 5 | <use xlink:href="#image0" transform="scale(0.015625)"/>
 6 | </pattern>
 7 | <image id="image0" width="64" height="64" xlink:href="data:image/png;base64,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"/>
 8 | </defs>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 💍 Ibarin
 2 | <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 3 | [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
 4 | <!-- ALL-CONTRIBUTORS-BADGE:END -->
 5 | 
 6 | > A brief description of what this project does and who it's for
 7 | 
 8 | ## 🗒️ Features
 9 | 
10 | ### Template feature
11 | 
12 | - 🎈 Mobile first and responsive page
13 | - 🤖 SEO metadata and Open Graph tags [#10](https://github.com/adeka-factory/ibarin/issues/10)
14 | - 💯 Maximize lighthouse score [#11](https://github.com/adeka-factory/ibarin/issues/11)
15 | - ⚙️ PSI reports [#11](https://github.com/adeka-factory/ibarin/issues/11)
16 | 
17 | ### Developer feature
18 | 
19 | - 🔥 Next.js for Static Site Generator
20 | - 🎨 Integrate with Tailwind CSS
21 | - 💅 PostCSS for processing Tailwind CSS
22 | - 🛠 Code Formatter with Prettier
23 | - 🦊 SEO metadata, JSON-LD and Open Graph tags with Next SEO [#10](https://github.com/adeka-factory/ibarin/issues/10)
24 | - ⚙️ Bundler Analyzer [#8](https://github.com/adeka-factory/ibarin/issues/8)
25 | 
26 | 
27 | ## 🚀 Quick start
28 | 
29 | > A nodejs >= 6.0.0 setup with [yarn](https://yarnpkg.com/) is recommended.
30 | 
31 | 1.  **Start developing.**
32 | 
33 |     Move to project's directory.
34 | 
35 |     ```bash
36 |     cd project-name/
37 |     ```
38 | 
39 |     Start your site.
40 | 
41 |     ```bash
42 |     # using npm
43 |     npm run dev
44 | 
45 |     # using yarn
46 |     yarn dev
47 |     ```
48 | 
49 |     Open source code using your favorite IDE/Text editor and navigate to root` directory, this is where your application live.
50 | 
51 | 2.  **Build your application for production.**
52 | 
53 |     Once you're finished, you can make production build of your app using:
54 | 
55 |     ```bash
56 |     # using npm
57 |     npm run build
58 | 
59 |     # using yarn
60 |     yarn build
61 |     ```
62 |   
63 | ## 💫 Deployment
64 | 
65 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fadeka-factory%2Fibarin)
66 | 
67 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/adeka-factory/ibarin)
68 | 
69 | Or using custom server, follow this [link](https://nextjs.org/docs/advanced-features/custom-server)
70 | 
71 | ## ✨ Contributors
72 | 
73 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
74 | 
75 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
76 | <!-- prettier-ignore-start -->
77 | <!-- markdownlint-disable -->
78 | <table>
79 |   <tr>
80 |     <td align="center"><a href="https://ffadilaputra.space/"><img src="https://avatars.githubusercontent.com/u/6916297?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ivan Fadila Putra</b></sub></a><br /><a href="https://github.com/adeka-factory/ibarin/commits?author=ffadilaputra" title="Documentation">📖</a> <a href="#projectManagement-ffadilaputra" title="Project Management">📆</a> <a href="https://github.com/adeka-factory/ibarin/pulls?q=is%3Apr+reviewed-by%3Affadilaputra" title="Reviewed Pull Requests">👀</a></td>
81 |     <td align="center"><a href="https://naufaldi.xyz"><img src="https://avatars.githubusercontent.com/u/13159420?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Naufaldi</b></sub></a><br /><a href="https://github.com/adeka-factory/ibarin/commits?author=naufaldi" title="Code">💻</a> <a href="https://github.com/adeka-factory/ibarin/pulls?q=is%3Apr+reviewed-by%3Anaufaldi" title="Reviewed Pull Requests">👀</a></td>
82 |     <td align="center"><a href="https://www.linkedin.com/in/aura-kanza-caesaria-734361163/"><img src="https://avatars.githubusercontent.com/u/18681884?v=4?s=100" width="100px;" alt=""/><br /><sub><b>aura kanza</b></sub></a><br /><a href="#design-aurakanzaa" title="Design">🎨</a></td>
83 |   </tr>
84 | </table>
85 | 
86 | <!-- markdownlint-restore -->
87 | <!-- prettier-ignore-end -->
88 | 
89 | <!-- ALL-CONTRIBUTORS-LIST:END -->
90 | 
91 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
92 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import Head from 'next/head';
  2 | import Image from 'next/image';
  3 | import Layout from '@/components/Layout/Layout';
  4 | // import Resepsi from '../public/assets/icons/resepsi.svg';
  5 | import Ring from '../public/assets/icons/ring.svg';
  6 | 
  7 | import Location from '../public/assets/icons/location.svg';
  8 | 
  9 | export default function Home() {
 10 |   return (
 11 |     <div>
 12 |       <Head>
 13 |         <title>Wedding Invitation</title>
 14 |         <link rel="icon" href="/favicon.ico" />
 15 |       </Head>
 16 |       <Layout>
 17 |         {/* Header Mobile */}
 18 |         <section
 19 |           id="beranda"
 20 |           className="flex lg:hidden bg-cover bg-center  w-full h-screen  items-start py-14"
 21 |           style={{ backgroundImage: 'url(/assets/prewedding-home.png)' }}
 22 |         >
 23 |           <div className="flex flex-col  w-full relative">
 24 |             <div className="absolute h-full w-full bg-dark-450 bg-blur-2px"></div>
 25 |             <div className="flex flex-col w-full text-white text-center h-auto  px-8 py-3.5 z-10">
 26 |               <p className="font-habibi ">Pernikahan dari</p>
 27 |               <h4 className="font-great-vibes text-5xl mb-4 mt-6">
 28 |                 Bambang & Partini
 29 |               </h4>
 30 |               <p className="font-habibi ">01 Januari 2021</p>
 31 |             </div>
 32 |           </div>
 33 |         </section>
 34 |         {/* End Header Mobile */}
 35 |         <section
 36 |           id="beranda-dekstop"
 37 |           className="hidden lg:grid bg-dark-500 py-14 lg:py-0 mb:pb-6 grid-flow-col grid-cols-2 gap-4 row-span-4 h-screen"
 38 |         >
 39 |           <div className="flex flex-col text-white px-8 pb-20 pt-28 justify-end">
 40 |             <div className="flex flex-col text-center my-auto">
 41 |               <p>
 42 |                 “And of His signs is that He created for you from your selves
 43 |                 mates that you may find tranquility in them; and He placed
 44 |                 between you affection and mercy. Indeed in that are signs for a
 45 |                 people who give thought.”
 46 |               </p>
 47 |               <p>( QS. Ar- Rum 21 )</p>
 48 |             </div>
 49 |             <div className="flex flex-col ">
 50 |               <p className="font-habibi">Pernikahan dari</p>
 51 |               <h4 className="font-great-vibes text-5xl mb-4 mt-6">
 52 |                 Bambang & Partini
 53 |               </h4>
 54 |               <p className="font-habibi ml-auto">01 Januari 2021</p>
 55 |             </div>
 56 |           </div>
 57 |           <div className="flex w-full relative">
 58 |             <Image
 59 |               src="/assets/prewedding-home.png"
 60 |               alt="Picture of the author"
 61 |               layout="fill"
 62 |               objectFit="cover"
 63 |               quality={100}
 64 |               loading="lazy"
 65 |             />
 66 |           </div>
 67 |         </section>
 68 |         <section
 69 |           id="resepsi"
 70 |           className="bg-dark-500 py-14  mb:pb-6 grid grid-flow-row gap-4 row-span-4 h-screen"
 71 |         >
 72 |           <div className="flex flex-col  w-full relative lg:h-full">
 73 |             <div className="absolute h-full w-full bg-dark-450 bg-blur-2px lg:hidden"></div>
 74 |             <div className="flex flex-col w-full text-white text-center h-auto  px-8 py-3.5 z-10 lg:my-auto">
 75 |               <p className="font-habibi lg:hidden">Pernikahan dari</p>
 76 |               <h4 className="font-great-vibes text-5xl lg:text-7xl mb-4 mt-6 ">
 77 |                 Bambang & Partini
 78 |               </h4>
 79 |               <p className="lg:hidden font-habibi ">01 Januari 2021</p>
 80 |             </div>
 81 |           </div>
 82 |           <div className="flex w-full px-8 text-white font-habibi text-sm md:text-base lg:text-xl">
 83 |             <div className="flex flex-col w-1/2 text-center px-2 break-words">
 84 |               <p>Putra dari</p>
 85 |               <p>Bapak Badril Munir</p>
 86 |               <p>Ibu Sartinah</p>
 87 |             </div>
 88 |             <div className="flex flex-col w-1/2 text-center px-2 break-words ">
 89 |               <p>Putra dari</p>
 90 |               <p>Bapak Badril Munir</p>
 91 |               <p>Ibu Sartinah</p>
 92 |             </div>
 93 |           </div>
 94 |           <div className="flex flex-col mx-auto h-40 lg:h-full items-center justify-center w-full px-8">
 95 |             <div className="flex flex-col md:flex-row w-full">
 96 |               <div className="flex w-full my-2 h-16 lg:h-20 md:justify-center">
 97 |                 <Ring className="h-12 md:h-16 w-12 md:w-16  mr-6 my-auto" />
 98 |                 <div className="flex flex-col text-white font-habibi justify-between h-full">
 99 |                   <p className="text-base md:text-lg lg:text-3xl">
100 |                     Akad pernikahan{' '}
101 |                   </p>
102 |                   <p className="text-xs md:text-base lg:text-lg">
103 |                     Pukul 08.00 s.d 10.00 WIB
104 |                   </p>
105 |                 </div>
106 |               </div>
107 | 
108 |               <div className="flex w-full my-2 h-16 lg:h-20 md:justify-center">
109 |                 <img
110 |                   src="/assets/icons/resepsi.svg"
111 |                   className="h-12 md:h-16 w-12 md:w-16  mr-6 my-auto"
112 |                 />
113 |                 <div className="flex flex-col text-white font-habibi justify-between h-full">
114 |                   <p className="text-base md:text-lg lg:text-3xl">Resepsi </p>
115 |                   <p className="text-xs md:text-base lg:text-lg">
116 |                     Pukul 10.00 s.d Selesai
117 |                   </p>
118 |                 </div>
119 |               </div>
120 |             </div>
121 |             <p className="hidden md:block mt-12 lg:mt-auto mx-auto text-lg text-white font-habibi">
122 |               Bertempat di mempelai wanita, Perum permata hijau Blok F no 45
123 |             </p>
124 |           </div>
125 |           <div className="flex mx-auto h-32 lg:h-full items-start lg:items-end justify-start w-full px-8">
126 |             <button className="mt-6 px-6 md:px-12 py-2 md:py-3 flex justify-center items-center border-white border rounded-l-full rounded-r-full mx-auto text-white font-habibi text-sm md:text-base">
127 |               <Location className="h-8 md:h-10 w-8 md:w-10 mr-4" />
128 |               Cek Lokasi
129 |             </button>
130 |           </div>
131 |         </section>
132 |         <section
133 |           id="gallery"
134 |           className="bg-dark-500 pt-8 md:pt-0 lg:pt-32 pb-24 lg:pb-8 grid grid-flow-row gap-4 grid-rows-7 lg:grid-rows-5 grid-cols-2 lg:grid-cols-3 h-screen px-4 lg:px-8"
135 |         >
136 |           <h1 className="col-span-2  text-5xl font-great-vibes my-auto mx-auto text-white lg:hidden">
137 |             Gallery
138 |           </h1>
139 |           <div className="flex row-span-3 ">
140 |             <Image
141 |               src="/assets/gallery-mobile/photo-1.png"
142 |               alt="Picture of the author"
143 |               width={500}
144 |               height={500}
145 |               objectFit="cover"
146 |               quality={100}
147 |               loading="lazy"
148 |             />
149 |           </div>
150 |           <div className="flex  row-start-3 col-start-2 row-span-3 lg:row-span-5 bg-white">
151 |             <Image
152 |               src="/assets/gallery-mobile/photo-2.png"
153 |               alt="Picture of the author"
154 |               width={500}
155 |               height={500}
156 |               objectFit="cover"
157 |               quality={100}
158 |               loading="lazy"
159 |             />
160 |           </div>
161 |           <div className="flex row-span-1 col-start-2 lg:col-start-3 row-start-2  lg:row-span-2">
162 |             <Image
163 |               src="/assets/gallery-mobile/photo-3.png"
164 |               alt="Picture of the author"
165 |               width={500}
166 |               height={500}
167 |               objectFit="cover"
168 |               quality={100}
169 |               loading="lazy"
170 |             />
171 |           </div>
172 |           <div className="flex row-span-1 lg:row-span-3">
173 |             <Image
174 |               src="/assets/gallery-mobile/photo-4.png"
175 |               alt="Picture of the author"
176 |               width={500}
177 |               height={500}
178 |               objectFit="cover"
179 |               quality={100}
180 |               loading="lazy"
181 |             />
182 |           </div>
183 |           <div className="flex row-span-2 lg:row-span-2 col-span-2 lg:col-span-1 w-full relative">
184 |             <Image
185 |               src="/assets/gallery-mobile/photo-5.png"
186 |               alt="Picture of the author"
187 |               layout="fill"
188 |               objectFit="cover"
189 |               quality={100}
190 |               loading="lazy"
191 |             />
192 |           </div>
193 |         </section>
194 |       </Layout>
195 |     </div>
196 |   );
197 | }
198 | 


--------------------------------------------------------------------------------