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-20 15:02:01 +07:00
parent ad55506643
commit 252b440c96
11 changed files with 147 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/assets/index.js Normal file
View File

@ -0,0 +1,79 @@
import Logo1 from './image/logo.png'
import search from './image/search.png';
import row from './image/arrow.png';
import homeLogo from './image/Component 1.png';
import waIcon from './image/whatsapp-color_svgrepo.com (1).png';
import homeImg from './image/Component 3.png';
import card1 from './image/rekan hr.png';
import card2 from './image/rekan doku.png';
import card3 from './image/rekan llm.png';
import card4 from './image/rekan veri.png';
import chek from './image/cheklist.png';
import waIcon2 from './image/whatsapp-color_svgrepo.com.png'
import L1 from './image/Frame 811520.png'
import L3 from './image/Frame 811523.png'
import L2 from './image/Frame 811521.png'
import L4 from './image/Frame 811522.png'
import R1 from './image/Frame 811517.png'
import R3 from './image/Frame 811518.png'
import R2 from './image/Frame 811516.png'
import R4 from './image/Frame 811519.png'
import bgcBanner from './image/image 10.png'
import imgLeft from './image/Component 4.png';
import chek2 from './image/cheklist.png';
import circle1 from './image/Ellipse 2.png';
import circle2 from './image/Ellipse 3.png';
import mitraImg from "./image/Frame 811516 (3).png";
import arrow1 from "./image/slider/Vector (1).png";
import arrow2 from "./image/slider/Vector.png";
import swipper1 from "./image/slider/1.png";
import swipper2 from "./image/slider/2.png";
import swipper3 from "./image/slider/3.png";
import swipper4 from "./image/slider/4.png";
import swipper5 from "./image/slider/5.png";
import swipper6 from "./image/slider/6.png";
import swipper7 from "./image/slider/7.png";
import swipper8 from "./image/slider/8.png";
import swipper9 from "./image/slider/9.png";
import swipper10 from "./image/slider/10.png";
import swipper11 from "./image/slider/11.png";
import swipper12 from "./image/slider/12.png";
import swipper13 from "./image/slider/13.png";
import swipper14 from "./image/slider/14.png";
import swipper15 from "./image/slider/15.png";
import swipper16 from "./image/slider/16.png";
import swipper17 from "./image/slider/17.png";
import swipper18 from "./image/slider/18.png";
import swipper19 from "./image/slider/19.png";
import swipper20 from "./image/slider/20.png";
import swipper21 from "./image/slider/21.png";
import swipper22 from "./image/slider/22.png";
import swipper23 from "./image/slider/23.png";
import swipper24 from "./image/slider/24.png";
import bgSwiper from "./image/image 16.png";
import imgLeft2 from './image/Frame 811531.png';
import imgLeft1 from './image/Frame 811530.png';
import imgLeft3 from './image/Frame 811533.png';
import imgRight from './image/Component 6.png';
import nvdia from "./image/nvidia.png";
import kmn from "./image/kemeneterian.png";
import kominfo from "./image/kominfo.png";
import ojk from "./image/ojk.png";
import facebook from "./image/fb.png";
import x from "./image/twitter.png";
import instagram from "./image/ig.png";
import frame from "./image/Component 11.png";
export{
Logo1, search,row,homeLogo,waIcon,homeImg,card1,card2,card3,card4,chek,
waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner,imgLeft,chek2,circle1,circle2,
mitraImg,arrow1,arrow2,swipper1,swipper2,swipper3,swipper4,swipper5,swipper6,
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
swipper23,swipper24,bgSwiper,imgLeft1,imgLeft2,imgLeft3,imgRight,nvdia,kmn,kominfo,
ojk,facebook,x,instagram,frame
}

35
src/components/Banner.jsx
View File

