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 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'
import {waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner} from '../assets';
function Banner() {
return (
@ -19,6 +9,7 @@ function Banner() {
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundBlendMode: 'multiply',
}}
>
{/* Gambar L1-L4 untuk mobile */}
@ -32,7 +23,7 @@ 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-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.
</h1>
</div>
@ -41,10 +32,10 @@ function Banner() {
</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">
<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
</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
</button>
</div>
@ -52,18 +43,18 @@ function Banner() {
{/* 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">
<img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
<img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
<img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
<img src={L4} alt="image 4" 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-auto rounded-lg shadow-lg object-cover mt-20" />
<img src={L3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover" />
<img src={L4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover -mt-10" />
</div>
{/* 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">
<img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
<img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
<img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
<img src={R4} alt="image 4" 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-auto rounded-lg shadow-lg object-cover -ml-7" />
<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-auto rounded-lg shadow-lg object-cover" />
</div>
{/* Gambar R1-R4 untuk mobile */}

16
src/components/Footer.jsx
View File

@ -1,17 +1,9 @@
import nvdia from "../assets/image/nvidia.png";
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";
import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../assets";
// Gambar logo utama perusahaan
function Footer() {
return (
<footer className="bg-[#D4DAE4] py-10 text-[#212121]">
<footer className="bg-customGrey 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 */}
@ -34,12 +26,12 @@ function Footer() {
</span>
</p>
</div>
<p className="mb-4">
<p className="mb-10">
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
Banten 15413
</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 */}
<a href="#">
<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 Logo1 from '../assets/image/logo.png';
import search from '../assets/image/search.png';
import row from '../assets/image/arrow.png';
import { Logo1 } from '../assets'
import {search} from '../assets';
import {row} from '../assets';
const Header = () => {
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 waIcon from '../assets/image/whatsapp-color_svgrepo.com (1).png';
import homeImg from '../assets/image/Component 3.png';
import {homeLogo,waIcon,homeImg} from '../assets';
function Hero() {
return (
@ -29,7 +28,7 @@ function Hero() {
</div>
{/* 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]">
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
Konsultasi Gratis

14
src/components/Kenapa.jsx
View File

@ -1,8 +1,4 @@
import imgLeft from '../assets/image/Component 4.png';
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';
import {imgLeft,chek2,waIcon,circle1,circle2} from '../assets'
function Kenapa() {
return (
@ -34,19 +30,19 @@ function Kenapa() {
</p>
<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">
<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.
</li>
<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.
</li>
<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.
</li>
<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.
</li>
</ul>

7
src/components/MasaDepan.jsx
View File

@ -1,9 +1,8 @@
import React from "react";
import masaWa from "../assets/image/whatsapp-color_svgrepo.com (1).png";
import { waIcon } from "../assets";
function MasaDepan() {
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 */}
<div className="mb-5">
<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">
<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
src={masaWa}
src={waIcon}
alt="WhatsApp Icon"
className="mr-2 w-5 h-5"
/>

5
src/components/Mendukung.jsx
View File

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

63
src/components/Mitra.jsx
View File

@ -1,35 +1,32 @@
import React, { useState, useEffect } from "react";
import mitraImg from "../assets/image/Frame 811516 (3).png";
import arrow1 from "../assets/image/slider/Vector (1).png";
import arrow2 from "../assets/image/slider/Vector.png";
import swipper1 from "../assets/image/slider/1.png";
import swipper2 from "../assets/image/slider/2.png";
import swipper3 from "../assets/image/slider/3.png";
import swipper4 from "../assets/image/slider/4.png";
import swipper5 from "../assets/image/slider/5.png";
import swipper6 from "../assets/image/slider/6.png";
import swipper7 from "../assets/image/slider/7.png";
import swipper8 from "../assets/image/slider/8.png";
import swipper9 from "../assets/image/slider/9.png";
import swipper10 from "../assets/image/slider/10.png";
import swipper11 from "../assets/image/slider/11.png";
import swipper12 from "../assets/image/slider/12.png";
import swipper13 from "../assets/image/slider/13.png";
import swipper14 from "../assets/image/slider/14.png";
import swipper15 from "../assets/image/slider/15.png";
import swipper16 from "../assets/image/slider/16.png";
import swipper17 from "../assets/image/slider/17.png";
import swipper18 from "../assets/image/slider/18.png";
import swipper19 from "../assets/image/slider/19.png";
import swipper20 from "../assets/image/slider/20.png";
import swipper21 from "../assets/image/slider/21.png";
import swipper22 from "../assets/image/slider/22.png";
import swipper23 from "../assets/image/slider/23.png";
import swipper24 from "../assets/image/slider/24.png";
import bgSwiper from "../assets/image/image 16.png";
import {mitraImg} from "../assets";
import {arrow1} from "../assets";
import {arrow2} from "../assets";
import {swipper1} from "../assets";
import {swipper2} from "../assets";
import {swipper3} from "../assets";
import {swipper4} from "../assets";
import {swipper5} from "../assets";
import {swipper6} from "../assets";
import {swipper7} from "../assets";
import {swipper8} from "../assets";
import {swipper9} from "../assets";
import {swipper10} from "../assets";
import {swipper11} from "../assets";
import {swipper12} from "../assets";
import {swipper13} from "../assets";
import {swipper14} from "../assets";
import {swipper15} from "../assets";
import {swipper16} from "../assets";
import {swipper17} from "../assets";
import {swipper18} from "../assets";
import {swipper19} from "../assets";
import {swipper20} from "../assets";
import {swipper21} from "../assets";
import {swipper22} from "../assets";
import {swipper23} from "../assets";
import {swipper24} from "../assets";
import { bgSwiper } from "../assets";
function Mitra() {
const items = [
{ 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"
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="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">
@ -103,7 +100,7 @@ function Mitra() {
Bergabunglah bersama Mereka yang telah mempercayai Kami sebagai mitra terbaik dalam memberikan solusi yang efesien.
</h1>
</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 */}
<img src={mitraImg} alt="Mitra" className="w-[1745px] h-[402px]" />
</div>

11
src/components/Solusi.jsx
View File

@ -1,8 +1,5 @@
import card1 from '../assets/image/rekan hr.png';
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';
import {card1,card2,card3,card4,chek} from '../assets';
function Solusi() {
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">
<div className="text-center mb-16">
<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">
#Rekan AI
</span>
@ -49,7 +46,7 @@ function Solusi() {
key={index}
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>
<ul className="text-left space-y-4 mb-8">
{card.features.map((feature, i) => (

1
tailwind.config.js
View File

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