From b5b04505b9cb00134b1aa95782b77758288555cb Mon Sep 17 00:00:00 2001 From: Carls2320 Date: Mon, 17 Feb 2025 13:48:26 +0700 Subject: [PATCH] sisa animasi --- package-lock.json | 101 +++-------- src/components/beranda/Hero.jsx | 10 +- src/components/contact/BottomCTA.jsx | 68 ++------ src/components/contact/FAQSection.jsx | 163 +++++++++++++----- src/components/contact/FormSection.jsx | 2 +- .../SolusiCorporate/SolusiCorporate.jsx | 2 +- .../solusi/SolusiStartup/SolusiStartup.jsx | 2 +- 7 files changed, 174 insertions(+), 174 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8f717b1..3dfee1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4575,10 +4575,13 @@ "license": "MIT" }, "node_modules/react": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz", - "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + }, "engines": { "node": ">=0.10.0" } @@ -4597,71 +4600,16 @@ } }, "node_modules/react-dom": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", - "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", "dependencies": { - "scheduler": "^0.25.0" + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" }, "peerDependencies": { - "react": "^19.0.0" - } - }, - "node_modules/react-google-recaptcha": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz", - "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==", - "license": "MIT", - "dependencies": { - "prop-types": "^15.5.0", - "react-async-script": "^1.2.0" - }, - "peerDependencies": { - "react": ">=16.4.1" - } - }, - "node_modules/react-intersection-observer": { - "version": "9.15.1", - "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz", - "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==", - "license": "MIT", - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - } - } - }, - "node_modules/react-google-recaptcha": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz", - "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==", - "license": "MIT", - "dependencies": { - "prop-types": "^15.5.0", - "react-async-script": "^1.2.0" - }, - "peerDependencies": { - "react": ">=16.4.1" - } - }, - "node_modules/react-intersection-observer": { - "version": "9.15.1", - "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz", - "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==", - "license": "MIT", - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - } + "react": "^18.3.1" } }, "node_modules/react-google-recaptcha": { @@ -4709,9 +4657,9 @@ } }, "node_modules/react-router": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz", - "integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz", + "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==", "license": "MIT", "dependencies": { "@types/cookie": "^0.6.0", @@ -4733,12 +4681,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.5.tgz", - "integrity": "sha512-/4f9+up0Qv92D3bB8iN5P1s3oHAepSGa9h5k6tpTFlixTTskJZwKGhJ6vRJ277tLD1zuaZTt95hyGWV1Z37csQ==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz", + "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==", "license": "MIT", "dependencies": { - "react-router": "7.1.5" + "react-router": "7.1.3" }, "engines": { "node": ">=20.0.0" @@ -4973,10 +4921,13 @@ } }, "node_modules/scheduler": { - "version": "0.25.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz", - "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==", - "license": "MIT" + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + } }, "node_modules/semver": { "version": "6.3.1", diff --git a/src/components/beranda/Hero.jsx b/src/components/beranda/Hero.jsx index c5fc0f4..c933578 100644 --- a/src/components/beranda/Hero.jsx +++ b/src/components/beranda/Hero.jsx @@ -30,9 +30,13 @@ function Hero() { WhatsApp Icon Konsultasi Gratis - + + + + diff --git a/src/components/contact/BottomCTA.jsx b/src/components/contact/BottomCTA.jsx index 588a5aa..61c716c 100644 --- a/src/components/contact/BottomCTA.jsx +++ b/src/components/contact/BottomCTA.jsx @@ -1,71 +1,39 @@ import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon -import { motion } from "framer-motion"; -import { useEffect, useState } from "react"; const BottomCTA = () => { - const [isVisible, setIsVisible] = useState(false); - - useEffect(() => { - const handleScroll = () => { - const scrollY = window.scrollY; - const triggerHeight = window.innerHeight / 1.5; - setIsVisible(scrollY > triggerHeight); - }; - - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []); - return (
- {/* Animasi teks turun dari atas saat di-scroll */} - + {/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */} +

Masih punya pertanyaan seputar

-

+ +

+ {/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */} #Rekan AI - ? + ?

- +
- - Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir
- kontak atau email. Kami dengan senang hati akan membantu! - + {/* Pesan yang memberi tahu pengguna untuk menghubungi jika pertanyaan belum terjawab */} +

+ Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir
kontak atau email. Kami dengan senang hati akan membantu! +

- {/* Animasi tombol keluar dari kanan dan kiri saat di-scroll */} -
- + {/* Bagian tombol CTA */} +
+ +
+
); }; diff --git a/src/components/contact/FAQSection.jsx b/src/components/contact/FAQSection.jsx index e60b1c4..6b2883a 100644 --- a/src/components/contact/FAQSection.jsx +++ b/src/components/contact/FAQSection.jsx @@ -16,28 +16,109 @@ const FAQ = () => { // Jika tidak ada pertanyaan yang terbuka, nilai adalah null const [openQuestion, setOpenQuestion] = useState(null); - useEffect(() => { - if (location.hash) { - const element = document.querySelector(location.hash); - if (element) { - element.scrollIntoView({ behavior: "smooth" }); - } - } - }, [location]); - + // Fungsi untuk membuka atau menutup pertanyaan berdasarkan indeks + // Jika pertanyaan yang sama diklik lagi, tutup pertanyaan tersebut const toggleQuestion = (index) => { + // Cek apakah pertanyaan yang sama diklik + // Jika iya, tutup (set openQuestion ke null), jika tidak, buka pertanyaan tersebut setOpenQuestion(openQuestion === index ? null : index); }; + // Data FAQ yang berisi array objek dengan pertanyaan dan jawaban const faqData = [ - { question: "Apa itu Rekan AI?", answer:

Rekan AI adalah platform teknologi kecerdasan buatan (AI) yang menyediakan solusi berbasis AI untuk meningkatkan efisiensi operasional, analisis data, dan pengalaman pelanggan bagi UMKM hingga perusahaan besar.

}, - { question: "Apa saja produk yang ditawarkan oleh Rekan AI?", answer:

Kami menawarkan beberapa produk unggulan, termasuk:

}, - { question: "Bagaimana cara menghubungi tim Rekan AI?", answer:

Anda dapat menghubungi kami melalui:

}, - { question: "Apakah solusi Rekan AI mudah diimplementasikan?", answer:

Ya, produk kami dirancang untuk integrasi yang mulus dengan sistem bisnis Anda yang sudah ada. Kami juga menyediakan dukungan teknis untuk memastikan implementasi berjalan lancar.

}, - { question: "Apakah Rekan AI cocok untuk UMKM?", answer:

Tentu saja! Kami menawarkan solusi yang terjangkau, mudah digunakan, dan dapat membantu UMKM meningkatkan efisiensi, mengurangi biaya operasional, dan mempercepat pertumbuhan.

}, - { question: "Bagaimana dengan keamanan data?", answer:

Keamanan adalah prioritas kami. Semua produk Rekan AI menggunakan teknologi enkripsi canggih untuk melindungi data Anda dari ancaman cyber.

}, - { question: "Bagaimana saya memulai menggunakan produk Rekan AI?", answer:

Anda dapat memulai dengan menghubungi tim kami untuk demo produk atau konsultasi gratis. Kami akan membantu Anda menemukan solusi yang paling sesuai dengan kebutuhan bisnis Anda.

}, - { question: "Apakah Rekan AI memiliki paket harga yang bisa dipilih?", answer:

Ya, kami dapat memberikan paket harga terbaik untuk solusi produk yang Anda pilih. Informasi lebih lanjut silakan hubungi kami dan konsultasikan kebutuhan Anda secara gratis.

}, + { + question: "Apa itu Rekan AI?", + answer: ( +

+ Rekan AI adalah platform teknologi kecerdasan buatan (AI) yang + menyediakan solusi berbasis AI untuk meningkatkan efisiensi + operasional, analisis data, dan pengalaman pelanggan bagi UMKM hingga + perusahaan besar. +

+ ), + }, + { + question: "Apa saja produk yang ditawarkan oleh Rekan AI?", + answer: ( +
+

Kami menawarkan beberapa produk unggulan, termasuk:

+ +
+ ), + }, + { + question: "Bagaimana cara menghubungi tim Rekan AI?", + answer: ( +
+

Anda dapat menghubungi kami melalui:

+ +
+ ), + }, + { + question: "Apakah solusi Rekan AI mudah diimplementasikan?", + answer: ( +

+ Ya, produk kami dirancang untuk integrasi yang mulus dengan sistem + bisnis Anda yang sudah ada. Kami juga menyediakan dukungan teknis + untuk memastikan implementasi berjalan lancar. +

+ ), + }, + { + question: "Apakah Rekan AI cocok untuk UMKM?", + answer: ( +

+ Tentu saja! Kami menawarkan solusi yang terjangkau, mudah digunakan, + dan dapat membantu UMKM meningkatkan efisiensi, mengurangi biaya + operasional, dan mempercepat pertumbuhan. +

+ ), + }, + { + question: "Bagaimana dengan keamanan data?", + answer: ( +

+ Keamanan adalah prioritas kami. Semua produk Rekan AI menggunakan + teknologi enkripsi canggih untuk melindungi data Anda dari ancaman + cyber. +

+ ), + }, + { + question: "Bagaimana saya memulai menggunakan produk Rekan AI?", + answer: ( +

+ Anda dapat memulai dengan menghubungi tim kami untuk demo produk atau + konsultasi gratis. Kami akan membantu Anda menemukan solusi yang + paling sesuai dengan kebutuhan bisnis Anda. +

+ ), + }, + { + question: "Apakah Rekan AI memiliki paket harga yang bisa dipilih?", + answer: ( +

+ Ya, kami dapat memberikan paket harga terbaik untuk solusi produk yang + Anda pilih. Informasi lebih lanjut silakan hubungi kami dan + konsultasikan kebutuhan Anda secara gratis. +

+ ), + }, ]; return ( @@ -52,37 +133,33 @@ const FAQ = () => { + {/* Bagian FAQ */}
- {faqData.map((item, index) => { - const { ref, inView } = useInView({ threshold: 0.1 }); - - return ( + {faqData.map((item, index) => ( +
+ {/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion > -
toggleQuestion(index)} - > - {item.question} - {openQuestion === index ? "–" : "+"} -
- - {openQuestion === index && ( -
- {item.answer} -
- )} + {item.question} + {openQuestion === index ? "–" : "+"} {/* Tampilkan tanda buka atau tutup */}
- ); - })} + + {/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */} + {openQuestion === index && ( +
+ {item.answer} +
+ )} +
+ ))}
); diff --git a/src/components/contact/FormSection.jsx b/src/components/contact/FormSection.jsx index 6eee2f5..7fdd515 100644 --- a/src/components/contact/FormSection.jsx +++ b/src/components/contact/FormSection.jsx @@ -39,7 +39,7 @@ const ContactForm = () => { Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!

- + {/* Form Section */}
diff --git a/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx b/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx index 131cdf6..ba6cda8 100644 --- a/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx +++ b/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx @@ -83,4 +83,4 @@ export default function BusinessSolution() { )}
); -} \ No newline at end of file +} diff --git a/src/components/solusi/SolusiStartup/SolusiStartup.jsx b/src/components/solusi/SolusiStartup/SolusiStartup.jsx index 131cdf6..ba6cda8 100644 --- a/src/components/solusi/SolusiStartup/SolusiStartup.jsx +++ b/src/components/solusi/SolusiStartup/SolusiStartup.jsx @@ -83,4 +83,4 @@ export default function BusinessSolution() { )} ); -} \ No newline at end of file +}