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-22 10:55:07 +07:00
parent 252b440c96
commit c335fc05f8
9 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Banner.jsx
View File

@ -5,7 +5,7 @@ function Banner() {
<div <div
className="relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center" className="relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center"
style={{ style={{
backgroundImage: `linear-gradient(to right, rgba(220, 1, 104, 0.4),rgba(91, 89, 232, 1) ), url(${bgcBanner})`, backgroundImage: `linear-gradient(to right, rgba(220, 1, 150, 0.4),rgba(91, 89, 232, 0.9),rgba(91, 89, 232, 1) ), url(${bgcBanner})`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
@ -23,15 +23,15 @@ 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-[32px] font-semibold text-center"> <h1 className="text-xl md:text-[32px] font-semibold text-center leading-10">
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>
<p className="mt-4 md:mt-16 max-w-[90%] md:max-w-[800px] mx-auto text-gray-200 text-sm md:text-base"> <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[750px] mx-auto text-customWhite text-sm md:text-[20px] md:font-extralight md:leading-7">
Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis. Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
</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-20 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-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
<img src={waIcon2} 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>

24
src/components/Footer.jsx
View File

@ -3,7 +3,7 @@ import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../assets";
function Footer() { function Footer() {
return ( return (
<footer className="bg-customGrey py-10 text-[#212121]"> <footer className="bg-customGrey h-[506px] 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 */}
@ -21,16 +21,16 @@ function Footer() {
<p> <p>
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "} <strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
<br /> <br />
<span className="text-[#5B59E8] italic"> <span className="text-[#5B59E8] italic font-bold">
Reimagine Your Business with AI. Reimagine Your Business with AI.
</span> </span>
</p> </p>
</div> </div>
<p className="mb-10"> <p className="mb-10 text-[18px]">
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 text-[18px]">Lebih dekat dengan Kami</p>
<div className="flex space-x-5"> <div className="flex space-x-5">
{/* Tautan ke media sosial */} {/* Tautan ke media sosial */}
<a href="#"> <a href="#">
@ -46,9 +46,9 @@ function Footer() {
</div> </div>
{/* Kolom 3: Produk perusahaan */} {/* Kolom 3: Produk perusahaan */}
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0"> <div className="flex-1 mb-5 sm:mb-0 md:ml-16 sm:pl-0">
<h4 className="text-base font-semibold mb-4">Produk Kami</h4> <h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
<ul className="space-y-4"> <ul className="space-y-4 text-[18px]">
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */} <li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
<li>Rekan Veri</li> {/* Produk: Verifikasi data */} <li>Rekan Veri</li> {/* Produk: Verifikasi data */}
<li>Rekan HR</li> {/* Produk: Manajemen SDM */} <li>Rekan HR</li> {/* Produk: Manajemen SDM */}
@ -57,9 +57,9 @@ function Footer() {
</div> </div>
{/* Kolom 4: Solusi yang ditawarkan */} {/* Kolom 4: Solusi yang ditawarkan */}
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0"> <div className="flex-1 mb-5 md:-mx-28 sm:mb-0 sm:pl-0">
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4> <h4 className="text-[18px] font-semibold mb-4">Solusi Kami</h4>
<ul className="space-y-4"> <ul className="space-y-4 text-[18px]">
<li>Personal</li> {/* Solusi untuk individu */} <li>Personal</li> {/* Solusi untuk individu */}
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */} <li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */} <li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
@ -68,8 +68,8 @@ function Footer() {
{/* Kolom 5: Informasi kontak */} {/* Kolom 5: Informasi kontak */}
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0"> <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
<h4 className="text-base font-semibold mb-4">Hubungi Kami</h4> <h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
<ul className="space-y-4"> <ul className="space-y-4 text-[18px]">
<li>Email: support@rekanai.com</li> {/* Email dukungan */} <li>Email: support@rekanai.com</li> {/* Email dukungan */}
<li>Phone: +68452098</li> {/* Nomor telepon */} <li>Phone: +68452098</li> {/* Nomor telepon */}
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */} <li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}

2
src/components/Header.jsx
View File

@ -73,7 +73,7 @@ const Header = () => {
</ul> </ul>
{/* Pencarian */} {/* Pencarian */}
<div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none"> <div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-36">
<input <input
type="text" type="text"
placeholder="Pencarian..." placeholder="Pencarian..."

4
src/components/Hero.jsx
View File

@ -11,7 +11,7 @@ function Hero() {
2xl:ml-28 xl:ml-24 items-center"> 2xl:ml-28 xl:ml-24 items-center">
{/* Left Section */} {/* Left Section */}
<div className="box text-left px-4 lg:px-0"> <div className="box text-left px-4 lg:px-0 md:-ml-6 md:-mt-20">
<img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" /> <img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" />
<h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4"> <h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4">
Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI. Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
@ -28,7 +28,7 @@ function Hero() {
</div> </div>
{/* Buttons */} {/* Buttons */}
<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"> <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] 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

12
src/components/Kenapa.jsx
View File

@ -11,7 +11,7 @@ function Kenapa() {
</div> </div>
{/* Image Section */} {/* Image Section */}
<div className="relative w-full md:w-1/2 p-5 flex justify-center md:justify-start"> <div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
<img <img
src={imgLeft} src={imgLeft}
alt="Woman with Tablet" alt="Woman with Tablet"
@ -22,13 +22,13 @@ function Kenapa() {
{/* 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 text-center md:text-left"> <div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start text-center md:text-left">
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2> <h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2>
<p className="text-customBlack mt-4 text-sm md:text-base"> <p className="text-customBlack mt-4 text-sm md:max-w-[75%] md:leading-8 md:text-[18px]">
Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
untuk meningkatkan efisiensi operasional, mempercepat proses, dan untuk meningkatkan efisiensi operasional, mempercepat proses, dan
memberikan wawasan berbasis data yang akurat. memberikan wawasan berbasis data yang akurat.
</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:max-w-[70%] md:text-base text-customBlack font-medium">
<li className="flex items-center"> <li className="flex items-center">
<img src={chek2} 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.
@ -47,12 +47,12 @@ function Kenapa() {
</li> </li>
</ul> </ul>
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-4 w-full"> <div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-pink-600 text-pink-700 font-bold rounded-lg hover:bg-white hover:bg-opacity-10 transition"> <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-pink-600 text-pink-700 font-bold rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-5 md:h-5" /> <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-5 md:h-5" />
Konsultasi Gratis Konsultasi Gratis
</button> </button>
<button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white font-bold rounded-lg hover:opacity-90 transition"> <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white font-bold rounded-[14px] hover:opacity-90 transition">
Coba Sekarang Coba Sekarang
</button> </button>
</div> </div>

6
src/components/MasaDepan.jsx
View File

@ -6,14 +6,14 @@ function MasaDepan() {
{/* 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">
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-xl rounded-2xl w-48 h-12"> <span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
#Rekan AI #Rekan AI
</span> </span>
<h1 className="text-2xl sm:text-3xl font-semibold text-black"> <h1 className="text-2xl sm:text-[32px] font-semibold text-black">
Masa Depan Bisnis, Dimulai Hari Ini Masa Depan Bisnis, Dimulai Hari Ini
</h1> </h1>
</div> </div>
<p className="text-base sm:text-lg text-gray-600 mt-2 leading-relaxed px-4 sm:px-0"> <p className="text-base sm:text-xl text-customBlack-600 md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih
cerdas, efisien, dan kompetitif. cerdas, efisien, dan kompetitif.
</p> </p>

4
src/components/Mendukung.jsx
View File

@ -11,7 +11,7 @@ function Mendukung() {
return ( return (
<div className="flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2"> <div className="flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2">
{/* Left Content */} {/* Left Content */}
<div className="flex flex-col justify-center w-full md:w-2/5 space-y-8 order-2 md:order-1"> <div className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1">
<p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left"> <p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
Solusi Mendukung Bisnis di Setiap Skala Usaha Solusi Mendukung Bisnis di Setiap Skala Usaha
</p> </p>
@ -21,7 +21,7 @@ function Mendukung() {
<div className="flex flex-col md:flex-row justify-center md:justify-between gap-6"> <div className="flex flex-col md:flex-row justify-center md:justify-between gap-6">
{items.map((item) => ( {items.map((item) => (
<div key={item.id} className="flex flex-col items-center w-full md:w-auto"> <div key={item.id} className="flex flex-col items-center w-full md:w-auto md:mt-5">
{/* Image */} {/* Image */}
<img <img
src={item.image} src={item.image}

12
src/components/Mitra.jsx
View File

@ -78,7 +78,7 @@ function Mitra() {
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
handleNext(); handleNext();
}, 7900); // Slider bergerak setiap 4 detik }, 8900); // Slider bergerak setiap 4 detik
return () => clearInterval(interval); // Membersihkan interval saat komponen unmount return () => clearInterval(interval); // Membersihkan interval saat komponen unmount
}, [currentIndex]); }, [currentIndex]);
@ -91,7 +91,7 @@ function Mitra() {
> >
<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="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-[510px] h-[56px]">
<p className="text-sm md:text-lg font-semibold m-0"> <p className="text-sm md:text-lg font-semibold m-0">
Saatnya Melangkah lebih jauh untuk bisnis Anda! Saatnya Melangkah lebih jauh untuk bisnis Anda!
</p> </p>
@ -107,8 +107,8 @@ function Mitra() {
</div> </div>
</div> </div>
<section className="flex justify-center 2xl:w-[1516px] w-screen mb-40 -mt-[350px] md:-mt-[292px] mx-auto"> <section className="flex justify-center 2xl:w-[1516px] w-screen mb-40 -mt-[350px] md:-mt-[290px] mx-auto">
<div className="bg-customWhite shadow-lg rounded-[34px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden"> <div className="bg-customWhite shadow-lg rounded-[37px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden">
{/* Prev Button (Hidden on Mobile) */} {/* Prev Button (Hidden on Mobile) */}
<button onClick={handlePrev} className="hidden md:block"> <button onClick={handlePrev} className="hidden md:block">
<img src= {arrow1} alt="Previous" className="w-4 h-4 md:w-6 md:h-6" /> <img src= {arrow1} alt="Previous" className="w-4 h-4 md:w-6 md:h-6" />
@ -116,14 +116,14 @@ function Mitra() {
{/* Carousel Items */} {/* Carousel Items */}
<div className="overflow-hidden flex-1"> <div className="overflow-hidden flex-1">
<div <div
className="flex transition-transform duration-[10000ms] ease-in-out" className="flex transition-transform duration-[10500ms] ease-in-out"
style={{ transform: `translateX(-${currentIndex * 100}%)` }} style={{ transform: `translateX(-${currentIndex * 100}%)` }}
> >
{Array.from( {Array.from(
{ length: Math.ceil(items.length / itemsPerSlide) }, { length: Math.ceil(items.length / itemsPerSlide) },
(_, slideIndex) => ( (_, slideIndex) => (
<div <div
className="flex-shrink-0 w-full grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4" className="flex-shrink-0 w-full grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-4"
key={slideIndex} key={slideIndex}
> >
{items {items

10
src/components/Solusi.jsx
View File

@ -26,15 +26,15 @@ function Solusi() {
]; ];
return ( return (
<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-24" id="solusi">
<div className="text-center mb-16"> <div className="text-center mb-12">
<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-semibold">Ragam Solusi Terbaik Dari</h1> <h1 className="text-2xl md:text-[32px] 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>
</div> </div>
<p className="text-gray-600 mt-4 max-w-[95%] text-center items-center"> <p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center">
Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek. Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek.
</p> </p>
</div> </div>
@ -55,7 +55,7 @@ function Solusi() {
</li> </li>
))} ))}
</ul> </ul>
<button className="w-[355px] h-[62px] bg-white border-2 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-full hover:bg-blue-600 hover:text-white transition duration-300"> <button className="w-[355px] h-[62px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
Selengkapnya <span>&rarr;</span> Selengkapnya <span>&rarr;</span>
</button> </button>
</div> </div>