[javascript] CardStoryGethome
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
- import Slider from 'react-slick';
- import Youtube from '../player';
- const PrevArrow = ({ onClick }) => <img onClick={onClick} src="/icons/prev-arrow.png" alt="icon" className="hidden lg:flex -translate-y-12 -translate-x-8 slick-arrow slick-prev" style={{ width: "60px", height: "60px" }} />
- const NextArrow = ({ onClick }) => <img onClick={onClick} src="/icons/next-arrow.png" alt="icon" className="hidden lg:flex -translate-y-10 translate-x-8 slick-arrow slick-next" style={{ width: "60px", height: "60px" }} />
- const story = [
- {
- id: "fS1UTskX5i8",
- nama: "Jullyana - Sales",
- story:
- <>
- {'Berawal dari hobbynya berjualan, Jully memulai karirnya dengan berjualan sebagai agen pasca bayar di Excelcomindo Pratama.'} <br /><br />
- {'Seiring berjalannya waktu, ia melihat sebuah tantangan dalam penjualan di bisnis properti, dan hal itu membuatnya penasaran. Akhirnya Jully bersama temannya memutuskan untuk terjun sebagai Marketing Properti dengan 23 unit rumah. Tidak kurang dari 3 bulan, semua tumah tersebut sold out.'}
- </>,
- },
- {
- id: "i6AUD0SEe58",
- nama: "Ari - Agen",
- story:
- <>
- {'Ari, mahasiswa IPB yang jadi marketing freelance di gethome.id. Berawal dari dirinya yang ingin memberikan pembuktikan kepada keluarga dan teman - temannya, kesulitan demi kesulitan dihadapi.'} <br /><br />
- {'Walaupun menghadapi berbagai macam costumer, problematika itu tidak mematikan api semangat ari untuk bekerja sesuai passionnya. Seperti apa keseruan cerita dari Ari si Mahasiswa IPB ketika menjadi marketing freelance gethome.id yuk simak video selengkapnya.'}
- </>,
- },
- {
- id: "3ivbJHNtjVk",
- nama: "Aris - Agen",
- story:
- <>
- {'Berawal dari membuka toko kecil - kecilan di masa kuliahnya, Aris memiliki ketertarikan untuk mencoba berjualan.'} <br /><br />
- {'Setelah lulus dari bangku perkuliahannya, Aris memilih bekerja sebagai sales kartu kredit selama satu tahun di salah satu bank luar negeri, setelah itu pindah ke bank internasional lain tapi sebagai tim operasional selama hampir lima tahun setelahnya, Aris memutuskan untuk mulai mengajar di salah satu sekolah untuk membagi ilmunya.'}
- </>,
- },
- ];
- export function CardStoryGethome() {
- const settings = {
- dotsClass: "slickStory",
- dots: true,
- infinite: true,
- slidesToShow: 1,
- slidesToScroll: 1,
- nextArrow: <NextArrow />,
- prevArrow: <PrevArrow />,
- };
- return (
- <Slider {...settings}>
- {story.map((e, i) => (
- <div key={i} >
- <div className="md:grid md:grid-cols-2 md:justify-center gap-2 lg:gap-6 space-y-8 md:space-y-0 px-1">
- <div className="relative">
- <Youtube embedId={e.id} />
- </div>
- <div className="relative flex flex-wrap md:justify-center z-10 ">
- <div className={`bg-white rounded-xl pl-10 pr-10 dark:bg-blacksy-1 dark:shadow-blacksy-2 space-y-8 w-full h-full`}>
- <h1 className="font-bold text-redsy-1 text-md lg:text-2xl pt-5 lg:pt-10 lg:pb-3">{e.nama}</h1>
- <p className="absolute -translate-y-3/4 text-redsy-1 font-extrabold text-3xl lg:text-5xl">“</p>
- <p className="font-medium text-sm pb-12 lg:pb-0">{e.story}</p>
- <p className="absolute right-12 bottom-0 -translate-y-1/2 lg:-translate-y-1/2 text-redsy-1 font-extrabold text-3xl lg:text-5xl">”</p>
- </div>
- </div>
- </div>
- </div>
- ))}
- </Slider>
- );
- }
Editor
You can edit this paste and save as new: