Skip to content

Commit 79d7913

Browse files
FebriyandyFebriyandy
committed
finish
1 parent 58eb79f commit 79d7913

File tree

1 file changed

+84
-32
lines changed

1 file changed

+84
-32
lines changed

‎src/pages/Dashboard.jsx

+84-32
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useEffect} from "react";
1+
import React, { useEffect } from "react";
22
import Navbar from "../components/navbar";
33
import Foto from "../assets/images/foto1.png";
44
import { IoIosSearch } from "react-icons/io";
@@ -21,15 +21,20 @@ import artikel4 from "../assets/images/artikel4.png";
2121
import bgartikel from "../assets/images/bgartikel.png";
2222

2323
const Dashboard = () => {
24-
2524
// Membuat Judul Halaman
2625
useEffect(() => {
27-
document.title = 'Dashboard';
26+
document.title = "Dashboard";
2827
}, []);
2928

29+
const handleScroll = () => {
30+
const nextSection = document.getElementById("next-section");
31+
nextSection.scrollIntoView({ behavior: "smooth" });
32+
};
33+
3034
return (
3135
<>
32-
<Navbar />{/* Navbar */}
36+
<Navbar />
37+
{/* Navbar */}
3338
<section>
3439
<div className=" w-full h-auto bg-[#14142B] relative">
3540
<img
@@ -38,36 +43,61 @@ const Dashboard = () => {
3843
alt=""
3944
/>
4045
<div className="flex flex-col items-center h-full w-full absolute top-10 ">
41-
<h1 data-aos="zoom-in" data-aos-duration="1000" className="font-body font-bold text-white text-2xl text-center mt-24">
46+
<h1
47+
data-aos="zoom-in"
48+
data-aos-duration="1000"
49+
className="font-body font-bold text-white text-2xl text-center mt-24"
50+
>
4251
Selamat Datang di UMKMConnect <br /> Konsumennya Saja Sudah
4352
Digital, UMKM-nya Juga Dong
4453
</h1>
45-
<div data-aos="zoom-in" data-aos-duration="1000" className="relative w-1/2 mt-20">
54+
<div
55+
data-aos="zoom-in"
56+
data-aos-duration="1000"
57+
className="relative w-1/2 mt-20"
58+
>
4659
<input
4760
type="text"
4861
className="w-full h-14 rounded-lg text-lg font-body outline-none p-4 pr-12"
4962
placeholder="Search...."
5063
/>
5164
<IoIosSearch className="absolute top-1/2 right-4 transform -translate-y-1/2 text-2xl text-gray-500" />
5265
</div>
53-
<h2 data-aos="fade-up" data-aos-duration="1000" className=" font-body text-white text-center w-3/4 mt-20">
66+
<h2
67+
data-aos="fade-up"
68+
data-aos-duration="1000"
69+
className=" font-body text-white text-center w-3/4 mt-20"
70+
>
5471
UMKMConnect adalah jembatan bagi anda dan UMKM yang akan
5572
menghidupkan ekonomi lokal. Temukan beragam produk berkualitas
5673
dari UMKM seluruh Indonesia dengan mudah, dari kuliner lezat
5774
hingga kerajinan tangan unik, semuanya ada disini.
5875
</h2>
59-
<div className="bottom-10 absolute animate__animated animate__fadeInUp animate__delay-1s">
60-
<h1 className="font-body text-white">Scroll Kebawah</h1>
61-
<HiOutlineChevronDown className="text-2xl text-white mx-auto bg-primary w-8 h-12 rounded-2xl" />
76+
<div
77+
className="bottom-14 cursor-pointer flex flex-col items-center absolute animate__animated animate__fadeInUp animate__delay-1s"
78+
onClick={handleScroll}
79+
>
80+
<h1 className="font-body py-3 text-white">Scroll Kebawah</h1>
81+
<span class="relative flex h-10 w-6">
82+
<span class="animate-ping absolute inline-flex h-10 w-6 rounded-2xl bg-[#ffbf71] opacity-75"></span>
83+
<HiOutlineChevronDown className="text-2xl text-white mx-auto bg-primary w-6 h-10 rounded-2xl" />
84+
</span>
6285
</div>
6386
</div>
6487
</div>
6588
</section>
6689

6790
{/* Kategori Produk */}
68-
<section className="h-96 w-full flex flex-col items-center font-body">
69-
<h1 className="font-bold text-xl mt-10">Kategori Produk</h1>
70-
<div data-aos="fade-up" data-aos-duration="1000" className="flex mt-8 gap-20">
91+
<section
92+
id="next-section"
93+
className="h-96 w-full flex flex-col items-center font-body"
94+
>
95+
<h1 className="font-bold text-xl mt-10 pt-16">Kategori Produk</h1>
96+
<div
97+
data-aos="fade-up"
98+
data-aos-duration="1000"
99+
className="flex mt-8 gap-20"
100+
>
71101
<div className="w-48 h-60 shadow-lg border rounded-xl p-4">
72102
<img
73103
src={makanan}
@@ -120,8 +150,12 @@ const Dashboard = () => {
120150
</section>
121151

122152
{/* Partner UMKM */}
123-
<section className="h-96 mt-10 w-full flex flex-col items-center font-body">
124-
<div data-aos="fade-up" data-aos-duration="1000" className="w-4/5 h-4/5 bg-primary rounded-2xl flex flex-col items-center">
153+
<section className="h-96 mt-24 w-full flex flex-col items-center font-body">
154+
<div
155+
data-aos="fade-up"
156+
data-aos-duration="1000"
157+
className="w-4/5 h-4/5 bg-primary rounded-2xl flex flex-col items-center"
158+
>
125159
<h1 className="font-bold text-white text-xl mt-10 ">Partner UMKM</h1>
126160
<div className="flex gap-10">
127161
<div className="w-40 h-56 p-4">
@@ -171,7 +205,11 @@ const Dashboard = () => {
171205
{/* Artikel Terbaru */}
172206
<h1 className="font-bold text-xl px-28 font-body">Artikel Terbaru</h1>
173207
<section className="h-auto my-10 w-full flex flex-col items-center font-body">
174-
<div data-aos="fade-up" data-aos-duration="1000" className="grid grid-cols-4 gap-10">
208+
<div
209+
data-aos="fade-up"
210+
data-aos-duration="1000"
211+
className="grid grid-cols-4 gap-10"
212+
>
175213
<div className="w-64 h-96 rounded-2xl border border-[#DCDCDC] flex flex-col">
176214
<img
177215
src={artikel1}
@@ -188,7 +226,10 @@ const Dashboard = () => {
188226
mengelola keuangan mereka dengan efisien.
189227
</h3>
190228
<div className="text-center mt-auto">
191-
<a href="" className="font-body text-white px-16 rounded-xl py-2 bg-primary">
229+
<a
230+
href=""
231+
className="font-body text-white px-16 rounded-xl py-2 bg-primary"
232+
>
192233
Lihat Detail
193234
</a>
194235
</div>
@@ -203,16 +244,19 @@ const Dashboard = () => {
203244
/>
204245
<div className="p-5 flex-grow flex flex-col">
205246
<h1 className="font-bold text-sm">
206-
Tips Pengelolaan Keuangan Efektif untuk Usaha Menengah Kebawah
247+
Tips Pengelolaan Keuangan Efektif untuk Usaha Menengah Kebawah
207248
</h1>
208249
<h3 className="text-xs h-32 text-justify pt-3">
209-
Pengelolaan keuangan yang efektif adalah salah satu kunci
250+
Pengelolaan keuangan yang efektif adalah salah satu kunci
210251
kesuksesan usaha menengah ke bawah. Dalam artikel ini, kita akan
211252
membahas beberapa tips dan praktik terbaik yang dapat membantu
212253
Anda mengelola...
213254
</h3>
214255
<div className="text-center mt-auto">
215-
<a href="/Artikel/Detail" className="font-body text-white px-16 rounded-xl py-2 bg-primary">
256+
<a
257+
href="/Artikel/Detail"
258+
className="font-body text-white px-16 rounded-xl py-2 bg-primary"
259+
>
216260
Lihat Detail
217261
</a>
218262
</div>
@@ -227,16 +271,19 @@ const Dashboard = () => {
227271
/>
228272
<div className="p-5 flex-grow flex flex-col">
229273
<h1 className="font-bold text-sm">
230-
Strategi Membangun Dana Darurat Bisnis
274+
Strategi Membangun Dana Darurat Bisnis
231275
</h1>
232276
<h3 className="text-xs h-32 text-justify pt-3">
233-
Pentingnya memiliki dana darurat bisnis dan memberikan strategi
277+
Pentingnya memiliki dana darurat bisnis dan memberikan strategi
234278
praktis untuk membangunnya. Ini termasuk langkah-langkah untuk
235279
mengalokasikan dana darurat, menentukan jumlah yang sesuai, dan
236280
bagaimana menggunakannya dalam...
237281
</h3>
238282
<div className="text-center mt-auto">
239-
<a href="" className="font-body text-white px-16 rounded-xl py-2 bg-primary">
283+
<a
284+
href=""
285+
className="font-body text-white px-16 rounded-xl py-2 bg-primary"
286+
>
240287
Lihat Detail
241288
</a>
242289
</div>
@@ -251,44 +298,49 @@ const Dashboard = () => {
251298
/>
252299
<div className="p-5 flex-grow flex flex-col">
253300
<h1 className="font-bold text-sm">
254-
Cara Efektif Menggunakan Teknologi dalam Pengelolaan Keuangan
301+
Cara Efektif Menggunakan Teknologi dalam Pengelolaan Keuangan
255302
Bisnis
256303
</h1>
257304
<h3 className="text-xs h-32 text-justify pt-3">
258-
Pebisnis usaha menengah kebawah dapat menggunakan teknologi
305+
Pebisnis usaha menengah kebawah dapat menggunakan teknologi
259306
terbaru dalam pengelolaan keuangan bisnis. Ini mencakup aplikasi
260307
keuangan, perangkat lunak akuntansi, dan alat digital lainnya
261308
yang dapat...
262309
</h3>
263310
<div className="text-center mt-auto">
264-
<a href="" className="font-body text-white px-16 rounded-xl py-2 bg-primary">
311+
<a
312+
href=""
313+
className="font-body text-white px-16 rounded-xl py-2 bg-primary"
314+
>
265315
Lihat Detail
266316
</a>
267317
</div>
268318
</div>
269319
</div>
270-
271320
</div>
272321
</section>
273322

274323
{/* Ajakan untuk Bergabung */}
275324
<section className="h-72 w-full flex bg-primary">
276-
<img src={bgartikel} className="w-full object-cover absolute" alt="" />
325+
<img src={bgartikel} className="w-full object-cover absolute" alt="" />
277326
<div className="relative flex items-center">
278327
<div>
279328
<img
280-
data-aos="zoom-in" data-aos-duration="2000"
329+
data-aos="zoom-in"
330+
data-aos-duration="1000"
281331
src={Foto}
282332
className="w-80 h-48 ml-32 mr-20 object-cover rounded-xl "
283333
alt=""
284334
/>
285335
</div>
286-
<div data-aos="fade-up"
287-
data-aos-duration="2000">
336+
<div data-aos="fade-up" data-aos-duration="1000">
288337
<h1 className="font-body mb-6 font-bold text-2xl text-white">
289338
Siap berkembang bersama UMKMConnect?
290339
</h1>
291-
<Link to="/Login" className="font-body text-white border border-white rounded-lg py-2 px-4">
340+
<Link
341+
to="/Login"
342+
className="font-body text-white border border-white rounded-lg py-2 px-4"
343+
>
292344
Gabung Sekarang
293345
</Link>
294346
</div>

0 commit comments

Comments
 (0)