amnannn
/
rekan_ai
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: amnannn:228c6396e357906fa425a4bd41f6abd620afa0bd
Branches Tags
amnannn:main
amnannn:carls2
amnannn:solusi
amnannn:carls1
...
compare: amnannn:e9dc997830fe835dff2ddf837120558bfb595f68
Branches Tags
amnannn:carls2
amnannn:main
amnannn:solusi
amnannn:carls1

12 Commits
228c6396e3 ... e9dc997830

Author SHA1 Message Date
Yogamnan e9dc997830 add handle search 2025-02-19 14:55:24 +07:00
Yogamnan aa566e188a Merge branch 'carls2' of https://git.allbestsistem.com/amnannn/rekan_ai 2025-02-19 14:00:13 +07:00
Yogamnan c341cce082 before merge 2025-02-19 13:59:55 +07:00
Carls2320 b6687cf500 sisa header 2025-02-19 13:26:57 +07:00
Carls2320 9d420f3b05 animasi 90% 2025-02-19 10:40:00 +07:00
Carls2320 b5b04505b9 sisa animasi 2025-02-17 13:48:26 +07:00
Carls2320 331c459b87 awal 2025-02-17 13:39:31 +07:00
Carls2320 7c28f2d0bf Merge branch 'main' of https://git.allbestsistem.com/amnannn/rekan_ai into carls2 2025-02-17 13:38:41 +07:00
Carls2320 f054fe56c3 fresssss 2025-02-17 13:28:07 +07:00
Carls2320 17440450fd update 50% 2025-02-17 09:28:35 +07:00
Carls2320 7d21ab9c94 done token recaptcha 2025-02-14 14:08:51 +07:00
Carls2320 d4749582c1 done recaptcha and solusi bisnis 2025-02-14 02:37:44 +07:00
27 changed files with 1098 additions and 467 deletions
Show Stats Expand all files Collapse all files

2
src/components/beranda/Banner.jsx
View File

@ -113,4 +113,4 @@ function Banner() {
)
}
export default Banner
export default Banner

38
src/components/beranda/Header.jsx
View File

