allbest/rekan_ai_fe
1
0
Fork 0
forked from amnannn/rekan_ai
Code Pull Requests Activity

satu perubahan lagi setelah ini

Browse Source
This commit is contained in:
Carls2320 2025-02-07 16:57:09 +07:00
parent 5a653d03df
commit 527af57c87
4 changed files with 43 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.jsx
View File

@ -1,6 +1,6 @@
import Header from "./componen/Header/Header"; // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman 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 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 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 MengapapPersonal from "./componen/MengapapPersonal/MengapapPersonal"; // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
import Transformasi from "./componen/Transformasi/Transformas" import Transformasi from "./componen/Transformasi/Transformas"
@ -12,7 +12,7 @@ function App() {
<> <>
<Header /> {/* Menampilkan komponen Header */} <Header /> {/* Menampilkan komponen Header */}
<HeadPersonal /> {/* Menampilkan komponen CustomerService */} <HeadPersonal /> {/* Menampilkan komponen CustomerService */}
<CardContent /> {/* Menampilkan komponen FormSection */} <CardPersonal /> {/* Menampilkan komponen FormSection */}
<MengapapPersonal /> {/* Menampilkan komponen FAQ */} <MengapapPersonal /> {/* Menampilkan komponen FAQ */}
<SolusiBisnis /> {/* Menampilkan komponen BottomCTA */} <SolusiBisnis /> {/* Menampilkan komponen BottomCTA */}
<Transformasi /> <Transformasi />

2
src/componen/CardContent/CardContent.jsx → src/componen/CardPersonal/CardPersonal.jsx
View File

@ -23,7 +23,7 @@ export default function FeatureCards() {
]; ];
return ( 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]"> <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. 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> </h2>

86
src/componen/HeadPersonal/HeadPersonal.jsx
View File

@ -1,65 +1,57 @@
import { component11, wagreen, start22 } from "../asset"; import { component11, wagreen, start22 } from "../asset";
function Hero() { export default function Hero() {
return ( return (
<div <div className="container mx-auto px-4 lg:px-6">
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" <div className="flex flex-col lg:mt-[50px] lg:flex-row items-center mt-[200px] gap-12 py-8">
id="Home" {/* Left Column */}
> <div className="flex-1 space-y-7">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12"> {/* Logo and Tagline */}
{/* Left Section */} <div className="flex items-center">
<div className="text-left items-center"> <span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6"> <img src= {component11} alt="Logo" width={53.52} height={43} />
<img </span>
className="w-3/4 sm:w-auto max-h-20 object-contain" <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">
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 # Solusi Personal
</span> </span>
</div> </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! Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
</h1> </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 {/* Description */}
digital. Baik Anda seorang profesional, pelajar, atau individu yang <p className="text-[20px] text-[#212121] mt-7">
mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era digital. Baik Anda seorang profesional,
teknologi yang mudah digunakan, efisien, dan dapat diandalkan. pelajar, atau individu yang mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan teknologi
yang mudah digunakan, efisien, dan dapat diandalkan.
</p> </p>
{/* Buttons */}
<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] 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> </div>
{/* Right Section (Home Image) */} {/* Right Column - Hero Image */}
<div className="flex justify-center lg:justify-end mt-8 lg:mt-0"> <div className="flex-1 mt-[149px] lg:mt-0">
<img <img
src={start22 || "/placeholder.svg"} src= {start22}
alt="Home Image" alt="Hero Illustration"
className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto" width={716}
width={807} height={743}
height={600} className="w-full h-auto"
/> />
</div> </div>
</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> </div>
); )
} }
export default Hero;

2
src/componen/MengapapPersonal/MengapapPersonal.jsx
View File

@ -14,7 +14,7 @@ function Kenapa() {
</div> </div>
{/* Text Section */} {/* Text Section */}
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121]"> <div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
<h2 className="text-[32px] font-semibold"> <h2 className="text-[32px] font-semibold">
Mengapa Memilih Rekan AI untuk Penggunaan Pribadi? Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?
</h2> </h2>