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

revisi 1

Browse Source
This commit is contained in:
Yogamnan 2025-01-22 10:55:07 +07:00
parent 252b440c96
commit c335fc05f8
9 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Banner.jsx
View File

@ -5,7 +5,7 @@ function Banner() {
<div
className="relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center"
style={{
backgroundImage: `linear-gradient(to right, rgba(220, 1, 104, 0.4),rgba(91, 89, 232, 1) ), url(${bgcBanner})`,
backgroundImage: `linear-gradient(to right, rgba(220, 1, 150, 0.4),rgba(91, 89, 232, 0.9),rgba(91, 89, 232, 1) ), url(${bgcBanner})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
@ -23,15 +23,15 @@ function Banner() {
{/* Teks dan tombol */}
<div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
<h1 className="text-xl md:text-[32px] font-semibold text-center">
<h1 className="text-xl md:text-[32px] font-semibold text-center leading-10">
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
</h1>
</div>
<p className="mt-4 md:mt-16 max-w-[90%] md:max-w-[800px] mx-auto text-gray-200 text-sm md:text-base">
<p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[750px] mx-auto text-customWhite text-sm md:text-[20px] md:font-extralight md:leading-7">
Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
</p>
<div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-16 justify-center">
<button className="flex items-center justify-center w-full md:w-[317px] h-[50px] md:h-[70px] rounded-2xl border-2 border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
<div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
<button className="flex items-center justify-center w-full md:w-[317px] h-[50px] md:h-[70px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
<img src={waIcon2} alt="WhatsApp Icon" className="mr-2 h-4 md:h-5 w-auto" />
Konsultasi Gratis
</button>

24
src/components/Footer.jsx
View File

@ -3,7 +3,7 @@ import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../assets";
function Footer() {
return (
<footer className="bg-customGrey py-10 text-[#212121]">
<footer className="bg-customGrey h-[506px] py-10 text-[#212121]">
{/* Kontainer utama footer */}
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
{/* Kolom 1: Logo perusahaan */}
@ -21,16 +21,16 @@ function Footer() {
<p>
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
<br />
<span className="text-[#5B59E8] italic">
<span className="text-[#5B59E8] italic font-bold">
Reimagine Your Business with AI.
</span>
</p>
</div>
<p className="mb-10">
<p className="mb-10 text-[18px]">
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
Banten 15413
</p>
<p className="mb-4">Lebih dekat dengan Kami</p>
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
<div className="flex space-x-5">
{/* Tautan ke media sosial */}
<a href="#">
@ -46,9 +46,9 @@ function Footer() {
</div>
{/* Kolom 3: Produk perusahaan */}
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
<h4 className="text-base font-semibold mb-4">Produk Kami</h4>
<ul className="space-y-4">
<div className="flex-1 mb-5 sm:mb-0 md:ml-16 sm:pl-0">
<h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
<ul className="space-y-4 text-[18px]">
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
<li>Rekan Veri</li> {/* Produk: Verifikasi data */}
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
@ -57,9 +57,9 @@ function Footer() {
</div>
{/* Kolom 4: Solusi yang ditawarkan */}
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
<ul className="space-y-4">
<div className="flex-1 mb-5 md:-mx-28 sm:mb-0 sm:pl-0">
<h4 className="text-[18px] font-semibold mb-4">Solusi Kami</h4>
<ul className="space-y-4 text-[18px]">
<li>Personal</li> {/* Solusi untuk individu */}
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
@ -68,8 +68,8 @@ function Footer() {
{/* Kolom 5: Informasi kontak */}
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
<h4 className="text-base font-semibold mb-4">Hubungi Kami</h4>
<ul className="space-y-4">
<h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
<ul className="space-y-4 text-[18px]">
<li>Email: support@rekanai.com</li> {/* Email dukungan */}
<li>Phone: +68452098</li> {/* Nomor telepon */}
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}

2
src/components/Header.jsx
View File

@ -73,7 +73,7 @@ const Header = () => {
</ul>
{/* Pencarian */}
<div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none">
<div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-36">
<input
type="text"
placeholder="Pencarian..."

4
src/components/Hero.jsx
View File

@ -11,7 +11,7 @@ function Hero() {
2xl:ml-28 xl:ml-24 items-center">
{/* Left Section */}
<div className="box text-left px-4 lg:px-0">
<div className="box text-left px-4 lg:px-0 md:-ml-6 md:-mt-20">
<img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" />
<h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4">
Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
@ -28,7 +28,7 @@ function Hero() {
</div>
{/* Buttons */}
<div className="flex flex-col lg:flex-row mt-8 lg:-mt-11 lg:ml-28 gap-6 items-center px-4 lg:px-0">
<div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg: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-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
Konsultasi Gratis

12
src/components/Kenapa.jsx
View File

@ -11,7 +11,7 @@ function Kenapa() {
</div>
{/* Image Section */}
<div className="relative w-full md:w-1/2 p-5 flex justify-center md:justify-start">
<div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
<img
src={imgLeft}
alt="Woman with Tablet"
@ -22,13 +22,13 @@ function Kenapa() {
{/* Text Section */}
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start text-center md:text-left">
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2>
<p className="text-customBlack mt-4 text-sm md:text-base">
<p className="text-customBlack mt-4 text-sm md:max-w-[75%] md:leading-8 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:text-base text-customBlack font-medium">
<ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[70%] 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.
@ -47,12 +47,12 @@ function Kenapa() {
</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-4 w-full">
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-pink-600 text-pink-700 font-bold rounded-lg hover:bg-white hover:bg-opacity-10 transition">
<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-pink-600 text-pink-700 font-bold rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-5 md:h-5" />
Konsultasi Gratis
</button>
<button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white font-bold rounded-lg hover:opacity-90 transition">
<button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white font-bold rounded-[14px] hover:opacity-90 transition">
Coba Sekarang
</button>
</div>

6
src/components/MasaDepan.jsx
View File

@ -6,14 +6,14 @@ function MasaDepan() {
{/* 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-pink-600 text-white font-semibold text-xl rounded-2xl w-48 h-12">
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
#Rekan AI
</span>
<h1 className="text-2xl sm:text-3xl font-semibold text-black">
<h1 className="text-2xl sm:text-[32px] font-semibold text-black">
Masa Depan Bisnis, Dimulai Hari Ini
</h1>
</div>
<p className="text-base sm:text-lg text-gray-600 mt-2 leading-relaxed px-4 sm:px-0">
<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">
Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih
cerdas, efisien, dan kompetitif.
</p>

4
src/components/Mendukung.jsx
View File

@ -11,7 +11,7 @@ function Mendukung() {
return (
<div className="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-2/5 space-y-8 order-2 md:order-1">
<div 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 Skala Usaha
</p>
@ -21,7 +21,7 @@ function Mendukung() {
<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">
<div key={item.id} className="flex flex-col items-center w-full md:w-auto md:mt-5">
{/* Image */}
<img
src={item.image}

12
src/components/Mitra.jsx
View File

@ -78,7 +78,7 @@ function Mitra() {
useEffect(() => {
const interval = setInterval(() => {
handleNext();
}, 7900); // Slider bergerak setiap 4 detik
}, 8900); // Slider bergerak setiap 4 detik
return () => clearInterval(interval); // Membersihkan interval saat komponen unmount
}, [currentIndex]);
@ -91,7 +91,7 @@ function Mitra() {
>
<div className="bg-gradient-to-b from-[#e5e4ff] via-[#A1A0F2] to-[#5B59E8] w-[90%] md:w-[1214px] h-[640px] rounded-[36px] flex items-center justify-center relative">
<div className="text-white ml-4 md:ml-20 -mt-8 md:-mt-20">
<div className="bg-white text-[#DC0168] flex items-center justify-center text-center rounded-[18px] shadow-md w-[90%] md:w-[467px] h-[56px]">
<div className="bg-white text-[#DC0168] flex items-center justify-center text-center rounded-[18px] shadow-md w-[90%] md:w-[510px] h-[56px]">
<p className="text-sm md:text-lg font-semibold m-0">
Saatnya Melangkah lebih jauh untuk bisnis Anda!
</p>
@ -107,8 +107,8 @@ function Mitra() {
</div>
</div>
<section className="flex justify-center 2xl:w-[1516px] w-screen mb-40 -mt-[350px] md:-mt-[292px] mx-auto">
<div className="bg-customWhite shadow-lg rounded-[34px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden">
<section className="flex justify-center 2xl:w-[1516px] w-screen mb-40 -mt-[350px] md:-mt-[290px] mx-auto">
<div className="bg-customWhite shadow-lg rounded-[37px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden">
{/* Prev Button (Hidden on Mobile) */}
<button onClick={handlePrev} className="hidden md:block">
<img src= {arrow1} alt="Previous" className="w-4 h-4 md:w-6 md:h-6" />
@ -116,14 +116,14 @@ function Mitra() {
{/* Carousel Items */}
<div className="overflow-hidden flex-1">
<div
className="flex transition-transform duration-[10000ms] ease-in-out"
className="flex transition-transform duration-[10500ms] ease-in-out"
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
>
{Array.from(
{ length: Math.ceil(items.length / itemsPerSlide) },
(_, slideIndex) => (
<div
className="flex-shrink-0 w-full grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4"
className="flex-shrink-0 w-full grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-4"
key={slideIndex}
>
{items

10
src/components/Solusi.jsx
View File

@ -26,15 +26,15 @@ function Solusi() {
];
return (
<section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-16" id="solusi">
<div className="text-center mb-16">
<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">
<div className="flex flex-col md:flex-row items-center justify-center gap-4">
<h1 className="text-2xl md:text-4xl font-semibold">Ragam Solusi Terbaik Dari</h1>
<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-xl font-bold w-[194px] h-[48px] text-center">
#Rekan AI
</span>
</div>
<p className="text-gray-600 mt-4 max-w-[95%] text-center items-center">
<p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center">
Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek.
</p>
</div>
@ -55,7 +55,7 @@ function Solusi() {
</li>
))}
</ul>
<button className="w-[355px] h-[62px] bg-white border-2 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-full hover:bg-blue-600 hover:text-white transition duration-300">
<button className="w-[355px] h-[62px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
Selengkapnya <span>&rarr;</span>
</button>
</div>