@ -1,14 +1,4 @@
import React from 'react' import {waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner} from '../assets';
import waIcon from '../assets/image/whatsapp-color_svgrepo.com.png'
import L1 from '../assets/image/Frame 811520.png'
import L3 from '../assets/image/Frame 811523.png'
import L2 from '../assets/image/Frame 811521.png'
import L4 from '../assets/image/Frame 811522.png'
import R1 from '../assets/image/Frame 811517.png'
import R3 from '../assets/image/Frame 811518.png'
import R2 from '../assets/image/Frame 811516.png'
import R4 from '../assets/image/Frame 811519.png'
import bgcBanner from '../assets/image/image 10.png'
function Banner() { function Banner() {
return ( return (
@ -19,6 +9,7 @@ function Banner() {
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
backgroundBlendMode: 'multiply',
}} }}
> >
{/* Gambar L1-L4 untuk mobile */} {/* Gambar L1-L4 untuk mobile */}
@ -32,7 +23,7 @@ function Banner() {
{/* Teks dan tombol */} {/* Teks dan tombol */}
<div className="px-4 mx-auto text-center w-full mt-8 md:mt-0"> <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"> <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
<h1 className="text-xl md:text-4xl font-semibold text-center"> <h1 className="text-xl md:text-[32px] font-semibold text-center">
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif. Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
</h1> </h1>
</div> </div>
@ -41,10 +32,10 @@ function Banner() {
</p> </p>
<div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-16 justify-center"> <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"> <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">
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-4 md:h-5 w-auto" /> <img src={waIcon2} alt="WhatsApp Icon" className="mr-2 h-4 md:h-5 w-auto" />
Konsultasi Gratis Konsultasi Gratis
</button> </button>
<button className="flex items-center justify-center w-full md:w-[324px] h-[50px] md:h-[70px] rounded-2xl px-4 md:px-8 py-2 md:py-3 bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90"> <button className="flex items-center justify-center w-full md:w-[324px] h-[50px] md:h-[70px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
Coba Sekarang Coba Sekarang
</button> </button>
</div> </div>
@ -52,18 +43,18 @@ function Banner() {
{/* Gambar L1-L4 untuk desktop */} {/* Gambar L1-L4 untuk desktop */}
<div className="absolute hidden md:grid top-[50%] left-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16"> <div className="absolute hidden md:grid top-[50%] left-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
<img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" /> <img src={L1} alt="image 1" className="w-auto rounded-lg shadow-lg object-cover" />
<img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" /> <img src={L2} alt="image 2" className="w-auto rounded-lg shadow-lg object-cover mt-20" />
<img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" /> <img src={L3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover" />
<img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" /> <img src={L4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover -mt-10" />
</div> </div>
{/* Gambar R1-R4 untuk desktop */} {/* Gambar R1-R4 untuk desktop */}
<div className="absolute hidden md:grid top-[50%] right-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16"> <div className="absolute hidden md:grid top-[50%] right-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16">
<img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" /> <img src={R1} alt="image 1" className="w-auto rounded-lg shadow-lg object-cover mt-20 ml-9" />
<img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" /> <img src={R2} alt="image 2" className="w-auto rounded-lg shadow-lg object-cover -ml-7" />
<img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" /> <img src={R3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover ml-7" />
<img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" /> <img src={R4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover" />
</div> </div>
{/* Gambar R1-R4 untuk mobile */} {/* Gambar R1-R4 untuk mobile */}

16
src/components/Footer.jsx
View File

@ -1,17 +1,9 @@
import nvdia from "../assets/image/nvidia.png"; import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../assets";
import kmn from "../assets/image/kemeneterian.png";
import kominfo from "../assets/image/kominfo.png";
import ojk from "../assets/image/ojk.png";
import facebook from "../assets/image/fb.png";
import x from "../assets/image/twitter.png";
import instagram from "../assets/image/ig.png";
import frame from "../assets/image/Component 11.png";
// Gambar logo utama perusahaan
function Footer() { function Footer() {
return ( return (
<footer className="bg-[#D4DAE4] py-10 text-[#212121]"> <footer className="bg-customGrey py-10 text-[#212121]">
{/* Kontainer utama footer */} {/* 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"> <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 */} {/* Kolom 1: Logo perusahaan */}
@ -34,12 +26,12 @@ function Footer() {
</span> </span>
</p> </p>
</div> </div>
<p className="mb-4"> <p className="mb-10">
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan, Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
Banten 15413 Banten 15413
</p> </p>
<p className="mb-4">Lebih dekat dengan Kami</p> <p className="mb-4">Lebih dekat dengan Kami</p>
<div className="flex space-x-3"> <div className="flex space-x-5">
{/* Tautan ke media sosial */} {/* Tautan ke media sosial */}
<a href="#"> <a href="#">
<img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */} <img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */}

6
src/components/Header.jsx
View File

@ -1,7 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import Logo1 from '../assets/image/logo.png'; import { Logo1 } from '../assets'
import search from '../assets/image/search.png'; import {search} from '../assets';
import row from '../assets/image/arrow.png'; import {row} from '../assets';
const Header = () => { const Header = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

7
src/components/Hero.jsx
View File

@ -1,6 +1,5 @@
import homeLogo from '../assets/image/Component 1.png'; import {homeLogo,waIcon,homeImg} from '../assets';
import waIcon from '../assets/image/whatsapp-color_svgrepo.com (1).png';
import homeImg from '../assets/image/Component 3.png';
function Hero() { function Hero() {
return ( return (
@ -29,7 +28,7 @@ function Hero() {
</div> </div>
{/* Buttons */} {/* Buttons */}
<div className="flex flex-col lg:flex-row mt-8 lg:mt-0 lg:ml-28 gap-6 items-center px-4 lg:px-0"> <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">
<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]"> <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" /> <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
Konsultasi Gratis Konsultasi Gratis

14
src/components/Kenapa.jsx
View File

@ -1,8 +1,4 @@
import imgLeft from '../assets/image/Component 4.png'; import {imgLeft,chek2,waIcon,circle1,circle2} from '../assets'
import chek from '../assets/image/cheklist.png';
import waIcon from '../assets/image/whatsapp-color_svgrepo.com (1).png';
import circle1 from '../assets/image/Ellipse 2.png';
import circle2 from '../assets/image/Ellipse 3.png';
function Kenapa() { function Kenapa() {
return ( return (
@ -34,19 +30,19 @@ function Kenapa() {
</p> </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:text-base text-customBlack font-medium">
<li className="flex items-center"> <li className="flex items-center">
<img src={chek} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" /> <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. Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<img src={chek} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" /> <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. Analisis data real-time untuk pengambilan keputusan yang lebih tepat.
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<img src={chek} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" /> <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. Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<img src={chek} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" /> <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. Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data.
</li> </li>
</ul> </ul>

7
src/components/MasaDepan.jsx
View File

@ -1,9 +1,8 @@
import React from "react"; import React from "react";
import masaWa from "../assets/image/whatsapp-color_svgrepo.com (1).png"; import { waIcon } from "../assets";
function MasaDepan() { function MasaDepan() {
return ( return (
<div className="flex flex-col items-center justify-center text-center w-full h-[75vh] mb-20"> <div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
{/* Tagline Section */} {/* Tagline Section */}
<div className="mb-5"> <div className="mb-5">
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
@ -24,7 +23,7 @@ function MasaDepan() {
<div className="flex flex-col sm:flex-row gap-6 sm:gap-12 mt-8"> <div className="flex flex-col sm:flex-row gap-6 sm:gap-12 mt-8">
<button className="flex items-center justify-center bg-transparent text-pink-600 border-2 border-pink-600 rounded-[14px] font-medium text-lg sm:text-xl px-8 py-4 hover:bg-pink-50 transition-all duration-300 w-full sm:w-[270px] h-[70px]"> <button className="flex items-center justify-center bg-transparent text-pink-600 border-2 border-pink-600 rounded-[14px] font-medium text-lg sm:text-xl px-8 py-4 hover:bg-pink-50 transition-all duration-300 w-full sm:w-[270px] h-[70px]">
<img <img
src={masaWa} src={waIcon}
alt="WhatsApp Icon" alt="WhatsApp Icon"
className="mr-2 w-5 h-5" className="mr-2 w-5 h-5"
/> />

5
src/components/Mendukung.jsx
View File

@ -1,8 +1,5 @@
import React from 'react'; import React from 'react';
import imgLeft2 from '../assets/image/Frame 811531.png'; import { imgLeft1,imgLeft2,imgLeft3,imgRight } from '../assets';
import imgLeft1 from '../assets/image/Frame 811530.png';
import imgLeft3 from '../assets/image/Frame 811533.png';
import imgRight from '../assets/image/Component 6.png';
function Mendukung() { function Mendukung() {
const items = [ const items = [

63
src/components/Mitra.jsx
View File

@ -1,35 +1,32 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import mitraImg from "../assets/image/Frame 811516 (3).png"; import {mitraImg} from "../assets";
import arrow1 from "../assets/image/slider/Vector (1).png"; import {arrow1} from "../assets";
import arrow2 from "../assets/image/slider/Vector.png"; import {arrow2} from "../assets";
import swipper1 from "../assets/image/slider/1.png"; import {swipper1} from "../assets";
import swipper2 from "../assets/image/slider/2.png"; import {swipper2} from "../assets";
import swipper3 from "../assets/image/slider/3.png"; import {swipper3} from "../assets";
import swipper4 from "../assets/image/slider/4.png"; import {swipper4} from "../assets";
import swipper5 from "../assets/image/slider/5.png"; import {swipper5} from "../assets";
import swipper6 from "../assets/image/slider/6.png"; import {swipper6} from "../assets";
import swipper7 from "../assets/image/slider/7.png"; import {swipper7} from "../assets";
import swipper8 from "../assets/image/slider/8.png"; import {swipper8} from "../assets";
import swipper9 from "../assets/image/slider/9.png"; import {swipper9} from "../assets";
import swipper10 from "../assets/image/slider/10.png"; import {swipper10} from "../assets";
import swipper11 from "../assets/image/slider/11.png"; import {swipper11} from "../assets";
import swipper12 from "../assets/image/slider/12.png"; import {swipper12} from "../assets";
import swipper13 from "../assets/image/slider/13.png"; import {swipper13} from "../assets";
import swipper14 from "../assets/image/slider/14.png"; import {swipper14} from "../assets";
import swipper15 from "../assets/image/slider/15.png"; import {swipper15} from "../assets";
import swipper16 from "../assets/image/slider/16.png"; import {swipper16} from "../assets";
import swipper17 from "../assets/image/slider/17.png"; import {swipper17} from "../assets";
import swipper18 from "../assets/image/slider/18.png"; import {swipper18} from "../assets";
import swipper19 from "../assets/image/slider/19.png"; import {swipper19} from "../assets";
import swipper20 from "../assets/image/slider/20.png"; import {swipper20} from "../assets";
import swipper21 from "../assets/image/slider/21.png"; import {swipper21} from "../assets";
import swipper22 from "../assets/image/slider/22.png"; import {swipper22} from "../assets";
import swipper23 from "../assets/image/slider/23.png"; import {swipper23} from "../assets";
import swipper24 from "../assets/image/slider/24.png"; import {swipper24} from "../assets";
import { bgSwiper } from "../assets";
import bgSwiper from "../assets/image/image 16.png";
function Mitra() { function Mitra() {
const items = [ const items = [
{ id: 1, logo: swipper1, name: "Item 1" }, { id: 1, logo: swipper1, name: "Item 1" },
@ -92,7 +89,7 @@ function Mitra() {
className="bg-cover bg-center h-[986px] flex items-center justify-center" className="bg-cover bg-center h-[986px] flex items-center justify-center"
style={{ backgroundImage: `url(${bgSwiper})` }} style={{ backgroundImage: `url(${bgSwiper})` }}
> >
<div className="bg-gradient-to-b from-white via-[#A1A0F2] to-[#5B59E8] w-[90%] md:w-[1214px] h-[640px] rounded-[36px] flex items-center justify-center relative"> <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="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-[467px] h-[56px]">
<p className="text-sm md:text-lg font-semibold m-0"> <p className="text-sm md:text-lg font-semibold m-0">
@ -103,7 +100,7 @@ function Mitra() {
Bergabunglah bersama Mereka yang telah mempercayai Kami sebagai mitra terbaik dalam memberikan solusi yang efesien. Bergabunglah bersama Mereka yang telah mempercayai Kami sebagai mitra terbaik dalam memberikan solusi yang efesien.
</h1> </h1>
</div> </div>
<div className="ml-auto -mt-8 mr-4 md:-mt-20 md:mr-16 hidden md:block"> <div className="ml-auto -mt-8 mr-4 md:-mt-20 md:mr-5 hidden md:block">
{/* Gambar hanya muncul di tampilan medium ke atas */} {/* Gambar hanya muncul di tampilan medium ke atas */}
<img src={mitraImg} alt="Mitra" className="w-[1745px] h-[402px]" /> <img src={mitraImg} alt="Mitra" className="w-[1745px] h-[402px]" />
</div> </div>

11
src/components/Solusi.jsx
View File

@ -1,8 +1,5 @@
import card1 from '../assets/image/rekan hr.png'; import {card1,card2,card3,card4,chek} from '../assets';
import card2 from '../assets/image/rekan doku.png';
import card3 from '../assets/image/rekan llm.png';
import card4 from '../assets/image/rekan veri.png';
import chek from '../assets/image/cheklist.png';
function Solusi() { function Solusi() {
const cards = [ const cards = [
@ -32,7 +29,7 @@ function Solusi() {
<section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-16" id="solusi"> <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"> <div className="text-center mb-16">
<div className="flex flex-col md:flex-row items-center justify-center gap-4"> <div className="flex flex-col md:flex-row items-center justify-center gap-4">
<h1 className="text-2xl md:text-4xl font-bold">Ragam Solusi Terbaik Dari</h1> <h1 className="text-2xl md:text-4xl 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"> <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 #Rekan AI
</span> </span>
@ -49,7 +46,7 @@ function Solusi() {
key={index} key={index}
className="bg-customWhite rounded-xl shadow-md p-6 flex flex-col items-center h-[681px] w-[402px]" className="bg-customWhite rounded-xl shadow-md p-6 flex flex-col items-center h-[681px] w-[402px]"
> >
<img src={card.image} alt={`Card ${index + 1}`} className="w-auto h-auto mb-6" /> <img src={card.image} alt={`Card ${index + 1}`} className="w-[130px] h-[170px] md:w-auto md:h-auto xl:w-auto xl:h-auto 2xl:w-auto 2xl:h-auto mb-6" />
<p className="text-customBlack text-left mt-4 flex-1">{card.description}</p> <p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
<ul className="text-left space-y-4 mb-8"> <ul className="text-left space-y-4 mb-8">
{card.features.map((feature, i) => ( {card.features.map((feature, i) => (

1
tailwind.config.js
View File

@ -11,6 +11,7 @@ export default {
customWhite: '#FFFFFF', customWhite: '#FFFFFF',
customBlack: '#212121', customBlack: '#212121',
customRed: '#DC0168', customRed: '#DC0168',
customGrey: 'rgba(212, 218, 228, 0.12)'
} }
}, },
}, },