Compare commits
5 Commits
e9dc997830
...
carls2
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
15ec2fb804 | ||
|
|
4ee953668a | ||
|
|
15478bd369 | ||
|
|
bcd1c05bec | ||
|
|
89bce501f4 |
@@ -27,11 +27,11 @@ function Banner() {
|
||||
{/* Teks dan tombol */}
|
||||
<div className="container mx-auto px-4 text-center w-full mt-8 md:mt-0 z-10">
|
||||
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
|
||||
<h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
|
||||
<h1 className="text-xl md:text-[25px] lg:text-[24px] 2xl:text-[30px] 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-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
|
||||
<p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[500px] 2xl:max-w-[700px] mx-auto text-customWhite text-sm 2xl:text-[18px] 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>
|
||||
@@ -58,22 +58,22 @@ function Banner() {
|
||||
<img
|
||||
src={L1}
|
||||
alt="image 1"
|
||||
className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover"
|
||||
className="w-[15vw] max-w-[170px] 2xl:max-w-[200px] rounded-lg shadow-lg object-cover"
|
||||
/>
|
||||
<img
|
||||
src={L2}
|
||||
alt="image 2"
|
||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-16"
|
||||
className="w-[11vw] max-w-[135px] 2xl:max-w-[150px] md:-translate-x-9 2xl:-translate-x-0 rounded-lg shadow-lg object-cover mt-16"
|
||||
/>
|
||||
<img
|
||||
src={L3}
|
||||
alt="image 3"
|
||||
className="w-[16vw] max-w-[210px] rounded-lg shadow-lg object-cover"
|
||||
className="w-[16vw] max-w-[180px] 2xl:max-w-[210px] rounded-lg shadow-lg object-cover"
|
||||
/>
|
||||
<img
|
||||
src={L4}
|
||||
alt="image 4"
|
||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover -mt-11"
|
||||
className="w-[11vw] max-w-[120px] 2xl:max-w-[150px] md:-translate-x-5 2xl:-translate-x-0 rounded-lg shadow-lg object-cover -mt-1 2xl:-mt-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -82,22 +82,22 @@ function Banner() {
|
||||
<img
|
||||
src={R1}
|
||||
alt="image 1"
|
||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9"
|
||||
className="w-[11vw] max-w-[135px] 2xl:max-w-[150px] rounded-lg shadow-lg object-cover mt-28 2xl:mt-20 ml-24 2xl:ml-9"
|
||||
/>
|
||||
<img
|
||||
src={R2}
|
||||
alt="image 2"
|
||||
className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover -ml-4"
|
||||
className="w-[15vw] max-w-[170px] 2xl:max-w-[200px] rounded-lg shadow-lg object-cover 2xl:-ml-4 md:ml-8 md:mt-14 2xl:mt-0"
|
||||
/>
|
||||
<img
|
||||
src={R3}
|
||||
alt="image 3"
|
||||
className="w-[13vw] max-w-[180px] rounded-lg shadow-lg object-cover ml-7"
|
||||
className="w-[13vw] max-w-[145px] 2xl:max-w-[180px] rounded-lg shadow-lg object-cover ml-24 2xl:ml-7"
|
||||
/>
|
||||
<img
|
||||
src={R4}
|
||||
alt="image 4"
|
||||
className="w-[15vw] max-w-[206px] rounded-lg shadow-lg object-cover"
|
||||
className="w-[15vw] max-w-[170px] 2xl:max-w-[206px] rounded-lg shadow-lg object-cover ml-8 2xl:ml-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,10 +15,11 @@ function Footer() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<footer className="bg-customGrey py-10 text-[#212121]">
|
||||
<div className="container mx-auto">
|
||||
{/* 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 */}
|
||||
<div className="mb-5 sm:mb-0">
|
||||
<div className="mb-5 sm:mb-0 md:-ml-16">
|
||||
<img
|
||||
src={component11} // Gambar logo perusahaan
|
||||
alt="Logo"
|
||||
@@ -150,6 +151,8 @@ function Footer() {
|
||||
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -95,7 +95,7 @@ const Header = () => {
|
||||
</button>
|
||||
|
||||
{isProdukOpen && (
|
||||
<div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1729px]">
|
||||
<div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* HR */}
|
||||
@@ -188,7 +188,7 @@ const Header = () => {
|
||||
</button>
|
||||
|
||||
{isSolusiOpen && (
|
||||
<div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1729px]">
|
||||
<div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* Personal */}
|
||||
|
||||
@@ -54,7 +54,7 @@ function Kenapa() {
|
||||
{/* Text Section */}
|
||||
<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"
|
||||
className="w-full md:w-[40%] 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 }}
|
||||
|
||||
@@ -23,21 +23,23 @@ const BottomCTA = () => {
|
||||
</div>
|
||||
|
||||
<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 />
|
||||
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>
|
||||
|
||||
<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]" />
|
||||
<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
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { email, phone, customer } from "./asset";
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect } from "react";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
|
||||
const CustomerService = () => {
|
||||
@@ -18,24 +17,23 @@ const CustomerService = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] 2xl:px-20 2xl:gap-20">
|
||||
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] md:gap-12 xl:gap-20 2xl:px-20">
|
||||
{/* LEFT SECTION - Informasi */}
|
||||
<motion.div
|
||||
ref={leftRef}
|
||||
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 md:ml-[-110px]"
|
||||
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-90px]"
|
||||
initial="hidden"
|
||||
animate={leftInView ? "visible" : "hidden"}
|
||||
variants={fadeInLeft}
|
||||
key="left-content"
|
||||
>
|
||||
|
||||
<div className="mb-5">
|
||||
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
||||
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px]">
|
||||
Kami Siap Membantu Bisnis Anda <br />
|
||||
Lebih Maju!
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[20px] md:max-w-[90%]">
|
||||
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px]">
|
||||
Butuh informasi lebih lanjut tentang produk atau solusi kami? Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan profesional.
|
||||
</p>
|
||||
<div className="flex flex-col gap-6">
|
||||
@@ -48,7 +46,7 @@ const CustomerService = () => {
|
||||
<div className="text-left">
|
||||
<p className="text-sm text-[#212121] md:text-[18px]">
|
||||
Kirim pertanyaan Anda ke{" "}
|
||||
<strong className="text-[#5B59E8] md:text-[18px]">
|
||||
<strong className="text-[#5B59E8]">
|
||||
support@rekanai.com
|
||||
</strong>{" "}
|
||||
dan tim kami akan segera merespons.
|
||||
@@ -79,7 +77,7 @@ const CustomerService = () => {
|
||||
{/* RIGHT SECTION - Gambar */}
|
||||
<motion.div
|
||||
ref={rightRef}
|
||||
className="flex justify-center md:justify-end items-center md:mr-[-70px]"
|
||||
className="w-full md:w-[45%] flex justify-center items-center"
|
||||
initial="hidden"
|
||||
animate={rightInView ? "visible" : "hidden"}
|
||||
variants={fadeInRight}
|
||||
@@ -88,7 +86,7 @@ const CustomerService = () => {
|
||||
<img
|
||||
src={customer}
|
||||
alt="Customer Service"
|
||||
className="w-full h-auto md:w-auto md:h-auto"
|
||||
className="w-[80%] md:w-full max-w-[450px] h-auto"
|
||||
/>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
@@ -1,25 +1,43 @@
|
||||
import row from './arrow.png';
|
||||
import component11 from './Component 11.png';
|
||||
import customer from './customer.png';
|
||||
import email from './email.png';
|
||||
import facebook from './facebook.png';
|
||||
import frame from './Frame.png';
|
||||
import frame27 from './Frame27.png';
|
||||
import img10 from './image 10.png';
|
||||
import instagram from './instagram.png';
|
||||
import kmn from './Dukcapil PNG Pic.png';
|
||||
import kominfo from './Kominfo PNG Pic.png';
|
||||
import Logo1 from './logo.png';
|
||||
import nvidia from './NVIDIA PNG Pic.png';
|
||||
import ojk from './OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp';
|
||||
import phone from './phone.png';
|
||||
import search from './search.png';
|
||||
import telephone from './telephone.png';
|
||||
import wagreen from './whatsapp-color_svgrepo.com.png';
|
||||
import wabutton from './Whatsapp22.png';
|
||||
import x from './x.png';
|
||||
import row from "./arrow.png";
|
||||
import component11 from "./Component 11.png";
|
||||
import customer from "./customer.png";
|
||||
import email from "./email.png";
|
||||
import facebook from "./facebook.png";
|
||||
import frame from "./Frame.png";
|
||||
import frame27 from "./Frame27.png";
|
||||
import img10 from "./image 10.png";
|
||||
import instagram from "./instagram.png";
|
||||
import kmn from "./Dukcapil PNG Pic.png";
|
||||
import kominfo from "./Kominfo PNG Pic.png";
|
||||
import Logo1 from "./logo.png";
|
||||
import nvidia from "./NVIDIA PNG Pic.png";
|
||||
import ojk from "./OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp";
|
||||
import phone from "./phone.png";
|
||||
import search from "./search.png";
|
||||
import telephone from "./telephone.png";
|
||||
import wagreen from "./whatsapp-color_svgrepo.com.png";
|
||||
import wabutton from "./Whatsapp22.png";
|
||||
import x from "./x.png";
|
||||
|
||||
|
||||
export{
|
||||
row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
|
||||
}
|
||||
export {
|
||||
row,
|
||||
component11,
|
||||
customer,
|
||||
email,
|
||||
facebook,
|
||||
frame,
|
||||
frame27,
|
||||
img10,
|
||||
instagram,
|
||||
kmn,
|
||||
kominfo,
|
||||
Logo1,
|
||||
nvidia,
|
||||
ojk,
|
||||
phone,
|
||||
search,
|
||||
telephone,
|
||||
wagreen,
|
||||
wabutton,
|
||||
x,
|
||||
};
|
||||
|
||||
@@ -87,7 +87,7 @@ export const data = {
|
||||
{
|
||||
title: "Pengurangan Risiko Fraud",
|
||||
description:
|
||||
"Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.",
|
||||
"Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.3",
|
||||
icon: maskcek
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user