allbest/rekan_ai_fe
1
0
Fork 0
forked from amnannn/rekan_ai
Code Pull Requests Activity

sisa animasi

Browse Source
This commit is contained in:
Carls2320 2025-02-17 13:48:26 +07:00
parent 331c459b87
commit b5b04505b9
7 changed files with 174 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
package-lock.json generated
View File

@ -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",

10
src/components/beranda/Hero.jsx
View File

@ -30,9 +30,13 @@ function Hero() {
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
Konsultasi Gratis
</button>
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
Coba Sekarang
</button>
<Link to={"/Contact#form"}>
<button
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
Coba Sekarang
</button>
</Link>
</div>
</div>
</div>

68
src/components/contact/BottomCTA.jsx
View File

@ -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 (
<section className="w-full bg-white text-center py-10 mb-[113px]">
{/* Animasi teks turun dari atas saat di-scroll */}
<motion.div
initial={{ opacity: 0, y: -50 }}
animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -50 }}
transition={{ duration: 2.5, ease: "easeOut" }}
className="flex flex-wrap justify-center gap-2"
>
{/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
<div className="flex flex-wrap justify-center gap-2">
<h3 className="text-[#212121] text-center text-[32px] font-[550] leading-[48px] tracking-[0.005em]">
Masih punya pertanyaan seputar
</h3>
<h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
<h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
{/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */}
<span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
#Rekan AI
</span>
<span className="font-semibold ml-1">?</span>
<span className="font-semibold ml-1">?</span>
</h3>
</motion.div>
</div>
<motion.p
initial={{ opacity: 0, y: -30 }}
animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }}
transition={{ duration: 2, ease: "easeOut" }}
className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto"
>
Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />
kontak atau email. Kami dengan senang hati akan membantu!
</motion.p>
{/* Pesan yang memberi tahu pengguna untuk menghubungi jika pertanyaan belum terjawab */}
<p className=" text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />kontak atau email. Kami dengan senang hati akan membantu!
</p>
{/* Animasi tombol keluar dari kanan dan kiri saat di-scroll */}
<div className="flex flex-col justify-center md:mt-12 sm:flex-row gap-6 sm:gap-12 sm:mt-1 px-4 sm:px-0">
<motion.button
initial={{ opacity: 0, x: -50 }}
animate={isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
transition={{ duration: 2.5, ease: "easeOut" }}
className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
>
{/* Bagian tombol CTA */}
<div className="flex flex-col justify-center md:mt-12 sm:flex-row gap-6 sm:gap-12 sm:mt-1 px-4 sm:px-0">
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
Konsultasi Gratis
</motion.button>
<motion.button
initial={{ opacity: 0, x: 50 }}
animate={isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
transition={{ duration: 2.5, ease: "easeOut" }}
className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
>
</button>
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
Coba Sekarang
</motion.button>
</button>
</div>
</section>
);
};

163
src/components/contact/FAQSection.jsx
View File