@ -7,6 +7,28 @@ const Header = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isSolusiOpen, setIsSolusiOpen] = useState(false);
const [isProdukOpen, setIsProdukOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("")
const handleSearch = (e) => {
setSearchQuery(e.target.value)
}
const handleSearchSubmit = (e) => {
e.preventDefault()
const query = searchQuery.toLowerCase()
// Solutions mapping
if (query.includes("solusi personal") || query.includes("personal")) {
navigate("/SolusiPersonal")
} else if (query.includes("solusi startup") || query.includes("startup")) {
navigate("/SolusiStartup")
} else if (query.includes("solusi corporate") || query.includes("corporate") || query.includes("business")) {
navigate("/SolusiCorporate")
}
window.scrollTo({ top: 0, behavior: "smooth" })
setSearchQuery("") // Clear search after submission
}
// Referensi untuk mendeteksi klik di luar dropdown
const solusiRef = useRef(null);
@ -22,6 +44,7 @@ const Header = () => {
setIsProdukOpen(false);
}
}
// Tambahkan event listener saat dropdown terbuka
document.addEventListener("mousedown", handleClickOutside);
@ -72,7 +95,7 @@ const Header = () => {
</button>
{isProdukOpen && (
<div className="absolute left-[500px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
<div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1729px]">
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
<div className="flex justify-center gap-8">
{/* HR */}
@ -165,7 +188,7 @@ const Header = () => {
</button>
{isSolusiOpen && (
<div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
<div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1729px]">
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
<div className="flex justify-center gap-8">
{/* Personal */}
@ -235,16 +258,21 @@ const Header = () => {
{/* Search Bar */}
<div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
<div className="relative w-full">
<form onSubmit={handleSearchSubmit} className="relative w-full">
<input
type="text"
placeholder="Pencarian..."
value={searchQuery}
onChange={handleSearch}
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
/>
<button className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]">
<button
type="submit"
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]"
>
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
</button>
</div>
</form>
</div>
{/* Konsultasi Button */}

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

@ -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 (
<div className="w-full overflow-hidden" id="Home">
<div className="container mx-auto px-4 lg:px-12">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16" id="hero-section">
{/* Left Section */}
<div className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none">
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
transition={{ duration: 0.8 }}
className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none"
>
<img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto lg:mx-0" />
<h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
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.
</p>
</div>
</motion.div>
{/* Right Section - Adjust order for mobile */}
<div className="relative w-full aspect-square lg:aspect-auto md:w-[650px] md:h-[680px] lg:h-[600px] order-2 lg:order-none">
{/* Right Section */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: inView ? 1 : 0, scale: inView ? 1 : 0.8 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="relative w-full aspect-square lg:aspect-auto md:w-[650px] md:h-[680px] lg:h-[600px] order-2 lg:order-none"
>
<img src={homeImg} alt="Rekan AI Illustration" className="object-contain" />
</div>
</motion.div>
{/* Buttons - Ensure they come last on mobile */}
<div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
{/* Buttons */}
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: inView ? 1 : 0, y: inView ? 0 : 50 }}
transition={{ duration: 0.8, delay: 0.6 }}
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
id="button-section"
>
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
Konsultasi Gratis
</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">
<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>
</motion.div>
</div>
</div>
</div>

115
src/components/beranda/Kenapa.jsx
View File

@ -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 (
<div className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
<div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={sectionInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
>
{/* Decorative Circles */}
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
<img src={circle1} alt="Circle 1" className="w-auto h-auto" />
<img src={circle2} alt="Circle 2" className="w-auto h-auto" />
<motion.img
src={circle1} alt="Circle 1"
className="w-auto h-auto"
initial={{ opacity: 0, scale: 0.5 }}
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.6, delay: 0.3 }}
/>
<motion.img
src={circle2} alt="Circle 2"
className="w-auto h-auto"
initial={{ opacity: 0, scale: 0.5 }}
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.6, delay: 0.5 }}
/>
</div>
{/* Image Section */}
<div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
<motion.div
ref={textRef}
className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
initial={{ opacity: 0, x: -50 }}
animate={textInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8 }}
>
<img
src={imgLeft}
alt="Woman with Tablet"
className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
/>
</div>
</motion.div>
{/* Text Section */}
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left">
<motion.div
ref={listRef}
className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"
initial={{ opacity: 0, x: 50 }}
animate={listInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8, delay: 0.3 }}
>
<h2 className="text-2xl md:text-[28px] font-semibold text-customBlack">Kenapa Harus Rekan AI?</h2>
<p className="text-customBlack mt-4 text-sm md:leading-7 md:text-[18px]">
<p className="text-customBlack mt-4 text-sm md:leading-7 md:text-[18px]">
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.
</p>
<ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[90%] md:text-base text-customBlack font-medium">
<li className="flex items-center">
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.
</li>
<li className="flex items-center">
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Analisis data real-time untuk pengambilan keputusan yang lebih tepat.
</li>
<li className="flex items-center">
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.
</li>
<li className="flex items-center">
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data.
</li>
{[
"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) => (
<motion.li
key={index}
className="flex items-center"
initial={{ opacity: 0, x: -20 }}
animate={listInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.6, delay: index * 0.2 }}
>
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
{text}
</motion.li>
))}
</ul>
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
<div ref={buttonRef} className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
<motion.button
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5, delay: 0.8 }}
>
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
Konsultasi Gratis
</button>
</motion.button>
<Link to={"/Contact#form"}>
<button
className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
<motion.button
className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5, delay: 1 }}
>
Coba Sekarang
</button>
</motion.button>
</Link>
</div>
</div>
</div>
</motion.div>
</motion.div>
</div>
);
}

68
src/components/beranda/MasaDepan.jsx
View File

@ -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 (
<>
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3">
{/* Tagline Section */}
{/* Tagline Section */}
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3"
>
<div className="mb-5">
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
<span className="flex items-center justify-center bg-[#CA2B68] text-white font-semibold text-2xl rounded-2xl w-48 h-12">
<motion.span
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 1.2, ease: "easeOut" }}
className="flex items-center justify-center bg-[#CA2B68] text-white font-semibold text-2xl rounded-2xl w-48 h-12"
>
#Rekan AI
</span>
<h1 className="text-2xl sm:text-[32px] font-semibold text-[#212121]">
</motion.span>
<motion.h1
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
className="text-2xl sm:text-[32px] font-semibold text-[#212121]"
>
Masa Depan Bisnis, Dimulai Hari Ini
</h1>
</motion.h1>
</div>
<p className="text-base sm:text-xl text-customBlack-600 md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
<motion.p
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut", delay: 0.3 }}
className="text-base sm:text-xl text-customBlack-600 md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0"
>
Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih
cerdas, efisien, dan kompetitif.
</p>
</motion.p>
</div>
</motion.div>
</div>
{/* Button Section */}
<div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
viewport={{ once: false, amount: 0.2 }}
className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
>
<motion.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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
>
<img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
Konsultasi Gratis
</button>
</motion.button>
<Link to={"/Contact#form"}>
<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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
<motion.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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
>
Coba Sekarang
</button>
</motion.button>
</Link>
</div>
</motion.div>
</>
);
}

