diff --git a/src/app/(application)/layout.tsx b/public/assets/.gitkeep similarity index 100% rename from src/app/(application)/layout.tsx rename to public/assets/.gitkeep diff --git a/public/assets/img/logo/logo-1.png b/public/assets/img/logo/logo-1.png new file mode 100644 index 0000000..4a2d41b Binary files /dev/null and b/public/assets/img/logo/logo-1.png differ diff --git a/public/assets/img/welcome/wellcome-1.png b/public/assets/img/welcome/wellcome-1.png new file mode 100644 index 0000000..1d78148 Binary files /dev/null and b/public/assets/img/welcome/wellcome-1.png differ diff --git a/public/assets/img/welcome/wellcome-2.png b/public/assets/img/welcome/wellcome-2.png new file mode 100644 index 0000000..af20baa Binary files /dev/null and b/public/assets/img/welcome/wellcome-2.png differ diff --git a/public/assets/img/welcome/wellcome-3.png b/public/assets/img/welcome/wellcome-3.png new file mode 100644 index 0000000..0fc6f0c Binary files /dev/null and b/public/assets/img/welcome/wellcome-3.png differ diff --git a/src/app/(application)/home/page.tsx b/src/app/(application)/home/page.tsx new file mode 100644 index 0000000..f1e2ec6 --- /dev/null +++ b/src/app/(application)/home/page.tsx @@ -0,0 +1,14 @@ +import LayoutNavbarHome from '@/module/_global/layout/layout_navbar_home'; +import { ViewHome } from '@/module/home'; +import { Flex, Group, Text } from '@mantine/core'; +import React from 'react'; + +function Page() { + return ( + <> + + + ); +} + +export default Page; diff --git a/src/app/(auth)/verification/page.tsx b/src/app/(auth)/verification/page.tsx new file mode 100644 index 0000000..de28044 --- /dev/null +++ b/src/app/(auth)/verification/page.tsx @@ -0,0 +1,6 @@ +import { ViewVerification } from "@/module/auth"; +import React from "react"; + +export default function Verification() { + return ; +} diff --git a/src/app/(auth)/welcome/page.tsx b/src/app/(auth)/welcome/page.tsx new file mode 100644 index 0000000..eeca370 --- /dev/null +++ b/src/app/(auth)/welcome/page.tsx @@ -0,0 +1,8 @@ +import { ViewWelcome } from "@/module/auth"; +import React from "react"; + +function Page() { + return ; +} + +export default Page; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0e33e51..da5bd36 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,24 @@ -import '@mantine/core/styles.css'; - -import { ColorSchemeScript, MantineProvider } from '@mantine/core'; +import "@mantine/core/styles.css"; +import { + Box, + ColorSchemeScript, + Container, + MantineProvider, + rem, +} from "@mantine/core"; +import { WARNA } from "@/module/_global"; +import { Lato } from "next/font/google"; export const metadata = { - title: 'My Mantine app', - description: 'I have followed setup instructions carefully', + title: "SISTEM DESA MANDIRI", + description: "I have followed setup instructions carefully", }; +const LatoFont = Lato({ + subsets: ["latin"], + weight: ["300", "400", "700", "900"], +}); + export default function RootLayout({ children, }: { @@ -17,9 +29,15 @@ export default function RootLayout({ - - {children} + + + + + {children} + + + ); -} \ No newline at end of file +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 0e61e62..fcd135f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,12 +1,10 @@ -import { Box, Text } from "@mantine/core"; -import Image from "next/image"; +import { ViewLogin } from "@/module/auth"; +import { Box, Image, rem, Stack, Text } from "@mantine/core"; export default function Home() { return ( <> - - AWAL BRANCH - + ); } diff --git a/src/module/_global/fun/WARNA.ts b/src/module/_global/fun/WARNA.ts new file mode 100644 index 0000000..d9f6868 --- /dev/null +++ b/src/module/_global/fun/WARNA.ts @@ -0,0 +1,4 @@ +export const WARNA = { + bgWhite: "#F4F9FD", + biruTua: "#19345E", +} \ No newline at end of file diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts index e69de29..7c77fb9 100644 --- a/src/module/_global/index.ts +++ b/src/module/_global/index.ts @@ -0,0 +1,7 @@ +import { WARNA } from "./fun/WARNA"; +import LayoutLogin from "./layout/layout_login"; +import LayoutNavbarHome from "./layout/layout_navbar_home"; + +export { WARNA } +export { LayoutLogin } +export {LayoutNavbarHome} \ No newline at end of file diff --git a/src/module/_global/layout/layout_login.tsx b/src/module/_global/layout/layout_login.tsx new file mode 100644 index 0000000..806768f --- /dev/null +++ b/src/module/_global/layout/layout_login.tsx @@ -0,0 +1,21 @@ +import { Image, rem, Stack, Title } from "@mantine/core"; +import React from "react"; +import { WARNA } from "../fun/WARNA"; + +export default function LayoutLogin({ + children, +}: { + children: React.ReactNode; +}) { + return ( + <> + + logo + + PERBEKAL DARMASABA + + + {children} + + ); +} diff --git a/src/module/_global/layout/layout_navbar_home.tsx b/src/module/_global/layout/layout_navbar_home.tsx new file mode 100644 index 0000000..66d22c5 --- /dev/null +++ b/src/module/_global/layout/layout_navbar_home.tsx @@ -0,0 +1,19 @@ +import { Box, Grid, Group } from '@mantine/core'; +import React from 'react'; +import { WARNA } from '../fun/WARNA'; + +export const LayoutNavbarHome = ({ children }: { children: React.ReactNode }) => { + return ( + <> + + {children} + + + ); +} +export default LayoutNavbarHome \ No newline at end of file diff --git a/src/module/auth/index.ts b/src/module/auth/index.ts index e69de29..3f6d0c0 100644 --- a/src/module/auth/index.ts +++ b/src/module/auth/index.ts @@ -0,0 +1,7 @@ +import ViewLogin from "./login/view/view_login"; +import ViewVerification from "./varification/view/view_verification"; +import { ViewWelcome } from "./welcome/view_welcome"; + +export { ViewLogin } +export { ViewVerification } +export { ViewWelcome } \ No newline at end of file diff --git a/src/module/auth/login/view/view_login.tsx b/src/module/auth/login/view/view_login.tsx new file mode 100644 index 0000000..19490b0 --- /dev/null +++ b/src/module/auth/login/view/view_login.tsx @@ -0,0 +1,77 @@ +"use client" +import { LayoutLogin, WARNA } from "@/module/_global"; +import { + Box, + Button, + Checkbox, + Image, + rem, + Stack, + Text, + TextInput, + Title, +} from "@mantine/core"; +import { useRouter } from "next/navigation"; +import React from "react"; + +function ViewLogin() { + const router = useRouter() + const textInfo = + "Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda."; + + function onMasuk() { + router.push("/verification") + } + + return ( + <> + + + + + +62} + placeholder="XXX XXX XXX" + /> + + {textInfo} + + + Ingat saya + + } + /> + + + + + + + + + ); +} + +export default ViewLogin; diff --git a/src/module/auth/varification/view/view_verification.tsx b/src/module/auth/varification/view/view_verification.tsx new file mode 100644 index 0000000..0c823fb --- /dev/null +++ b/src/module/auth/varification/view/view_verification.tsx @@ -0,0 +1,61 @@ +"use client"; +import { LayoutLogin, WARNA } from "@/module/_global"; +import { Box, Button, PinInput, Stack, Text, Title } from "@mantine/core"; +import { useRouter } from "next/navigation"; +import React from "react"; + +export default function ViewVerification() { + const router = useRouter(); + + function onNext() { + router.push("/welcome"); + } + return ( + <> + + + + + + Verifikasi Nomor Telepon + + + Masukkan kode yang kami kirimkan melalui WhatsApp + + + +6287701790942 + + + + + + + + + + + + + ); +} diff --git a/src/module/auth/welcome/view_welcome.tsx b/src/module/auth/welcome/view_welcome.tsx new file mode 100644 index 0000000..5c6503c --- /dev/null +++ b/src/module/auth/welcome/view_welcome.tsx @@ -0,0 +1,119 @@ +"use client"; +import { + Anchor, + Button, + Center, + Flex, + Group, + Image, + Stack, + Text, +} from "@mantine/core"; +import { useState } from "react"; +import { useRouter } from "next/navigation"; +import { WARNA } from "@/module/_global"; + +const listTextWellcome = [ + { + id: "1", + text: "Selamat Datang di Aplikasi Desa Darmasaba Optimalkan Proyek Desa dengan Fitur Kolaboratif Manajemen Proyek yang Efisien untuk Masa Depan Yang Lebih Baik", + img: "/assets/img/welcome/wellcome-1.png", + }, + { + id: "2", + text: "Monitor Progres Tugas Secara Real-time Kolaborasi Tim yang Dinamis untuk Sukses Bersama Perencanaan Tugas yang Terstruktur untuk Pertumbuhan Desa", + img: "/assets/img/welcome/wellcome-2.png", + }, + { + id: "3", + text: "Mulai Membangun Desa dengan Teknologi Canggih Manfaatkan Fitur Analytics untuk Keputusan yang Lebih Baik Selamat Bergabung di Komunitas Desa Darmasaba yang Progresif", + img: "/assets/img/welcome/wellcome-3.png", + }, +]; + +export function ViewWelcome() { + const [index, setIndex] = useState(0); + const router = useRouter(); + + function onLanjutkan() { + if (index === listTextWellcome.length - 1) { + return router.push("/home"); + } + setIndex(index + 1); + } + + function onSebelumnya() { + if (index === 0) { + return; + } + setIndex(index - 1); + } + return ( + + + Lewati + + + + + + + + {index + 1}/{listTextWellcome.length} + + + + + ); +} + +function WelcomeItem({ + index, + listTextWellcome, +}: { + index: number; + listTextWellcome: any[]; +}) { + return ( + +
+ gambar wellcome +
+ + {listTextWellcome[index].text} + + + ); +} diff --git a/src/module/home/index.ts b/src/module/home/index.ts new file mode 100644 index 0000000..f731d3a --- /dev/null +++ b/src/module/home/index.ts @@ -0,0 +1,3 @@ +import ViewHome from "./view/view_home"; + +export {ViewHome} \ No newline at end of file diff --git a/src/module/home/view/view_home.tsx b/src/module/home/view/view_home.tsx new file mode 100644 index 0000000..aa85323 --- /dev/null +++ b/src/module/home/view/view_home.tsx @@ -0,0 +1,17 @@ +import { LayoutNavbarHome } from '@/module/_global'; +import { Group, Text } from '@mantine/core'; +import React from 'react'; + +export default function ViewHome() { + return ( + <> + + + Perbekal Darmasaba + icon + + + + ); +} +