forked from amnannn/rekan_ai
sisa animasi
This commit is contained in:
Carls2320
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -83,4 +83,4 @@ export default function BusinessSolution() {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,4 +83,4 @@ export default function BusinessSolution() {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user