52
src/components/beranda/Mendukung.jsx
View File

@ -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 (
<div className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2">
<motion.div
ref={ref}
initial={{ opacity: 0 }}
animate={inView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 1 }}
className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0"
id="solusi2"
>
{/* Left Content */}
<div className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1">
<motion.div
ref={ref}
initial={{ x: -50, opacity: 0 }}
animate={inView ? { x: 0, opacity: 1 } : { x: -50, opacity: 0 }}
transition={{ duration: 1 }}
className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1"
>
<p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
Solusi Mendukung Bisnis di Setiap
<br />
@ -22,8 +39,15 @@ function Mendukung() {
</p>
<div className="flex flex-col md:flex-row justify-center md:justify-between gap-6">
{items.map((item) => (
<div key={item.id} className="flex flex-col items-center w-full md:w-auto md:mt-5">
{items.map((item, index) => (
<motion.div
key={item.id}
ref={ref}
initial={{ y: 50, opacity: 0 }}
animate={inView ? { y: 0, opacity: 1 } : { y: 50, opacity: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="flex flex-col items-center w-full md:w-auto md:mt-5"
>
{/* Image */}
<img
src={item.image}
@ -34,19 +58,23 @@ function Mendukung() {
<p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[190px] h-10 flex items-center justify-center text-sm font-bold mt-4">
{item.title}
</p>
</div>
</motion.div>
))}
</div>
</div>
</motion.div>
{/* Right Content */}
<div className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2">
<motion.div
ref={ref}
initial={{ x: 50, opacity: 0 }}
animate={inView ? { x: 0, opacity: 1 } : { x: 50, opacity: 0 }}
transition={{ duration: 1 }}
className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2"
>
<img src={imgRight} alt="Image Right" className="w-auto h-auto" />
</div>
</div>
</motion.div>
</motion.div>
);
}
export default Mendukung;
export default Mendukung;

112
src/components/beranda/Solusi.jsx
View File

@ -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 (
<section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
<div className="text-center mb-12 md:-mt-48 px-4">
<div className="flex flex-col md:flex-row items-center justify-center gap-4">
<motion.div
className="flex flex-col md:flex-row items-center justify-center gap-4"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }}
>
<h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
<span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
#Rekan AI
</span>
</div>
<p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] mx-auto text-center">
</motion.div>
<motion.p
className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] mx-auto text-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5, duration: 1 }}
>
Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai
aspek.
</p>
</motion.p>
</div>
<div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8 px-4 md:px-6 lg:px-8">
{cards.map((card, index) => (
<div
key={index}
className="bg-customWhite rounded-xl border p-4 md:p-6 flex flex-col items-center w-full max-w-[350px] mx-auto min-h-[500px]"
>
<img
src={card.image || "/placeholder.svg"}
alt={`Card ${index + 1}`}
className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
/>
<p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
{card.description}
</p>
<ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
{card.features.map((feature, i) => (
<li key={i} className="flex items-center gap-2 text-sm md:text-base">
<img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
</li>
))}
</ul>
<button className="w-full h-12 md:h-14 bg-white border border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300 text-sm md:text-base">
Selengkapnya <span>&rarr;</span>
</button>
</div>
))}
{cards.map((card, index) => {
const [ref, isIntersecting] = useIntersectionObserver({
threshold: 0.5, // Set threshold when 50% of the element is visible
})
return (
<motion.div
key={index}
ref={ref}
className="bg-customWhite rounded-xl border p-4 md:p-6 flex flex-col items-center w-full max-w-[350px] mx-auto min-h-[500px]"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: isIntersecting ? 1 : 0, y: isIntersecting ? 0 : 20 }}
transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
>
<img
src={card.image || "/placeholder.svg"}
alt={`Card ${index + 1}`}
className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
/>
<p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
{card.description}
</p>
<ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
{card.features.map((feature, i) => (
<li key={i} className="flex items-center gap-2 text-sm md:text-base">
<img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
</li>
))}
</ul>
<button className="w-full h-12 md:h-14 bg-white border border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300 text-sm md:text-base">
Selengkapnya <span>&rarr;</span>
</button>
</motion.div>
)
})}
</div>
</section>
)
}
export default Solusi

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