@ -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: <p>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.</p> },
{ question: "Apa saja produk yang ditawarkan oleh Rekan AI?", answer: <div><p>Kami menawarkan beberapa produk unggulan, termasuk:</p><ul className="list-decimal list-inside space-y-1"><li>Rekan Doku: Solusi autentikasi dan manajemen dokumen digital.</li><li>Rekan HR: Automasi dan optimalisasi proses HR.</li><li>Rekan LLM: AI berbasis model bahasa besar untuk analisis dan komunikasi.</li><li>Rekan Veri: Verifikasi data yang cepat dan akurat.</li></ul></div> },
{ question: "Bagaimana cara menghubungi tim Rekan AI?", answer: <div><p>Anda dapat menghubungi kami melalui:</p><ul className="list-decimal list-inside space-y-1"><li>Email: support@rekanai.com</li><li>Telepon: (+62) 123-4567-890</li><li>WhatsApp: (+62) 812-3456-7890</li></ul></div> },
{ question: "Apakah solusi Rekan AI mudah diimplementasikan?", answer: <p>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.</p> },
{ question: "Apakah Rekan AI cocok untuk UMKM?", answer: <p>Tentu saja! Kami menawarkan solusi yang terjangkau, mudah digunakan, dan dapat membantu UMKM meningkatkan efisiensi, mengurangi biaya operasional, dan mempercepat pertumbuhan.</p> },
{ question: "Bagaimana dengan keamanan data?", answer: <p>Keamanan adalah prioritas kami. Semua produk Rekan AI menggunakan teknologi enkripsi canggih untuk melindungi data Anda dari ancaman cyber.</p> },
{ question: "Bagaimana saya memulai menggunakan produk Rekan AI?", answer: <p>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.</p> },
{ question: "Apakah Rekan AI memiliki paket harga yang bisa dipilih?", answer: <p>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.</p> },
{
question: "Apa itu Rekan AI?",
answer: (
<p>
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.
</p>
),
},
{
question: "Apa saja produk yang ditawarkan oleh Rekan AI?",
answer: (
<div>
<p className="mb-1">Kami menawarkan beberapa produk unggulan, termasuk:</p>
<ul className="list-decimal list-inside space-y-1">
<li>
Rekan Doku: Solusi autentikasi dan manajemen dokumen digital.
</li>
<li>Rekan HR: Automasi dan optimalisasi proses HR.</li>
<li>
Rekan LLM: AI berbasis model bahasa besar untuk analisis dan
komunikasi.
</li>
<li>Rekan Veri: Verifikasi data yang cepat dan akurat.</li>
</ul>
</div>
),
},
{
question: "Bagaimana cara menghubungi tim Rekan AI?",
answer: (
<div>
<p className="mb-1">Anda dapat menghubungi kami melalui:</p>
<ul className="list-decimal list-inside space-y-1">
<li>Email: support@rekanai.com</li>
<li>Telepon: (+62) 123-4567-890</li>
<li>WhatsApp: (+62) 812-3456-7890</li>
</ul>
</div>
),
},
{
question: "Apakah solusi Rekan AI mudah diimplementasikan?",
answer: (
<p>
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.
</p>
),
},
{
question: "Apakah Rekan AI cocok untuk UMKM?",
answer: (
<p>
Tentu saja! Kami menawarkan solusi yang terjangkau, mudah digunakan,
dan dapat membantu UMKM meningkatkan efisiensi, mengurangi biaya
operasional, dan mempercepat pertumbuhan.
</p>
),
},
{
question: "Bagaimana dengan keamanan data?",
answer: (
<p>
Keamanan adalah prioritas kami. Semua produk Rekan AI menggunakan
teknologi enkripsi canggih untuk melindungi data Anda dari ancaman
cyber.
</p>
),
},
{
question: "Bagaimana saya memulai menggunakan produk Rekan AI?",
answer: (
<p>
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.
</p>
),
},
{
question: "Apakah Rekan AI memiliki paket harga yang bisa dipilih?",
answer: (
<p>
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.
</p>
),
},
];
return (
@ -52,37 +133,33 @@ const FAQ = () => {
</h2>
</div>
{/* Bagian FAQ */}
<div className="space-y-[22px] mb-[110px] mt-[60px]">
{faqData.map((item, index) => {
const { ref, inView } = useInView({ threshold: 0.1 });
return (
{faqData.map((item, index) => (
<div
key={index}
className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
>
{/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
<div
key={index}
ref={ref}
className={`text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden transition-opacity duration-700 transform ${
inView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
// Jika pertanyaan ini dibuka, beri highlight
openQuestion === index ? "text-blue-500" : ""
}`}
style={{ transitionDelay: `${index * 100}ms` }}
onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
>
<div
className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
openQuestion === index ? "text-blue-500" : ""
}`}
onClick={() => toggleQuestion(index)}
>
<span className="font-[550]">{item.question}</span>
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span>
</div>
{openQuestion === index && (
<div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
{item.answer}
</div>
)}
<span className="font-[550]">{item.question}</span>
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
</div>
);
})}
{/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
{openQuestion === index && (
<div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
{item.answer}
</div>
)}
</div>
))}
</div>
</div>
);

2
src/components/contact/FormSection.jsx
View File

@ -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!
</p>
</motion.div>
</div>
{/* Form Section */}
<div className="w-full lg:w-7/12 xl:w-6/12">