add solusi

This commit is contained in:
Yogamnan
2025-02-07 17:06:16 +07:00
parent 33f86a49f2
commit 4c4bd690f4
61 changed files with 974 additions and 87 deletions

View File

@@ -1,5 +1,5 @@
import React from 'react';
import { imgLeft1,imgLeft2,imgLeft3,imgRight } from '../../assets';
import { imgLeft1, imgLeft2, imgLeft3, imgRight } from '../../assets';
function Mendukung() {
const items = [
@@ -10,44 +10,43 @@ 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-[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 />
Skala Usaha
</p>
<p className="text-[16px] md:text-[20px] font-normal text-customBlack text-left md:text-left">
Kami menawarkan berbagai teknologi AI yang dapat mengotomatisasi proses, menganalisis data dengan akurat, dan memberikan pengalaman pelanggan yang lebih personal. Dengan implementasi yang mudah dan hasil yang cepat, Rekan AI menjadi mitra terbaik untuk mendukung pertumbuhan bisnis Anda.
</p>
{/* Left Content */}
<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
<br />
Skala Usaha
</p>
<p className="text-[16px] md:text-[20px] font-normal text-customBlack text-left md:text-left">
Kami menawarkan berbagai teknologi AI yang dapat mengotomatisasi proses, menganalisis data dengan akurat, dan memberikan pengalaman pelanggan yang lebih personal. Dengan implementasi yang mudah dan hasil yang cepat, Rekan AI menjadi mitra terbaik untuk mendukung pertumbuhan bisnis Anda.
</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">
{/* Image */}
<img
src={item.image}
alt={item.title}
className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[223px] md:h-[223px] rounded-lg"
/>
{/* Title */}
<p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[223px] h-10 flex items-center justify-center text-sm font-bold mt-4">
{item.title}
</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">
{/* Image */}
<img
src={item.image}
alt={item.title}
className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[223px] md:h-[223px] rounded-lg"
/>
{/* Title */}
<p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[223px] h-10 flex items-center justify-center text-sm font-bold mt-4">
{item.title}
</p>
</div>
))}
</div>
</div>
{/* Right Content */}
<div 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>
))}
</div>
</div>
{/* Right Content */}
<div 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-full h-auto" />
</div>
</div>
);
}
export default Mendukung;