forked from amnannn/rekan_ai
namafolderdiperbaiki
This commit is contained in:
Carls2320
parent
035eebf845
commit
60d5c2acab
@ -1,8 +1,8 @@
|
||||
import Header from "./componen/Header/Header"; // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
|
||||
import CustomerService from "./componen/customer/CustomerService"; // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
|
||||
import HeadPersonal from "./componen/HeadPersonal/HeadPersonal"; // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
|
||||
import CardContent from "./componen/CardContent/CardContent"; // Mengimpor komponen FormSection yang berisi form
|
||||
import SolusiBisnis from "./componen/solusibisnis/solusibisnis"; // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
|
||||
import BottomCTA from "./componen/bottom/BottomCTA"; // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
|
||||
import MengapapPersonal from "./componen/MengapapPersonal/MengapapPersonal"; // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
|
||||
import Transformasi from "./componen/Transformasi/Transformas"
|
||||
import Footer from "./componen/footer/Footer"; // Mengimpor komponen Footer untuk menampilkan bagian footer
|
||||
import WhatsAppButton from "./componen/whatsappbutton/whatsappbutton"; // Mengimpor komponen WhatsAppButton untuk menampilkan tombol WhatsApp
|
||||
@ -11,9 +11,9 @@ function App() {
|
||||
return (
|
||||
<>
|
||||
<Header /> {/* Menampilkan komponen Header */}
|
||||
<CustomerService /> {/* Menampilkan komponen CustomerService */}
|
||||
<HeadPersonal /> {/* Menampilkan komponen CustomerService */}
|
||||
<CardContent /> {/* Menampilkan komponen FormSection */}
|
||||
<BottomCTA /> {/* Menampilkan komponen FAQ */}
|
||||
<MengapapPersonal /> {/* Menampilkan komponen FAQ */}
|
||||
<SolusiBisnis /> {/* Menampilkan komponen BottomCTA */}
|
||||
<Transformasi />
|
||||
<Footer /> {/* Menampilkan komponen Footer */}
|
||||
|
||||
65
src/componen/HeadPersonal/HeadPersonal.jsx
Normal file
65
src/componen/HeadPersonal/HeadPersonal.jsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { component11, wagreen, start22 } from "../asset";
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<div
|
||||
className="container px-4 sm:px-6 lg:px-8 mx-auto mt-16 sm:mt-20 md:mt-24 lg:mt-28 xl:mt-32"
|
||||
id="Home"
|
||||
>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* Left Section */}
|
||||
<div className="text-left">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
|
||||
<img
|
||||
className="w-3/4 sm:w-auto max-h-20 object-contain"
|
||||
src={component11 || "/placeholder.svg"}
|
||||
alt="Home Logo"
|
||||
width={200}
|
||||
height={80}
|
||||
/>
|
||||
<span className="inline-flex items-center justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
|
||||
# Solusi Personal
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-customBlack text-2xl sm:text-3xl md:text-4xl lg:text-[32px] font-semibold mb-4">
|
||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||
</h1>
|
||||
<p className="text-customBlack text-base sm:text-lg md:text-xl lg:text-[20px] mb-8">
|
||||
Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
|
||||
digital. Baik Anda seorang profesional, pelajar, atau individu yang
|
||||
mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
|
||||
teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right Section (Home Image) */}
|
||||
<div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
|
||||
<img
|
||||
src={start22 || "/placeholder.svg"}
|
||||
alt="Home Image"
|
||||
className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
|
||||
width={807}
|
||||
height={600}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<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] text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<img
|
||||
src={wagreen}
|
||||
alt="WhatsApp Icon"
|
||||
className="mr-2 h-[30px] w-[30px]"
|
||||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<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 text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Hero;
|
||||
@ -1,67 +0,0 @@
|
||||
import { component11, wagreen, start22 } from "../asset";
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<div
|
||||
className=" container px-4 sm:px-6 lg:px-8 mx-auto mt-[150px]"
|
||||
id="Home"
|
||||
>
|
||||
<div
|
||||
className="
|
||||
hero
|
||||
grid grid-cols-1 lg:grid-cols-2 gap-10
|
||||
mt-40 sm:mt-28 md:mt-32 lg:mt-36 xl:mt-24
|
||||
items-center"
|
||||
>
|
||||
{/* Left Section */}
|
||||
<div className="text-left px-4 sm:px-6 lg:px-0 mt-[-150px]">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="mb-5 mt-5 mx-auto lg:mx-0 w-3/4 sm:w-2/3 md:w-1/2 lg:w-auto"
|
||||
src={component11}
|
||||
alt="Home Logo"
|
||||
/>
|
||||
<span className="flex items-center justify-center ml-2 bg-pink-600 text-white w-full sm:w-auto px-6 py-2 rounded-[14px] text-lg sm:text-2xl text-center mt-2 sm:mt-0">
|
||||
# Solusi Personal
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-customBlack text-[32px] font-semibold py-4">
|
||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||
</h1>
|
||||
<p className="text-customBlack text-[20px]">
|
||||
Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
|
||||
digital. Baik Anda seorang profesional, pelajar, atau individu yang
|
||||
mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
|
||||
teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right Section (Home Image) */}
|
||||
<div className="flex justify-center lg:justify-end px-4 sm:px-6 lg:px-0">
|
||||
<img
|
||||
src={start22}
|
||||
alt="Home Image"
|
||||
className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex flex-col sm:flex-row justify-center sm:justify-start mt-[-185px] gap-4 sm:gap-6 lg:gap-8 items-center px-4 sm:px-6 lg:px-0">
|
||||
<button className="w-full sm:w-[230px] md:w-[250px] lg:w-[270px] h-[60px] sm:h-[70px] btn2 flex items-center justify-center py-4 sm:py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[16px] sm:text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<img
|
||||
src={wagreen}
|
||||
alt="WhatsApp Icon"
|
||||
className="mr-2 h-[25px] sm:h-[30px] w-[25px] sm:w-[30px]"
|
||||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="w-full sm:w-[236px] md:w-[256px] lg:w-[276px] h-[60px] sm:h-[70px] btn2 flex items-center justify-center py-4 sm:py-3 px-6 sm:px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[16px] sm:text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Hero;
|
||||
@ -2,7 +2,7 @@ import { wabutton } from '../asset';
|
||||
|
||||
const WhatsAppButton = () => {
|
||||
return (
|
||||
<div className="fixed bottom-2 right-2 md:right-24 flex justify-center items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
||||
<div className="fixed bottom-2 right-2 md:right-24 flex justify-center mb-10 items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
||||
{/* Tombol WhatsApp */}
|
||||
<img
|
||||
className="w-10 h-10 md:w-12 md:h-12" // Menentukan ukuran ikon WhatsApp
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user