init

2024-08-07 15:30:08 +07:00 · 2024-08-07 15:30:08 +07:00 · 27f62602cb
commit 27f62602cb
46 changed files with 6304 additions and 0 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/omnichannel.iml" filepath="$PROJECT_DIR$/.idea/omnichannel.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/omnichannel.iml
+++ b/.idea/omnichannel.iml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
--- a/README.md
+++ b/README.md
@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/next.config.mjs
+++ b/next.config.mjs
@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,22 @@
+{
+  "name": "omnichannel",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.4.0",
+    "antd": "^5.20.0",
+    "next": "14.2.5",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5"
+  }
+}
--- a/public/berita/berita.jpeg
+++ b/public/berita/berita.jpeg
--- a/public/font/Poppins-300.ttf
+++ b/public/font/Poppins-300.ttf
--- a/public/font/Poppins-400.ttf
+++ b/public/font/Poppins-400.ttf
--- a/public/font/Poppins-500.ttf
+++ b/public/font/Poppins-500.ttf
--- a/public/font/Poppins-600.ttf
+++ b/public/font/Poppins-600.ttf
--- a/public/font/Poppins-700.ttf
+++ b/public/font/Poppins-700.ttf
--- a/public/font/poppins.css
+++ b/public/font/poppins.css
@ -0,0 +1,169 @@
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('../font/Poppins-300.ttf');
+    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
+        U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('../font/Poppins-300.ttf');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('../font/Poppins-300.ttf');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+        U+2215, U+FEFF, U+FFFD;
+}
+
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../font/Poppins-400.ttf');
+    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
+        U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../font/Poppins-400.ttf');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../font/Poppins-400.ttf');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+        U+2215, U+FEFF, U+FFFD;
+}
+
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('../font/Poppins-500.ttf');
+    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
+        U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('../font/Poppins-500.ttf');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('../font/Poppins-500.ttf');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+        U+2215, U+FEFF, U+FFFD;
+}
+
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('../font/Poppins-600.ttf');
+    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
+        U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('../font/Poppins-600.ttf');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('../font/Poppins-600.ttf');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+        U+2215, U+FEFF, U+FFFD;
+}
+
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('../font/Poppins-700.ttf');
+    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
+        U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('../font/Poppins-700.ttf');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('../font/Poppins-700.ttf');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+        U+2215, U+FEFF, U+FFFD;
+}
--- a/public/image/bell.svg
+++ b/public/image/bell.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z"></path></svg>
--- a/public/image/doodles.webp
+++ b/public/image/doodles.webp
--- a/public/image/gaming-pattern.webp
+++ b/public/image/gaming-pattern.webp
--- a/public/image/grouplogo.png
+++ b/public/image/grouplogo.png
--- a/public/image/layer1.png
+++ b/public/image/layer1.png
--- a/public/image/layer2.png
+++ b/public/image/layer2.png
--- a/public/image/layered-waves-haikei
+++ b/public/image/layered-waves-haikei
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 59L25 62.7C50 66.3 100 73.7 150 79.7C200 85.7 250 90.3 300 87.2C350 84 400 73 450 68.8C500 64.7 550 67.3 600 80.3C650 93.3 700 116.7 750 127.7C800 138.7 850 137.3 875 136.7L900 136L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#d2ffe8"></path><path d="M0 92L25 88C50 84 100 76 150 67.5C200 59 250 50 300 43C350 36 400 31 450 30.2C500 29.3 550 32.7 600 38C650 43.3 700 50.7 750 58.2C800 65.7 850 73.3 875 77.2L900 81L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/layered-waves-haikei
+++ b/public/image/layered-waves-haikei
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 139L25 136.7C50 134.3 100 129.7 150 118.2C200 106.7 250 88.3 300 89.3C350 90.3 400 110.7 450 122.2C500 133.7 550 136.3 600 132C650 127.7 700 116.3 750 105C800 93.7 850 82.3 875 76.7L900 71L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#d2ffe8"></path><path d="M0 84L25 84.3C50 84.7 100 85.3 150 78.2C200 71 250 56 300 50.8C350 45.7 400 50.3 450 57C500 63.7 550 72.3 600 75.7C650 79 700 77 750 68.5C800 60 850 45 875 37.5L900 30L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/layered-waves-haikei
+++ b/public/image/layered-waves-haikei
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 90L25 92.8C50 95.7 100 101.3 150 109.8C200 118.3 250 129.7 300 123.5C350 117.3 400 93.7 450 79.2C500 64.7 550 59.3 600 63.3C650 67.3 700 80.7 750 86.3C800 92 850 90 875 89L900 88L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#d2ffe8"></path><path d="M0 87L25 86.8C50 86.7 100 86.3 150 78.2C200 70 250 54 300 46C350 38 400 38 450 42.5C500 47 550 56 600 63.3C650 70.7 700 76.3 750 75.8C800 75.3 850 68.7 875 65.3L900 62L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/layered-waves-haikei
+++ b/public/image/layered-waves-haikei
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 195L25 194.7C50 194.3 100 193.7 150 172.8C200 152 250 111 300 98.8C350 86.7 400 103.3 450 117C500 130.7 550 141.3 600 147.5C650 153.7 700 155.3 750 148.7C800 142 850 127 875 119.5L900 112L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#d2ffe8"></path><path d="M0 67L25 76.7C50 86.3 100 105.7 150 106.2C200 106.7 250 88.3 300 77C350 65.7 400 61.3 450 64.3C500 67.3 550 77.7 600 75.2C650 72.7 700 57.3 750 52.7C800 48 850 54 875 57L900 60L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/layered-waves-haikei
+++ b/public/image/layered-waves-haikei
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 194L25 190C50 186 100 178 150 165C200 152 250 134 300 137.5C350 141 400 166 450 179C500 192 550 193 600 186.8C650 180.7 700 167.3 750 146.8C800 126.3 850 98.7 875 84.8L900 71L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#d2ffe8"></path><path d="M0 104L25 99.8C50 95.7 100 87.3 150 80.5C200 73.7 250 68.3 300 61.8C350 55.3 400 47.7 450 53.2C500 58.7 550 77.3 600 87.5C650 97.7 700 99.3 750 90C800 80.7 850 60.3 875 50.2L900 40L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/layered-waves-haikei
+++ b/public/image/layered-waves-haikei
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 122L18.8 117.8C37.7 113.7 75.3 105.3 112.8 108.2C150.3 111 187.7 125 225.2 135.7C262.7 146.3 300.3 153.7 337.8 158.3C375.3 163 412.7 165 450.2 162.2C487.7 159.3 525.3 151.7 562.8 135.2C600.3 118.7 637.7 93.3 675.2 100.3C712.7 107.3 750.3 146.7 787.8 167.8C825.3 189 862.7 192 881.3 193.5L900 195L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#d2ffe8"></path><path d="M0 70L18.8 67.2C37.7 64.3 75.3 58.7 112.8 56.3C150.3 54 187.7 55 225.2 57.5C262.7 60 300.3 64 337.8 69.5C375.3 75 412.7 82 450.2 79.7C487.7 77.3 525.3 65.7 562.8 57C600.3 48.3 637.7 42.7 675.2 51.2C712.7 59.7 750.3 82.3 787.8 85.7C825.3 89 862.7 73 881.3 65L900 57L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/layered-waves-haikei
+++ b/public/image/layered-waves-haikei
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 81L18.8 86.3C37.7 91.7 75.3 102.3 112.8 114.7C150.3 127 187.7 141 225.2 139.3C262.7 137.7 300.3 120.3 337.8 118.2C375.3 116 412.7 129 450.2 141.8C487.7 154.7 525.3 167.3 562.8 175.5C600.3 183.7 637.7 187.3 675.2 178.5C712.7 169.7 750.3 148.3 787.8 148.5C825.3 148.7 862.7 170.3 881.3 181.2L900 192L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#d2ffe8"></path><path d="M0 127L18.8 123.7C37.7 120.3 75.3 113.7 112.8 107.3C150.3 101 187.7 95 225.2 89.2C262.7 83.3 300.3 77.7 337.8 80.2C375.3 82.7 412.7 93.3 450.2 98C487.7 102.7 525.3 101.3 562.8 94.2C600.3 87 637.7 74 675.2 66.7C712.7 59.3 750.3 57.7 787.8 56C825.3 54.3 862.7 52.7 881.3 51.8L900 51L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/layered-waves-haikei
+++ b/public/image/layered-waves-haikei
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 124L18.8 119.7C37.7 115.3 75.3 106.7 112.8 110.2C150.3 113.7 187.7 129.3 225.2 138.7C262.7 148 300.3 151 337.8 147.2C375.3 143.3 412.7 132.7 450.2 126.7C487.7 120.7 525.3 119.3 562.8 129.5C600.3 139.7 637.7 161.3 675.2 171.3C712.7 181.3 750.3 179.7 787.8 160.5C825.3 141.3 862.7 104.7 881.3 86.3L900 68L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#d2ffe8"></path><path d="M0 113L18.8 104.8C37.7 96.7 75.3 80.3 112.8 78.5C150.3 76.7 187.7 89.3 225.2 91.5C262.7 93.7 300.3 85.3 337.8 78C375.3 70.7 412.7 64.3 450.2 67.8C487.7 71.3 525.3 84.7 562.8 90.7C600.3 96.7 637.7 95.3 675.2 87C712.7 78.7 750.3 63.3 787.8 59.2C825.3 55 862.7 62 881.3 65.5L900 69L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/layered-waves-haikei
+++ b/public/image/layered-waves-haikei
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 138L18.8 142.5C37.7 147 75.3 156 112.8 151.8C150.3 147.7 187.7 130.3 225.2 134.2C262.7 138 300.3 163 337.8 176.7C375.3 190.3 412.7 192.7 450.2 184C487.7 175.3 525.3 155.7 562.8 141.2C600.3 126.7 637.7 117.3 675.2 116.3C712.7 115.3 750.3 122.7 787.8 135.8C825.3 149 862.7 168 881.3 177.5L900 187L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#d2ffe8"></path><path d="M0 35L18.8 49.7C37.7 64.3 75.3 93.7 112.8 96.5C150.3 99.3 187.7 75.7 225.2 62.2C262.7 48.7 300.3 45.3 337.8 56.7C375.3 68 412.7 94 450.2 97C487.7 100 525.3 80 562.8 74.3C600.3 68.7 637.7 77.3 675.2 80.2C712.7 83 750.3 80 787.8 72.7C825.3 65.3 862.7 53.7 881.3 47.8L900 42L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/layered-waves-haikei.svg
+++ b/public/image/layered-waves-haikei.svg
@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 129L25 131.2C50 133.3 100 137.7 150 122.8C200 108 250 74 300 60.3C350 46.7 400 53.3 450 54.2C500 55 550 50 600 53C650 56 700 67 750 78C800 89 850 100 875 105.5L900 111L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#d2ffe8"></path><path d="M0 74L25 71.5C50 69 100 64 150 56.5C200 49 250 39 300 44.2C350 49.3 400 69.7 450 70.3C500 71 550 52 600 51C650 50 700 67 750 75.2C800 83.3 850 82.7 875 82.3L900 82L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#171717"></path></svg>
--- a/public/image/logo.png
+++ b/public/image/logo.png
--- a/public/image/logonew.png
+++ b/public/image/logonew.png
--- a/public/image/memphis-colorful.webp
+++ b/public/image/memphis-colorful.webp
--- a/public/image/search.svg
+++ b/public/image/search.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z"></path></svg>
--- a/public/image/sports.webp
+++ b/public/image/sports.webp
--- a/public/logo/garuda.png
+++ b/public/logo/garuda.png
--- a/public/logo/kai.png
+++ b/public/logo/kai.png
--- a/public/logo/traveloka.png
+++ b/public/logo/traveloka.png
--- a/public/logo/woos.png
+++ b/public/logo/woos.png
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -0,0 +1,391 @@
+:root {
+    --primary: #159B9F;
+    --success: #50cd89;
+    --info: #1a98ff;
+    --warning: #FEB82F;
+    --danger: #f1416c;
+    --secondary: #aaa;
+    --dark: #171717;
+    --dark-grey: #666;
+    --primary-light:#d4e8ed;
+    --secondary-light: #f9f9f9;
+    --success-light: #e8fff3;
+    --info-light: #dbe8ff;
+    --warning-light: #fff8dd;
+    --danger-light: #fff5f8;
+    --dark-light: #e4e6e7;
+    --white: #fff;
+    --text-muted: #9A9A9A;
+    --success-inverse: #ffffff;
+    --info-inverse: #ffffff;
+    --warning-inverse: #ffffff;
+    --danger-inverse: #ffffff;
+    --dark-inverse: #ffffff;
+    --primary-inverse: #ffffff;
+    --white-inverse: #ffffff;
+    --white-light: #ffffff;
+    --grey: #a6a6a6;
+
+    --color-step1:#FEB82F;
+    --color-step2:#C6C851;
+    --color-step3:#8ED873;
+    --color-step4:#50cd89;
+    --color-step5:#429A7B;
+    --color-step6:#326F71;
+    --color-step7:#1e5c6b;
+
+    --primary-gradient:linear-gradient(to right, #49B1B5, rgba(0, 155, 76, 0.38));
+}
+
+
+::-webkit-scrollbar {
+    width: 5px;
+    height: 14px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #ababab;
+    border: none;
+}
+
+::-webkit-scrollbar-track {
+    background: #dedede;
+}
+
+html {
+    font-family: var(--font-poppins) !important;
+    background: url("/image/sports.webp");
+}
+
+main {
+    padding-bottom: 200px;
+}
+
+
+button,input {
+    font-family: var(--font-poppins) !important;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: var(--font-poppins) !important;
+}
+
+.layer-bottom{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+}
+
+.button{
+    background: var(--primary-gradient);
+    border: none;
+    border-radius: 15px;
+    font-weight: 600;
+    font-size: 12px;
+    color: #fff;
+    padding: 1px 10px;
+    height: 30px;
+}
+.btn-full{
+    width: 100%;
+    height: 40px;
+}
+
+.title-wrap{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    .title{
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--primary);
+    }
+    .sub-title{
+        font-size: 11px;
+        font-weight: 300;
+        color: var(--text-muted);
+    }
+
+
+
+}
+
+.header{
+    background: linear-gradient(to bottom, #49B1B5, #149A9F);
+    height: 200px;
+    width: 100%;
+    color: #fff;
+    position: relative;
+    display: flex;
+    justify-content: center; /* Horizontally center */
+    align-items: center;     /* Vertically center */
+
+    /*border-radius: 0 0 50px 50px;*/
+
+    .layer{
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 0px;
+        top: 200px;
+        border: none;
+        z-index: 1;
+    }
+
+
+    .group-logo{
+        position: absolute;
+        top: 50px;
+        width: 100%;
+        left: 0;
+        z-index: 111;
+    }
+
+    .logo{
+        margin-top: 80px;
+
+        img{
+            width: 300px;
+        }
+
+        .title{
+            font-weight:400;
+            text-transform: capitalize;
+        }
+    }
+
+    .top-btn{
+        position: absolute;
+        top: 10px;
+        font-size: 14px;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+
+        &.notification{
+            right: 45px;
+        }
+        &.close{
+            right: 10px;
+        }
+    }
+
+    .location{
+        margin-top: 10px;
+        position: absolute;
+        top: 5px;
+        left: 20px;
+
+        .title{
+            font-size: 12px;
+            font-weight: 300;
+        }
+        .value{
+            font-size: 12px;
+            font-weight: 400;
+        }
+    }
+
+    .search {
+        margin-top: 7px;
+        padding: 0 40px;
+        z-index: 200;
+
+        .form{
+            border-radius: 15px;
+        }
+
+        .ant-input-affix-wrapper >input.ant-input,
+        .ant-input-affix-wrapper >textarea.ant-input {
+            font-weight: 600 !important;
+            color: #353535 !important;
+        }
+
+        .anticon svg {
+            fill: var(--primary);
+            margin-right: 10px;
+        }
+    }
+
+}
+
+.omnichannel{
+    margin-top: 110px;
+    padding: 0 25px;
+
+
+
+    .list{
+        .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
+            /*color: #fff;*/
+            /*background: var(--primary-gradient);*/
+            color: var(--primary);
+            background: #f5f5f5;
+            padding: 10px 15px;
+             margin-bottom: -12px;
+            border-radius: 20px 20px 0 0;
+        }
+
+        .ant-tabs .ant-tabs-tab {
+           font-size: 13px;
+            font-weight: 500;
+            color: var(--text-muted);
+        }
+
+        .ant-tabs-top >.ant-tabs-nav,
+        .ant-tabs-bottom >.ant-tabs-nav,
+        .ant-tabs-top >div>.ant-tabs-nav,
+        .ant-tabs-bottom >div>.ant-tabs-nav {
+            margin: 0;
+        }
+
+        .ant-tabs-top >.ant-tabs-nav::before,
+        .ant-tabs-bottom >.ant-tabs-nav::before,
+        .ant-tabs-top >div>.ant-tabs-nav::before,
+        .ant-tabs-bottom >div>.ant-tabs-nav::before {
+            border-bottom: none;
+        }
+
+        .ant-tabs-content-holder{
+            /*background: var(--primary-gradient);*/
+            background: #f5f5f5;
+            padding: 20px;
+            border-radius: 0 20px 20px 20px;
+        }
+
+        .ant-tabs .ant-tabs-ink-bar {
+            position: absolute;
+            background: none;
+            /*background: var(--primary);*/
+            pointer-events: none;
+        }
+    }
+}
+
+.card-omni{
+    /*background: #fff;*/
+    background: linear-gradient(to bottom, #fff, #f3feff);
+    border-radius: 20px;
+    text-align: center;
+    border: 1px solid #eeeeee;
+    padding: 10px 10px 20px;
+    /*box-shadow: 9px 10px 18px #d7d7d7;*/
+
+    .icon{
+        img{
+            width: 100%;
+            height: 35px;
+            object-fit: contain;
+        }
+    }
+    .title{
+        font-size: 9px;
+        font-weight: 500;
+        color: var(--text-muted);
+    }
+
+}
+
+.news{
+    margin-top: 30px;
+    padding: 0 25px;
+
+    .slider {
+
+        .berita{
+            border-radius: 20px;
+            background: #fff;
+            position: relative;
+
+            .img{
+                border-radius: 20px;
+                width: 100%;
+                height: 300px;
+                object-fit: cover;
+            }
+            .layer-berita{
+                background: linear-gradient(to top, #49B1B5, rgba(255, 255, 255, 0.06));
+                height: 100%;
+                width: 100%;
+                position: absolute;
+                border-radius: 20px;
+            }
+            .content-berita{
+                position: absolute;
+                bottom: 10px;
+                left: 10px;
+                padding: 40px 20px;
+            }
+
+            .category{
+                margin-bottom: 5px;
+                font-weight: 600;
+                font-size: 12px;
+                color: var(--dark);
+            }
+
+            .title{
+                color: #fff;
+                font-size: 16px;
+                font-weight: 400;
+            }
+            .subtitle{
+                margin-top: 5px;
+                color: rgba(255, 255, 255, 0.73);
+                font-size: 11px;
+
+                .sumber{
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+
+
+    .list-news{
+        margin-top: 10px;
+
+        .content-list-news{
+            margin-bottom: 10px;
+            display: flex;
+            gap: 15px;
+            background: #f5f5f5;
+            padding: 10px 10px 5px;
+            border-radius: 15px;
+
+            .image{
+                border-radius: 10px;
+                width: 60px;
+                height: 60px;
+                object-fit: cover;
+            }
+
+            .category {
+                font-weight: 400;
+                font-size: 11px;
+                color: var(--primary);
+            }
+            .title{
+                font-size: 13px;
+                font-weight: 500;
+                margin-bottom: 5px;
+            }
+            .subtitle{
+                font-size: 10px;
+
+                .sumber{
+                    font-weight: 600;
+                }
+            }
+
+        }
+    }
+
+
+}
--- a/src/app/layout.js
+++ b/src/app/layout.js
@ -0,0 +1,60 @@
+import "./globals.css";
+import localFont from 'next/font/local'
+
+
+const poppins = localFont({
+  variable: '--font-poppins',
+  src: [
+    {
+      path: '../../public/font/Poppins-300.ttf',
+      weight: '300',
+      style: 'normal',
+    },
+    {
+      path: '../../public/font/Poppins-400.ttf',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../../public/font/Poppins-500.ttf',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: '../../public/font/Poppins-600.ttf',
+      weight: '600',
+      style: 'normal',
+    },
+    {
+      path: '../../public/font/Poppins-700.ttf',
+      weight: '700',
+      style: 'normal',
+    },
+  ],
+})
+
+
+export const metadata = {
+  title: "OMNICHANNEL Kalteng",
+  description: "Web Omni Channel",
+  icons: {
+    icon: '/image/logo.png',
+    shortcut: '/image/logo.png',
+    apple: '/image/logo.png',
+  },
+};
+
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${poppins.className} ${poppins.variable}`}>
+      <body>{children}</body>
+    </html>
+  );
+}
--- a/src/app/page.js
+++ b/src/app/page.js
@ -0,0 +1,268 @@
+"use client"
+import {Carousel, Col, Input, Row, Tabs} from "antd";
+import {BellOutlined, CloseOutlined, DotChartOutlined, SearchOutlined} from "@ant-design/icons";
+
+export default function Home() {
+    const onChange = (key) => {
+        console.log(key);
+    };
+
+    const CardOmni = () => {
+      return(
+          <Row gutter={[10,10]}>
+              <Col span={6}>
+                  <div className={"card-omni"}>
+                      <div className={"icon"}>
+                          <img alt={"card omni"} src={"/logo/garuda.png"}/>
+                      </div>
+                      <div className={"title"}>Garuda Indonesia</div>
+                  </div>
+              </Col>
+              <Col span={6}>
+                  <div className={"card-omni"}>
+                      <div className={"icon"}>
+                          <img alt={"card omni"} src={"/logo/traveloka.png"}/>
+                      </div>
+                      <div className={"title"}>Garuda Indonesia</div>
+                  </div>
+              </Col>
+              <Col span={6}>
+                  <div className={"card-omni"}>
+                      <div className={"icon"}>
+                          <img alt={"card omni"} src={"/logo/woos.png"}/>
+                      </div>
+                      <div className={"title"}>Garuda Indonesia</div>
+                  </div>
+              </Col>
+              <Col span={6}>
+                  <div className={"card-omni"}>
+                      <div className={"icon"}>
+                          <img alt={"card omni"} src={"/logo/kai.png"}/>
+                      </div>
+                      <div className={"title"}>Garuda Indonesia</div>
+                  </div>
+              </Col>
+              <Col span={6}>
+                  <div className={"card-omni"}>
+                      <div className={"icon"}>
+                          <img alt={"card omni"} src={"/logo/garuda.png"}/>
+                      </div>
+                      <div className={"title"}>Garuda Indonesia</div>
+                  </div>
+              </Col>
+              <Col span={6}>
+                  <div className={"card-omni"}>
+                      <div className={"icon"}>
+                          <img alt={"card omni"} src={"/logo/garuda.png"}/>
+                      </div>
+                      <div className={"title"}>Garuda Indonesia</div>
+                  </div>
+              </Col>
+              <Col span={6}>
+                  <div className={"card-omni"}>
+                      <div className={"icon"}>
+                          <img alt={"card omni"} src={"/logo/garuda.png"}/>
+                      </div>
+                      <div className={"title"}>Garuda Indonesia</div>
+                  </div>
+              </Col>
+              <Col span={6}>
+                  <div className={"card-omni"}>
+                      <div className={"icon"}>
+                          <img alt={"card omni"} src={"/logo/garuda.png"}/>
+                      </div>
+                      <div className={"title"}>Garuda Indonesia</div>
+                  </div>
+              </Col>
+
+          </Row>
+
+      )
+    }
+
+    const items = [
+        {
+            key: '1',
+            label: 'Fashion & Kecantikan ',
+            children: <CardOmni/>,
+        },
+        {
+            key: '2',
+            label: 'Rekreasi',
+            children: 'Content of Tab Pane 3',
+        },
+        {
+            key: '3',
+            label: 'Donasi & Zakat',
+            children: 'Content of Tab Pane 3',
+        },
+        {
+            key: '4',
+            label: 'Hobi & Event',
+            children: 'Content of Tab Pane 1',
+        },
+        {
+            key: '5',
+            label: 'Travel',
+            children: 'Content of Tab Pane 2',
+        },
+        {
+            key: '6',
+            label: 'Elektronik & Barang Digital ',
+            children: 'Content of Tab Pane 3',
+        },
+
+    ];
+
+    const contentStyle = {
+        margin: 0,
+        height: '160px',
+        color: '#fff',
+        lineHeight: '160px',
+        textAlign: 'center',
+        background: '#364d79',
+    };
+  return (
+      <>
+    <main>
+        <section className={"header"}>
+            <div className={"location"}>
+                <div className={"value"}>
+                    {/*<span className={"title"}>Lokasi</span> */}
+                    Kota Bandung, Jawa Barat</div>
+            </div>
+            <div className={"top-btn notification"}>
+                <BellOutlined style={{marginTop:'7px'}} />
+            </div>
+            <div className={"top-btn close"}>
+                <CloseOutlined style={{marginTop:'7px'}} />
+            </div>
+
+            <div style={{zIndex:'300'}}>
+                <div className={"logo"}>
+                    <div>
+                        <img alt={"logo"} src={"/image/logonew.png"}/>
+                    </div>
+                </div>
+
+                <div className={"search"}>
+                    <Input className={"form"} placeholder={"Cari Tiket Konser Sekarang !"} prefix={<SearchOutlined />} />
+                </div>
+            </div>
+
+            <img className={"group-logo"} src={"/image/grouplogo.png"}/>
+
+            <img className={"layer"} src={"/image/layer1.png"}/>
+
+        </section>
+
+
+
+        <section className={"omnichannel"}>
+            <div className={"title-wrap"}>
+                <div>
+                    <div className={"title"}>Waktunya Belanja</div>
+                    <div className={"sub-title"}>Semua yang Kamu perlu, ada di sini</div>
+                </div>
+                <button className={"button"} type={"button"}>Lihat Semua</button>
+            </div>
+
+            <div className={"list"}>
+                <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+            </div>
+
+        </section>
+
+        <section className={"news"}>
+            <div className={"title-wrap"}>
+                <div>
+                    <div className={"title"}>Waktunya Berita</div>
+                    <div className={"sub-title"}>Berita Terupdate dan terkini.</div>
+                </div>
+            </div>
+
+            <div className={"slider"}>
+                <Carousel arrows infinite={true}>
+                    <div className={"berita"}>
+                        <div className={"layer-berita"}></div>
+                        <img className={"img"} alt={"berita"} src={"/berita/berita.jpeg"}/>
+
+                        <div className={"content-berita"}>
+                            <div className={"category"}>Olahraga</div>
+                            <div className={"title"}>Chelsea Keropos, Lini Belakang Jadi PR Maresca</div>
+                            <div className={"subtitle"}> <span className={"sumber"}>Detik.com</span> | 30 Menit yang lalu </div>
+                        </div>
+                    </div>
+                    <div className={"berita"}>
+                        <div className={"layer-berita"}></div>
+                        <img className={"img"} alt={"berita"} src={"/berita/berita.jpeg"}/>
+
+                        <div className={"content-berita"}>
+                            <div className={"category"}>Olahraga</div>
+                            <div className={"title"}>Chelsea Keropos, Lini Belakang Jadi PR Maresca</div>
+                            <div className={"subtitle"}> <span className={"sumber"}>Detik.com</span> | 30 Menit yang lalu </div>
+                        </div>
+                    </div>
+                    <div className={"berita"}>
+                        <div className={"layer-berita"}></div>
+                        <img className={"img"} alt={"berita"} src={"/berita/berita.jpeg"}/>
+
+                        <div className={"content-berita"}>
+                            <div className={"category"}>Olahraga</div>
+                            <div className={"title"}>Chelsea Keropos, Lini Belakang Jadi PR Maresca</div>
+                            <div className={"subtitle"}> <span className={"sumber"}>Detik.com</span> | 30 Menit yang lalu </div>
+                        </div>
+                    </div>
+                </Carousel>
+            </div>
+
+            <div className={"list-news"}>
+                <div className={"content-list-news"}>
+                    <div>
+                        <img className={"image"} src={"/berita/berita.jpeg"}/>
+                    </div>
+                    <div>
+                        <div className={"category"}>Olahraga</div>
+                        <div className={"title"}>Chelsea Keropos, Lini Belakang Jadi...</div>
+                        <div className={"subtitle"}><span className={"sumber"}>Detik.com</span> | 30 Menit yang lalu </div>
+                    </div>
+
+                </div>
+                <div className={"content-list-news"}>
+                    <div>
+                        <img className={"image"} src={"/berita/berita.jpeg"}/>
+                    </div>
+                    <div>
+                        <div className={"category"}>Olahraga</div>
+                        <div className={"title"}>Chelsea Keropos, Lini Belakang Jadi...</div>
+                        <div className={"subtitle"}><span className={"sumber"}>Detik.com</span> | 30 Menit yang lalu </div>
+                    </div>
+
+                </div>
+                <div className={"content-list-news"}>
+                    <div>
+                        <img className={"image"} src={"/berita/berita.jpeg"}/>
+                    </div>
+                    <div>
+                        <div className={"category"}>Olahraga</div>
+                        <div className={"title"}>Chelsea Keropos, Lini Belakang Jadi...</div>
+                        <div className={"subtitle"}><span className={"sumber"}>Detik.com</span> | 30 Menit yang lalu </div>
+                    </div>
+
+                </div>
+
+                <button className={"button btn-full"} type={"button"}>Lihat Semua</button>
+
+            </div>
+        </section>
+
+        <section className={"footer"}>
+
+        </section>
+
+
+    </main>
+    <img className={"layer-bottom"} src={"/image/layer2.png"}/>
+      </>
+  );
+}
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z"></path></svg>
				`@ -0,0 +1 @@`
				<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 59L25 62.7C50 66.3 100 73.7 150 79.7C200 85.7 250 90.3 300 87.2C350 84 400 73 450 68.8C500 64.7 550 67.3 600 80.3C650 93.3 700 116.7 750 127.7C800 138.7 850 137.3 875 136.7L900 136L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#d2ffe8"></path><path d="M0 92L25 88C50 84 100 76 150 67.5C200 59 250 50 300 43C350 36 400 31 450 30.2C500 29.3 550 32.7 600 38C650 43.3 700 50.7 750 58.2C800 65.7 850 73.3 875 77.2L900 81L900 0L875 0C850 0 800 0 750 0C700 0 650 0 600 0C550 0 500 0 450 0C400 0 350 0 300 0C250 0 200 0 150 0C100 0 50 0 25 0L0 0Z" fill="#171717"></path></svg>