@ -1,40 +1,47 @@
import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
import { motion } from "framer-motion";
const BottomCTA = () => {
return (
<section className="w-full bg-white text-center py-10 mb-[113px]">
{/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
<motion.section
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
viewport={{ once: false, amount: 0.2 }}
className="w-full bg-white text-center py-10 mb-[113px]"
>
<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">
{/* 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]">
<h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
<span className="bg-[#dc0168] 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>
</div>
{/* 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 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>
{/* 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]">
<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
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
</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">
</motion.button>
<motion.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
</button>
</motion.button>
</div>
</section>
</motion.section>
);
};

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

@ -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 = () => {
</p>
),
},
];
]
// 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 (
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq">
{/* Judul halaman FAQ */}
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq" ref={ref}>
<div className="mt-[111px]">
<h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
Frequently Asked Questions
@ -133,36 +166,38 @@ const FAQ = () => {
</h2>
</div>
{/* Bagian FAQ */}
<div className="space-y-[22px] mb-[110px] mt-[60px]">
<motion.div
className="space-y-[22px] mb-[110px] mt-[60px]"
variants={containerVariants}
initial="hidden"
animate={controls}
>
{faqData.map((item, index) => (
<div
<motion.div
key={index}
className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden"
variants={itemVariants}
>
{/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
<div
className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
// Jika pertanyaan ini dibuka, beri highlight
openQuestion === index ? "text-blue-500" : ""
}`}
onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
onClick={() => toggleQuestion(index)}
>
<span className="font-[550]">{item.question}</span>
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span>
</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>
</motion.div>
))}
</div>
</motion.div>
</div>
);
};
)
}
export default FAQ;
export default FAQ

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

@ -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 (
<div
className="relative flex min-h-screen w-full items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
@ -28,10 +53,16 @@ const ContactForm = () => {
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
ref={ref}
>
<div className="container mx-auto flex flex-col lg:flex-row items-center justify-center gap-8 py-16 px-4 lg:px-8">
{/* Left Section */}
<div className="w-full md:mt-[-650px] md:ml-14 lg:w-[50%] space-y-6">
<motion.div
className="w-full md:mt-[-650px] md:ml-14 lg:w-[50%] space-y-6"
initial="hidden"
animate={controls}
variants={textVariants}
>
<h2 className="text-2xl md:text-[32px] font-[550] leading-tight md:leading-[48px] tracking-[0.005em] 2xl:text-[36px] 2xl:leading-[52px]">
Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
</h2>
@ -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!
</p>
</div>
</motion.div>
{/* Form Section */}
<div className="w-full lg:w-7/12 xl:w-6/12">
<motion.div className="w-full lg:w-7/12 xl:w-6/12" initial="hidden" animate={controls} variants={formVariants}>
<div className="bg-white text-[#212121] rounded-[25px] p-6 md:p-[40px] border-[8px] border-[#F086A4] 2xl:px-[60px] 2xl:py-[50px] max-w-[794px] mx-auto">
<h3 className="text-2xl md:text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
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"
/>
</div>
@ -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 = () => {
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
<input
type="text"
maxLength={50}
placeholder="Masukkan nama organisasi/perusahaan Anda"
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
/>
@ -102,7 +136,7 @@ const ContactForm = () => {
</select>
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
<svg
className="w-6 text-[#5B59E8]"
className="w-8 mt-7 text-[#5B59E8]"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
@ -126,7 +160,7 @@ const ContactForm = () => {
</button>
</form>
</div>
</div>
</motion.div>
</div>
</div>
)

BIN
src/components/contact/asset/Dribbble-Light-Preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 B

75
src/components/solusi/CardCorporate/CardCorporate.jsx
View File

@ -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 (
<div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
<h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
Dengan solusi terintegrasi, <span className="text-[#CA2B68]">#Rekan AI</span>, membantu perusahaan tetap unggul dan adaptif di tengah persaingan global.
</h2>
<motion.h2
className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 1 }}
>
Dengan solusi terintegrasi, <span className="text-[#CA2B68]">#Rekan AI</span>, membantu perusahaan tetap unggul dan adaptif di tengah persaingan global.
</motion.h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
{features.map((feature, index) => (
<div
key={index}
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
>
<div className="mb-4 relative w-16 h-16">
<img src={feature.icon} alt={feature.title} className="object-contain" />
</div>
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
</div>
))}
{features.map((feature, index) => {
const [ref, isIntersecting] = useIntersectionObserver();
return (
<motion.div
key={index}
ref={ref}
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
initial={{ opacity: 0, y: 20 }}
animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
>
<div className="mb-4 relative w-16 h-16">
<img src={feature.icon} alt={feature.title} className="object-contain" />
</div>
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
</motion.div>
);
})}
</div>
</div>
);

75
src/components/solusi/CardPersonal/CardPersonal.jsx
View File

@ -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 (
<div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
<h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
<motion.h2
className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 1 }}
>
Dengan <span className="text-[#CA2B68]">#Rekan AI</span>, Anda bisa menghemat waktu, meningkatkan produktivitas, dan mendapatkan solusi yang benar-benar relevan dengan kebutuhan Anda.
</h2>
</motion.h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
{features.map((feature, index) => (
<div
key={index}
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
>
<div className="mb-4 relative w-16 h-16">
<img src={feature.icon} alt={feature.title} className="object-contain" />
</div>
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
</div>
))}
{features.map((feature, index) => {
const [ref, isIntersecting] = useIntersectionObserver();
return (
<motion.div
key={index}
ref={ref}
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
initial={{ opacity: 0, y: 20 }}
animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
>
<div className="mb-4 relative w-16 h-16">
<img src={feature.icon} alt={feature.title} className="object-contain" />
</div>
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
</motion.div>
);
})}
</div>
</div>
);
}
}

74
src/components/solusi/CardStartup/CardStartup.jsx
View File

@ -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 (
<div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
<h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
<motion.h2
className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 1 }}
>
Bersama <span className="text-[#CA2B68]">#Rekan AI</span>, Startup lebih produktif, efisien, dan siap bersaing di era digital.
</h2>
</motion.h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
{features.map((feature, index) => (
<div
key={index}
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
>
<div className="mb-4 relative w-16 h-16">
<img src={feature.icon} alt={feature.title} className="object-contain" />
</div>
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
</div>
))}
{features.map((feature, index) => {
const [ref, isIntersecting] = useIntersectionObserver();
return (
<motion.div
key={index}
ref={ref}
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
initial={{ opacity: 0, y: 20 }}
animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
>
<div className="mb-4 relative w-16 h-16">
<img src={feature.icon} alt={feature.title} className="object-contain" />
</div>
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
</motion.div>
);
})}
</div>
</div>
);
}
}

67
src/components/solusi/HeadCorporate/HeadCorporate.jsx
View File

@ -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 (
<div className="container mx-auto px-4 lg:px-6">
<div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
{/* Left Column */}
<div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
{/* Logo and Tagline */}
<div className="flex items-center lg:justify-start">
<motion.div
ref={textRef}
className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
initial={{ opacity: 0, x: -50 }}
animate={textInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8 }}
>
{/* Logo and Tagline */}
<div className="flex items-center lg:justify-start">
<span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
<img src={component11} alt="Logo" width={53.52} height={43} />
</span>
<span className="inline-flex items-center ml-[17px] justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
# Solusi Corporate Business
# Solusi Corporate Business
</span>
</div>
{/* Header Text */}
<h1 className="text-[32px] lg:text-[30px] text-customBlack font-semibold mt-7">
Inovasi Cerdas untuk Mendorong Transformasi Bisnis Skala Besar
Inovasi Cerdas untuk Mendorong Transformasi Bisnis Skala Besar
</h1>
{/* Description */}
<p className="text-[20px] lg:text-[18px] text-customBlack mt-7">
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.
</p>
</div>
</motion.div>
{/* Right Column - Hero Image */}
<div className="order-2 lg:order-none flex justify-center">
<motion.div
className="order-2 lg:order-none flex justify-center"
initial={{ opacity: 0, x: 50 }}
animate={textInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8 }}
>
<img
src={hc}
alt="Hero Illustration"
@ -36,21 +55,31 @@ export default function HeadCorporate() {
height={743}
className="w-full h-auto md:w-[600px] md:h-[600px]"
/>
</div>
</motion.div>
{/* Buttons - Ensure they come last on mobile */}
<div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
<motion.div
ref={buttonRef}
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
initial={{ opacity: 0, y: 50 }}
animate={buttonInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
>
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
Konsultasi Gratis
</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>
<motion.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"
initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5 }}
>
Coba Sekarang
</motion.button>
</Link>
</motion.div>
</div>
</div>
);

57
src/components/solusi/HeadPersonal/HeadPersonal.jsx
View File

@ -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 (
<div className="container mx-auto px-4 lg:px-6">
<div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
{/* Left Column */}
<div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
<motion.div
ref={textRef}
className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
initial={{ opacity: 0, x: -50 }}
animate={textInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8 }}
>
{/* Logo and Tagline */}
<div className="flex items-center lg:justify-start">
<div className="flex items-center lg:justify-start">
<span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
<img src={component11} alt="Logo" width={53.52} height={43} />
</span>
@ -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.
</p>
</div>
</motion.div>
{/* Right Column - Hero Image */}
<div className="order-2 lg:order-none flex justify-center">
<motion.div
className="order-2 lg:order-none flex justify-center"
initial={{ opacity: 0, x: 50 }}
animate={textInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8 }}
>
<img
src={start22}
alt="Hero Illustration"
@ -39,22 +57,31 @@ export default function HeadPersonal() {
height={743}
className="w-full h-auto md:w-[600px] md:h-[600px]"
/>
</div>
</motion.div>
{/* Buttons - Ensure they come last on mobile */}
<div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
<motion.div
ref={buttonRef}
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
initial={{ opacity: 0, y: 50 }}
animate={buttonInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
>
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
Konsultasi Gratis
</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>
<Link to={"/Contact#form"}>
<motion.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"
initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5 }}
>
Coba Sekarang
</motion.button>
</Link>
</motion.div>
</div>
</div>
);

65
src/components/solusi/HeadStartup/HeadStartup.jsx
View File

@ -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 (
<div className="container mx-auto px-4 lg:px-6">
<div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
{/* Left Column */}
<div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
{/* Logo and Tagline */}
<div className="flex items-center lg:justify-start">
<motion.div
ref={textRef}
className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
initial={{ opacity: 0, x: -50 }}
animate={textInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8 }}
>
{/* Logo and Tagline */}
<div className="flex items-center lg:justify-start">
<span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
<img src={component11} alt="Logo" width={53.52} height={43} />
</span>
@ -18,17 +32,22 @@ export default function HeadPersonal() {
{/* Header Text */}
<h1 className="text-[32px] lg:text-[30px] text-customBlack font-semibold mt-7">
Tumbuh Lebih Cepat dengan Automasi dan Analisis yang Terjangkau
Tumbuh Lebih Cepat dengan Automasi dan Analisis yang Terjangkau
</h1>
{/* Description */}
<p className="text-[20px] lg:text-[18px] text-customBlack mt-7">
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.
</p>
</div>
</motion.div>
{/* Right Column - Hero Image */}
<div className="order-2 lg:order-none flex justify-center">
<motion.div
className="order-2 lg:order-none flex justify-center"
initial={{ opacity: 0, x: 50 }}
animate={textInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8 }}
>
<img
src={hs}
alt="Hero Illustration"
@ -36,21 +55,31 @@ export default function HeadPersonal() {
height={743}
className="w-full h-auto md:w-[600px] md:h-[600px]"
/>
</div>
</motion.div>
{/* Buttons - Ensure they come last on mobile */}
<div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
<motion.div
ref={buttonRef}
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
initial={{ opacity: 0, y: 50 }}
animate={buttonInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
>
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
Konsultasi Gratis
</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>
<motion.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"
initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5 }}
>
Coba Sekarang
</motion.button>
</Link>
</motion.div>
</div>
</div>
);

95
src/components/solusi/MengapaCorporate/MengapaCorporate.jsx
View File

@ -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 (
<div className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
<div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.8 }}
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
>
{/* Image Section */}
<div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 1 }}
className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
>
<img
src={start55 || "/placeholder.svg"}
alt="Woman with Tablet"
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
/>
</div>
</motion.div>
{/* Text Section */}
<div className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
<motion.div
initial={{ opacity: 0, x: 50 }}
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
transition={{ duration: 1, delay: 0.3 }}
className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] "
>
<h2 className="text-[30px] font-semibold">Mengapa Rekan AI untuk Corporate Business?</h2>
<p className="mt-4 text-sm md:leading-8 md:text-lg">
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.
</p>
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
<li className="flex items-center ">
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Standar keamanan tinggi dengan enkripsi dan sertifikasi resmi yang melindungi data perusahaan.
</li>
<li className="flex items-center">
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Solusi yang fleksibel dan dapat diimplementasikan di berbagai cabang perusahaan di seluruh dunia. </li>
<li className="flex items-center">
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Automasi dan integrasi sistem yang mempercepat proses bisnis dan memangkas biaya operasional. </li>
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
{["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) => (
<motion.li
key={index}
initial={{ opacity: 0, x: -30 }}
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="flex items-center"
>
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
{text}
</motion.li>
))}
</ul>
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.8, delay: 0.5 }}
className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
>
<img
src={wagreen || "/placeholder.svg"}
alt="WhatsApp Icon"
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
/>
Konsultasi Gratis
</button>
</motion.button>
<Link to={"/Contact#form"}>
<button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
>
Coba Sekarang
</button>
</motion.button>
</Link>
</div>
</div>
</div>
</motion.div>
</motion.div>
</motion.div>
</div>
)
);
}
export default Kenapa
export default Kenapa;

143
src/components/solusi/MengapaStartup/MengapaStartup.jsx
View File

@ -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 (
<div className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
{/* Image Section */}
<div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
<img
src={start44 || "/placeholder.svg"}
alt="Woman with Tablet"
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
/>
</div>
const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
{/* Text Section */}
<div className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
<h2 className="text-[30px] font-semibold">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
<p className="mt-4 text-sm md:leading-8 md:text-xl">
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.
</p>
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
<li className="flex items-center ">
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
Teknologi kami dirancang agar dapat diakses oleh siapa saja, tanpa memerlukan latar belakang teknis.
</li>
<li className="flex items-center">
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
Rekan AI menawarkan solusi dengan harga yang sesuai untuk Startup.
</li>
<li className="flex items-center">
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
Kami membantu Anda menciptakan peluang baru dengan teknologi yang mendukung setiap tahap perkembangan bisnis.
</li>
</ul>
return (
<div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.8 }}
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
>
{/* Image Section */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 1 }}
className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
>
<img
src={start44 || "/placeholder.svg"}
alt="Woman with Tablet"
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
/>
</motion.div>
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
<img
src={wagreen || "/placeholder.svg"}
alt="WhatsApp Icon"
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
/>
Konsultasi Gratis
</button>
<Link to={"/Contact#form"}>
<button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
Coba Sekarang
</button>
</Link>
</div>
</div>
</div>
</div>
)
{/* Text Section */}
<motion.div
initial={{ opacity: 0, x: 50 }}
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
transition={{ duration: 1, delay: 0.3 }}
className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] "
>
<h2 className="text-[30px] font-semibold">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
<p className="mt-4 text-sm md:leading-8 md:text-xl">
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.
</p>
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
{["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) => (
<motion.li
key={index}
initial={{ opacity: 0, x: -30 }}
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="flex items-center"
>
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
{text}
</motion.li>
))}
</ul>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.8, delay: 0.5 }}
className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
>
<img
src={wagreen || "/placeholder.svg"}
alt="WhatsApp Icon"
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
/>
Konsultasi Gratis
</motion.button>
<Link to={"/Contact#form"}>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
>
Coba Sekarang
</motion.button>
</Link>
</motion.div>
</motion.div>
</motion.div>
</div>
);
}
export default Kenapa
export default Kenapa;

99
src/components/solusi/MengapapPersonal/MengapapPersonal.jsx
View File

@ -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 (
<div className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
<div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.8 }}
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
>
{/* Image Section */}
<div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 1 }}
className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
>
<img
src={start33 || "/placeholder.svg"}
alt="Woman with Tablet"
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
/>
</div>
</motion.div>
{/* Text Section */}
<div className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
<motion.div
initial={{ opacity: 0, x: 50 }}
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
transition={{ duration: 1, delay: 0.3 }}
className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] "
>
<h2 className="text-[30px] font-semibold">Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?</h2>
<p className="mt-4 md:text-lg md:leading-8 text-sm">
<p className="mt-4 md:text-lg md:leading-8 text-sm">
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.
</p>
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
<li className="flex items-center ">
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa memerlukan keahlian teknis.
</li>
<li className="flex items-center">
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi Anda tetap terlindungi.
</li>
<li className="flex items-center">
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan dengan kebutuhan individu Anda.
</li>
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
{["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) => (
<motion.li
key={index}
initial={{ opacity: 0, x: -30 }}
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="flex items-center"
>
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
{text}
</motion.li>
))}
</ul>
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.8, delay: 0.5 }}
className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
>
<img
src={wagreen || "/placeholder.svg"}
alt="WhatsApp Icon"
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
/>
Konsultasi Gratis
</button>
</motion.button>
<Link to={"/Contact#form"}>
<button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
>
Coba Sekarang
</button>
</motion.button>
</Link>
</div>
</div>
</div>
</motion.div>
</motion.div>
</motion.div>
</div>
)
);
}
export default Kenapa
export default Kenapa;

41
src/components/solusi/TransformasiCorpo/TransformasiCorpo.jsx
View File

@ -1,9 +1,17 @@
import { Link } from "react-router-dom";
import { wagreen } from "../asset";
import { motion } from "framer-motion";
function Transformasi() {
return (
<>
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
viewport={{ once: false, amount: 0.2 }}
className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
>
{/* Tagline Section */}
<div className="mb-5">
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
@ -15,26 +23,33 @@ function Transformasi() {
</h1>
</div>
<p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
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.
</p>
</div>
</motion.div>
</div>
<div className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 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]">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
viewport={{ once: false, amount: 0.2 }}
className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
>
<motion.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
</button>
</motion.button>
<Link to={"/Contact#form"}>
<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
</button>
<motion.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>
</Link>
</div>
</motion.div>
</>
);
}

43
src/components/solusi/TransformasiCorporate/TransformasiCorporate.jsx
View File

@ -1,43 +0,0 @@
import React from "react";
import { wagreen } from "../asset";
import { Link } from "react-router-dom";
function MasaDepan() {
return (
<>
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3">
{/* Tagline Section */}
<div className="mb-5">
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
<span className="flex items-center justify-center bg-[#CA2B68] text-white font-semibold text-2xl rounded-2xl w-48 h-12">
#Rekan AI
</span>
<h1 className="text-2xl sm:text-[32px] font-semibold text-[#212121]">
Transformasi Digital Anda Dimulai di Sini
</h1>
</div>
<p className="text-base sm:text-xl text-[#212121] md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih cerdas, efisien, dan kompetitif.
</p>
</div>
</div>
{/* Button Section */}
<div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 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-medium 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
</button>
<Link to={"/Contact#form"}>
<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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
Coba Sekarang
</button>
</Link>
</div>
</>
);
}
export default MasaDepan;

39
src/components/solusi/TransformasiPersonal/TransformasiPersonal.jsx
View File

@ -1,9 +1,17 @@
import { wagreen } from "../asset";
import { Link } from "react-router-dom";
import { motion } from "framer-motion";
function Transformasi() {
return (
<>
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
viewport={{ once: false, amount: 0.2 }}
className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
>
{/* Tagline Section */}
<div className="mb-5">
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
@ -24,22 +32,31 @@ function Transformasi() {
</span>
</p>
</div>
</motion.div>
</div>
<div className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 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]">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
viewport={{ once: false, amount: 0.2 }}
className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
>
<motion.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
</button>
</motion.button>
<Link to={"/Contact#form"}>
<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
</button>
<motion.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>
</Link>
</div>
</motion.div>
</>
);
}
export default Transformasi;
export default Transformasi;

37
src/components/solusi/TransformasiStart/TransformasiStart.jsx
View File

@ -1,9 +1,17 @@
import { Link } from "react-router-dom";
import { wagreen } from "../asset";
import { motion } from "framer-motion";
function Transformasi() {
return (
<>
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
viewport={{ once: false, amount: 0.2 }}
className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
>
{/* Tagline Section */}
<div className="mb-5">
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
@ -24,21 +32,30 @@ function Transformasi() {
</span>
</p>
</div>
</motion.div>
</div>
<div className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 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]">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
viewport={{ once: false, amount: 0.2 }}
className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
>
<motion.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
</button>
</motion.button>
<Link to={"/Contact#form"}>
<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
</button>
<motion.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>
</Link>
</div>
</motion.div>
</>
);
}

BIN
src/components/solusi/asset/Frame 8115681.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/components/solusi/asset/Play Now (33) 1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.0 KiB

2
src/components/solusi/asset/index.js
View File

@ -21,7 +21,7 @@ import x from "./x.png";
import chek2 from "./Frame 811480.png";
import start22 from "./Frame 811554.png";
import maskcek from "./Mask group (1).png";
import card1 from "./Play Now (33) 1.png";
import card1 from "./Frame 8115681.png";
import card2 from "./Play Now (32) 1.png";
import card3 from "./Play Now (30) 2.png";
import rekan1 from "./Play Now (34) 1.png";