satu perubahan lagi setelah ini
This commit is contained in:
Carls2320
parent
5a653d03df
commit
527af57c87
|
|
@ -1,6 +1,6 @@
|
|||
import Header from "./componen/Header/Header"; // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
|
||||
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 CardPersonal from "./componen/CardPersonal/CardPersonal"; // Mengimpor komponen FormSection yang berisi form
|
||||
import SolusiBisnis from "./componen/solusibisnis/solusibisnis"; // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
|
||||
import MengapapPersonal from "./componen/MengapapPersonal/MengapapPersonal"; // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
|
||||
import Transformasi from "./componen/Transformasi/Transformas"
|
||||
|
|
@ -12,7 +12,7 @@ function App() {
|
|||
<>
|
||||
<Header /> {/* Menampilkan komponen Header */}
|
||||
<HeadPersonal /> {/* Menampilkan komponen CustomerService */}
|
||||
<CardContent /> {/* Menampilkan komponen FormSection */}
|
||||
<CardPersonal /> {/* Menampilkan komponen FormSection */}
|
||||
<MengapapPersonal /> {/* Menampilkan komponen FAQ */}
|
||||
<SolusiBisnis /> {/* Menampilkan komponen BottomCTA */}
|
||||
<Transformasi />
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default function FeatureCards() {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 text-center">
|
||||
<div className="container mx-auto px-4 py-16 text-center mb-[-70px]">
|
||||
<h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
|
||||
Dengan <span className="text-[#CA2B68]">#Rekan AI</span>, Anda bisa menghemat waktu, meningkatkan produktivitas, dan mendapatkan solusi yang benar-benar relevan dengan kebutuhan Anda.
|
||||
</h2>
|
||||
|
|
@ -1,65 +1,57 @@
|
|||
import { component11, wagreen, start22 } from "../asset";
|
||||
|
||||
function Hero() {
|
||||
export default 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 items-center">
|
||||
<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">
|
||||
<div className="container mx-auto px-4 lg:px-6">
|
||||
<div className="flex flex-col lg:mt-[50px] lg:flex-row items-center mt-[200px] gap-12 py-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex-1 space-y-7">
|
||||
{/* Logo and Tagline */}
|
||||
<div className="flex items-center">
|
||||
<span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
|
||||
<img src= {component11} alt="Logo" width={53.52} height={43} />
|
||||
</span>
|
||||
<span className="inline-flex] items-center ml-[17px] 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">
|
||||
|
||||
{/* Header Text */}
|
||||
<h1 className="text-[32px] text-[#212121] font-bold mt-7">
|
||||
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>
|
||||
{/* Description */}
|
||||
<p className="text-[20px] text-[#212121] mt-7">
|
||||
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>
|
||||
|
||||
{/* 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]"
|
||||
/>
|
||||
<div className="flex flex-col lg:flex-row gap-6 mt-[79px]">
|
||||
<button className="flex items-center justify-center w-full lg:w-[270px] h-[70px] border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[18px] lg:text-[20px] hover:bg-[#ffffff1a] transition-all">
|
||||
<img src= {wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||
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">
|
||||
<button className="w-full lg:w-[276px] h-[70px] rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[18px] lg:text-[20px] hover:opacity-90 transition-all">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* Right Column - Hero Image */}
|
||||
<div className="flex-1 mt-[149px] lg:mt-0">
|
||||
<img
|
||||
src= {start22}
|
||||
alt="Hero Illustration"
|
||||
width={716}
|
||||
height={743}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Hero;
|
||||
|
|
|
|||
Loading…
Reference in New Issue