diff --git a/src/components/beranda/Banner.jsx b/src/components/beranda/Banner.jsx index f87256f..553c2a9 100644 --- a/src/components/beranda/Banner.jsx +++ b/src/components/beranda/Banner.jsx @@ -113,4 +113,4 @@ function Banner() { ) } -export default Banner +export default Banner \ No newline at end of file diff --git a/src/components/beranda/Hero.jsx b/src/components/beranda/Hero.jsx index c933578..3fb6105 100644 --- a/src/components/beranda/Hero.jsx +++ b/src/components/beranda/Hero.jsx @@ -1,14 +1,49 @@ import { homeLogo, waIcon, homeImg } from '../../assets'; -import { useNavigate, Link } from "react-router-dom" +import { useNavigate, Link } from "react-router-dom"; +import { motion } from "framer-motion"; +import { useEffect, useState } from "react"; function Hero() { + const [inView, setInView] = useState(false); const navigate = useNavigate(); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setInView(true); + } else { + setInView(false); + } + }); + }, + { threshold: 0.2 } + ); + + const target = document.querySelector("#hero-section"); + if (target) { + observer.observe(target); + } + + return () => { + if (target) { + observer.unobserve(target); + } + }; + }, []); + return (
-
+
{/* Left Section */} -
+ Rekan AI Logo

Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI. @@ -17,27 +52,36 @@ function Hero() { Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.

-

+ - {/* Right Section - Adjust order for mobile */} -
+ {/* Right Section */} + Rekan AI Illustration -
+ - {/* Buttons - Ensure they come last on mobile */} -
+ {/* Buttons */} + - - -
+
diff --git a/src/components/beranda/Kenapa.jsx b/src/components/beranda/Kenapa.jsx index 9514bbe..e0d22cd 100644 --- a/src/components/beranda/Kenapa.jsx +++ b/src/components/beranda/Kenapa.jsx @@ -1,67 +1,114 @@ -import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets' -import { Link } from "react-router-dom" +import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets'; +import { Link } from "react-router-dom"; +import { motion } from "framer-motion"; +import { useInView } from "react-intersection-observer"; function Kenapa() { + const options = { triggerOnce: false, threshold: 0.2 }; + const { ref: sectionRef, inView: sectionInView } = useInView(options); + const { ref: textRef, inView: textInView } = useInView(options); + const { ref: listRef, inView: listInView } = useInView(options); + const { ref: buttonRef, inView: buttonInView } = useInView(options); + return ( -
-
+
+ {/* Decorative Circles */}
- Circle 1 - Circle 2 + +
{/* Image Section */} -
+ Woman with Tablet -
+ {/* Text Section */} -
+

Kenapa Harus Rekan AI?

-

+

Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang untuk meningkatkan efisiensi operasional, mempercepat proses, dan memberikan wawasan berbasis data yang akurat.

    -
  • - Check - Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas. -
    • -
  • - Check - Analisis data real-time untuk pengambilan keputusan yang lebih tepat. -
    • -
  • - Check - Menciptakan interaksi pelanggan yang lebih relevan dan berkesan. -
    • -
  • - Check - Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data. -
    • + {[ + "Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.", + "Analisis data real-time untuk pengambilan keputusan yang lebih tepat.", + "Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.", + "Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data." + ].map((text, index) => ( + + Check + {text} + + ))}
-
- + - +
-
-
+ +
); } diff --git a/src/components/beranda/MasaDepan.jsx b/src/components/beranda/MasaDepan.jsx index 26fed31..f2097bc 100644 --- a/src/components/beranda/MasaDepan.jsx +++ b/src/components/beranda/MasaDepan.jsx @@ -1,46 +1,72 @@ import React from "react"; +import { motion } from "framer-motion"; import { waIcon } from "../../assets"; -import { Link } from "react-router-dom" - +import { Link } from "react-router-dom"; function MasaDepan() { return ( <> -
- {/* Tagline Section */} + {/* Tagline Section */} +
- + #Rekan AI - -

+ + Masa Depan Bisnis, Dimulai Hari Ini -

+
-

+ Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih cerdas, efisien, dan kompetitif. -

+
+ - -
{/* Button Section */} -
- + - + -
- + - ); } diff --git a/src/components/beranda/Mendukung.jsx b/src/components/beranda/Mendukung.jsx index f66cee6..e534dbd 100644 --- a/src/components/beranda/Mendukung.jsx +++ b/src/components/beranda/Mendukung.jsx @@ -1,7 +1,11 @@ import React from 'react'; +import { motion } from 'framer-motion'; +import { useInView } from 'react-intersection-observer'; import { imgLeft1, imgLeft2, imgLeft3, imgRight } from '../../assets'; function Mendukung() { + const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 }); + const items = [ { id: 1, image: imgLeft1, title: 'Personal' }, { id: 2, image: imgLeft2, title: 'UMKM' }, @@ -9,9 +13,22 @@ function Mendukung() { ]; return ( -
+ {/* Left Content */} -
+

Solusi Mendukung Bisnis di Setiap
@@ -22,8 +39,15 @@ function Mendukung() {

- {items.map((item) => ( -
+ {items.map((item, index) => ( + {/* Image */} {item.title}

-
+ ))}
- -
+ {/* Right Content */} -
+ Image Right -
-
- + + ); } -export default Mendukung; +export default Mendukung; \ No newline at end of file diff --git a/src/components/beranda/Solusi.jsx b/src/components/beranda/Solusi.jsx index 7593145..238b001 100644 --- a/src/components/beranda/Solusi.jsx +++ b/src/components/beranda/Solusi.jsx @@ -1,4 +1,36 @@ import { card1, card2, card3, card4, chek } from "../../assets" +import { motion } from "framer-motion" +import { useState, useEffect, useRef } from "react" + +// Custom hook untuk menggunakan Intersection Observer +const useIntersectionObserver = (options = {}) => { + const [isIntersecting, setIsIntersecting] = useState(false) + const ref = useRef(null) + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + setIsIntersecting(entry.isIntersecting) + }, + { + threshold: 0.5, // Ketika 50% elemen terlihat + ...options, + } + ) + + if (ref.current) { + observer.observe(ref.current) + } + + return () => { + if (ref.current) { + observer.unobserve(ref.current) + } + } + }, [options]) + + return [ref, isIntersecting] +} function Solusi() { const cards = [ @@ -31,49 +63,67 @@ function Solusi() { return (
-
+

Ragam Solusi Terbaik Dari

#Rekan AI -
-

+ + Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek. -

+
- {cards.map((card, index) => ( -
- {`Card -

- {card.description} -

-
    - {card.features.map((feature, i) => ( -
  • - Check {feature} -
    • - ))} -
- -
- - ))} + {cards.map((card, index) => { + const [ref, isIntersecting] = useIntersectionObserver({ + threshold: 0.5, // Set threshold when 50% of the element is visible + }) + + return ( + + {`Card +

+ {card.description} +

+
    + {card.features.map((feature, i) => ( +
  • + Check {feature} +
    • + ))} +
+ + + ) + })}
) } export default Solusi - diff --git a/src/components/contact/BottomCTA.jsx b/src/components/contact/BottomCTA.jsx index 61c716c..21dd9cd 100644 --- a/src/components/contact/BottomCTA.jsx +++ b/src/components/contact/BottomCTA.jsx @@ -1,40 +1,47 @@ import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon +import { motion } from "framer-motion"; const BottomCTA = () => { return ( -
- {/* 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 - ? + ?

- {/* 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! +

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

- {/* Bagian tombol CTA */} -
- - +
- -
+ ); }; diff --git a/src/components/contact/FAQSection.jsx b/src/components/contact/FAQSection.jsx index 6b2883a..b0de029 100644 --- a/src/components/contact/FAQSection.jsx +++ b/src/components/contact/FAQSection.jsx @@ -1,30 +1,41 @@ -import { useState, useEffect } from "react"; -import { useLocation } from "react-router-dom"; +"use client" + +import { useState, useEffect } from "react" +import { useLocation } from "react-router-dom" +import { motion, useAnimation } from "framer-motion" +import { useInView } from "react-intersection-observer" const FAQ = () => { - const location = useLocation(); + const location = useLocation() + const controls = useAnimation() + const [ref, inView] = useInView({ + threshold: 0.1, + triggerOnce: false, + }) + + useEffect(() => { + if (inView) { + controls.start("visible") + } else { + controls.start("hidden") + } + }, [controls, inView]) useEffect(() => { if (location.hash) { - const element = document.querySelector(location.hash); + const element = document.querySelector(location.hash) if (element) { - element.scrollIntoView({ behavior: "smooth" }); + element.scrollIntoView({ behavior: "smooth" }) } } - }, [location]); - // State untuk menyimpan indeks pertanyaan yang sedang dibuka - // Jika tidak ada pertanyaan yang terbuka, nilai adalah null - const [openQuestion, setOpenQuestion] = useState(null); + }, [location]) + + const [openQuestion, setOpenQuestion] = useState(null) - // 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); - }; + setOpenQuestion(openQuestion === index ? null : index) + } - // Data FAQ yang berisi array objek dengan pertanyaan dan jawaban const faqData = [ { question: "Apa itu Rekan AI?", @@ -119,11 +130,33 @@ const FAQ = () => {

), }, - ]; + ] + + // Animation variants for the container + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.5, + }, + }, + } + + // Animation variants for each FAQ item + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 1, + }, + }, + } return ( -
- {/* Judul halaman FAQ */} +

Frequently Asked Questions @@ -133,36 +166,38 @@ const FAQ = () => {

- {/* Bagian FAQ */} -
+ {faqData.map((item, index) => ( -
- {/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion + onClick={() => toggleQuestion(index)} > {item.question} - {openQuestion === index ? "–" : "+"} {/* Tampilkan tanda buka atau tutup */} + {openQuestion === index ? "–" : "+"}
- {/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */} {openQuestion === index && (
{item.answer}
)} -
+ ))} -
+
- ); -}; + ) +} -export default FAQ; +export default FAQ diff --git a/src/components/contact/FormSection.jsx b/src/components/contact/FormSection.jsx index 7fdd515..72963db 100644 --- a/src/components/contact/FormSection.jsx +++ b/src/components/contact/FormSection.jsx @@ -1,13 +1,28 @@ +"use client" -import { img10 } from "./asset" -import ReCAPTCHA from "react-google-recaptcha" -import useRecaptcha from "./Recaptcha/useRecaptcha" -import { useLocation } from "react-router-dom" import { useEffect } from "react" +import { useLocation } from "react-router-dom" +import ReCAPTCHA from "react-google-recaptcha" +import { motion, useAnimation } from "framer-motion" +import { useInView } from "react-intersection-observer" +import useRecaptcha from "./Recaptcha/useRecaptcha" +import { img10 } from "./asset" const ContactForm = () => { const { capchaToken, handleRecaptcha } = useRecaptcha() const location = useLocation() + const controls = useAnimation() + const [ref, inView] = useInView({ + threshold: 0.1, // Trigger when 10% of the element is in view + }) + + useEffect(() => { + if (inView) { + controls.start("visible") + } else { + controls.start("hidden") + } + }, [controls, inView]) useEffect(() => { if (location.hash) { @@ -18,6 +33,16 @@ const ContactForm = () => { } }, [location]) + const textVariants = { + hidden: { opacity: 0, x: -50 }, + visible: { opacity: 1, x: 0, transition: { duration: 0.8, ease: "easeOut" } }, + } + + const formVariants = { + hidden: { opacity: 0, y: 50 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }, + } + return (
{ backgroundPosition: "center", backgroundRepeat: "no-repeat", }} + ref={ref} >
{/* Left Section */} -
+

Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin

@@ -39,10 +70,10 @@ 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 */} -
+

Hubungi Tim Terbaik Kami @@ -56,6 +87,7 @@ const ContactForm = () => { type="text" placeholder="Masukkan nama Anda" required + maxLength={50} className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5" />

@@ -65,6 +97,7 @@ const ContactForm = () => { type="tel" placeholder="Masukkan nomor telepon Anda" required + maxLength={20} className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5" pattern="[0-9]*" onInput={(e) => { @@ -85,6 +118,7 @@ const ContactForm = () => { @@ -126,7 +160,7 @@ const ContactForm = () => {
-
+
) diff --git a/src/components/solusi/CardCorporate/CardCorporate.jsx b/src/components/solusi/CardCorporate/CardCorporate.jsx index 24cb5c6..0242b70 100644 --- a/src/components/solusi/CardCorporate/CardCorporate.jsx +++ b/src/components/solusi/CardCorporate/CardCorporate.jsx @@ -1,5 +1,36 @@ +import { motion } from "framer-motion"; +import { useEffect, useState, useRef } from "react"; import { CardCp1, CardCp2, CardCp3 } from "../asset"; +const useIntersectionObserver = (options = {}) => { + const [isIntersecting, setIsIntersecting] = useState(false); + const ref = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + setIsIntersecting(entry.isIntersecting); + }, + { + threshold: 0.5, + ...options, + } + ); + + if (ref.current) { + observer.observe(ref.current); + } + + return () => { + if (ref.current) { + observer.unobserve(ref.current); + } + }; + }, [options]); + + return [ref, isIntersecting]; +}; + export default function FeatureCards() { const features = [ { @@ -24,22 +55,36 @@ export default function FeatureCards() { return (
-

- Dengan solusi terintegrasi, #Rekan AI, membantu perusahaan tetap unggul dan adaptif di tengah persaingan global. -

+ + Dengan solusi terintegrasi, #Rekan AI, membantu perusahaan tetap unggul dan adaptif di tengah persaingan global. + +
- {features.map((feature, index) => ( -
-
- {feature.title} -
-

{feature.title}

-

{feature.description}

-
- ))} + {features.map((feature, index) => { + const [ref, isIntersecting] = useIntersectionObserver(); + return ( + +
+ {feature.title} +
+

{feature.title}

+

{feature.description}

+ + ); + })}
); diff --git a/src/components/solusi/CardPersonal/CardPersonal.jsx b/src/components/solusi/CardPersonal/CardPersonal.jsx index 455451c..86e26c0 100644 --- a/src/components/solusi/CardPersonal/CardPersonal.jsx +++ b/src/components/solusi/CardPersonal/CardPersonal.jsx @@ -1,5 +1,36 @@ +import { motion } from "framer-motion"; +import { useEffect, useState, useRef } from "react"; import { card1, card2, card3 } from "../asset"; +const useIntersectionObserver = (options = {}) => { + const [isIntersecting, setIsIntersecting] = useState(false); + const ref = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + setIsIntersecting(entry.isIntersecting); + }, + { + threshold: 0.5, + ...options, + } + ); + + if (ref.current) { + observer.observe(ref.current); + } + + return () => { + if (ref.current) { + observer.unobserve(ref.current); + } + }; + }, [options]); + + return [ref, isIntersecting]; +}; + export default function FeatureCards() { const features = [ { @@ -24,23 +55,37 @@ export default function FeatureCards() { return (
-

+ Dengan #Rekan AI, Anda bisa menghemat waktu, meningkatkan produktivitas, dan mendapatkan solusi yang benar-benar relevan dengan kebutuhan Anda. -

+ +
- {features.map((feature, index) => ( -
-
- {feature.title} -
-

{feature.title}

-

{feature.description}

-
- ))} + {features.map((feature, index) => { + const [ref, isIntersecting] = useIntersectionObserver(); + return ( + +
+ {feature.title} +
+

{feature.title}

+

{feature.description}

+ + ); + })}
); -} \ No newline at end of file +} diff --git a/src/components/solusi/CardStartup/CardStartup.jsx b/src/components/solusi/CardStartup/CardStartup.jsx index 4b58cc5..8488d31 100644 --- a/src/components/solusi/CardStartup/CardStartup.jsx +++ b/src/components/solusi/CardStartup/CardStartup.jsx @@ -1,5 +1,36 @@ +import { motion } from "framer-motion"; +import { useEffect, useState, useRef } from "react"; import { CardStart1, CardStart2, CardStart3 } from "../asset"; +const useIntersectionObserver = (options = {}) => { + const [isIntersecting, setIsIntersecting] = useState(false); + const ref = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + setIsIntersecting(entry.isIntersecting); + }, + { + threshold: 0.5, + ...options, + } + ); + + if (ref.current) { + observer.observe(ref.current); + } + + return () => { + if (ref.current) { + observer.unobserve(ref.current); + } + }; + }, [options]); + + return [ref, isIntersecting]; +}; + export default function FeatureCards() { const features = [ { @@ -24,23 +55,36 @@ export default function FeatureCards() { return (
-

+ Bersama #Rekan AI, Startup lebih produktif, efisien, dan siap bersaing di era digital. -

+
- {features.map((feature, index) => ( -
-
- {feature.title} -
-

{feature.title}

-

{feature.description}

-
- ))} + {features.map((feature, index) => { + const [ref, isIntersecting] = useIntersectionObserver(); + return ( + +
+ {feature.title} +
+

{feature.title}

+

{feature.description}

+ + ); + })}
); -} \ No newline at end of file +} diff --git a/src/components/solusi/HeadCorporate/HeadCorporate.jsx b/src/components/solusi/HeadCorporate/HeadCorporate.jsx index b1a966b..bd6dc7b 100644 --- a/src/components/solusi/HeadCorporate/HeadCorporate.jsx +++ b/src/components/solusi/HeadCorporate/HeadCorporate.jsx @@ -1,34 +1,53 @@ import { Link } from "react-router-dom"; import { component11, wagreen, hc } from "../asset"; +import { motion } from "framer-motion"; +import { useInView } from "react-intersection-observer"; + export default function HeadCorporate() { + const options = { triggerOnce: false, threshold: 0.2 }; + const { ref: sectionRef, inView: sectionInView } = useInView(options); + const { ref: textRef, inView: textInView } = useInView(options); + const { ref: buttonRef, inView: buttonInView } = useInView(options); + return ( -
+
{/* Left Column */} -
- {/* Logo and Tagline */} -
+ + {/* Logo and Tagline */} +
Logo - # Solusi Corporate Business + # Solusi Corporate Business
{/* Header Text */}

- Inovasi Cerdas untuk Mendorong Transformasi Bisnis Skala Besar + Inovasi Cerdas untuk Mendorong Transformasi Bisnis Skala Besar

{/* Description */}

- Rekan AI hadir sebagai mitra strategis untuk perusahaan berskala besar, menghadirkan teknologi yang mampu mengoptimalkan proses bisnis, meningkatkan keamanan data, dan mempercepat pengambilan keputusan. + Rekan AI hadir sebagai mitra strategis untuk perusahaan berskala besar, menghadirkan teknologi yang mampu mengoptimalkan proses bisnis, meningkatkan keamanan data, dan mempercepat pengambilan keputusan.

-
+ {/* Right Column - Hero Image */} -
+ Hero Illustration -
+ {/* Buttons - Ensure they come last on mobile */} -
- - - -
+ + Coba Sekarang + + +
); diff --git a/src/components/solusi/HeadPersonal/HeadPersonal.jsx b/src/components/solusi/HeadPersonal/HeadPersonal.jsx index 40f2a55..21f2bb9 100644 --- a/src/components/solusi/HeadPersonal/HeadPersonal.jsx +++ b/src/components/solusi/HeadPersonal/HeadPersonal.jsx @@ -1,14 +1,27 @@ import { component11, wagreen, start22 } from "../asset"; import { Link } from "react-router-dom"; +import { motion } from "framer-motion"; +import { useInView } from "react-intersection-observer"; export default function HeadPersonal() { + const options = { triggerOnce: false, threshold: 0.2 }; + const { ref: sectionRef, inView: sectionInView } = useInView(options); + const { ref: textRef, inView: textInView } = useInView(options); + const { ref: buttonRef, inView: buttonInView } = useInView(options); + return ( -
+
{/* Left Column */} -
+ {/* Logo and Tagline */} -
+
Logo @@ -28,10 +41,15 @@ export default function HeadPersonal() { pelajar, atau individu yang mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan teknologi yang mudah digunakan, efisien, dan dapat diandalkan.

-
+ {/* Right Column - Hero Image */} -
+ Hero Illustration -
+ {/* Buttons - Ensure they come last on mobile */} -
+ - - - - -
+ + + Coba Sekarang + + +
); diff --git a/src/components/solusi/HeadStartup/HeadStartup.jsx b/src/components/solusi/HeadStartup/HeadStartup.jsx index ec42ec6..f5bc80f 100644 --- a/src/components/solusi/HeadStartup/HeadStartup.jsx +++ b/src/components/solusi/HeadStartup/HeadStartup.jsx @@ -1,13 +1,27 @@ import { component11, wagreen, hs } from "../asset"; import { Link } from "react-router-dom"; +import { motion } from "framer-motion"; +import { useInView } from "react-intersection-observer"; + export default function HeadPersonal() { + const options = { triggerOnce: false, threshold: 0.2 }; + const { ref: sectionRef, inView: sectionInView } = useInView(options); + const { ref: textRef, inView: textInView } = useInView(options); + const { ref: buttonRef, inView: buttonInView } = useInView(options); + return ( -
+
{/* Left Column */} -
- {/* Logo and Tagline */} -
+ + {/* Logo and Tagline */} +
Logo @@ -18,17 +32,22 @@ export default function HeadPersonal() { {/* Header Text */}

- Tumbuh Lebih Cepat dengan Automasi dan Analisis yang Terjangkau + Tumbuh Lebih Cepat dengan Automasi dan Analisis yang Terjangkau

{/* Description */}

- Rekan AI hadir sebagai mitra terpercaya bagi Startup di seluruh Indonesia. Dengan solusi berbasis teknologi, kami membantu para pelaku pengembang Startup untuk bekerja lebih cerdas, mengurangi beban operasional, dan mencapai pertumbuhan yang berkelanjutan. + Rekan AI hadir sebagai mitra terpercaya bagi Startup di seluruh Indonesia. Dengan solusi berbasis teknologi, kami membantu para pelaku pengembang Startup untuk bekerja lebih cerdas, mengurangi beban operasional, dan mencapai pertumbuhan yang berkelanjutan.

-
+ {/* Right Column - Hero Image */} -
+ Hero Illustration -
+ {/* Buttons - Ensure they come last on mobile */} -
- - - -
+ + Coba Sekarang + + +
); diff --git a/src/components/solusi/MengapaCorporate/MengapaCorporate.jsx b/src/components/solusi/MengapaCorporate/MengapaCorporate.jsx index 39443fe..7d33fbc 100644 --- a/src/components/solusi/MengapaCorporate/MengapaCorporate.jsx +++ b/src/components/solusi/MengapaCorporate/MengapaCorporate.jsx @@ -1,57 +1,94 @@ -import { Link } from "react-router-dom" -import { chek2, wagreen, start33, start44, start55 } from "../asset" +import { motion } from "framer-motion"; +import { useEffect, useState } from "react"; +import { useInView } from "react-intersection-observer"; +import { Link } from "react-router-dom"; +import { chek2, wagreen, start55 } from "../asset"; + function Kenapa() { + const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 }); + return ( -
-
+
+ {/* Image Section */} -
+ Woman with Tablet -
+ {/* Text Section */} -
+

Mengapa Rekan AI untuk Corporate Business?

Rekan AI dirancang khusus untuk mendukung kebutuhan bisnis berskala besar dengan menghadirkan solusi yang dapat meningkatkan efisiensi, mempercepat proses, dan membantu pengambilan keputusan strategis. Dengan teknologi mutakhir yang fleksibel dan aman, Rekan AI menjadi mitra terpercaya dalam perjalanan transformasi digital perusahaan Anda.

-
    -
  • - Check - Standar keamanan tinggi dengan enkripsi dan sertifikasi resmi yang melindungi data perusahaan. -
    • -
  • - Check - Solusi yang fleksibel dan dapat diimplementasikan di berbagai cabang perusahaan di seluruh dunia.
    • -
  • - Check - Automasi dan integrasi sistem yang mempercepat proses bisnis dan memangkas biaya operasional.
    • +
      + {["Standar keamanan tinggi dengan enkripsi dan sertifikasi resmi yang melindungi data perusahaan.", + "Solusi yang fleksibel dan dapat diimplementasikan di berbagai cabang perusahaan di seluruh dunia.", + "Automasi dan integrasi sistem yang mempercepat proses bisnis dan memangkas biaya operasional."].map((text, index) => ( + + Check + {text} + + ))}
    -
    - + - + -
    -
-
+ + +
- ) + ); } -export default Kenapa - +export default Kenapa; \ No newline at end of file diff --git a/src/components/solusi/MengapaStartup/MengapaStartup.jsx b/src/components/solusi/MengapaStartup/MengapaStartup.jsx index 6a86a2f..0ef8eb2 100644 --- a/src/components/solusi/MengapaStartup/MengapaStartup.jsx +++ b/src/components/solusi/MengapaStartup/MengapaStartup.jsx @@ -1,59 +1,94 @@ -import { Link } from "react-router-dom" -import { chek2, wagreen, start44 } from "../asset" +import { motion } from "framer-motion"; +import { useEffect, useState } from "react"; +import { useInView } from "react-intersection-observer"; +import { Link } from "react-router-dom"; +import { chek2, wagreen, start44 } from "../asset"; + function Kenapa() { - return ( -
-
- {/* Image Section */} -
- Woman with Tablet -
+ const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 }); - {/* Text Section */} -
-

Kenapa Memilih Rekan AI untuk Startup Anda?

-

- Startup adalah tulang punggung perekonomian, dan Rekan AI hadir untuk memberdayakan pelaku usaha agar dapat bersaing di era digital. Dengan solusi berbasis AI, kami membantu usaha kecil dan menengah mencapai efisiensi yang lebih baik, memperluas jangkauan pasar, dan meningkatkan kepuasan pelanggan. -

-
    -
  • - Check - Teknologi kami dirancang agar dapat diakses oleh siapa saja, tanpa memerlukan latar belakang teknis. -
    • -
  • - Check - Rekan AI menawarkan solusi dengan harga yang sesuai untuk Startup. -
    • -
  • - Check - Kami membantu Anda menciptakan peluang baru dengan teknologi yang mendukung setiap tahap perkembangan bisnis. -
    • -
+ return ( +
+ + {/* Image Section */} + + Woman with Tablet + -
- - - - -
-
-
-
- ) + {/* Text Section */} + +

Kenapa Memilih Rekan AI untuk Startup Anda?

+

+ Startup adalah tulang punggung perekonomian, dan Rekan AI hadir untuk memberdayakan pelaku usaha agar dapat bersaing di era digital. Dengan solusi berbasis AI, kami membantu usaha kecil dan menengah mencapai efisiensi yang lebih baik, memperluas jangkauan pasar, dan meningkatkan kepuasan pelanggan. +

+
    + {["Teknologi kami dirancang agar dapat diakses oleh siapa saja, tanpa memerlukan latar belakang teknis.", + "Rekan AI menawarkan solusi dengan harga yang sesuai untuk Startup.", + "Kami membantu Anda menciptakan peluang baru dengan teknologi yang mendukung setiap tahap perkembangan bisnis."].map((text, index) => ( + + Check + {text} + + ))} +
+ + + + WhatsApp Icon + Konsultasi Gratis + + + + Coba Sekarang + + + + + +
+ ); } -export default Kenapa - +export default Kenapa; diff --git a/src/components/solusi/MengapapPersonal/MengapapPersonal.jsx b/src/components/solusi/MengapapPersonal/MengapapPersonal.jsx index ba0b6ff..50ad79f 100644 --- a/src/components/solusi/MengapapPersonal/MengapapPersonal.jsx +++ b/src/components/solusi/MengapapPersonal/MengapapPersonal.jsx @@ -1,62 +1,97 @@ -import { chek2, wagreen, start33 } from "../asset" -import { Link } from "react-router-dom" +import { motion } from "framer-motion"; +import { useEffect, useState } from "react"; +import { useInView } from "react-intersection-observer"; +import { chek2, wagreen, start33 } from "../asset"; +import { Link } from "react-router-dom"; + function Kenapa() { + const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 }); + return ( -
-
+
+ {/* Image Section */} -
+ Woman with Tablet -
+ {/* Text Section */} -
+

Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?

-

+

Rekan AI hadir untuk memberikan kemudahan dan efisiensi bagi individu yang ingin memanfaatkan kecerdasan buatan dalam kehidupan sehari-hari. Apakah Anda ingin meningkatkan produktivitas, mengelola data dengan aman, atau membuat keputusan yang lebih cerdas, Rekan AI adalah solusi tepat yang dirancang khusus untuk Anda.

-
    -
  • - Check - Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa memerlukan keahlian teknis. -
    • -
  • - Check - Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi Anda tetap terlindungi. -
    • -
  • - Check - Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan dengan kebutuhan individu Anda. -
    • +
      + {["Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa memerlukan keahlian teknis.", + "Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi Anda tetap terlindungi.", + "Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan dengan kebutuhan individu Anda."].map((text, index) => ( + + Check + {text} + + ))}
    -
    - + - + -
    -
-
+ + +
- ) + ); } -export default Kenapa - +export default Kenapa; \ No newline at end of file diff --git a/src/components/solusi/TransformasiCorpo/TransformasiCorpo.jsx b/src/components/solusi/TransformasiCorpo/TransformasiCorpo.jsx index a116ea7..c1afd99 100644 --- a/src/components/solusi/TransformasiCorpo/TransformasiCorpo.jsx +++ b/src/components/solusi/TransformasiCorpo/TransformasiCorpo.jsx @@ -1,9 +1,17 @@ import { Link } from "react-router-dom"; import { wagreen } from "../asset"; +import { motion } from "framer-motion"; + function Transformasi() { return ( <> -
+ {/* Tagline Section */}
@@ -15,26 +23,33 @@ function Transformasi() {

- Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih cerdas, efisien, dan kompetitif. - - + Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih cerdas, efisien, dan kompetitif.

+ -
-
- + - + + Coba Sekarang + -
+ - ); } diff --git a/src/components/solusi/TransformasiCorporate/TransformasiCorporate.jsx b/src/components/solusi/TransformasiCorporate/TransformasiCorporate.jsx deleted file mode 100644 index 1c57299..0000000 --- a/src/components/solusi/TransformasiCorporate/TransformasiCorporate.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react"; -import { wagreen } from "../asset"; -import { Link } from "react-router-dom"; -function MasaDepan() { - return ( - <> -
- {/* Tagline Section */} -
-
- - #Rekan AI - -

- Transformasi Digital Anda Dimulai di Sini -

-
-

- Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih cerdas, efisien, dan kompetitif. -

-
- - -
- {/* Button Section */} -
- - - - -
- - - - ); -} - -export default MasaDepan; diff --git a/src/components/solusi/TransformasiPersonal/TransformasiPersonal.jsx b/src/components/solusi/TransformasiPersonal/TransformasiPersonal.jsx index 569fce6..9289beb 100644 --- a/src/components/solusi/TransformasiPersonal/TransformasiPersonal.jsx +++ b/src/components/solusi/TransformasiPersonal/TransformasiPersonal.jsx @@ -1,9 +1,17 @@ import { wagreen } from "../asset"; import { Link } from "react-router-dom"; +import { motion } from "framer-motion"; + function Transformasi() { return ( <> -
+ {/* Tagline Section */}
@@ -24,22 +32,31 @@ function Transformasi() {

+ -
-
- + - + + Coba Sekarang + -
+ - ); } -export default Transformasi; +export default Transformasi; \ No newline at end of file diff --git a/src/components/solusi/TransformasiStart/TransformasiStart.jsx b/src/components/solusi/TransformasiStart/TransformasiStart.jsx index def22cc..a744c6c 100644 --- a/src/components/solusi/TransformasiStart/TransformasiStart.jsx +++ b/src/components/solusi/TransformasiStart/TransformasiStart.jsx @@ -1,9 +1,17 @@ import { Link } from "react-router-dom"; import { wagreen } from "../asset"; +import { motion } from "framer-motion"; + function Transformasi() { return ( <> -
+ {/* Tagline Section */}
@@ -24,21 +32,30 @@ function Transformasi() {

+ -
-
- + - + + Coba Sekarang + -
+ - ); }