76 lines
3.6 KiB
JavaScript
76 lines
3.6 KiB
JavaScript
import React, { useState } from 'react';
|
||
import ModalVideo from "react-modal-video";
|
||
import "react-modal-video/css/modal-video.css";
|
||
|
||
const Header = ({ rtl }) => {
|
||
const [isOpen, setOpen] = useState(false);
|
||
|
||
const openVideo = (e) => {
|
||
e.preventDefault();
|
||
setOpen(true);
|
||
}
|
||
|
||
return (
|
||
<header className="style-4" data-scroll-index="0">
|
||
<div className="content">
|
||
<div className="container">
|
||
<div className="row gx-0">
|
||
<div className="col-lg-6">
|
||
<div className="info">
|
||
<small className="mb-50 title_small">{ rtl ? 'نوتيرو - تطبيق مذكرة سهل الاستخدام' : 'Notero - Easy Notes App' }</small>
|
||
<h1 className="mb-30">{ rtl ? 'احفظ' : 'Note' } <span>{ rtl ? 'كل شئ' : 'Your Everything' }</span> { rtl ? 'على التطبيق' : 'In One App' }</h1>
|
||
<p className="text">{ rtl ? 'لا يلزم الترميز لإجراء التخصيصات. يحتوي المُخصص المباشر' : 'No coding required to make customizations. The live customizer' }<br />{ rtl ? 'على كل ما تحتاجه.' : 'has everything you need.' }</p>
|
||
<div className="d-flex align-items-center mt-50">
|
||
<a href="https://www.apple.com/app-store" rel="noreferrer" className="btn rounded-pill bg-blue4 fw-bold text-white me-4" target="_blank">
|
||
<small> <i className="fab fa-apple me-2 pe-2 border-end"></i>{ rtl ? 'تحميل التطبيق' : 'Download App' }</small>
|
||
</a>
|
||
<a href="https://youtu.be/pGbIOC83-So?t=21" data-lity className="play-btn" onClick={openVideo}>
|
||
<span className="icon me-2">
|
||
<i className="fas fa-play ms-1"></i>
|
||
</span>
|
||
<strong className="small">{ rtl ? 'مشاهدة' : 'View' } <br />{ rtl ? 'البرومو' : 'Promotion' }</strong>
|
||
</a>
|
||
</div>
|
||
<span className="mt-100 me-5">
|
||
<small
|
||
className="icon-30 bg-gray rounded-circle color-blue4 d-inline-flex align-items-center justify-content-center me-2">
|
||
<i className="fas fa-sync"></i>
|
||
</small>
|
||
<small className="text-uppercase">{ rtl ? 'مجانى لمده 14 يوم' : 'Free 14 Days Trial' }</small>
|
||
</span>
|
||
<span className="mt-100">
|
||
<small
|
||
className="icon-30 bg-gray rounded-circle color-blue4 d-inline-flex align-items-center justify-content-center me-2">
|
||
<i className="fas fa-credit-card"></i>
|
||
</small>
|
||
<small className="text-uppercase">{ rtl ? 'دفعة لمرة واحدة' : 'One time payment' }</small>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6">
|
||
<div className="img">
|
||
<img src="/assets/img/header/header_4.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img src="/assets/img/header/header_4_bubble.png" alt="" className="bubble" />
|
||
</div>
|
||
<img src="/assets/img/header/header_4_wave.png" alt="" className="wave" />
|
||
{
|
||
typeof window !== "undefined" &&
|
||
(
|
||
<ModalVideo
|
||
channel="youtube"
|
||
autoplay
|
||
isOpen={isOpen}
|
||
videoId="pGbIOC83-So"
|
||
onClose={() => setOpen(false)}
|
||
/>
|
||
)
|
||
}
|
||
</header>
|
||
)
|
||
}
|
||
|
||
export default Header |