Remove unused pages and components related to single projects and RTL layouts; update navbar JSON structure for improved organization and clarity; replace favicon with a new image.
This commit is contained in:
Cesar Mendivil
parent
9ad24b7935
commit
008e06f6ff
@ -8,8 +8,8 @@ const HtmlAttributes = {
|
||||
const HeadComponents = [
|
||||
<meta key="httpEquiv" httpEquiv="X-UA-Compatible" content="IE=edge" />,
|
||||
<meta key="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />,
|
||||
<meta key="keywords" name="keywords" content="React Gatsby Template Iteck Multi-Purpose themeforest" />,
|
||||
<meta key="description" name="description" content="Iteck - Multi-Purpose React.js Gatsby Template" />,
|
||||
<meta key="keywords" name="keywords" content="Nextream - Tech & IT Solutions" />,
|
||||
<meta key="description" name="description" content="Nextream - Tech & IT Solutions" />,
|
||||
<meta key="author" name="author" content="" />,
|
||||
<link key="styles-bs-icons" rel="stylesheet" href="/assets/css/lib/bootstrap-icons.css" />,
|
||||
<link key="styles-fa" rel="stylesheet" href="/assets/css/lib/all.min.css" />,
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const FirstContent = ({ features, rtl }) => {
|
||||
return (
|
||||
<div className="content frs-content" id="about" data-scroll-index="2">
|
||||
<div className="container">
|
||||
<div className="row align-items-center justify-content-between">
|
||||
<div className="col-lg-6">
|
||||
<div className="img mb-30 mb-lg-0">
|
||||
<img src="/assets/img/about/ipad.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="info">
|
||||
<div className="section-head style-4">
|
||||
<small className="title_small">{ rtl ? 'نوتيرو - تطبيق مذكرة سهل الاستخدام' : 'Notero - Easy Notes App' }</small>
|
||||
<h2 className="mb-30">{ rtl ? 'تطبيق لاصحاب' : 'The Notero For' } <span> { rtl ? 'الابداع' : 'Creatives' } </span> </h2>
|
||||
</div>
|
||||
<p className="text mb-40">
|
||||
{
|
||||
rtl && 'حافظ على تركيزك وإنتاجيتك مع مساحة خالية من الفوضى. الطرق المرنة لتنظيم ملاحظاتك: علامات التجزئة ، دفاتر الملاحظات المتداخلة ، تثبيت الملاحظات في أعلى قائمة الملاحظات ، إلخ.'
|
||||
}
|
||||
{
|
||||
!rtl &&
|
||||
<>
|
||||
Stay focused and productive with a clean and clutter-free note <br /> space. The flexible ways to organize your notes: hashtags, nested notebooks, pinning notes to the top of the note list, etc
|
||||
</>
|
||||
}
|
||||
</p>
|
||||
<ul>
|
||||
{
|
||||
features.map((item, index) => (
|
||||
<li className="d-flex align-items-center mb-3" key={index}>
|
||||
<small className="icon-30 bg-gray rounded-circle color-blue4 d-inline-flex align-items-center justify-content-center me-3">
|
||||
<i className={item.icon}></i>
|
||||
</small>
|
||||
<h6 className="fw-bold">{item.title}</h6>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<a href="page-contact-5.html" className="btn rounded-pill bg-blue4 fw-bold text-white mt-50">
|
||||
<small> Free Register </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/about/about_s4_lines.png" alt="" className="lines" />
|
||||
<img src="/assets/img/about/about_s4_bubble.png" alt="" className="bubble" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FirstContent;
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Integration = ({ integrations, rtl }) => {
|
||||
return (
|
||||
<div className="integration pt-60" data-scroll-index="3">
|
||||
<div className="section-head text-center style-4">
|
||||
<small className="title_small">{ rtl ? 'دفعة لمرة واحدة' : 'One-Time Payment' }</small>
|
||||
<h2 className="mb-20">{ rtl ? 'متوافق مع' : 'Integration With' } <span>{ rtl ? 'التطبيقات الشعبية' : 'Popular Apps' }</span> </h2>
|
||||
<p>{ rtl ? 'نوتيرو يتكامل مع التطبيقات الشعبية. تساعدك على التواصل والتعاون بسهولة' : 'Notero intergrate with popular apps. Help you easy to connect and collaboration' }</p>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
{
|
||||
integrations.map((integration, index) => (
|
||||
<div className="img" key={index}>
|
||||
<img src={integration} alt="" className="mt-30" />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/about/intg_back.png" alt="" className="intg-back" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Integration
|
||||
@ -1,65 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const SecondContent = ({ accordions, rtl }) => {
|
||||
return (
|
||||
<div className="content sec-content">
|
||||
<div className="container">
|
||||
<div className="row align-items-center justify-content-between">
|
||||
<div className="col-lg-5 order-2 order-lg-0">
|
||||
<div className="info">
|
||||
<div className="section-head style-4">
|
||||
<small className="title_small">{ rtl ? 'إدارة أفضل للملاحظات' : 'Better Note Management' }</small>
|
||||
<h2 className="mb-30">{ rtl ? 'ملاحظاتك' : 'Your Notes' } <span> { rtl ? 'في امان' : 'Security' } </span></h2>
|
||||
</div>
|
||||
<p className="text mb-40">
|
||||
{
|
||||
rtl ?
|
||||
'يتزامن تلقائيًا عبر جميع أجهزتك. يمكنك أيضًا الوصول إلى الملاحظات وكتابتها بدون اتصال بالإنترنت'
|
||||
:
|
||||
'Automatically syncs across all your devices. You can also access and write notes without internet connection.'
|
||||
}
|
||||
</p>
|
||||
<div className="faq style-3 style-4">
|
||||
<div className="accordion" id="accordionExample">
|
||||
{
|
||||
accordions.map((accordion, index) => (
|
||||
<div className="accordion-item" key={index}>
|
||||
<h2 className="accordion-header" id={`heading${accordion.id}`}>
|
||||
<button className={`accordion-button ${index !== 0 ?'collapsed':''}`} type="button" data-bs-toggle="collapse" data-bs-target={`#collapse${accordion.id}`} aria-expanded="true" aria-controls={`collapse${accordion.id}`}>
|
||||
{ accordion.title }
|
||||
</button>
|
||||
</h2>
|
||||
<div id={`collapse${accordion.id}`} className={`accordion-collapse collapse ${index === 0 ?'show':''}`} aria-labelledby={`heading${accordion.id}`} data-bs-parent="#accordionExample">
|
||||
<div className="accordion-body">
|
||||
{ accordion.content }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://chrome.google.com/webstore/category/extensions" rel="noreferrer" className="btn btn-img mt-40 rounded-pill" target="_blank">
|
||||
<div className="icon img-contain">
|
||||
<img src="/assets/img/icons/chrome_icon.png" alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<small>{ rtl ? 'متاح في' : 'Available in the' }</small>
|
||||
<h6>{ rtl ? 'متجر كروم الالكتروني' : 'Chrome Web Store' }</h6>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-0 order-lg-2">
|
||||
<div className="img mb-30 mb-lg-0">
|
||||
<img src="/assets/img/about/2mobiles.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/about/about_s4_bubble2.png" alt="" className="bubble2" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SecondContent
|
||||
@ -1,45 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
const ThirdContent = ({ features, rtl }) => {
|
||||
return (
|
||||
<div className="content trd-content">
|
||||
<div className="container">
|
||||
<div className="row align-items-center justify-content-between">
|
||||
<div className="col-lg-6">
|
||||
<div className="img mb-30 mb-lg-0">
|
||||
<img src="/assets/img/about/about_s4_img3.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="info">
|
||||
<div className="section-head style-4">
|
||||
<small className="title_small">{ rtl ? 'ثيمات جميلة' : 'Beautiful Themes' }</small>
|
||||
<h2 className="mb-30">{ rtl ? 'ركز أكثر مع' : 'Focus More With' } <span>{ rtl ? 'المظهر الداكن' : 'Dark Theme' }</span> </h2>
|
||||
</div>
|
||||
<p className="text mb-40">
|
||||
{ rtl ? 'قم بتطبيق سمات نوتيرو الأنيقة حسب ذوقك. تعمل السمات المظلمة بشكل ممتاز لأولئك الذين يفضلون الوضع الخالي من الإلهاء.' : 'Apply Notero’s elegant themes to your taste. Dark themes work excellently for those who prefer distraction-free mode.' }
|
||||
</p>
|
||||
<ul>
|
||||
{
|
||||
features.map((feature, index) => (
|
||||
<li className={`d-flex align-items-center ${feature.active ? '':'op-4'}`} key={index}>
|
||||
<i className="bi bi-dot fs-2 me-2 lh-1 color-blue4"></i>
|
||||
<h6 className="fw-bold">{ feature.title }</h6>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<Link to="/page-services-5" className="btn rounded-pill bg-blue4 fw-bold text-white mt-50">
|
||||
<small>{ rtl ? 'اكتشف الآن' : 'Discovery Now' }</small>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/about/about_s4_bubble.png" alt="" className="bubble" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThirdContent
|
||||
@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import aboutData from 'data/App/about.json';
|
||||
import aboutDataRTL from 'data/App/about-rtl.json';
|
||||
import FirstContent from './FirstContent';
|
||||
import SecondContent from './SecondContent';
|
||||
import ThirdContent from './ThirdContent';
|
||||
import Integration from './Integration';
|
||||
|
||||
const About = ({ noFirstContent, noIntegration, noWave, rtl }) => {
|
||||
const data = rtl ? aboutDataRTL : aboutData;
|
||||
|
||||
return (
|
||||
<section className={`about ${noWave ? '':'section-padding'} style-4`}>
|
||||
{
|
||||
!noFirstContent && (<FirstContent features={data.features} rtl={rtl} />)
|
||||
}
|
||||
<SecondContent accordions={data.accordions} rtl={rtl} />
|
||||
<ThirdContent features={data.thirdFeatures} rtl={rtl} />
|
||||
{
|
||||
!noIntegration && (<Integration integrations={data.integrations} rtl={rtl} />)
|
||||
}
|
||||
{
|
||||
!noWave && (
|
||||
<>
|
||||
<img src="/assets/img/about/about_s4_wave.png" alt="" className="top-wave" />
|
||||
<img src="/assets/img/about/about_s4_wave.png" alt="" className="bottom-wave" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@ -1,75 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import aboutData from 'data/App/about.json';
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<section className="about section-padding style-4">
|
||||
<div className="integration">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="section-head text-center style-4">
|
||||
<small className="title_small">About Our Company</small>
|
||||
<h2 className="mb-20">We are the perfect <br /> Integration and IT solutions <span> Agency of Popular Apps </span> </h2>
|
||||
<p>Notero intergrate with popular apps. Help you easy to connect and collaboration</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="content mb-100 pb-100 border-1 border-bottom brd-gray">
|
||||
{
|
||||
aboutData.integrations.map((item, index) => (
|
||||
<div className="img" key={index}>
|
||||
<img src={item} alt="" className="mt-30" />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/about/intg_back.png" alt="" className="intg-back" />
|
||||
</div>
|
||||
<div className="content frs-content">
|
||||
<div className="container">
|
||||
<div className="row align-items-center justify-content-between">
|
||||
<div className="col-lg-6">
|
||||
<div className="img mb-30 mb-lg-0">
|
||||
<img src="/assets/img/about/ipad.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="info">
|
||||
<div className="section-head style-4">
|
||||
<small className="title_small">Notero - Easy Notes App</small>
|
||||
<h2 className="mb-30">The Notero For <span>Creatives</span> </h2>
|
||||
</div>
|
||||
<p className="text mb-40">
|
||||
Stay focused and productive with a clean and clutter-free note <br />
|
||||
space. The flexible ways to organize your notes: hashtags, nested notebooks, pinning notes to the top of the note list, etc
|
||||
</p>
|
||||
<ul>
|
||||
{
|
||||
aboutData.features.map((feature, index) => (
|
||||
<li className={`d-flex align-items-center ${index !== aboutData.features.length - 1 ? 'mb-3':''}`} key={index}>
|
||||
<small className="icon-30 bg-gray rounded-circle color-blue4 d-inline-flex align-items-center justify-content-center me-3">
|
||||
<i className={feature.icon}></i>
|
||||
</small>
|
||||
<h6 className="fw-bold">{ feature.title }</h6>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<Link to="/page-contact-5" className="btn rounded-pill bg-blue4 fw-bold text-white mt-50">
|
||||
<small>Free Register</small>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/about/about_s4_lines.png" alt="" className="lines" />
|
||||
<img src="/assets/img/about/about_s4_bubble.png" alt="" className="bubble" />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
import clients from 'data/App/clients.json';
|
||||
|
||||
const Clients = ({ rtl }) => {
|
||||
return (
|
||||
<section className="clients style-4">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<h5 className="fw-bold mb-60"><span className="color-blue4">{ rtl ? '25K+ تحميل' : '25K+ Installation' }</span> { rtl ? 'واستخدام الخدمات' : 'and Featured on' }</h5>
|
||||
</div>
|
||||
<div className="client-logos pb-70">
|
||||
<div className="row align-items-center">
|
||||
{
|
||||
clients.map((client, index) => (
|
||||
<div className="col-6 col-lg-2" key={index}>
|
||||
<a href="#" className="img d-block">
|
||||
<img src={client} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Clients
|
||||
@ -1,35 +0,0 @@
|
||||
import React from 'react';
|
||||
import communityCards from 'data/App/community.json';
|
||||
import communityCardsrRTL from 'data/App/community-rtl.json';
|
||||
|
||||
const Community = ({ rtl }) => {
|
||||
const data = rtl ? communityCardsrRTL : communityCards;
|
||||
|
||||
return (
|
||||
<section className="community section-padding pt-0 style-4">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-4">
|
||||
<small className="title_small">{ rtl ? 'مجتمع نوتيرو' : 'Notero Community' }</small>
|
||||
<h2 className="mb-30">{ rtl ? 'انضم إلى' : 'Join Into' } <span>{ rtl ? 'مركزنا' : 'Our Hub' }</span> </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
{
|
||||
data.map((item, index) => (
|
||||
<a href="#" className="commun-card" key={index}>
|
||||
<div className="icon">
|
||||
<i className={item.icon}></i>
|
||||
</div>
|
||||
<div className="inf">
|
||||
<h5>{ item.title }</h5>
|
||||
<p>{ item.description }</p>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Community
|
||||
@ -1,97 +0,0 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import SwiperCore, { Pagination, Autoplay } from 'swiper';
|
||||
import slides from 'data/App/culture.json';
|
||||
|
||||
import "swiper/css";
|
||||
import 'swiper/css/autoplay';
|
||||
import 'swiper/css/pagination';
|
||||
|
||||
import LightGallery from 'lightgallery/react';
|
||||
|
||||
// import styles
|
||||
import 'lightgallery/css/lightgallery.css';
|
||||
|
||||
SwiperCore.use([Pagination, Autoplay]);
|
||||
|
||||
const Culture = () => {
|
||||
let lgGallery = useMemo(() => null, []);
|
||||
|
||||
const showFancybox = (e, index) => {
|
||||
e.preventDefault();
|
||||
lgGallery.instance.el.children[index].click()
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="culture section-padding style-5">
|
||||
<div className="section-head text-center style-4 mb-60">
|
||||
<small className="title_small">Our Philosophy</small>
|
||||
<h2 className="mb-20">Discover our <span>Culture</span> </h2>
|
||||
<p>More 15,000 Companies & partners trusted & choice Iteck</p>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="culture-slider position-relative pb-80 style-5">
|
||||
<Swiper
|
||||
className="swiper-container"
|
||||
slidesPerView={4}
|
||||
spaceBetween={30}
|
||||
centeredSlides={true}
|
||||
speed={1000}
|
||||
pagination={{
|
||||
el: ".swiper-pagination",
|
||||
clickable: "true"
|
||||
}}
|
||||
navigation={false}
|
||||
mousewheel={false}
|
||||
keyboard={true}
|
||||
autoplay={{
|
||||
delay: 4000
|
||||
}}
|
||||
loop={true}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 1
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 1
|
||||
},
|
||||
787: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 3
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 4
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
slides.map((slide, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<a href={slide} className="culture-card d-block" onClick={(e) => showFancybox(e, index)}>
|
||||
<img src={slide} alt="" />
|
||||
<span className="overlay"></span>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
<div className="swiper-pagination"></div>
|
||||
</div>
|
||||
<LightGallery speed={500} backdropDuration={500} onInit={(lg) => lgGallery = lg}>
|
||||
{
|
||||
slides.map((slide, index) => (
|
||||
<a href={slide} className="culture-card d-block" onClick={(e) => e.preventDefault()} key={index}>
|
||||
<img src={slide} alt="" />
|
||||
<span className="overlay"></span>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</LightGallery>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Culture
|
||||
@ -1,72 +0,0 @@
|
||||
import React from 'react';
|
||||
import faq from 'data/App/faq.json';
|
||||
import faqRTL from 'data/App/faq-rtl.json';
|
||||
|
||||
const FAQ = ({ rtl }) => {
|
||||
const data = rtl ? faqRTL : faq;
|
||||
|
||||
return (
|
||||
<section className="faq section-padding style-4 pt-50" data-scroll-index="7">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-4">
|
||||
<small className="title_small">{ rtl ? 'أسئلة شائعة' : 'Frequently Asked Question' }</small>
|
||||
<h2 className="mb-30">{ rtl ? 'بحاجة إلى' : 'Need A' } <span>{ rtl ? 'دعم ؟' : 'Support?' }</span> </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="faq style-3 style-4">
|
||||
<div className="accordion" id="accordionSt4">
|
||||
<div className="row gx-5">
|
||||
<div className="col-lg-6">
|
||||
{
|
||||
data.map((item, index) => (
|
||||
index <= 3 && (
|
||||
<div className={`accordion-item ${index === 3 ? '':'border-bottom'} rounded-0`} key={index}>
|
||||
<h2 className="accordion-header" id={`heading${item.id + 10}`}>
|
||||
<button className="accordion-button collapsed rounded-0 py-4" type="button" data-bs-toggle="collapse" data-bs-target={`#collapse${item.id + 10}`} aria-expanded="true" aria-controls={`collapse${item.id + 10}`}>
|
||||
{ item.question }
|
||||
</button>
|
||||
</h2>
|
||||
<div id={`collapse${item.id + 10}`} className="accordion-collapse collapse rounded-0" aria-labelledby={`heading${item.id + 10}`} data-bs-parent="#accordionSt4">
|
||||
<div className="accordion-body">
|
||||
{
|
||||
rtl ? item.answer : <>{ item.answer.part1 } <br /> { item.answer.part2 }</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
{
|
||||
data.map((item, index) => (
|
||||
index > 3 && (
|
||||
<div className={`accordion-item ${index === faq.length - 1 ? '':'border-bottom'} rounded-0`} key={index}>
|
||||
<h2 className="accordion-header" id={`heading${item.id + 10}`}>
|
||||
<button className={`accordion-button ${index !== 4 ? 'collapsed':''} rounded-0 py-4`} type="button" data-bs-toggle="collapse" data-bs-target={`#collapse${item.id + 10}`} aria-expanded="true" aria-controls={`collapse${item.id + 10}`}>
|
||||
{ item.question }
|
||||
</button>
|
||||
</h2>
|
||||
<div id={`collapse${item.id + 10}`} className={`accordion-collapse collapse rounded-0 ${index !== 4 ? '':'show'}`} aria-labelledby={`heading${item.id + 10}`} data-bs-parent="#accordionSt4">
|
||||
<div className="accordion-body">
|
||||
{
|
||||
rtl ? item.answer : <>{ item.answer.part1 } <br /> { item.answer.part2 }</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FAQ
|
||||
@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import features from 'data/App/features.json';
|
||||
import featuresRTL from 'data/App/features-rtl.json';
|
||||
|
||||
const Features = ({ rtl }) => {
|
||||
const featuresData = rtl ? featuresRTL : features;
|
||||
|
||||
return (
|
||||
<section className="features pt-70 pb-70 style-4" data-scroll-index="1">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-4">
|
||||
<small className="title_small bg-white">{ rtl ? 'نوتيرو - تطبيق مذكرة سهل الاستخدام' : 'Notero - Easy Notes App' }</small>
|
||||
<h2 className="mb-70">{ rtl ? 'خدمات' : 'Awesome' } <span> { rtl ? 'رائعة' : 'Features' } </span> </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
{
|
||||
featuresData.map((feature, index) => (
|
||||
<div className="features-card" key={index}>
|
||||
<div className="icon img-contain">
|
||||
<img src={feature.image} alt="" />
|
||||
{ feature.new && <span className="label icon-40 alert-success text-success rounded-circle small text-uppercase fw-bold">{ rtl ? 'جديد' : 'new' }</span> }
|
||||
</div>
|
||||
<h6>{ feature.title.text1 } <br /> { feature.title.text2 }</h6>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/feat_circle.png" alt="" className="img-circle" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Features
|
||||
@ -1,114 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
const Footer = ({ noWave, rtl }) => {
|
||||
const handleMouseMove = (event) => {
|
||||
const dropDownToggler = event.target.classList.contains('dropdown-toggle') ? event.target : event.target.querySelector('.dropdown-toggle');
|
||||
const dropDownMenu = dropDownToggler?.nextElementSibling;
|
||||
|
||||
dropDownToggler?.classList?.add('show');
|
||||
dropDownMenu?.classList?.add('show');
|
||||
}
|
||||
|
||||
const handleMouseLeave = (event) => {
|
||||
const dropdown = event.target.classList.contains('dropdown') ? event.target : event.target.closest('.dropdown');
|
||||
const dropDownToggler = dropdown.querySelector('.dropdown-toggle');
|
||||
const dropDownMenu = dropdown.querySelector('.dropdown-menu');
|
||||
|
||||
dropDownToggler?.classList?.remove('show');
|
||||
dropDownMenu?.classList?.remove('show');
|
||||
}
|
||||
|
||||
return (
|
||||
<footer className={`style-4 ${noWave ? 'mt-0 pt-100':''}`} data-scroll-index="8">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-4">
|
||||
<h2 className="mb-10">{ rtl ? 'جاهز' : 'Ready To' } <span>{ rtl ? 'للتنزيل' : 'Download' }</span> </h2>
|
||||
<p>{ rtl ? 'اكتشف مساحاتك المفضلة الجديدة ، من ساو باولو إلى سيول. قم بالتنزيل من App Store أو Google Play.' : 'Discover your new favorite spaces, from Sao Paulo to Seoul. Download from App Store or Google Play.' }</p>
|
||||
<div className="d-flex align-items-center justify-content-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 On App Store' }</small>
|
||||
</a>
|
||||
<a href="https://play.google.com/store/apps" rel="noreferrer" className="btn rounded-pill hover-blue4 fw-bold border-blue4" target="_blank">
|
||||
<small> <i className="fab fa-google-play me-2 pe-2 border-end"></i> { rtl ? 'تنزيل من متجر ابل' : 'Download On Google Play' }</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="foot mt-80">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-2">
|
||||
<div className="logo">
|
||||
<img src="/assets/img/logo_lgr.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<ul className="links">
|
||||
<li>
|
||||
<Link to="/home-app-landing" className="active">{ rtl ? 'الرئيسية' : 'Home' }</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/page-about-5">{ rtl ? 'من نحن' : 'about' }</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/page-product-5">{ rtl ? 'المنتجات' : 'product' }</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/page-portfolio-5">{ rtl ? 'المشاريع' : 'portfolio' }</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/page-services-5">{ rtl ? 'الخدمات' : 'services' }</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/page-shop-5">{ rtl ? 'المتجر' : 'shop' }</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/page-blog-5">{ rtl ? 'الاخبار' : 'blog' }</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/page-contact-5">{ rtl ? 'اتصل بنا' : 'contact' }</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
{
|
||||
rtl ?
|
||||
(
|
||||
<div className="dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
|
||||
<button className="icon-25 dropdown-toggle p-0 border-0 bg-transparent rounded-circle img-cover" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="/assets/img/lang.png" alt="" className="me-2" />
|
||||
<small>العربية</small>
|
||||
</button>
|
||||
<ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<li><a className="dropdown-item" href="#">English</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
(
|
||||
<div className="dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
|
||||
<button className="icon-25 dropdown-toggle p-0 border-0 bg-transparent rounded-circle img-cover" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="/assets/img/lang.png" alt="" className="me-2" />
|
||||
<small>English</small>
|
||||
</button>
|
||||
<ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<li><a className="dropdown-item" href="#">English</a></li>
|
||||
<li><a className="dropdown-item" href="#">Arabic</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="copywrite text-center">
|
||||
<small className="small">
|
||||
{ rtl ? '© 2022 حقوق التأليف والنشر' : '© 2022 Copyrights by' } <a href="#" className="fw-bold text-decoration-underline">Iteck Co.</a> { rtl ? 'كل الحقوق محفوظة. صمم بواسطة' : 'All Rights Reserved. Designed by' } <a href="https://themeforest.net/user/themescamp" className="fw-bold text-decoration-underline">ThemesCamp</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
{ !noWave && <img src="/assets/img/footer/footer_4_wave.png" alt="" className="wave" /> }
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -1,76 +0,0 @@
|
||||
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
|
||||
@ -1,70 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import plans from 'data/App/plans.json';
|
||||
import plansRTL from 'data/App/plans-rtl.json';
|
||||
|
||||
const Pricing = ({ rtl }) => {
|
||||
const data = rtl ? plansRTL : plans;
|
||||
|
||||
return (
|
||||
<section className="pricing section-padding style-4 pb-50" data-scroll-index="6">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-4">
|
||||
<small className="title_small">{ rtl ? 'خطة الاسعار' : 'Pricing Plan' }</small>
|
||||
<h2 className="mb-30">{ rtl ? 'ابدأ بـ' : 'Start With' } <span> { rtl ? 'سعر مناسب' : 'Affordable Price' } </span> </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="toggle_switch d-flex align-items-center justify-content-center mb-40">
|
||||
<div className="form-check form-switch p-0">
|
||||
<label className="form-check-label" htmlFor="flexSwitchCheckDefault"><small>{ rtl ? 'تدفع شهريا' : 'Billed monthly' }</small></label>
|
||||
<input className="form-check-input float-none bg-blue4" type="checkbox" id="flexSwitchCheckDefault" defaultChecked />
|
||||
<label className="form-check-label" htmlFor="flexSwitchCheckDefault"><small>{ rtl ? 'دفع سنوى' : 'Billed annually' }</small></label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row gx-0">
|
||||
{
|
||||
data.map((plan, index) => (
|
||||
<div className="col-lg-6" key={index}>
|
||||
<div className="price-card">
|
||||
<div className="price-header pb-4">
|
||||
<h6> <img src={plan.image} alt="" className="icon" /> { plan.title } </h6>
|
||||
<h2>{ plan.price } <small> / { rtl ? 'شهري' : 'month' }</small></h2>
|
||||
<p>{ plan.description }</p>
|
||||
</div>
|
||||
<div className="price-body py-4">
|
||||
<ul>
|
||||
{
|
||||
plan.features.map((feature, i) => (
|
||||
<li className={`d-flex align-items-center mb-3 ${feature.active ? '':' op-3'}`} key={i}>
|
||||
<small className="icon-30 bg-blue4 rounded-circle text-white d-inline-flex align-items-center justify-content-center me-3 flex-shrink-0">
|
||||
<i className={feature.icon}></i>
|
||||
</small>
|
||||
<p className="fw-bold">{ feature.title }</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<Link to="/page-contact-5" className={`btn rounded-pill ${index === 0 ? 'border-blue4':'bg-blue4'} hover-blue4 fw-bold mt-50 px-5 ${index === 0 ? 'border-blue4':'text-white'}`}>
|
||||
<small>{ rtl ? 'سجل الان' : 'Register Now' }</small>
|
||||
</Link>
|
||||
</div>
|
||||
{
|
||||
plan.off &&
|
||||
<div className="off">
|
||||
<span>
|
||||
{ plan.off } <br /> { rtl ? 'خصم' : 'off' }
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Pricing
|
||||
@ -1,72 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import screenshots from 'data/App/screenshots.json';
|
||||
|
||||
import "swiper/css";
|
||||
|
||||
const Screenshots = ({ rtl }) => {
|
||||
const [loadSwiper, setLoadSwiper] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoadSwiper(true);
|
||||
}, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="screenshots style-4" data-scroll-index="4">
|
||||
<div className="screenshots-slider style-4">
|
||||
{
|
||||
loadSwiper && (
|
||||
<Swiper
|
||||
dir={rtl ? 'rtl' : 'ltr'}
|
||||
className="swiper-container"
|
||||
spaceBetween={0}
|
||||
slidesPerView={5}
|
||||
pagination={false}
|
||||
navigation={false}
|
||||
mousewheel={false}
|
||||
keyboard={true}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 4000
|
||||
}}
|
||||
speed={1000}
|
||||
centeredSlides={true}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
787: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 5,
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
screenshots.map((screenshot, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="img">
|
||||
<img src={screenshot} alt="" />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<img src="/assets/img/screenshots/hand.png" alt="" className="mob-hand" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Screenshots
|
||||
@ -1,76 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import services from 'data/App/services.json';
|
||||
|
||||
import "swiper/css";
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<section className="services section-padding bg-white pb-50 style-6">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-4 mb-60">
|
||||
<small className="title_small"> Software Apps </small>
|
||||
<h2 className="mb-20"> Our Top <span> Services </span> </h2>
|
||||
<p> Notero intergrate with popular apps. Help you easy to connect and collaboration </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="services-slider position-relative style-6">
|
||||
<Swiper
|
||||
className="swiper-container"
|
||||
slidesPerView={6}
|
||||
centeredSlides={true}
|
||||
spaceBetween={0}
|
||||
speed={1000}
|
||||
pagination={false}
|
||||
navigation={false}
|
||||
mousewheel={false}
|
||||
keyboard={true}
|
||||
autoplay={{
|
||||
delay: 4000
|
||||
}}
|
||||
loop={true}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 1
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 1
|
||||
},
|
||||
787: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 4
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 6
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
services.map((service, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<Link to="/page-services-5" className="service-card style-6">
|
||||
<div className="icon">
|
||||
<img src={service.img} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<h5>{ service.info }</h5>
|
||||
<div className="text">
|
||||
{ service.text }
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Services
|
||||
@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
import teamMembers from 'data/App/team.json'
|
||||
|
||||
const Team = () => {
|
||||
return (
|
||||
<section className="team section-padding style-6">
|
||||
<div className="content">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-4 mb-60">
|
||||
<small className="title_small">The Team Work</small>
|
||||
<h2 className="mb-20">Our <span>Leaders</span> </h2>
|
||||
<p>The Professional Creative Team for Growth-up Works</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
{
|
||||
teamMembers.map((member, index) => (
|
||||
<div className="col-lg-3 col-sm-6" key={index}>
|
||||
<div className={`team-card ${index !== teamMembers.length - 1 ? 'mb-30 mb-lg-0':''} style-6`}>
|
||||
<div className="img img-cover">
|
||||
<img src={member.picture} alt="" />
|
||||
<div className="social-icons">
|
||||
<a href="#" className="me-1">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" className="me-1">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#" className="me-1">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="info">
|
||||
<a className="d-block" href="#"><h6>{ member.name }</h6></a>
|
||||
<small>{ member.position }</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Team
|
||||
@ -1,102 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import ModalVideo from "react-modal-video";
|
||||
import testimonialsData from 'data/App/testimonials.json';
|
||||
import testimonialsDataRTL from 'data/App/testimonials-rtl.json';
|
||||
import "react-modal-video/css/modal-video.css";
|
||||
|
||||
const Testimonials = ({ rtl }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const data = rtl ? testimonialsDataRTL : testimonialsData;
|
||||
|
||||
const openVideo = (e) => {
|
||||
e.preventDefault();
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="testimonials style-4 pt-70" data-scroll-index="5">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
<div className="col-lg-5">
|
||||
<div className="section-head style-4">
|
||||
<small className="title_small">{ rtl ? 'اراء العملاء' : 'Testimonials' }</small>
|
||||
<h2 className="mb-30">{ rtl ? 'محبوب من' : 'Loved From' } <span>{ rtl ? 'العملاء' : 'Customers' }</span></h2>
|
||||
</div>
|
||||
<p className="text mb-40">
|
||||
{ rtl ? 'أحب نوتيرو من آلاف العملاء في جميع أنحاء العالم وحصل على الثقة من الشركات الكبرى.' : 'Notero loved from thoudsands customer worldwide and get trusted from big companies.' }
|
||||
</p>
|
||||
<div className="numbs">
|
||||
{
|
||||
data.numCards.map((card, index) => (
|
||||
<div className="num-card" key={index}>
|
||||
<div className="icon img-contain">
|
||||
<img src={card.image} alt="" />
|
||||
</div>
|
||||
<h2>{ card.value }</h2>
|
||||
{
|
||||
card.stars &&
|
||||
<div className="stars">
|
||||
{ Array(card.stars).fill().map((_,i) => <i className="fas fa-star" key={i}></i>) }
|
||||
</div>
|
||||
}
|
||||
<p>{ typeof card.type === 'string' ? card.type : (<>{card.type.text1} <br /> {card.type.text2}</>) }</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="d-flex align-items-center mt-70">
|
||||
<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> { rtl ? 'انظر التعليقات على متجر التطبيقات' : 'See Reviews On App Store' }</small>
|
||||
</a>
|
||||
<a href="https://youtu.be/pGbIOC83-So?t=21" 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>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="testi-cards">
|
||||
{
|
||||
data.testiCards.map((card, index) => (
|
||||
<div className="client_card" key={index}>
|
||||
<div className="user_img">
|
||||
<img src={card.userImg} alt="" />
|
||||
</div>
|
||||
<div className="inf_content">
|
||||
<div className="stars mb-2">
|
||||
{ Array(card.stars).fill().map((_,i) => <i className="fas fa-star" key={i}></i>) }
|
||||
</div>
|
||||
<h6>
|
||||
{ typeof card.title === 'string' ? card.title : (<>{card.title.text1} <br /> {card.title.text2}</>) }
|
||||
</h6>
|
||||
<p>{ card.author.name } <span className="text-muted"> / { card.author.position } { rtl ? 'في' : 'at' } <span>{ card.author.company }</span> </span></p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<img src="/assets/img/contact_globe.svg" alt="" className="testi-globe" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
typeof window !== "undefined" &&
|
||||
(
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
autoplay
|
||||
isOpen={isOpen}
|
||||
videoId="pGbIOC83-So"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Testimonials
|
||||
@ -1,77 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
const Blogs = ({ blogs, isWide, style, rtl }) => {
|
||||
return (
|
||||
<div className={isWide ? 'col-lg-10':'col-lg-8'}>
|
||||
{
|
||||
blogs.map((blog, index) => (
|
||||
<div className={`card border-0 bg-transparent rounded-0 ${index !== blogs.length - 1 ? 'border-bottom brd-gray':'mb-lg-0 pb-lg-0'} pb-30 mb-30`} key={index}>
|
||||
<div className="row">
|
||||
<div className="col-lg-5">
|
||||
<div className="img img-cover">
|
||||
<img src={blog.cover} className="radius-7" alt="..." />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="card-body p-0">
|
||||
<small className="d-block date text">
|
||||
<a href="#" className={`text-uppercase border-end brd-gray pe-3 me-3 color-blue${style} fw-bold`}>{ blog.type }</a>
|
||||
<i className="bi bi-clock me-1"></i>
|
||||
<a href="#" className="op-8">{ blog.time }</a>
|
||||
</small>
|
||||
<Link to={ rtl ? "/rtl-page-single-post" : "/page-single-post-5" } className="card-title mb-10">
|
||||
{ blog.title }
|
||||
</Link>
|
||||
<p className="fs-13px color-666">{ blog.desc } [...]</p>
|
||||
<div className="auther-comments d-flex small align-items-center justify-content-between op-9">
|
||||
<div className="l_side d-flex align-items-center">
|
||||
<span className={`icon-10 rounded-circle d-inline-flex justify-content-center align-items-center text-uppercase bg-blue${style} p-2 me-2 text-white`}>
|
||||
{ blog.userImgLetter }
|
||||
</span>
|
||||
<a href="#">
|
||||
<small className="text-muted">{ rtl ? 'بواسطة' : 'By' }</small> { blog.username }
|
||||
</a>
|
||||
</div>
|
||||
<div className="r-side mt-1">
|
||||
<i className="bi bi-chat-left-text me-1"></i>
|
||||
<a href="#">{ blog.comments }</a>
|
||||
<i className="bi bi-eye ms-4 me-1"></i>
|
||||
<a href="#">{ blog.views }</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
<div className={`pagination style-5 color-${style} justify-content-center mt-60`}>
|
||||
<a href="#" className="active">
|
||||
<span>1</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span>2</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span>3</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span>4</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span>...</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span>20</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span className="text">{ rtl ? "التالي" : "next" } <i className="fas fa-chevron-right"></i> </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Blogs
|
||||
@ -1,130 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import LightGallery from 'lightgallery/react';
|
||||
import 'lightgallery/css/lightgallery.css';
|
||||
|
||||
const Sidebar = ({ data, style, rtl }) => {
|
||||
useEffect(() => {
|
||||
const lg = document.querySelector('.lg-react-element');
|
||||
if (lg) lg.className = 'd-flex justify-content-between flex-wrap';
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="col-lg-4">
|
||||
<div className="side-blog style-5 ps-lg-5 mt-5 mt-lg-0">
|
||||
<form action="contact.php" className="search-form mb-50" method="post">
|
||||
<h6 className="title mb-20 text-uppercase fw-normal">
|
||||
{ rtl ? 'بحث' : 'search' }
|
||||
</h6>
|
||||
<div className="form-group position-relative">
|
||||
<input type="text" className="form-control rounded-pill" placeholder={ rtl ? "اكتب وارسل" : "Type and hit enter" } />
|
||||
<button className="search-btn border-0 bg-transparent"> <i className="fas fa-search"></i> </button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="side-recent-post mb-50">
|
||||
<h6 className="title mb-20 text-uppercase fw-normal">
|
||||
{ rtl ? 'المنشورات الاخيرة' : 'recent post' }
|
||||
</h6>
|
||||
{
|
||||
data.recentPosts.map((post, index) => (
|
||||
<Link to={ rtl ? "/rtl-page-single-post" : "/page-single-post-5" } key={index} className={`post-card ${index !== data.recentPosts.length - 1 ? 'pb-3 mb-3 border-bottom brd-gray':''}`}>
|
||||
<div className="img me-3">
|
||||
<img src={post.image} alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<h6>{ post.title }</h6>
|
||||
<p>{ rtl ? 'إذا كانت هناك طريقة واحدة تعمل بها التكنولوجيا اللاسلكية' : 'If there’s one way that wireless technology has' } [...]</p>
|
||||
</div>
|
||||
</Link>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="side-categories mb-50">
|
||||
<h6 className="title mb-20 text-uppercase fw-normal">
|
||||
{ rtl ? 'التصنيفات' : 'categories' }
|
||||
</h6>
|
||||
{
|
||||
data.categories.map((category, index) => (
|
||||
<a href="#" className="cat-item" key={index}>
|
||||
<span>{ category.title }</span>
|
||||
<span>{ category.count }</span>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="side-newsletter mb-50">
|
||||
<h6 className="title mb-10 text-uppercase fw-normal">
|
||||
{ rtl ? 'نشرة الاخبار' : 'newsletter' }
|
||||
</h6>
|
||||
<div className="text">
|
||||
{ rtl ? 'سجل الآن للحصول على آخر التحديثات الخاصة بالعروض الترويجية والقسائم.' : 'Register now to get latest updates on promotions & coupons.' }
|
||||
</div>
|
||||
<form action="contact.php" className="form-subscribe" method="post">
|
||||
<div className="email-input d-flex align-items-center py-3 px-3 bg-white mt-3 radius-5">
|
||||
<span className="icon me-2 flex-shrink-0">
|
||||
<i className="far fa-envelope"></i>
|
||||
</span>
|
||||
<input type="text" placeholder="Email Address" className="border-0 bg-transparent fs-12px" />
|
||||
</div>
|
||||
<button className={`btn bg-blue${style} sm-butn text-white hover-darkBlue w-100 mt-3 radius-5 py-3`}>
|
||||
<span>{ rtl ? 'أشترك' : 'Subscribe' }</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="side-share mb-50">
|
||||
<h6 className="title mb-20 text-uppercase fw-normal">
|
||||
{ rtl ? 'اجتماعي' : 'social' }
|
||||
</h6>
|
||||
<a href="#" className="social-icon">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" className="social-icon">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#" className="social-icon">
|
||||
<i className="fab fa-pinterest"></i>
|
||||
</a>
|
||||
<a href="#" className="social-icon">
|
||||
<i className="fab fa-goodreads-g"></i>
|
||||
</a>
|
||||
<a href="#" className="social-icon">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="side-insta mb-50">
|
||||
<h6 className="title mb-20 text-uppercase fw-normal">
|
||||
{ rtl ? 'انستجرام' : 'our instagram' }
|
||||
</h6>
|
||||
<LightGallery speed={500} backdropDuration={500}>
|
||||
{
|
||||
data.instagram.map((image, index) => (
|
||||
<a href={image} className="insta-img img-cover" data-fancybox="gallery" key={index}>
|
||||
<img src={image} alt="" />
|
||||
<i className="fab fa-instagram icon"></i>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</LightGallery>
|
||||
</div>
|
||||
|
||||
<div className="side-tags">
|
||||
<h6 className="title mb-20 text-uppercase fw-normal">
|
||||
{ rtl ? 'الكلمات الاكثر بحثا' : 'popular tags' }
|
||||
</h6>
|
||||
<div className="content">
|
||||
{
|
||||
data.tags.map((tag, index) => (<a href="#" key={index} className="me-1">{ tag }</a>))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import Blogs from './Blogs';
|
||||
import Sidebar from './Sidebar';
|
||||
|
||||
import allNewsData from 'data/Blog/all-news.json';
|
||||
import allNewsDataRTL from 'data/Blog/all-news-rtl.json';
|
||||
|
||||
const AllNews = ({ isWide, leftSidebar, style = "4", rtl }) => {
|
||||
const data = rtl ? allNewsDataRTL : allNewsData;
|
||||
|
||||
return (
|
||||
<section className="all-news section-padding blog bg-transparent style-3">
|
||||
<div className="container">
|
||||
<div className={`row ${isWide ? 'justify-content-center': leftSidebar ? 'gx-5':'gx-4 gx-lg-5'}`}>
|
||||
{ !isWide && leftSidebar && <Sidebar data={data.sidebar} style={style} rtl={rtl} /> }
|
||||
<Blogs blogs={data.blogs} isWide={isWide} style={style} rtl={rtl} />
|
||||
{ !isWide && !leftSidebar && <Sidebar data={data.sidebar} style={style} rtl={rtl} /> }
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default AllNews
|
||||
@ -1,92 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import SwiperCore, { Navigation, Pagination, Autoplay, EffectFade } from 'swiper';
|
||||
import slides from 'data/Blog/slides.json';
|
||||
import slidesRTL from 'data/Blog/slides-rtl.json';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/autoplay';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/effect-fade';
|
||||
|
||||
SwiperCore.use([Navigation, Pagination, Autoplay, EffectFade]);
|
||||
|
||||
const BlogSlider = ({ style = "4", rtl }) => {
|
||||
const data = rtl ? slidesRTL : slides;
|
||||
|
||||
return (
|
||||
<section className="blog-slider pt-50 pb-50 style-1">
|
||||
<div className="container">
|
||||
<div className={`section-head text-center mb-60 style-${style}`}>
|
||||
<h2 className="mb-20">{ rtl ? 'أخر' : 'Our' } <span>{ rtl ? 'الأخبار' : 'Journal' }</span></h2>
|
||||
<div className="text color-666">{ rtl ? 'احصل على اخر الاخبار من خلال المدونه ناقش وشارك الخبر مع الاصدقاء' : 'Get the latest articles from our journal, writing, discuss and share' }</div>
|
||||
</div>
|
||||
<div className="blog-details-slider">
|
||||
<Swiper
|
||||
className="swiper-container"
|
||||
slidesPerView={1}
|
||||
spaceBetween={0}
|
||||
effect="fade"
|
||||
speed={1000}
|
||||
pagination={{
|
||||
el: ".blog-details-slider .swiper-pagination",
|
||||
clickable: "true"
|
||||
}}
|
||||
navigation={{
|
||||
nextEl: '.blog-details-slider .swiper-button-next',
|
||||
prevEl: '.blog-details-slider .swiper-button-prev'
|
||||
}}
|
||||
mousewheel={false}
|
||||
keyboard={true}
|
||||
autoplay={{
|
||||
delay: 4000
|
||||
}}
|
||||
loop={true}
|
||||
>
|
||||
{
|
||||
data.map((slide, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="content-card">
|
||||
<div className="img overlay">
|
||||
<img src={slide.image} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="cont">
|
||||
<small className="date small mb-20">
|
||||
<a href="#" className="text-uppercase border-end brd-gray pe-3 me-3">{ slide.type }</a>
|
||||
<i className="far fa-clock me-2"></i>{ rtl ? 'موعد النشر' : 'Posted on' } <a href="#">{ slide.time }</a>
|
||||
</small>
|
||||
<h2 className="title">
|
||||
<Link to={ rtl ? "/rtl-page-single-post" : "/page-single-post-5"}>
|
||||
{ slide.title }
|
||||
</Link>
|
||||
</h2>
|
||||
<p className="fs-13px mt-10 text-light text-info">
|
||||
{ slide.desc } [...]
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
|
||||
<div className="swiper-pagination"></div>
|
||||
|
||||
<div className="swiper-button-next"></div>
|
||||
<div className="swiper-button-prev"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogSlider
|
||||
@ -1,61 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import posts from 'data/Blog/popular-posts.json';
|
||||
import postsRTL from 'data/Blog/popular-posts-rtl.json';
|
||||
|
||||
const PopularPosts = ({ style = "4", rtl }) => {
|
||||
const postsData = rtl ? postsRTL : posts;
|
||||
|
||||
return (
|
||||
<section className="popular-posts pt-50 pb-100 border-bottom brd-gray">
|
||||
<div className="container">
|
||||
<h5 className="post-sc-title text-center text-uppercase mb-70">{ rtl ? 'أخبار شائعة' : 'Popular Posts' }</h5>
|
||||
<div className="row gx-5">
|
||||
{
|
||||
postsData.map((post, index) => (
|
||||
<div className={`col-lg-4 ${index !== posts.length - 1 ? 'border-end brd-gray':''}`} key={index}>
|
||||
<div className="card border-0 bg-transparent rounded-0 mb-30 mb-lg-0 d-block">
|
||||
<div className="img radius-7 overflow-hidden img-cover">
|
||||
<img src={post.cover} className="card-img-top" alt="..." />
|
||||
</div>
|
||||
<div className="card-body px-0">
|
||||
<small className="d-block date mt-10 fs-10px fw-bold">
|
||||
<a href="#" className={`text-uppercase border-end brd-gray pe-3 me-3 color-blue${style}`}>{ rtl ? 'أخبار' : 'News' }</a>
|
||||
<i className="bi bi-clock me-1"></i>
|
||||
<a href="#" className="op-8">{ rtl ? 'موعد النشر' : 'Posted on' } { post.time }</a>
|
||||
</small>
|
||||
<h5 className="fw-bold mt-10 title">
|
||||
<Link to={ rtl ? "/rtl-page-single-post" : "/page-single-post-5" }>
|
||||
{ post.title }
|
||||
</Link>
|
||||
</h5>
|
||||
<p className="small mt-2 op-8 fs-10px">{ post.desc } [...]
|
||||
</p>
|
||||
<div className="d-flex small mt-20 align-items-center justify-content-between op-9">
|
||||
<div className="l_side d-flex align-items-center">
|
||||
<span className="icon-20 rounded-circle d-inline-flex justify-content-center align-items-center text-uppercase bg-main p-1 me-2 text-white">
|
||||
{ post.userImgLetter }
|
||||
</span>
|
||||
<a href="#" className="mt-1">
|
||||
{ rtl ? 'بواسطة' : 'By' } { post.username }
|
||||
</a>
|
||||
</div>
|
||||
<div className="r-side mt-1">
|
||||
<i className="bi bi-chat-left-text me-1"></i>
|
||||
<a href="#">{ post.comments }</a>
|
||||
<i className="bi bi-eye ms-4 me-1"></i>
|
||||
<a href="#">{ post.views }</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default PopularPosts
|
||||
@ -1,45 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<section className="about style-9 section-padding">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="img wow fadeIn">
|
||||
<img src="/assets/img/about/about9.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<div className="section-head style-9 mb-40">
|
||||
<h6 className=" wow fadeInUp"> about company </h6>
|
||||
<h2 className=" wow fadeInUp"> Safeguard Sites With Staging & Backups </h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li className=" wow fadeInUp">
|
||||
<span className="icon">
|
||||
<img src="/assets/img/icons/ab9_1.png" alt="" />
|
||||
</span>
|
||||
<p> <strong className="color-darkBlue2"> Safely test changes: </strong> Test site updates, code modifications & content change. </p>
|
||||
</li>
|
||||
<li className=" wow fadeInUp">
|
||||
<span className="icon">
|
||||
<img src="/assets/img/icons/ab9_2.png" alt="" />
|
||||
</span>
|
||||
<p> <strong className="color-darkBlue2"> Easy development: </strong> Deploy files and database changes from your site. </p>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="call-info pt-40 mt-40 wow fadeInUp">
|
||||
<h5> Call 000-111-2220 or Chat Now </h5>
|
||||
<p> International calling fees may apply </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const ChatBanner = () => {
|
||||
return (
|
||||
<section className="chat-banner style-9">
|
||||
<div className="container">
|
||||
<div className="content text-center wow zoomIn">
|
||||
<div className="section-head text-center style-9">
|
||||
<h6 className="text-white"> sync by app </h6>
|
||||
<h2 className="text-white"> Your Favorite Hosting App Is <br /> One Click Away </h2>
|
||||
<div className="btns mt-40">
|
||||
<a href="#" className="butn bg-darkBlue2 border-darkBlue2 border-2 border text-white rounded-3">
|
||||
<span> Get In Touch </span>
|
||||
</a>
|
||||
<a href="#" className="butn text-white border-2 border-white border rounded-3 ms-3">
|
||||
<span> Learn More </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/chat_back9_icons.png" alt="" className="img_back slide_up_down" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChatBanner
|
||||
@ -1,95 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const ChooseUs = () => {
|
||||
return (
|
||||
<section className="choose-us style-9 section-padding bg-gray2">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-9 mb-80 wow fadeInUp">
|
||||
<h6> why choose us </h6>
|
||||
<h2> This Website Needs from <br /> Startup to Success </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<ul className="nav nav-pills mb-3 wow fadeInUp" id="pills-tab" role="tablist">
|
||||
<li className="nav-item" role="presentation">
|
||||
<button className="nav-link active" id="choose1-tab" data-bs-toggle="pill" data-bs-target="#choose1" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
|
||||
<img src="/assets/img/icons/features/9.svg" alt="" /> 1 Click Acesss
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item" role="presentation">
|
||||
<button className="nav-link" id="choose2-tab" data-bs-toggle="pill" data-bs-target="#choose2" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
|
||||
<img src="/assets/img/icons/features/10.svg" alt="" /> Update Management
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item" role="presentation">
|
||||
<button className="nav-link" id="choose3-tab" data-bs-toggle="pill" data-bs-target="#choose1" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
|
||||
<img src="/assets/img/icons/features/11.svg" alt="" /> Site Monitoring
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item" role="presentation">
|
||||
<button className="nav-link" id="choose4-tab" data-bs-toggle="pill" data-bs-target="#choose2" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
|
||||
<img src="/assets/img/icons/features/12.svg" alt="" /> Staging Site
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item" role="presentation">
|
||||
<button className="nav-link" id="choose5-tab" data-bs-toggle="pill" data-bs-target="#choose1" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
|
||||
<img src="/assets/img/icons/features/13.svg" alt="" /> Backup & Restore
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="tab-content pt-2 wow fadeInUp" id="pills-tabContent">
|
||||
<div className="tab-pane fade show active" id="choose1" role="tabpanel">
|
||||
<p className="text-center fs-6 color-darkBlue2"> Cost-effective hosting that delivers secure, reliable performance. </p>
|
||||
<div className="feat-content">
|
||||
<div className="row align-items-center gx-0">
|
||||
<div className="col-lg-6">
|
||||
<div className="img img-cover">
|
||||
<img src="/assets/img/choose_us/choose9.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 offset-lg-1">
|
||||
<div className="info mt-4 mt-lg-0">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/choose_us/icon3.png" alt="" />
|
||||
</div>
|
||||
<h2> This Website Needs from <br /> Startup to Success. </h2>
|
||||
<p> Websites are stored or “hosted” on a publicly accessible computer (a server). Some websites require an entire server to themselves. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://www.youtube.com/watch?v=pGbIOC83-So&t=21s" className="play_icon" data-lity>
|
||||
<i className="fas fa-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tab-pane fade" id="choose2" role="tabpanel">
|
||||
<p className="text-center fs-6 color-darkBlue2"> Cost-effective hosting that delivers secure, reliable performance. </p>
|
||||
<div className="feat-content">
|
||||
<div className="row align-items-center gx-0">
|
||||
<div className="col-lg-6">
|
||||
<div className="img img-cover">
|
||||
<img src="/assets/img/choose_us/choose9.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 offset-lg-1">
|
||||
<div className="info mt-4 mt-lg-0">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/ab9_2.png" alt="" />
|
||||
</div>
|
||||
<h2> This Website Needs from <br /> Startup to Success. </h2>
|
||||
<p> Websites are stored or “hosted” on a publicly accessible computer (a server). Some websites require an entire server to themselves. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://www.youtube.com/watch?v=pGbIOC83-So&t=21s" className="play_icon" data-lity>
|
||||
<i className="fas fa-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChooseUs
|
||||
@ -1,79 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Domain = () => {
|
||||
return (
|
||||
<section className="domain-search style-9 section-padding bg-gray2">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-9 mb-80 wow fadeInUp">
|
||||
<h6> domain search </h6>
|
||||
<h2> It’s All Starts With A Good Domain </h2>
|
||||
<p> Free to focus on growing your business, let us handle your site </p>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-7">
|
||||
<div className="domain-choose wow fadeInUp">
|
||||
<div className="form-group">
|
||||
<span className="icon"> <i className="far fa-search"></i> </span>
|
||||
<input type="text" placeholder="Search with any name" />
|
||||
<select name="" id="" className="form-select">
|
||||
<option value="">.com</option>
|
||||
<option value="">.tech</option>
|
||||
<option value="">.net</option>
|
||||
<option value="">.co</option>
|
||||
<option value="">.info</option>
|
||||
<option value="">.org</option>
|
||||
</select>
|
||||
</div>
|
||||
<button className="butn bg-darkBlue2 border-0 rounded-3 text-white">
|
||||
<span> Search Now </span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="domain-names">
|
||||
<div className="row justify-content-center wow fadeInUp">
|
||||
<div className="col-lg-10">
|
||||
<div className="row">
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="item dom-tech">
|
||||
<p> <i className="far fa-square-full"></i> .tech<span>/$8.00</span> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="item dom-net">
|
||||
<p> <i className="far fa-square-full"></i> .net<span>/$8.00</span> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="item dom-co">
|
||||
<p> <i className="far fa-square-full"></i> .co/<span>$5.00</span> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="item dom-com">
|
||||
<p> <i className="far fa-square-full"></i> .com<span>/$10.00</span> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="item dom-info">
|
||||
<p> <i className="far fa-square-full"></i> .info<span>/$10.00</span> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="item dom-org">
|
||||
<p> <i className="far fa-square-full"></i> .org<span>/$3.00</span> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 className=" wow fadeInUp"> Which domain is right for you? </h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Domain
|
||||
@ -1,96 +0,0 @@
|
||||
import React from 'react';
|
||||
import footerLinks from 'data/CloudHosting/footerLinks.json';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="style-9">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row gx-0 justify-content-between">
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<h5 className="foot-title"> About Iteck </h5>
|
||||
<div className="links">
|
||||
<ul className="d-flex flex-wrap">
|
||||
{
|
||||
footerLinks.links.map((link, index) => (
|
||||
<li className="w-50" key={index}>
|
||||
<a href={link.href}> { link.text } {link.badge && <small className="text-uppercase bg-blue7 text-white py-1 px-3 rounded-pill ms-1 lh-1"> { link.badge } </small>} </a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<h5 className="foot-title"> Resources </h5>
|
||||
<div className="links">
|
||||
<ul className="">
|
||||
{
|
||||
footerLinks.resources.map((link, index) => (
|
||||
<li key={index}>
|
||||
<a href={link.href}> { link.text } </a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<h5 className="foot-title"> Shopping </h5>
|
||||
<div className="links">
|
||||
<ul>
|
||||
{
|
||||
footerLinks.shopping.map((link, index) => (
|
||||
<li key={index}>
|
||||
<a href={link.href}> { link.text } </a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<h5 className="foot-title"> Partner Programs </h5>
|
||||
<div className="links">
|
||||
<ul>
|
||||
{
|
||||
footerLinks.programs.map((link, index) => (
|
||||
<li key={index}>
|
||||
<a href={link.href}> { link.text } </a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="foot">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-2 border-1 border-end brd-light">
|
||||
<a className="navbar-brand pe-4" href="#">
|
||||
<img src="/assets/img/logo_9.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="info ps-4">
|
||||
<p className="mb-1"> Copyright © 1999 - 2022 <a href="#" className="fw-bold text-white"> ThemesCamp </a>, LLC. All Rights Reserved. </p>
|
||||
<p> The ThemeCamp word mark is a registered trademark of ThemeForest Operating Company. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 text-lg-end">
|
||||
<div className="social-icons">
|
||||
<a href="#" className="me-1"> <i className="fab fa-facebook-f"></i> </a>
|
||||
<a href="#" className="me-1"> <i className="fab fa-twitter"></i> </a>
|
||||
<a href="#" className="me-1"> <i className="fab fa-behance"></i> </a>
|
||||
<a href="#"> <i className="fab fa-youtube"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -1,53 +0,0 @@
|
||||
import React from 'react';
|
||||
import Navbar from 'components/Navbars/CloudNav';
|
||||
import TopNav from 'components/Navbars/CloudNav/TopNav';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="style-9">
|
||||
<TopNav />
|
||||
<Navbar />
|
||||
<div className="navs-container">
|
||||
<div className="hosting-links py-4 text-white text-center">
|
||||
<div className="container">
|
||||
<div className="links">
|
||||
<a href="#" className="fw-bold pe-3 me-3 border-end border-1 brd-light hover-darkBlue"> Cloud Hosting </a>
|
||||
<a href="#" className="me-4 hover-darkBlue"> Web Hosting </a>
|
||||
<a href="#" className="me-4 hover-darkBlue"> Windows Hosting </a>
|
||||
<a href="#" className="me-4 hover-darkBlue"> Dedicated Server </a>
|
||||
<a href="#" className="me-4 hover-darkBlue"> VPS Hosting </a>
|
||||
<a href="#" className="hover-darkBlue"> Reseller Hosting </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="content section-padding">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="info">
|
||||
<h6> cloud hosting </h6>
|
||||
<h1> High Performance Secured <span> Hosting </span> </h1>
|
||||
<ul>
|
||||
<li> Improved page loads and SEO </li>
|
||||
<li> Fee domain, email & support included </li>
|
||||
<li> 30-day money back guarantee </li>
|
||||
</ul>
|
||||
<a href="#" className="butn border-2 border-white border rounded-3 text-white mt-40">
|
||||
<span> Get Started Now </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="img">
|
||||
<img src="/assets/img/header/header9.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,66 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Partners = () => {
|
||||
return (
|
||||
<section className="clients style-9 section-padding bg-gray2">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-9 mb-80 wow fadeInUp">
|
||||
<h6> All in one place </h6>
|
||||
<h2> Partner Programs </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="client-card wow fadeInUp">
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<div className="img">
|
||||
<img src="/assets/img/icons/prt1.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-9">
|
||||
<div className="info">
|
||||
<h5> Reseller Hosting </h5>
|
||||
<p> Get everything you need to start and run your web hosting and domain business. </p>
|
||||
<a href="#" className="mt-30"> <i className="far fa-long-arrow-right l-arrow me-2"></i> Read More <i className="far fa-long-arrow-right r-arrow ms-2"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="client-card mt-4 mt-md-0 wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<div className="img">
|
||||
<img src="/assets/img/icons/prt2.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-9">
|
||||
<div className="info">
|
||||
<h5> Iteck <span> Pro </span> Version </h5>
|
||||
<p> Spend less time managing client sites, and free up your day to create more and manage less. </p>
|
||||
<a href="#" className="mt-30"> <i className="far fa-long-arrow-right l-arrow me-2"></i> Read More <i className="far fa-long-arrow-right r-arrow ms-2"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="logos-content">
|
||||
<h4 className=" wow fadeInUp"> <span> 25K+ </span> Installation & Featured On </h4>
|
||||
<div className="logos">
|
||||
<a href="#" className=" wow fadeInUp"> <img src="/assets/img/logos/23.png" alt="" /> </a>
|
||||
<a href="#" className=" wow fadeInUp" data-wow-delay="0.2s"> <img src="/assets/img/logos/24.png" alt="" /> </a>
|
||||
<a href="#" className=" wow fadeInUp" data-wow-delay="0.4s"> <img src="/assets/img/logos/25.png" alt="" /> </a>
|
||||
<a href="#" className=" wow fadeInUp" data-wow-delay="0.6s"> <img src="/assets/img/logos/26.png" alt="" /> </a>
|
||||
<a href="#" className=" wow fadeInUp" data-wow-delay="0.8s"> <img src="/assets/img/logos/27.png" alt="" /> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Partners
|
||||
@ -1,53 +0,0 @@
|
||||
import React from 'react';
|
||||
import plans from 'data/CloudHosting/plans.json';
|
||||
|
||||
const Pricing = () => {
|
||||
return (
|
||||
<section className="pricing style-9 section-padding bg-gray2">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-9 mb-80 wow fadeInUp">
|
||||
<h6> best plans </h6>
|
||||
<h2> Hosting Plans Include </h2>
|
||||
<p> Free to focus on growing your business, let us handle your site </p>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
plans.map((plan, index) => (
|
||||
<div className="col-lg-4" key={index}>
|
||||
<div className="pricing-card wow fadeInUp">
|
||||
<div className="card-head">
|
||||
<h5> { plan.title } </h5>
|
||||
<p> { plan.description } </p>
|
||||
</div>
|
||||
<div className="pricing-cont">
|
||||
<h2 className="price"> ${plan.price} <small> /mo </small> </h2>
|
||||
<p className="hightLight"> { plan.highlight } </p>
|
||||
<p className="color-999"> { plan.text } </p>
|
||||
<a href="#" className="butn border-2 border-darkBlue2 border rounded-3 color-darkBlue2 fw-bold mt-30 w-100 mb-20">
|
||||
<span> Purchase Plan </span>
|
||||
</a>
|
||||
<ul>
|
||||
{
|
||||
plan.features.map((feature, i) => (
|
||||
<li key={i}>
|
||||
<p><strong className="color-darkBlue2"> { feature.value } </strong> { feature.title } </p>
|
||||
<span className="icon"> <i className="fal fa-check"></i> </span>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<h5 className="offer-text wow fadeInDown"> In addition to Windows Web Hosting plans, we offer <a href="#"> Linux Plans </a> </h5>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Pricing
|
||||
@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import services from 'data/CloudHosting/services.json';
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<section className="services style-9 bg-gray2">
|
||||
<div className="services-content">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{
|
||||
services.map((service, index) => (
|
||||
<div className="col-lg-3 col-sm-6" key={index}>
|
||||
<div className="service-card wow fadeInUp" data-wow-delay={`${index * 0.2}s`}>
|
||||
<div className="img-icon">
|
||||
<img src={service.icon} alt="" />
|
||||
</div>
|
||||
<h3> { service.title.partOne } <br /> { service.title.partTwo } </h3>
|
||||
<p> { service.description } </p>
|
||||
<a href="#" className="icon"> <i className="far fa-long-arrow-right"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="con-info wow fadeInDown">
|
||||
<h5> Need help? Call our award-winning support team at <strong> 040-67607600 </strong> </h5>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Services
|
||||
@ -1,54 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const SideMenu = () => {
|
||||
const toggleSideMenu = (e) => {
|
||||
e.preventDefault();
|
||||
const side_menu = document.getElementById('side_menu');
|
||||
const side_overlay = document.querySelector('.side_overlay');
|
||||
|
||||
side_menu && side_menu.classList.remove('show');
|
||||
side_overlay && side_overlay.classList.remove('show');
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="side_menu style-7 dark_theme" id="side_menu">
|
||||
<a href="#0" className="side_menu_cls" onClick={toggleSideMenu}>
|
||||
<img src="/assets/img/icons/4dots_light.png" alt="" />
|
||||
</a>
|
||||
<div className="content">
|
||||
<div className="logo">
|
||||
<a href="#" className="w-100">
|
||||
<img src="/assets/img/logo_9.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="pages_links">
|
||||
<ul>
|
||||
<li><a href="#" className="active">Home</a></li>
|
||||
<li><a href="#">about</a></li>
|
||||
<li><a href="#">services</a></li>
|
||||
<li><a href="#">portfolio</a></li>
|
||||
<li><a href="#">blog</a></li>
|
||||
<li><a href="#">contact</a></li>
|
||||
<li><a href="#">shop</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="side_foot">
|
||||
<h5> get in touch </h5>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<a href="#"> <i className="fal fa-phone-alt me-2"></i> (+23) 5535 68 68 </a>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<a href="#"> <i className="fal fa-envelope me-2 mt-4 mt-lg-0"></i> contact@Iteck.co </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="side_overlay"></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SideMenu
|
||||
@ -1,67 +0,0 @@
|
||||
import React from 'react';
|
||||
import testimonialsData from 'data/CloudHosting/testimonials.json';
|
||||
|
||||
const Testimonials = () => {
|
||||
return (
|
||||
<section className="testimonials style-9 section-padding">
|
||||
<div className="container">
|
||||
<div className="testi-head mb-80 wow fadeInUp">
|
||||
<div className="row justify-content-between">
|
||||
<div className="col-lg-5">
|
||||
<h3> Trusted by 20+ Million Users Around The World. </h3>
|
||||
</div>
|
||||
<div className="col-lg-4 text-lg-end">
|
||||
<div className="reviews-numb">
|
||||
<div className="img">
|
||||
<img src="/assets/img/testimonials/trust_logo.png" alt="" className="logo" />
|
||||
<div className="stars">
|
||||
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
||||
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
||||
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
||||
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
||||
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="info text-start">
|
||||
<p className="color-666"> { testimonialsData.totalRating } out of 5 based on </p>
|
||||
<h6 className="color-darkBlue2 fw-bold"> { testimonialsData.totalReviews } reviews </h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="testi-body">
|
||||
<div className="row gx-5">
|
||||
{
|
||||
testimonialsData.testimonials.map((testimonial, index) => (
|
||||
<div className={`col-lg-4 ${index !== testimonialsData.testimonials.length - 1 ? 'border-1 border-end brd-gray wow fadeInUp':''}`} key={index}>
|
||||
<div className={`testi-card p${index === 0 ? 'e' : index === 1 ? 'x' : 's'}-lg-4`}>
|
||||
<div className="stars">
|
||||
{
|
||||
Array(testimonial.stars).fill().map((_,i) => <img key={i} src="/assets/img/testimonials/trust_star.png" alt="" className="star" />)
|
||||
}
|
||||
</div>
|
||||
<div className="text">
|
||||
“ { testimonial.content } ”
|
||||
</div>
|
||||
<div className="author">
|
||||
<div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
|
||||
<img src={testimonial.author.image} alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<p> { testimonial.author.position } </p>
|
||||
<h6> { testimonial.author.name } </h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Testimonials
|
||||
@ -1,32 +0,0 @@
|
||||
import React from 'react';
|
||||
import communityData from 'data/Contact/community.json';
|
||||
|
||||
const Community = () => {
|
||||
return (
|
||||
<section className="community section-padding style-5">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-4 mb-40">
|
||||
<small className="title_small">Contact us</small>
|
||||
<h2 className="mb-20">Get In <span>Touch</span> </h2>
|
||||
<p>We will contact again after receive your request in 24h</p>
|
||||
</div>
|
||||
<div className="content rounded-pill">
|
||||
{
|
||||
communityData.map((card, i) => (
|
||||
<div className="commun-card" key={i}>
|
||||
<div className="icon icon-45">
|
||||
<img src={card.icon} alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<h5>{ card.info }</h5>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Community
|
||||
@ -1,125 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import contactInfo from 'data/Contact/form.json';
|
||||
import contactInfoRTL from 'data/Contact/form-rtl.json';
|
||||
|
||||
const Form = ({ style = "4", rtl }) => {
|
||||
const [formData, setFormdata] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
website: "",
|
||||
option: "",
|
||||
message: ""
|
||||
});
|
||||
|
||||
const contactInfoData = rtl ? contactInfoRTL : contactInfo;
|
||||
|
||||
const handleFormChange = (e) => {
|
||||
setFormdata(prev => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleFormSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const formValues = new FormData();
|
||||
|
||||
formValues.append('name', formData.name);
|
||||
formValues.append('email', formData.email);
|
||||
formValues.append('phone', formData.phone);
|
||||
formValues.append('website', formData.website);
|
||||
formValues.append('option', formData.option);
|
||||
formValues.append('message', formData.message);
|
||||
|
||||
const res = await axios.post('/contact.php', formValues)
|
||||
.catch(err => alert(err.message));
|
||||
|
||||
if (!res) return;
|
||||
|
||||
alert('Form submitted successfully.')
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={`contact section-padding pt-${style === '4' ? '0':'50'} style-6`}>
|
||||
{
|
||||
style === '5' && (
|
||||
<>
|
||||
<div className="section-head text-center mb-100 style-5">
|
||||
<h2 className="mb-20">{ rtl ? 'يسعدنا' : 'Get In' } <span>{ rtl ? 'تواصلك' : 'Touch' }</span> { rtl && 'معنا' }</h2>
|
||||
<p>{ rtl ? 'سنتواصل معك مرة أخرى بعد استلام طلبك خلال 24 ساعة' : 'We will contact again after receive your request in 24h' }</p>
|
||||
</div>
|
||||
<div className="text-center mb-100">
|
||||
<h2 className="ltspc-20 text-uppercase fs-1 lh-1 mb-50 mt-30 color-blue5">{ contactInfoData.phone }</h2>
|
||||
<h4 className="fw-normal mb-20 color-000">{ contactInfoData.email }</h4>
|
||||
<h4 className="fw-normal mb-10 color-000">{ contactInfoData.address }</h4>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-8">
|
||||
<form action="contact.php" className="form" method="post" onSubmit={handleFormSubmit}>
|
||||
<p className="text-center text-danger fs-12px mb-30">{ rtl ? 'الحقل اللذى يحتوى على هذة العلامة اجبارى *' : 'The field is required mark as *' }</p>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group mb-20">
|
||||
<input type="text" name="name" className="form-control" placeholder={ rtl ? 'الاسم' : "Name" } onChange={handleFormChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group mb-20">
|
||||
<input type="text" name="email" className="form-control" placeholder={ rtl ? 'البريد الالكترونى *' : "Email Address *" } onChange={handleFormChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group mb-20">
|
||||
<input type="text" name="phone" className="form-control" placeholder={ rtl ? 'رقم الهاتف (اختياري)' : "Phone Number (option)" } onChange={handleFormChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group mb-20">
|
||||
<input type="text" name="website" className="form-control" placeholder={ rtl ? 'رابط موقعك (اختيارى)' : "Your Website (option)" } onChange={handleFormChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group mb-20">
|
||||
<select className="form-select" defaultValue={ rtl ? 'كيف يمكننا مساعدتك ؟' : "How can we help you?" } name="option" onChange={handleFormChange}>
|
||||
<option value="how can we help">{ rtl ? 'كيف يمكننا مساعدتك ؟' : 'How can we help you?' }</option>
|
||||
<option value="option 1">{ rtl ? 'الاختيار الاول' : 'option 1' }</option>
|
||||
<option value="option 2">{ rtl ? 'الاختيار الثاني' : 'option 2' }</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<textarea rows="10" name="message" className="form-control" placeholder={ rtl ? 'كيف يمكننا مساعدتك ؟' : "How can we help you?" } onChange={handleFormChange}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12 text-center">
|
||||
<div className="form-check d-inline-flex mt-30 mb-30">
|
||||
<input className="form-check-input me-2 mt-0" type="checkbox" value="" id="flexCheckDefault" />
|
||||
<label className="form-check-label small" htmlFor="flexCheckDefault">
|
||||
{ rtl ? 'من خلال الإرسال ، أوافق على' : 'By submitting, i’m agreed to the' } <a href="#" className="text-decoration-underline">{ rtl ? 'الشروط و الاحكام' : 'Terms & Conditons' }</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12 text-center">
|
||||
<input type="submit" value={ rtl ? 'ارسل طلبك' : 'Send Your Request' } className="btn rounded-pill blue5-3Dbutn hover-blue2 sm-butn fw-bold text-light" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/icons/contact_a.png" alt="" className="contact_a" />
|
||||
<img src="/assets/img/icons/contact_message.png" alt="" className="contact_message" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Form
|
||||
@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Map = () => {
|
||||
return (
|
||||
<div className="map">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24219.60999175365!2d-73.9764341314902!3d40.64198229194528!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25b400c94a227%3A0x18e2a4d3fb21f0ec!2sFlatbush%2C%20Brooklyn%2C%20NY%2C%20USA!5e0!3m2!1sen!2seg!4v1651361759450!5m2!1sen!2seg" height="500" style={{ border: 0 }} allowFullScreen="" loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Map
|
||||
@ -1,136 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const propTypes = {
|
||||
from: PropTypes.number,
|
||||
to: PropTypes.number.isRequired,
|
||||
speed: PropTypes.number.isRequired,
|
||||
delay: PropTypes.number,
|
||||
onComplete: PropTypes.func,
|
||||
digits: PropTypes.number,
|
||||
className: PropTypes.string,
|
||||
tagName: PropTypes.string,
|
||||
children: PropTypes.func,
|
||||
easing: PropTypes.func,
|
||||
position: PropTypes.shape({
|
||||
height: PropTypes.number,
|
||||
startY: PropTypes.number,
|
||||
}),
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
from: 0,
|
||||
delay: 100,
|
||||
digits: 0,
|
||||
tagName: 'span',
|
||||
easing: t => t,
|
||||
};
|
||||
|
||||
class CountTo extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const { from } = props;
|
||||
|
||||
this.state = {
|
||||
counter: from,
|
||||
restart: false
|
||||
};
|
||||
|
||||
this.start = this.start.bind(this);
|
||||
this.clear = this.clear.bind(this);
|
||||
this.next = this.next.bind(this);
|
||||
this.updateCounter = this.updateCounter.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.start();
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!this.props.position) return;
|
||||
|
||||
const { from, to } = this.props.position;
|
||||
|
||||
if (window.scrollY > from && window.scrollY < to && this.state.restart) {
|
||||
this.start();
|
||||
this.setState({ restart: false });
|
||||
}
|
||||
|
||||
if (window.scrollY < from && !this.state.restart) {
|
||||
this.setState({ restart: true });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.clear();
|
||||
}
|
||||
|
||||
start(props = this.props) {
|
||||
this.clear();
|
||||
const { from } = props;
|
||||
this.setState({
|
||||
counter: from,
|
||||
}, () => {
|
||||
const { speed, delay } = this.props;
|
||||
const now = Date.now();
|
||||
this.endDate = now + speed;
|
||||
this.scheduleNextUpdate(now, delay);
|
||||
this.raf = requestAnimationFrame(this.next);
|
||||
});
|
||||
}
|
||||
|
||||
next() {
|
||||
const now = Date.now();
|
||||
const { speed, onComplete, delay } = this.props;
|
||||
|
||||
if (now >= this.nextUpdate) {
|
||||
const progress = Math.max(0, Math.min(1, 1 - (this.endDate - now) / speed));
|
||||
this.updateCounter(progress);
|
||||
this.scheduleNextUpdate(now, delay);
|
||||
}
|
||||
|
||||
if (now < this.endDate) {
|
||||
this.raf = requestAnimationFrame(this.next);
|
||||
} else if (onComplete) {
|
||||
onComplete();
|
||||
}
|
||||
}
|
||||
|
||||
scheduleNextUpdate(now, delay) {
|
||||
this.nextUpdate = Math.min(now + delay, this.endDate);
|
||||
}
|
||||
|
||||
updateCounter(progress) {
|
||||
const { from, to, easing } = this.props;
|
||||
const delta = to - from;
|
||||
const counter = from + delta * easing(progress);
|
||||
this.setState({
|
||||
counter,
|
||||
});
|
||||
}
|
||||
|
||||
clear() {
|
||||
cancelAnimationFrame(this.raf);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, digits, tagName: Tag, children: fn } = this.props;
|
||||
const { counter } = this.state;
|
||||
const value = counter.toFixed(digits);
|
||||
|
||||
if (fn) {
|
||||
return fn(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<Tag className={className}>
|
||||
{value}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CountTo.propTypes = propTypes;
|
||||
CountTo.defaultProps = defaultProps;
|
||||
|
||||
export default CountTo;
|
||||
@ -1,35 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<section className="about style-15 section-padding">
|
||||
<div className="container">
|
||||
<div className="row align-items-center justify-content-between">
|
||||
<div className="col-lg-5">
|
||||
<div className="info wow fadeInUp">
|
||||
<div className="section-head mb-30">
|
||||
<h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" /> <span> core features </span> </h6>
|
||||
<h2 className="fs-1"> Most Trusted & Secure Crypto Platform </h2>
|
||||
</div>
|
||||
<p> When We Save this Money for Investors, They can be an Reinvest the Save Money </p>
|
||||
<ul>
|
||||
<li> <i className="fal fa-check me-3 color-red2"></i> <span> Start investing now, on Iteck crypto </span> </li>
|
||||
<li> <i className="fal fa-check me-3 color-red2"></i> <span> To buy and sell cryptocurrency assets </span> </li>
|
||||
</ul>
|
||||
<a href="#0" className="btn rounded-pill bg-red2 fw-bold text-white mt-40" target="_blank">
|
||||
<span> Compare With Other Crypto <i className="fal fa-angle-down ms-2"></i> </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="img wow fadeInUp" data-wow-delay="0.2s">
|
||||
<img src="/assets/img/about/about_15_img.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@ -1,77 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Blog = () => {
|
||||
return (
|
||||
<section className="blog section-padding style-15">
|
||||
<div className="container">
|
||||
<div className="row align-items-end mb-70 wow fadeInUp">
|
||||
<div className="col-lg-6">
|
||||
<div className="section-head">
|
||||
<h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" /> <span> news </span> </h6>
|
||||
<h2 className="fs-1"> Blog & Insights </h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 text-lg-end">
|
||||
<a href="#" className="butn border-1 brd-light border rounded-pill text-white hover-red2 mb-2">
|
||||
<span> More News <i className="fal fa-long-arrow-right ms-2"></i> </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<div className="main-card wow fadeInUp">
|
||||
<div className="row gx-0">
|
||||
<div className="col-lg-6">
|
||||
<div className="img img-cover">
|
||||
<img src="/assets/img/blog/25.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<div className="cont">
|
||||
<h6 className="color-red2 text-uppercase mb-3"> <a href="#"> crypto, </a> <a href="#"> bitcoin </a> </h6>
|
||||
<h4> <a href="#"> When it comes to magazine and news websites. </a> </h4>
|
||||
<p> It comes to magazine and news websites, WordPress is top of the bill. Well-known news sites like The New York Times </p>
|
||||
<a href="#" className="author mt-40">
|
||||
<div className="icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
|
||||
<img src="/assets/img/team/9.jpg" alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<h6> Rosalina D. William </h6>
|
||||
<p> Posted: June 22, 2023 </p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="center_icon img-contain">
|
||||
<img src="/assets/img/icons/blog_15_icon.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="sub-card wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div className="img img-cover">
|
||||
<img src="/assets/img/blog/26.jpg" alt="" />
|
||||
<div className="center_icon img-contain">
|
||||
<img src="/assets/img/icons/blog_15_icon.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="info">
|
||||
<div className="cont">
|
||||
<h6 className="color-red2 text-uppercase mb-3"> <a href="#"> crypto, </a> <a href="#"> bitcoin </a> </h6>
|
||||
<h4> <a href="#"> When it comes to magazine and news websites. </a> </h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Blog
|
||||
@ -1,64 +0,0 @@
|
||||
import React from 'react';
|
||||
import FAQs from 'data/Crypto/faq.json'
|
||||
|
||||
const FAQ = () => {
|
||||
return (
|
||||
<section className="faq pt-100 style-15">
|
||||
<div className="container">
|
||||
<div className="section-head text-center mb-50 wow fadeInUp">
|
||||
<h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" /> <span> some faq </span> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 ms-2" /> </h6>
|
||||
<h2 className="fs-1"> Freequently Asked Anything </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
FAQs.map((question, idx) => (
|
||||
<div className="col-lg-6" key={idx}>
|
||||
<div className="faq-card wow fadeInUp">
|
||||
<span className="numb">
|
||||
{question.numb}
|
||||
</span>
|
||||
<div className="info">
|
||||
<h6> {question.question} </h6>
|
||||
<p> {question.answer} </p>
|
||||
</div>
|
||||
<img src="/assets/img/icons/faq_15_icon.png" alt="" className="icon" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center mt-50 wow fadeInUp">
|
||||
<a href="#" className="butn border-1 brd-light border rounded-pill text-white hover-red2">
|
||||
<span> Ask More Question <i className="fal fa-long-arrow-right ms-2"></i> </span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="subscribe-content mt-100 wow fadeInUp">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-10">
|
||||
<div className="subscribe-card">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-9">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/ch10.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="fs-1s"> Daily Update & Newsletter </h2>
|
||||
<div className="form-group">
|
||||
<span className="ico"> <i className="fas fa-envelope-open"></i> </span>
|
||||
<input type="text" placeholder="Business Email" />
|
||||
<button> Subscribe Now </button>
|
||||
<img src="/assets/img/subs_arrow.png" alt="" className="subs_arrow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FAQ
|
||||
@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import features from 'data/Crypto/features.json';
|
||||
|
||||
const Features = () => {
|
||||
return (
|
||||
<section className="features style-15">
|
||||
<div className="container">
|
||||
<div className="section-head text-center mb-50 wow fadeInUp">
|
||||
<h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" /> <span> core features </span> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 ms-2" /> </h6>
|
||||
<h2 className="fs-1"> Features & Reveals </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
features.map((feature, index) => (
|
||||
<div className="col-lg-4" key={index}>
|
||||
<a href="#" className="features-card wow fadeInUp">
|
||||
<div className="icon">
|
||||
<img src={feature.icon} alt="" />
|
||||
</div>
|
||||
<h6> {feature.title} </h6>
|
||||
<p> {feature.details} </p>
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Features
|
||||
@ -1,88 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="style-15">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="foot-logo-social mb-70">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="foot-logo">
|
||||
<img src="/assets/img/logo_15.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 text-lg-end">
|
||||
<div className="social-icons">
|
||||
<a href="#"> <i className="fab fa-facebook-f"></i> </a>
|
||||
<a href="#"> <i className="fab fa-twitter"></i> </a>
|
||||
<a href="#"> <i className="fab fa-behance"></i> </a>
|
||||
<a href="#"> <i className="fab fa-youtube"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="links-content">
|
||||
<div className="row justify-content-between gx-0">
|
||||
<div className="col-lg-4">
|
||||
<h6 className="sub-title"> our company </h6>
|
||||
<div className="main-links">
|
||||
<ul>
|
||||
<li> <a href="#"> About us </a> </li>
|
||||
<li> <a href="#"> Price & Plans </a> </li>
|
||||
<li> <a href="#"> Blog </a> </li>
|
||||
<li> <a href="#"> Support </a> </li>
|
||||
<li> <a href="#"> Media Center </a> </li>
|
||||
<li> <a href="#"> Get In Touch </a> </li>
|
||||
<li> <a href="#"> Careers </a> </li>
|
||||
<li> <a href="#"> FAQ </a> </li>
|
||||
<li> <a href="#"> Licenses & Registration </a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<h6 className="sub-title"> get in touch </h6>
|
||||
<div className="links">
|
||||
<ul>
|
||||
<li> <i className="fas fa-phone color-red2 me-2"></i> <a href="#"> +888 999 777 88 </a> </li>
|
||||
<li> <i className="fas fa-envelope-open color-red2 me-2"></i> <a href="#"> info@webmail.com </a> </li>
|
||||
<li> <i className="fas fa-globe color-red2 me-2"></i> <a href="#"> www.example-web.com </a> </li>
|
||||
<li> <i className="fas fa-map-marker-alt color-red2 me-2"></i> <a href="#"> 7/A, New Booston, NYC </a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<h6 className="sub-title"> Mobile app </h6>
|
||||
<div className="down-imgs">
|
||||
<a href="#" className="img mt-30">
|
||||
<img src="/assets/img/foot_15_down1.png" alt="" />
|
||||
</a>
|
||||
<a href="#" className="img mt-20">
|
||||
<img src="/assets/img/foot_15_down2.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<h6 className="sub-title"> our products </h6>
|
||||
<div className="links">
|
||||
<ul>
|
||||
<li> <a href="#"> Buy Crypto </a> </li>
|
||||
<li> <a href="#"> Earn Crypto Interest </a> </li>
|
||||
<li> <a href="#"> Instant Crypto Credit Lines™ </a> </li>
|
||||
<li> <a href="#"> Crypto Exchange </a> </li>
|
||||
<li> <a href="#"> iTeck Crypto Card </a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="foot">
|
||||
<p> Copyright & Design By <a href="#" className="text-white"> @ThemeCamp </a> - 2022 </p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -1,97 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import TopNav from 'components/Navbars/TopNav-15';
|
||||
import Navbar from 'components/Navbars/CryptoNav';
|
||||
import timer from 'common/timer';
|
||||
|
||||
const Header = () => {
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
timer('nov 29, 2022 11:30');
|
||||
}, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="style-15">
|
||||
<div className="navs-container">
|
||||
<TopNav />
|
||||
<Navbar />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="info">
|
||||
<h6> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" /> We've got your #crypto back </h6>
|
||||
<h1> Iteck is an innovative payment network & kind of money. </h1>
|
||||
<a href="#" className="butn bg-yellowGreen text-dark fw-bold rounded-pill">
|
||||
<span> <i className="fas fa-wallet me-2"></i> Choose Wallet </span>
|
||||
</a>
|
||||
<a href="#" className="butn border-1 border-white border rounded-pill text-white ms-3 hover-red2">
|
||||
<span> Buy Bitcoin </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="img mt-50">
|
||||
<img src="/assets/img/header/head_15_img.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="countdown-content wow fadeInUp">
|
||||
<div className="countdown-card">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<div className="inf">
|
||||
<h3> Token Sale is Live 5% Bonus Ends In: </h3>
|
||||
<a href="#" className="color-red2 text-uppercase mt-15"> register & Buy Now <i className="fal fa-long-arrow-right ms-2"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="countdown px-3">
|
||||
<div className="item">
|
||||
<h2 id="days"></h2>
|
||||
<small> days </small>
|
||||
</div>
|
||||
<div className="item">
|
||||
<h2 id="hours"></h2>
|
||||
<small> Hours </small>
|
||||
</div>
|
||||
<div className="item">
|
||||
<h2 id="minutes"></h2>
|
||||
<small> Minute </small>
|
||||
</div>
|
||||
<div className="item">
|
||||
<h2 id="seconds"></h2>
|
||||
<small> Seconds </small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="progs-content ps-4">
|
||||
<p className="text-end mb-15"> Hard Cap </p>
|
||||
<div className="progress">
|
||||
<div className="progress-bar" role="progressbar" style={{ width: '25%' }} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div className="color-yellowGreen d-flex justify-content-between mt-20">
|
||||
<div className="l-side"> <span className="text-white-50"> Raisen: </span> <span className="counter"> <small> $ </small> 65,556.80 </span> </div>
|
||||
<div className="r-side"> <span className="counter"> <small> $ </small> 1,000,000 </span> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="logos">
|
||||
<span className="text-white-50 fw-bold"> We accept: </span>
|
||||
<img src="/assets/img/logos/50.png" alt="" />
|
||||
<img src="/assets/img/logos/51.png" alt="" />
|
||||
<img src="/assets/img/logos/52.png" alt="" />
|
||||
<img src="/assets/img/logos/53.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,70 +0,0 @@
|
||||
import React from 'react';
|
||||
import marketsData from 'data/Crypto/markets.json';
|
||||
|
||||
const Markets = () => {
|
||||
return (
|
||||
<section className="markets section-padding style-15">
|
||||
<div className="container">
|
||||
<div className="section-head text-center mb-70 wow fadeInUp">
|
||||
<h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" /> <span> exchnage </span> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 ms-2" /> </h6>
|
||||
<h2 className="fs-1"> Interested You Today </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="markets-table">
|
||||
<div className="table-head wow fadeInUp">
|
||||
<div className="item">
|
||||
<p> Instrument </p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p> Last Price </p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p> 24H Change </p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p> 24H Change </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-body">
|
||||
{
|
||||
marketsData.map((row, idx) => (
|
||||
<div className="body-row wow fadeInUp" key={idx}>
|
||||
<div className="item">
|
||||
<div className="icon-40 me-3">
|
||||
<img src={row.paymentIcon} alt="" />
|
||||
</div>
|
||||
<p className="text-white-50"> <strong className="text-white text-uppercase"> {row.from} </strong> /{row.to} </p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p className="text-white-50"> <strong className="text-white me-1"> {row.price} </strong> ${row.price} </p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p className={row.lastDayChange.operator === '+' ? 'per-up' : 'color-red2'}> {row.lastDayChange.operator}{row.lastDayChange.change}% </p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p className="text-white w-100"> <strong> ${row.lastDayPrice.dollar} </strong> </p>
|
||||
<p className="text-white-50 w-100"> <strong> {row.lastDayPrice.crypto} </strong> </p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<img src="/assets/img/icons/line_chart.png" alt="" className="line_chart" />
|
||||
</div>
|
||||
<div className="item">
|
||||
<a href="#" className="trad-btn"> Trade Now </a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center wow fadeInUp">
|
||||
<a href="#0" className="btn rounded-pill bg-red2 fw-bold text-white mt-40" target="_blank">
|
||||
<span> View More Market <i className="fal fa-long-arrow-right ms-2"></i> </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Markets
|
||||
@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
import teamMemebers from 'data/Crypto/team.json';
|
||||
|
||||
const Team = () => {
|
||||
return (
|
||||
<section className="team style-15">
|
||||
<div className="row gx-0">
|
||||
{
|
||||
teamMemebers.map((member, idx) => (
|
||||
<div className="col-lg-3 col-sm-6" key={idx}>
|
||||
<div className="team-card wow fadeInUp">
|
||||
<div className="img">
|
||||
<img src={member.picture} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<div className="social-icons">
|
||||
<a href="#"> <i className="fab fa-facebook-f"></i> </a>
|
||||
<a href="#"> <i className="fab fa-twitter"></i> </a>
|
||||
<a href="#"> <i className="fab fa-behance"></i> </a>
|
||||
<a href="#"> <i className="fab fa-youtube"></i> </a>
|
||||
<a href="#"> <i className="fab fa-linkedin"></i> </a>
|
||||
</div>
|
||||
<div className="inf">
|
||||
<p className="text-uppercase"> {member.position} </p>
|
||||
<h5> {member.name} </h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Team
|
||||
@ -1,41 +0,0 @@
|
||||
import React from 'react';
|
||||
import timelineData from 'data/Crypto/timeline.json';
|
||||
|
||||
const Timeline = () => {
|
||||
return (
|
||||
<section className="timeline style-15">
|
||||
<div className="container">
|
||||
<div className="section-head mb-70 wow fadeInUp">
|
||||
<h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" /> <span> timeline </span> </h6>
|
||||
<h2 className="fs-1"> The Timeline Of Our Journey </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="timeline-cards">
|
||||
<div className="row">
|
||||
{
|
||||
timelineData.map((item, idx) => (
|
||||
<div className="col-lg-3 col-sm-6" key={idx}>
|
||||
<div className="timeline-card wow fadeInUp">
|
||||
<div className="icon">
|
||||
<img src={item.image} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<h6> {item.title.partOne} <br /> {item.title.partTwo} </h6>
|
||||
</div>
|
||||
<span className="year"> {item.year} </span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div className="progress-bar wow" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Timeline
|
||||
@ -1,48 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<section className="about style-10 section-padding">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="imgs">
|
||||
<div className="row gx-3">
|
||||
<div className="col-lg-6 pt-60">
|
||||
<div className="img img-cover">
|
||||
<img src="/assets/img/about/about_10_1.jpg" alt="" />
|
||||
</div>
|
||||
<div className="img img-cover mt-3">
|
||||
<img src="/assets/img/about/about2_2.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="img img-cover">
|
||||
<img src="/assets/img/about/about_10_2.jpg" alt="" />
|
||||
</div>
|
||||
<div className="img img-cover mt-3">
|
||||
<img src="/assets/img/about/about_10_3.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<h6> Since From 2000 </h6>
|
||||
<h2> We Provide Professional <br /> Security Solutions </h2>
|
||||
<p> Cybersecurity is the practice of protecting systems, networks, <br /> and programs from digital attacks. </p>
|
||||
<p> These cyberattacks are usually aimed at accessing, changing, <br /> or destroying sensitive information; extorting money from user <br /> or interrupting normal business processes. </p>
|
||||
<a href="#0" className="btn btn-icon-circle rounded-pill bg-blue7 fw-bold text-white mt-50" target="_blank">
|
||||
<small> Learn More <i className="fas fa-long-arrow-alt-right"></i> </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/about/about10_pattern.png" alt="" className="pattern" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@ -1,65 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Blog = () => {
|
||||
return (
|
||||
<section className="blog style-10 section-padding bg-light">
|
||||
<div className="container">
|
||||
<div className="mb-70">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<p className="color-blue7 mb-10"> News Feeds </p>
|
||||
<h2> Company Blog & Insights </h2>
|
||||
</div>
|
||||
<div className="col-lg-4 text-lg-end">
|
||||
<a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray hover-orange2 mt-4 mt-lg-0">
|
||||
<small> show more <i className="fas fa-long-arrow-alt-right bg-blue7 text-white"></i> </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact">
|
||||
<div className="row">
|
||||
<div className="col-lg-5">
|
||||
<div className="blog-card">
|
||||
<div className="img">
|
||||
<img src="/assets/img/blog/18.png" alt="" className="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<h5> <a href="#"> Best unlocked me an striking perceive. </a> </h5>
|
||||
<p> One of the most important WIP of a blog design is readability. An sure that the background and foreground colors. </p>
|
||||
<div className="date"> <a href="#"> Nov 21, 2022 </a> <span className="color-999 mx-3"> | </span> <a href="#"> <span className="color-999"> By </span> Admin </a> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="cards">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="blog-card mt-4 mt-lg-0">
|
||||
<div className="info w-100">
|
||||
<h5> <a href="#"> The practice of blog's look, feel, branding </a> </h5>
|
||||
<p> One of the most important WIP of a blog design is readability. An sure that the background and foreground colors. </p>
|
||||
<div className="date"> <a href="#"> Nov 21, 2022 </a> <span className="color-999 mx-3"> | </span> <a href="#"> <span className="color-999"> By </span> Admin </a> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="blog-card mt-4 mt-lg-0">
|
||||
<div className="info w-100">
|
||||
<h5> <a href="#"> The readability & open functionality </a> </h5>
|
||||
<p> One of the most important WIP of a blog design is readability. An sure that the background and foreground colors. </p>
|
||||
<div className="date"> <a href="#"> Nov 21, 2022 </a> <span className="color-999 mx-3"> | </span> <a href="#"> <span className="color-999"> By </span> Admin </a> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Blog
|
||||
@ -1,72 +0,0 @@
|
||||
import React from 'react';
|
||||
import IntegrationCard from './IntegrationCard';
|
||||
import faqs from 'data/CyberSecurity/faq.json';
|
||||
|
||||
const FAQ = () => {
|
||||
return (
|
||||
<section className="faq style-10 bg-light pt-100">
|
||||
<div className="container">
|
||||
<div className="mb-70">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<p className="color-blue7 mb-10"> FAQ </p>
|
||||
<h2> Freequently Asked Question </h2>
|
||||
</div>
|
||||
<div className="col-lg-4 text-lg-end mt-4 mt-lg-0">
|
||||
<a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray hover-orange2">
|
||||
<small> More Question <i className="fas fa-long-arrow-alt-right bg-blue7 text-white"></i> </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content overflow-hidden">
|
||||
<div className="row gx-5">
|
||||
<div className="col-lg-8">
|
||||
<div className="accordion" id="accordionExample">
|
||||
{
|
||||
faqs.map((faq, idx) => (
|
||||
<div className="accordion-item" key={idx}>
|
||||
<h2 className="accordion-header" id={`hd${idx}`}>
|
||||
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target={`#cl${idx}`} aria-expanded="true" aria-controls="collapseOne">
|
||||
{faq.question}
|
||||
</button>
|
||||
</h2>
|
||||
<div id={`cl${idx}`} className="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div className="accordion-body">
|
||||
<p>
|
||||
{faq.answer}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="faq-form mt-5 mt-lg-0">
|
||||
<h4> Ask More Question </h4>
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Your name" />
|
||||
<span className="icon"> <i className="fas fa-user"></i> </span>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Email address" />
|
||||
<span className="icon"> <i className="fas fa-envelope"></i> </span>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea name="" id="" rows="5" className="form-control" placeholder="message"></textarea>
|
||||
<span className="icon"> <i className="fas fa-pen"></i> </span>
|
||||
</div>
|
||||
<button className="butn w-100 bg-blue7 text-white border-0 rounded-3"> <span> send message </span> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<IntegrationCard />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FAQ
|
||||
@ -1,31 +0,0 @@
|
||||
import React from 'react';
|
||||
import features from 'data/CyberSecurity/features.json';
|
||||
|
||||
const Features = () => {
|
||||
return (
|
||||
<section className="features style-10">
|
||||
<div className="content">
|
||||
<div className="row gx-0">
|
||||
{
|
||||
features.map((feature, idx) => (
|
||||
<div className="col-lg-3 col-sm-6" key={idx}>
|
||||
<div className="feat-card">
|
||||
<div className="icon">
|
||||
<img src={feature.image} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<a href="#"> {feature.sub_title} </a>
|
||||
<h4> {feature.title} </h4>
|
||||
<p> {feature.details} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Features
|
||||
@ -1,65 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="style-10">
|
||||
<div className="container">
|
||||
<div className="content section-padding overflow-hidden">
|
||||
<div className="row gx-5">
|
||||
<div className="col-lg-4">
|
||||
<div className="info-card border-blue7">
|
||||
<h5 className="color-666 fw-normal text-capitalize mb-10"> Head Office </h5>
|
||||
<h5> 12/A, New Booston, <br /> NYC info@webmail.com </h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="info-card mt-5 mt-lg-0">
|
||||
<h5 className="color-666 fw-normal text-capitalize mb-10"> Sub Office </h5>
|
||||
<h5> Pablo Hemilton Tower, Tokyo <br /> jobs@example.com </h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 offset-lg-1">
|
||||
<div className="subscribe-card mt-5 mt-lg-0">
|
||||
<h5 className="mb-30 fw-bold lh-1"> Get Newsletter </h5>
|
||||
<div className="form-group">
|
||||
<span className="icon"> <i className="fas fa-envelope-open"></i> </span>
|
||||
<input type="text" placeholder="Email address" />
|
||||
<button type="submit"> Subscribe </button>
|
||||
</div>
|
||||
<p> ** We are not going to save data </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="foot">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<a className="navbar-brand" href="#">
|
||||
<img src="/assets/img/logo_10.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="links text-center">
|
||||
<a href="#" className="mx-4"> About </a>
|
||||
<a href="#" className="mx-4"> Career </a>
|
||||
<a href="#" className="mx-4"> Faq </a>
|
||||
<a href="#" className="mx-4"> Insights </a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 text-lg-end">
|
||||
<div className="social-icons">
|
||||
<a href="#"> <i className="fab fa-facebook-f"></i> </a>
|
||||
<a href="#"> <i className="fab fa-twitter"></i> </a>
|
||||
<a href="#"> <i className="fab fa-behance"></i> </a>
|
||||
<a href="#"> <i className="fab fa-youtube"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/footer/footer_10_pattern.png" alt="" className="pattern" />
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -1,51 +0,0 @@
|
||||
import React from 'react'
|
||||
import Navbar from 'components/Navbars/CyberNav'
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="style-10">
|
||||
<div className="navs-container">
|
||||
<Navbar />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="content pt-50">
|
||||
<div className="row align-items-center gx-0">
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<h6> From The Market Ieaders In Data Intelligence </h6>
|
||||
<h1> Trusted Data For Every Users </h1>
|
||||
<div className="btns mt-50">
|
||||
<a href="#0" className="btn btn-icon-circle rounded-pill bg-blue7 fw-bold text-white me-4" target="_blank">
|
||||
<small> Request For Demo <i className="fas fa-long-arrow-alt-right"></i> </small>
|
||||
</a>
|
||||
<a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-light text-white hover-blue7">
|
||||
<small> Get Started Now <i className="fas fa-long-arrow-alt-right bg-light"></i> </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="img">
|
||||
<img src="/assets/img/header/header10_img.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="logos">
|
||||
<p className="text-center color-orange2"> Intregrated With: </p>
|
||||
<div className="logos-content">
|
||||
<a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/28.png" alt="" /> </a>
|
||||
<a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/29.png" alt="" /> </a>
|
||||
<a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/30.png" alt="" /> </a>
|
||||
<a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/31.png" alt="" /> </a>
|
||||
<a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/32.png" alt="" /> </a>
|
||||
<a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/33.png" alt="" /> </a>
|
||||
<a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/34.png" alt="" /> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,31 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const IntegrationCard = () => {
|
||||
return (
|
||||
<div className="integration-card">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<p> Iteck Syncs With The Apps You’re Already Using </p>
|
||||
<h3> Over 30+ App Integrations </h3>
|
||||
<a href="#0" className="btn btn-icon-circle rounded-pill fw-bold border-white text-white hover-orange2 text-capitalize">
|
||||
<small> View All Integrations <i className="fas fa-long-arrow-alt-right bg-white"></i> </small>
|
||||
</a>
|
||||
<div className="icons">
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/1.png" alt="" /> </span>
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/2.png" alt="" /> </span>
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/3.png" alt="" /> </span>
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/4.png" alt="" /> </span>
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/5.png" alt="" /> </span>
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/6.png" alt="" /> </span>
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/7.png" alt="" /> </span>
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/8.png" alt="" /> </span>
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/9.png" alt="" /> </span>
|
||||
<span className="icon slide_up_down"> <img src="/assets/img/integ/10.png" alt="" /> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default IntegrationCard
|
||||
@ -1,91 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Pricing = () => {
|
||||
return (
|
||||
<section className="pricing style-10 section-padding">
|
||||
<div className="container">
|
||||
<div className="text-center mb-40">
|
||||
<p className="color-blue7 mb-10"> Price & Plans </p>
|
||||
<h2> Packages For Everyone </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="pricing-table">
|
||||
<div className="table-titles">
|
||||
<div className="main-head">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/pricing/money.png" alt="" />
|
||||
</div>
|
||||
<p> You pay <strong> $49.00/mo </strong> today renews june 2024 for <strong> $59.00/mo </strong> </p>
|
||||
</div>
|
||||
<div className="main-body d-none d-lg-block">
|
||||
<ul>
|
||||
<li> Team </li>
|
||||
<li> Installed Agent </li>
|
||||
<li> Real-Time Feedback </li>
|
||||
<li> Video Dedicated Support </li>
|
||||
<li> Attacked Targets Per Month </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-body-card">
|
||||
<div className="sub-head">
|
||||
<p className="color-blue7 mb-2"> Starter </p>
|
||||
<h2> $19.00 <small> /mo </small> </h2>
|
||||
<a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray hover-orange2">
|
||||
<small> Purchase Now <i className="fas fa-long-arrow-alt-right bg-blue7 text-white"></i> </small>
|
||||
</a>
|
||||
</div>
|
||||
<div className="sub-body">
|
||||
<ul>
|
||||
<li> <strong> Team </strong> 02 </li>
|
||||
<li> <strong> Installed Agent </strong> 12 </li>
|
||||
<li> <strong> Real-Time Feedback </strong> Limited </li>
|
||||
<li> <strong> Video Dedicated Support </strong> Limited </li>
|
||||
<li> <strong> Attacked Targets Per Month </strong> 100 </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-body-card recommended-card">
|
||||
<div className="sub-head">
|
||||
<p className="text-white mb-2"> Advance </p>
|
||||
<h2> $49.00 <small> /mo </small> </h2>
|
||||
<a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray bg-orange2 border-0">
|
||||
<small> Purchase Now <i className="fas fa-long-arrow-alt-right text-dark bg-white"></i> </small>
|
||||
</a>
|
||||
</div>
|
||||
<div className="sub-body">
|
||||
<ul>
|
||||
<li> <strong> Team </strong> 06 </li>
|
||||
<li> <strong> Installed Agent </strong> 50 </li>
|
||||
<li> <strong> Real-Time Feedback </strong> 24/7 </li>
|
||||
<li> <strong> Video Dedicated Support </strong> 24/7 </li>
|
||||
<li> <strong> Attacked Targets Per Month </strong> 1000 </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-body-card">
|
||||
<div className="sub-head">
|
||||
<p className="color-blue7 mb-2"> Team Plan </p>
|
||||
<h2> $99.00 <small> /mo </small> </h2>
|
||||
<a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray hover-orange2">
|
||||
<small> Purchase Now <i className="fas fa-long-arrow-alt-right bg-blue7 text-white"></i> </small>
|
||||
</a>
|
||||
</div>
|
||||
<div className="sub-body">
|
||||
<ul>
|
||||
<li> <strong> Team </strong> 10 </li>
|
||||
<li> <strong> Installed Agent </strong> 100 </li>
|
||||
<li> <strong> Real-Time Feedback </strong> unLimited </li>
|
||||
<li> <strong> Video Dedicated Support </strong> Anytime </li>
|
||||
<li> <strong> Attacked Targets Per Month </strong> 10000 </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Pricing
|
||||
@ -1,32 +0,0 @@
|
||||
import React from 'react';
|
||||
import services from 'data/CyberSecurity/services.json';
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<section className="services style-10 overflow-hidden">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row gx-5">
|
||||
{
|
||||
services.map((service, idx) => (
|
||||
<div className="col-lg-3 col-sm-6" key={idx}>
|
||||
<div className="services-card">
|
||||
<h6> Service #{service.number} </h6>
|
||||
<h3> {service.title} </h3>
|
||||
<p> {service.details} </p>
|
||||
<div className="icon">
|
||||
<img src={service.image} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="section-title"> services </div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Services
|
||||
@ -1,54 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const SideMenu = () => {
|
||||
const toggleSideMenu = (e) => {
|
||||
e.preventDefault();
|
||||
const side_menu = document.getElementById('side_menu');
|
||||
const side_overlay = document.querySelector('.side_overlay');
|
||||
|
||||
side_menu && side_menu.classList.remove('show');
|
||||
side_overlay && side_overlay.classList.remove('show');
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="side_menu style-7 dark_theme" id="side_menu">
|
||||
<a href="#0" className="side_menu_cls" onClick={toggleSideMenu}>
|
||||
<img src="/assets/img/icons/4dots_light.png" alt="" />
|
||||
</a>
|
||||
<div className="content">
|
||||
<div className="logo">
|
||||
<a href="#" className="w-100">
|
||||
<img src="/assets/img/logo_9.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="pages_links">
|
||||
<ul>
|
||||
<li><a href="#" className="active">Home</a></li>
|
||||
<li><a href="#">about</a></li>
|
||||
<li><a href="#">services</a></li>
|
||||
<li><a href="#">portfolio</a></li>
|
||||
<li><a href="#">blog</a></li>
|
||||
<li><a href="#">contact</a></li>
|
||||
<li><a href="#">shop</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="side_foot">
|
||||
<h5> get in touch </h5>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<a href="#"> <i className="fal fa-phone-alt me-2"></i> (+23) 5535 68 68 </a>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<a href="#"> <i className="fal fa-envelope me-2 mt-4 mt-lg-0"></i> contact@Iteck.co </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="side_overlay" onClick={toggleSideMenu}></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SideMenu
|
||||
@ -1,31 +0,0 @@
|
||||
import React from 'react';
|
||||
import solutions from 'data/CyberSecurity/solutions.json';
|
||||
|
||||
const Solutions = () => {
|
||||
return (
|
||||
<section className="solutions style-10 section-padding bg-light">
|
||||
<div className="container">
|
||||
<div className="text-center mb-40">
|
||||
<p className="color-blue7 mb-10"> Our Level </p>
|
||||
<h2> Explore Solutions By Industry </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row justify-content-center">
|
||||
{
|
||||
solutions.map((solution, idx) => (
|
||||
<div className="col-lg-3 col-sm-6" key={idx}>
|
||||
<a href="#" className="solution-card">
|
||||
<h6> {solution.title} </h6>
|
||||
<span className="icon"> <img src={solution.image} alt="" /> </span>
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Solutions
|
||||
@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
import team from 'data/CyberSecurity/team.json';
|
||||
|
||||
const Team = () => {
|
||||
return (
|
||||
<section className="team style-10 section-padding">
|
||||
<div className="container">
|
||||
<div className="mb-70 text-center">
|
||||
<p className="color-blue7 mb-10"> Our Team </p>
|
||||
<h2> Our Talent Expert </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
team.map((member, idx) => (
|
||||
<div className="col-lg-4" key={idx}>
|
||||
<div className="team-card">
|
||||
<div className="img">
|
||||
<img src={member.picture} alt="" className="main-img" />
|
||||
<span className={`bg_color bg-${idx === 1 ? 'blue7' : 'orange2'}`}></span>
|
||||
<div className="social-icons">
|
||||
<span className="icon"> </span>
|
||||
<div className="socials">
|
||||
<a href="#"> <i className="fab fa-twitter"></i> </a>
|
||||
<a href="#"> <i className="fab fa-facebook-f"></i> </a>
|
||||
<a href="#"> <i className="fab fa-behance"></i> </a>
|
||||
<a href="#"> <i className="fab fa-youtube"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="info">
|
||||
<p className="text-capitalize color-blue7"> {member.position} </p>
|
||||
<h5> {member.name} </h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Team
|
||||
@ -1,50 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<section className="about style-8 section-padding bg-gray2">
|
||||
<div className="container">
|
||||
<div className="row align-items-center justify-content-between">
|
||||
<div className="col-lg-6">
|
||||
<div className="img mb-4 mb-lg-0 wow fadeIn">
|
||||
<img src="/assets/img/about/3d_vector2.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="info">
|
||||
<div className="section-head style-8 mb-40">
|
||||
<h6 className="wow fadeInUp"> about our service </h6>
|
||||
<h3 className="wow fadeInUp"> We offer Real-time <br /> Data Solutions. </h3>
|
||||
</div>
|
||||
<p className="color-666 wow fadeInUp"> Stay focused and productive with a clean and clutter-free note space the flexible ways to organize </p>
|
||||
<ul className="mt-30">
|
||||
<li className="wow fadeInUp">
|
||||
<img src="/assets/img/about/icon3.svg" alt="" className="icon" />
|
||||
<p> Various AI Data Analysis Options </p>
|
||||
</li>
|
||||
<li className="wow fadeInUp">
|
||||
<img src="/assets/img/about/icon3.svg" alt="" className="icon" />
|
||||
<p> Auto Generate AI Content </p>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="d-flex align-items-center mt-40 wow fadeInUp">
|
||||
<div className="author">
|
||||
<div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
|
||||
<img src="/assets/img/testimonials/user7.png" alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<p> Certified By </p>
|
||||
<h6> Alonso D.Dowson </h6>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/about/signature.svg" alt="" className="signature ms-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@ -1,79 +0,0 @@
|
||||
import React from 'react';
|
||||
import blogs from 'data/DataAnalysis/blog.json'
|
||||
|
||||
const Blog = () => {
|
||||
return (
|
||||
<section className="blog style-8 bg-gray2">
|
||||
<div className="container">
|
||||
<div className="content section-padding wow fadeInUp">
|
||||
<div className="section-head text-center style-8 mb-80">
|
||||
<h6> blog </h6>
|
||||
<h3> our News & Insights </h3>
|
||||
</div>
|
||||
<div className="blog-content">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="main-post wow fadeInUp">
|
||||
<div className="img img-cover">
|
||||
<img src={blogs[0].cover} alt="" />
|
||||
<div className="tags">
|
||||
<a href="#"> { blogs[0].tag } </a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="info pt-30">
|
||||
<div className="date-author">
|
||||
<a href="#" className="date">
|
||||
{ blogs[0].date }
|
||||
</a>
|
||||
<span className="color-999 mx-3"> | </span>
|
||||
<a href="#" className="author color-999">
|
||||
By <span className="color-000 fw-bold"> { blogs[0].author } </span>
|
||||
</a>
|
||||
</div>
|
||||
<h4 className="title">
|
||||
<a href="#"> { blogs[0].title } </a>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="side-posts">
|
||||
{
|
||||
blogs.map((blog, index) => (
|
||||
index > 0 ?
|
||||
(
|
||||
<div className="item wow fadeInUp" key={index}>
|
||||
<div className="img img-cover">
|
||||
<img src={blog.cover} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<div className="date-author">
|
||||
<a href="#" className="date">
|
||||
{ blog.date }
|
||||
</a>
|
||||
<span className="color-999 mx-3"> | </span>
|
||||
<a href="#" className="author color-999">
|
||||
By <span className="color-000 fw-bold"> { blog.author } </span>
|
||||
</a>
|
||||
</div>
|
||||
<h4 className="title">
|
||||
<a href="#"> { blog.title } </a>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
null
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Blog
|
||||
@ -1,56 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const ChooseUs = () => {
|
||||
return (
|
||||
<section className="choose-us style-8 section-padding">
|
||||
<div className="container">
|
||||
<div className="row gx-0 justify-content-between">
|
||||
<div className="col-lg-5">
|
||||
<div className="info">
|
||||
<div className="section-head style-8 wow fadeInUp">
|
||||
<h6> why choose us </h6>
|
||||
<h3> Track And Analyze Your Business Statistics </h3>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-6">
|
||||
<div className="choose-card wow fadeInUp">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/ch7.svg" alt="" />
|
||||
</div>
|
||||
<h6> Target Audience </h6>
|
||||
<span className="arrow"> <i className="fal fa-long-arrow-right"></i> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="choose-card wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/ch8.svg" alt="" />
|
||||
</div>
|
||||
<h6> Various Options </h6>
|
||||
<span className="arrow"> <i className="fal fa-long-arrow-right"></i> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center mt-40 wow fadeInUp">
|
||||
<a href="#" className="butn bg-orange1 border-0 rounded-pill hover-shadow flex-shrink-0" type="submit">
|
||||
<span className="text-white"> Get Started Now <i className="fal fa-long-arrow-right ms-2"></i> </span>
|
||||
</a>
|
||||
<div className="inf ms-4">
|
||||
<p className="color-999"> Support Email </p>
|
||||
<a href="#" className="color-000 fw-bold"> info@support-iteck.com </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="img mt-5 mt-lg-0 wow fadeIn">
|
||||
<img src="/assets/img/choose_us/3d_vector1.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChooseUs
|
||||
@ -1,107 +0,0 @@
|
||||
import React from 'react';
|
||||
import footerData from 'data/DataAnalysis/footer.json';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="style-8 bg-gray2">
|
||||
<div className="container">
|
||||
<div className="content section-padding">
|
||||
<div className="logo-social">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="foot-logo">
|
||||
<a href="#">
|
||||
<img src="/assets/img/logo_home8.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 text-lg-end">
|
||||
<div className="socials">
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-youtube"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="links-content">
|
||||
<div className="row justify-content-between">
|
||||
<div className="col-lg-4">
|
||||
<div className="foot-info">
|
||||
<h6 className="foot-title"> About Us </h6>
|
||||
<p>{footerData.text}</p>
|
||||
<ul className="mt-20">
|
||||
<li>
|
||||
<a href="#"> <i className="fas fa-envelope-open me-2 color-main"></i> {footerData.email}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"> <i className="fas fa-phone me-2 color-main"></i> {footerData.phone}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"> <i className="fas fa-map-marker-alt me-2 color-main"></i> {footerData.address}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<div className="links">
|
||||
<h6 className="foot-title"> What We Do </h6>
|
||||
<ul>
|
||||
{
|
||||
footerData.links.map((link, i) => (
|
||||
<li key={i}>
|
||||
<a href={link.href}>{link.text}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<div className="links">
|
||||
<h6 className="foot-title"> Other Pages </h6>
|
||||
<ul>
|
||||
{
|
||||
footerData.morePages.map((link, i) => (
|
||||
<li key={i}>
|
||||
<a href={link.href}>{link.text}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<div className="foot-subscribe">
|
||||
<h6 className="foot-title"> Get Newsletter </h6>
|
||||
<p> Get every single promotional & business update. </p>
|
||||
<div className="form-group mt-30">
|
||||
<span className="icon"> <i className="fas fa-envelope-open"></i> </span>
|
||||
<input type="text" className="form-control" placeholder="Email address" />
|
||||
</div>
|
||||
<a href="#" className="butn bg-main border-0 rounded-pill hover-shadow flex-shrink-0 mt-20 w-100 py-3" type="submit">
|
||||
<span className="text-white"> Subscribe Now <i className="fal fa-long-arrow-right ms-2"></i> </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="foot py-4 border-1 border-top brd-gray text-center">
|
||||
<p> Full Copyright & Design By <a href="#" className="fw-bold"> @ThemesCamp </a> - 2022 </p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -1,42 +0,0 @@
|
||||
import React from 'react';
|
||||
import Navbar from 'components/Navbars/DataAnalysis';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="style-8 bg-gray2">
|
||||
<Navbar />
|
||||
<div className="container">
|
||||
<div className="content section-padding">
|
||||
<div className="row align-items-center gx-0">
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<p className="fw-bold color-main text-decoration-underline text-uppercase wow fadeInUp"> We Bring Ideas To Life </p>
|
||||
<h1 className="wow fadeInUp"> Ai & Data Machine <br /> Deep Solutions. </h1>
|
||||
<div className="form wow fadeInUp">
|
||||
<h5> Subscribe & Get 7-Days Trail </h5>
|
||||
<div className="form-group mt-4">
|
||||
<span className="icon flex-shrink-0 ms-3">
|
||||
<i className="fas fa-envelope-open"></i>
|
||||
</span>
|
||||
<input type="text" className="form-control" placeholder="Business email address" />
|
||||
<button className="butn bg-orange1 border-0 rounded-pill hover-shadow flex-shrink-0" type="submit">
|
||||
<span className="text-white"> Get A Demo <i className="fal fa-long-arrow-right ms-2"></i> </span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center color-999 mt-3"> *** We are not going to save your data </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="img mt-4 mt-lg-0 wow fadeIn">
|
||||
<img src="/assets/img/header/3d_vector_head8.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,72 +0,0 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import CountTo from '../CountTo';
|
||||
import numbers from 'data/DataAnalysis/numbers.json';
|
||||
|
||||
const Numbers = () => {
|
||||
const numbersSectionRef = useRef(null);
|
||||
const [position] = useState({ from: 2500, to: 2750 });
|
||||
|
||||
|
||||
return (
|
||||
<section className="numbers style-8 pt-100">
|
||||
<div className="container">
|
||||
<div className="section-head style-8 text-center mb-80 wow fadeInUp">
|
||||
<h6> support platform </h6>
|
||||
<h3> Intregrations Platforms </h3>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="logo-icon wow zoomIn">
|
||||
<img src="/assets/img/logo_home8_icon.png" alt="" />
|
||||
</div>
|
||||
<div className="plat-icons">
|
||||
<a href="#" className="icon icon-shadow slide_up_down">
|
||||
<img src="/assets/img/icons/numbers/1.png" alt="" />
|
||||
</a>
|
||||
<a href="#" className="icon slide_up_down">
|
||||
<img src="/assets/img/icons/numbers/2.png" alt="" />
|
||||
</a>
|
||||
<a href="#" className="icon icon-shadow slide_up_down">
|
||||
<img src="/assets/img/icons/numbers/3.png" alt="" />
|
||||
</a>
|
||||
<a href="#" className="icon slide_up_down">
|
||||
<img src="/assets/img/icons/numbers/4.png" alt="" />
|
||||
</a>
|
||||
<a href="#" className="icon icon-shadow slide_up_down">
|
||||
<img src="/assets/img/icons/numbers/5.png" alt="" />
|
||||
</a>
|
||||
<a href="#" className="icon icon-shadow slide_up_down">
|
||||
<img src="/assets/img/icons/numbers/6.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<img src="/assets/img/num8_circle.png" alt="" className="num8_circle rotate-center" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="numbers-btm" ref={numbersSectionRef}>
|
||||
<div className="container">
|
||||
<div className="numbers-content">
|
||||
<div className="row">
|
||||
{
|
||||
numbers.map((number, idx) => (
|
||||
<div className="col-lg-3 col-sm-6" key={idx}>
|
||||
<div className="number-card style-8 mt-4 mt-lg-0 wow fadeInUp">
|
||||
<div className="icon">
|
||||
<img src={number.image} alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<h3> <CountTo className="counter" from={0} to={number.value} speed={1500} position={position} /> { number.operator } </h3>
|
||||
<p>{ number.title }</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/icons/numbers/7.png" alt="" className="r_shape rotate-center" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Numbers
|
||||
@ -1,107 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import plans from 'data/DataAnalysis/plans.json';
|
||||
import Slider from 'rc-slider';
|
||||
import 'rc-slider/assets/index.css'
|
||||
|
||||
const Pricing = () => {
|
||||
const [range, setRange] = useState(20);
|
||||
|
||||
const sliderChange = (value) => {
|
||||
setRange(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="pricing style-8 bg-gray2">
|
||||
<div className="pricing-head wow fadeInUp">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="section-head style-8">
|
||||
<h6> our plans </h6>
|
||||
<h3 className="text-white"> Minimalist Plans </h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="position-relative">
|
||||
<Slider
|
||||
value={range}
|
||||
onChange={sliderChange}
|
||||
railStyle={{ backgroundColor: '#151515', height: '5px' }}
|
||||
trackStyle={{ backgroundColor: `#0066FF`, height: '5px' }}
|
||||
/>
|
||||
<p className="users-number"> <input type="text" id="amount" value={range} readOnly /> <span> users </span> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<div className="pricing-tabsHead text-center">
|
||||
<div className="price-radios">
|
||||
<div className="form-check form-check-inline">
|
||||
<input className="form-check-input" type="radio" name="inlineRadioOptions" id="monthly-input"
|
||||
value="option1" />
|
||||
<label className="form-check-label" htmlFor="monthly-input">
|
||||
Monthly
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline">
|
||||
<input className="form-check-input" type="radio" name="inlineRadioOptions" id="yearly-input"
|
||||
value="option2" checked />
|
||||
<label className="form-check-label" htmlFor="yearly-input">
|
||||
yearly
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pricing-body">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
plans.map((plan, index) => (
|
||||
<div className={`col-lg-4 ${plan.head ? '' : 'pt-60'} order-0 order-lg-0 wow fadeInUp`} data-wow-delay={`${index * 0.2}s`} key={index}>
|
||||
{
|
||||
plan.head && (
|
||||
<div className="popular-head">
|
||||
<p> { plan.head } </p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className="pricing-card">
|
||||
<div className="pricing-title">
|
||||
<h2> { plan.title } </h2>
|
||||
<p> { plan.description } </p>
|
||||
</div>
|
||||
<div className="price">
|
||||
<p> Price: ${ plan.price } </p>
|
||||
<a href="#" className="price-btn"> Purchase Now <i className="fal fa-long-arrow-right"></i> </a>
|
||||
</div>
|
||||
<div className="pricing-info">
|
||||
<ul>
|
||||
{
|
||||
plan.features.map((feature, i) => (
|
||||
<li key={i}>
|
||||
<span className="icon">
|
||||
<img src="/assets/img/icons/numbers/8.png" alt="" />
|
||||
</span>
|
||||
<span> { feature } </span>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Pricing
|
||||
@ -1,114 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import SwiperCore, { Autoplay, Keyboard, Navigation } from 'swiper';
|
||||
import projects from 'data/DataAnalysis/projects.json';
|
||||
|
||||
import "swiper/css";
|
||||
import 'swiper/css/autoplay';
|
||||
import 'swiper/css/keyboard';
|
||||
import 'swiper/css/navigation';
|
||||
|
||||
SwiperCore.use([Autoplay, Keyboard, Navigation]);
|
||||
|
||||
const Projects = () => {
|
||||
const [load, setLoad] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoad(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<section className="projects style-8 section-padding bg-gray2">
|
||||
<div className="container">
|
||||
<div className="section-head style-8 mb-80 wow fadeInUp">
|
||||
<h6> case study </h6>
|
||||
<h3> Completed Projects </h3>
|
||||
<div className="arrows">
|
||||
<div className="swiper-button-next">
|
||||
<i className="fal fa-long-arrow-right"></i>
|
||||
</div>
|
||||
<div className="swiper-button-prev">
|
||||
<i className="fal fa-long-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content wow fadeIn">
|
||||
<div className="projects-slider8">
|
||||
{
|
||||
load && (
|
||||
<Swiper
|
||||
className="swiper-container"
|
||||
slidesPerView={1}
|
||||
spaceBetween={0}
|
||||
speed={1200}
|
||||
pagination={false}
|
||||
navigation={{
|
||||
nextEl: '.projects.style-8 .swiper-button-next',
|
||||
prevEl: '.projects.style-8 .swiper-button-prev',
|
||||
}}
|
||||
mousewheel={false}
|
||||
keyboard={true}
|
||||
autoplay={{
|
||||
delay: 4000
|
||||
}}
|
||||
loop={false}
|
||||
>
|
||||
{
|
||||
projects.map((project, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="project-card">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="img">
|
||||
<img src={project.image} alt="" className="main-img" />
|
||||
<div className="tags">
|
||||
<a href="#"> {project.tag} </a>
|
||||
</div>
|
||||
<img src="/assets/img/about/about7_chart.png" alt="" className="img-chart slide_up_down" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<div className="logo">
|
||||
<img src={project.logo} alt="" />
|
||||
</div>
|
||||
<h4 className="title"> {project.title} </h4>
|
||||
<p> {project.text} </p>
|
||||
<div className="proj-det">
|
||||
<div className="item">
|
||||
<p> Client Name </p>
|
||||
<h6> {project.client.name} </h6>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p> Budget </p>
|
||||
<h6> {project.client.budget} </h6>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p> Estimate </p>
|
||||
<h6> {project.client.estimate} </h6>
|
||||
</div>
|
||||
<a href="#" className="icon">
|
||||
<i className="fal fa-long-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Projects
|
||||
@ -1,95 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import SwiperCore, { Autoplay } from 'swiper';
|
||||
import services from 'data/DataAnalysis/services.json';
|
||||
|
||||
import "swiper/css";
|
||||
import 'swiper/css/autoplay';
|
||||
|
||||
SwiperCore.use([Autoplay]);
|
||||
|
||||
const Services = () => {
|
||||
const [load, setLoad] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoad(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="services style-8 section-padding">
|
||||
<div className="container">
|
||||
<div className="section-head style-8 text-center mb-80 wow fadeInUp">
|
||||
<h6> our services </h6>
|
||||
<h3> Our Experties Field </h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content wow fadeInUp">
|
||||
<div className="services-slider8 pb-60">
|
||||
{
|
||||
load && (
|
||||
<Swiper
|
||||
spaceBetween={50}
|
||||
speed={10000}
|
||||
autoplay={{
|
||||
delay: 1
|
||||
}}
|
||||
loop={true}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
787: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 4,
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
services.map((service, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="service-card style-8">
|
||||
<div className="icon">
|
||||
<img src={service.image} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<h5>{service.title}</h5>
|
||||
<p>{service.text}</p>
|
||||
<a href="#"> Read More </a>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="btm-info pt-20 border-1 border-top brd-gray wow fadeInDown">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<h5> See Plan Details And Pricing For More Informations </h5>
|
||||
</div>
|
||||
<div className="col-lg-6 text-lg-end">
|
||||
<a href="#" className="pe-4 me-4 border-1 border-end brd-gray"> <i className="fas fa-server color-main me-1"></i> Daily Backups </a>
|
||||
<a href="#"> <i className="fas fa-shield color-main me-1"></i> Free Migrations </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Services
|
||||
@ -1,45 +0,0 @@
|
||||
import React from 'react';
|
||||
import testimonials from 'data/DataAnalysis/testimonials.json';
|
||||
|
||||
const Testimonials = () => {
|
||||
return (
|
||||
<section className="testimonials style-8 section-padding bg-gray2">
|
||||
<div className="container">
|
||||
<div className="section-head text-center style-8 mb-80 wow fadeInUp">
|
||||
<h6> testimonials </h6>
|
||||
<h3> Happy User Reviews </h3>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
testimonials.map((testimonial, index) => (
|
||||
<div className="col-lg-4" key={index}>
|
||||
<div className="testi-card wow fadeInUp">
|
||||
<div className="info">
|
||||
<div className="stars">
|
||||
{ Array(testimonial.stars).fill().map((_, i) => <i className="fas fa-star" key={i}></i>) }
|
||||
</div>
|
||||
<p> “ { testimonial.text } ” </p>
|
||||
<img src="/assets/img/icons/qout8.png" alt="" className="icon" />
|
||||
</div>
|
||||
<div className="author mt-40">
|
||||
<div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
|
||||
<img src={ testimonial.author.image } alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<p> { testimonial.author.position } </p>
|
||||
<h6> { testimonial.author.name } </h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Testimonials
|
||||
@ -1,82 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import CountTo from '../CountTo';
|
||||
import { Link } from 'gatsby';
|
||||
import aboutData from 'data/Digital/about.json';
|
||||
|
||||
const About = () => {
|
||||
const numbersSectionRef = useRef(null);
|
||||
const [position, setPosition] = useState({ from: 300, to: 500 });
|
||||
|
||||
useEffect(() => {
|
||||
const numbersSection = numbersSectionRef.current;
|
||||
const numbersSectionHeight = numbersSection.offsetHeight;
|
||||
const numbersSectionTop = numbersSection.offsetTop;
|
||||
|
||||
const Position = { from: numbersSectionTop - numbersSectionHeight - 100, to: numbersSectionTop + numbersSectionHeight };
|
||||
|
||||
setPosition(Position);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="about style-1" data-scroll-index="1">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="about-logos d-flex align-items-center justify-content-between border-bottom border-1 brd-light pb-20">
|
||||
{
|
||||
aboutData.logos.map((logo, index) => (
|
||||
<a href="#" className="logo wow fadeInUp" data-wow-delay={index * 0.2 + "s"} key={index}>
|
||||
<img src={logo} alt="" />
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="about-info">
|
||||
<div className="row justify-content-between">
|
||||
<div className="col-lg-5">
|
||||
<div className="title">
|
||||
<h3 className=" wow fadeInUp slow">“Technology is best when it brings people together.”</h3>
|
||||
<small className="wow fadeInUp slow fw-bold">Patricia Cross</small>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<h6 className=" wow fadeInUp slow">
|
||||
We can help to maintain and modernize your IT infrastructure & solve various infrastructure-specific issues a business may face.
|
||||
</h6>
|
||||
<p className=" wow fadeInUp slow">
|
||||
Iteck Co is the partner of choice for many of the world’s leading enterprises, SMEs and technology challengers. We help businesses elevate their value through custom software development, product design, QA and consultancy services.
|
||||
</p>
|
||||
<Link to="/page-about-5" className="btn btn-outline-light mt-5 sm-butn wow fadeInUp slow">
|
||||
<span>more about us</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-numbers" ref={numbersSectionRef}>
|
||||
<div className="row">
|
||||
{
|
||||
aboutData.numbers.map((item, index) => (
|
||||
<div className="col-lg-3 col-sm-6" key={index}>
|
||||
<div className="num-item wow fadeInUp" data-wow-delay="0">
|
||||
<div className="num">
|
||||
<CountTo className="counter" from={0} to={item.number} speed={1500} position={position} />
|
||||
{ item.operator && (<span>{typeof item.operator === 'string' ? item.operator : <i className="fas fa-plus"></i>}</span>) }
|
||||
</div>
|
||||
<div className="inf">
|
||||
{ item.info }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/about/num_shap.png" alt="" className="about_shap" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@ -1,116 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import SwiperCore, { Pagination, Navigation, Autoplay } from 'swiper';
|
||||
import blogs from 'data/Digital/blog.json';
|
||||
|
||||
import "swiper/css";
|
||||
import 'swiper/css/autoplay';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
|
||||
SwiperCore.use([Pagination, Navigation, Autoplay]);
|
||||
|
||||
const Blog = () => {
|
||||
const showDetails = (event) => {
|
||||
const detailsEl = event.currentTarget.querySelector('.text');
|
||||
detailsEl.style.display = "block";
|
||||
}
|
||||
|
||||
const hideDetails = (event) => {
|
||||
const detailsEl = event.currentTarget.querySelector('.text');
|
||||
detailsEl.style.display = "none";
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="blog section-padding bg-gray style-1" data-scroll-index="6">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col offset-lg-1">
|
||||
<div className="section-head mb-60">
|
||||
<h6 className="color-main text-uppercase wow fadeInUp">our press</h6>
|
||||
<h2 className="wow fadeInUp">
|
||||
Latest Posts <span className="fw-normal">From Our Press</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="blog_slider">
|
||||
<Swiper
|
||||
className="swiper-container"
|
||||
slidesPerView={3}
|
||||
spaceBetween={30}
|
||||
speed={1000}
|
||||
pagination={{
|
||||
el: ".blog_slider .swiper-pagination"
|
||||
}}
|
||||
navigation={{
|
||||
nextEl: '.blog_slider .swiper-button-next',
|
||||
prevEl: '.blog_slider .swiper-button-prev'
|
||||
}}
|
||||
mousewheel={false}
|
||||
keyboard={true}
|
||||
autoplay={{
|
||||
delay: 4000
|
||||
}}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 1
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
787: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 3
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 4
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
blogs.map((blog, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="blog_box" onMouseMove={showDetails} onMouseLeave={hideDetails}>
|
||||
<div className="tags">
|
||||
<a href="#">{ blog.type }</a>
|
||||
</div>
|
||||
<div className="img">
|
||||
<img src={blog.cover} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<h6><Link to="/page-single-post-5">{ blog.title }</Link></h6>
|
||||
<div className="auther">
|
||||
<span>
|
||||
<img className="auther-img" src={blog.userPic} alt="" />
|
||||
<small><a href="#">By { blog.user }</a></small>
|
||||
</span>
|
||||
<span>
|
||||
<i className="bi bi-calendar2"></i>
|
||||
<small><a href="#">{ blog.date }</a></small>
|
||||
</span>
|
||||
</div>
|
||||
<div className="text">
|
||||
{ blog.details } [...]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
|
||||
<div className="swiper-button-prev"></div>
|
||||
<div className="swiper-button-next"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Blog
|
||||
@ -1,50 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import chooseUsData from 'data/Digital/chooseus.json';
|
||||
|
||||
const ChooseUs = () => {
|
||||
return (
|
||||
<section className="choose-us section-padding pt-0 style-1" data-scroll-index="3">
|
||||
<div className="container">
|
||||
<div className="row justify-content-end">
|
||||
<div className="col-lg-5">
|
||||
<div className="info">
|
||||
<div className="section-head mb-60">
|
||||
<h6 className="color-main text-uppercase wow fadeInUp">Why choose us</h6>
|
||||
<h2 className="wow fadeInUp">
|
||||
Boost Your Business <span className="fw-normal">With New Tech</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text">
|
||||
Our team can assist you in transforming your business through latest tech capabilities to stay ahead of the curve.
|
||||
</div>
|
||||
<ul>
|
||||
{
|
||||
chooseUsData.map((item, index) => (
|
||||
<li className="wow fadeInUp" key={index}>
|
||||
<span className="icon">
|
||||
<i className="bi bi-check2"></i>
|
||||
</span>
|
||||
<h6>
|
||||
{ item }
|
||||
</h6>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
<Link to="/page-about-5" className="btn butn-gard border-0 text-white wow fadeInUp">
|
||||
<span>How We Works</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/choose_us/choose_lines.svg" alt="" className="choose-us-img" />
|
||||
<img src="/assets/img/choose_us/choose_brands.png" alt="" className="choose-us-brands" />
|
||||
<img src="/assets/img/choose_us/choose_bubbles.png" alt="" className="choose-us-bubbles" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChooseUs
|
||||
@ -1,120 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import contactInfo from 'data/Digital/contact.json';
|
||||
|
||||
const Contact = () => {
|
||||
const [formData, setFormdata] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
option: "",
|
||||
message: ""
|
||||
});
|
||||
|
||||
const handleFormChange = (e) => {
|
||||
setFormdata(prev => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleFormSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const formValues = new FormData();
|
||||
|
||||
formValues.append('name', formData.name);
|
||||
formValues.append('email', formData.email);
|
||||
formValues.append('option', formData.option);
|
||||
formValues.append('message', formData.message);
|
||||
|
||||
const res = await axios.post('/contact.php', formValues)
|
||||
.catch(err => alert(err.message));
|
||||
|
||||
if (!res) return;
|
||||
|
||||
alert('Form submitted successfully.')
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<section className="contact section-padding bg-gradient style-1" data-scroll-index="7">
|
||||
<div className="container">
|
||||
<div className="section-head mb-60 text-center">
|
||||
<h6 className="text-white text-uppercase wow fadeInUp">contact us</h6>
|
||||
<h2 className="wow fadeInUp text-white">
|
||||
Request Free <span className="fw-normal">Consultancy</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="contact_info text-white">
|
||||
<p className="wow fadeInUp">Hotline 24/7</p>
|
||||
<h4 className="wow fadeInUp">{ contactInfo.phone }</h4>
|
||||
<ul>
|
||||
<li className="wow fadeInUp">
|
||||
<strong>Address : </strong> { contactInfo.address }
|
||||
</li>
|
||||
<li className="wow fadeInUp">
|
||||
<strong>Email : </strong> { contactInfo.email }
|
||||
</li>
|
||||
<li className="wow fadeInUp">
|
||||
<strong>Fax : </strong> { contactInfo.fax }
|
||||
</li>
|
||||
<li className="wow fadeInUp">
|
||||
<strong>Work Hour : </strong> { contactInfo.workingHours }
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" className="wow fadeInUp">get direction</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 offset-lg-1">
|
||||
<form className="contact_form" action="contact.php" method="post" onSubmit={handleFormSubmit}>
|
||||
<div className="row gx-3">
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group mb-3 wow fadeInUp">
|
||||
<input type="text" name="name" className="form-control" placeholder="name *" onChange={handleFormChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group mb-3 wow fadeInUp">
|
||||
<input type="text" name="email" className="form-control" placeholder="Email Address *" onChange={handleFormChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group mb-3 wow fadeInUp">
|
||||
<select name="option" className="form-select" aria-label="Default select example" defaultValue="Your inquiry about" onChange={handleFormChange}>
|
||||
<option>Your inquiry about</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group mb-3 wow fadeInUp">
|
||||
<textarea className="form-control" name="message" rows="4" placeholder="Write your inquiry here" onChange={handleFormChange}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="form-check mb-4 wow fadeInUp">
|
||||
<input className="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
|
||||
<label className="form-check-label text-light small" htmlFor="flexCheckDefault">
|
||||
By submitting, i’m agreed to the <a href="#" className="text-decoration-underline">Terms & Conditons</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<input type="submit" value="Request Now" className="btn btn-dark wow fadeInUp text-light fs-14px"></input>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/contact_globe.svg" alt="" className="contact_globe" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Contact
|
||||
@ -1,125 +0,0 @@
|
||||
import React from 'react';
|
||||
import footerInfo from 'data/Digital/footer.json';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="style-1">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-4">
|
||||
<div className="foot_info">
|
||||
<a href="#" className="logo mb-3">
|
||||
<img src="/assets/img/logo_cl.png" alt="" />
|
||||
</a>
|
||||
<div className="text mb-4">
|
||||
Best IT Solutions & Technology WordPress <br /> Theme for Your Busines
|
||||
</div>
|
||||
<ul className="mb-4">
|
||||
<li className="d-flex">
|
||||
<i className="bi bi-house me-3"></i>
|
||||
<a href="#">
|
||||
<span>{ footerInfo.address }</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="d-flex">
|
||||
<i className="bi bi-envelope me-3"></i>
|
||||
<a href="#">
|
||||
<span>{ footerInfo.email }</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="d-flex">
|
||||
<i className="bi bi-phone me-3"></i>
|
||||
<a href="#">
|
||||
<span>{ footerInfo.phone }</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="social_icons">
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<div className="links">
|
||||
<div className="cont">
|
||||
<h6 className="link_title">
|
||||
Services
|
||||
</h6>
|
||||
<ul>
|
||||
{
|
||||
footerInfo.services.map((item, index) => (
|
||||
<li key={index}>
|
||||
<a href="#">{ item }</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<div className="links">
|
||||
<div className="cont">
|
||||
<h6 className="link_title">
|
||||
Information
|
||||
</h6>
|
||||
<ul>
|
||||
{
|
||||
footerInfo.information.map((item, index) => (
|
||||
<li key={index}>
|
||||
<a href="#">{ item }</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="foot_subscribe">
|
||||
<h6 className="link_title">
|
||||
Newsletter
|
||||
</h6>
|
||||
<p>
|
||||
Register now to get latest updates on promotions & coupons.
|
||||
</p>
|
||||
<div className="input-group my-4">
|
||||
<input type="text" className="form-control" placeholder="Enter your email" aria-label="Enter your email" aria-describedby="button-addon2" />
|
||||
<button className="btn butn-gard border-0 text-white px-3" type="button" id="button-addon2">
|
||||
<span>Subscribe</span>
|
||||
</button>
|
||||
</div>
|
||||
<p className="fst-italic">By subscribing, you accepted the our <a href="#" className="text-decoration-underline"> Policy</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-12">
|
||||
<div className="foot">
|
||||
<p>
|
||||
© 2022 Copyrights by <a href="#" className="text-white text-decoration-underline">Iteck Co.</a> All Rights Reserved by <a href="#" className="text-white text-decoration-underline"> ThemesCamp </a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/footer/foot_l.png" alt="" className="foot_l" />
|
||||
<img src="/assets/img/footer/foot_r.png" alt="" className="foot_r" />
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -1,67 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import ModalVideo from "react-modal-video";
|
||||
import "react-modal-video/css/modal-video.css";
|
||||
|
||||
const Header = () => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
|
||||
const openVideo = (e) => {
|
||||
e.preventDefault();
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="section-padding style-1" data-scroll-index="0">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<div className="section-head mb-60">
|
||||
<h6 className="color-main text-uppercase">Iteck agency</h6>
|
||||
<h2>
|
||||
Technology & IT <span className="fw-normal">Solutions</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text">
|
||||
We transform businesses of most major sectors with powerful and adaptable digital solutions that satisfy the needs of today.
|
||||
</div>
|
||||
<div className="bttns mt-5">
|
||||
<Link to="/page-services-5" className="btn btn-dark">
|
||||
<span>our services</span>
|
||||
</Link>
|
||||
<a href="https://youtu.be/pGbIOC83-So?t=21" className="vid-btn" onClick={openVideo}>
|
||||
<i className="bi bi-play wow heartBeat infinite slow"></i>
|
||||
<span>Iteck’s <br /> Showreels</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 offset-lg-1">
|
||||
<div className="img">
|
||||
<img src="/assets/img/header/head.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/header/head_shape_r.png" alt="" className="head-shape-r wow" />
|
||||
<img src="/assets/img/header/head_shape_l.png" alt="" className="head-shape-l wow" />
|
||||
{
|
||||
typeof window !== "undefined" &&
|
||||
(
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
autoplay
|
||||
isOpen={isOpen}
|
||||
videoId="pGbIOC83-So"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,112 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
|
||||
import portfolios from 'data/Digital/portfolio.json';
|
||||
|
||||
import "swiper/css";
|
||||
import 'swiper/css/autoplay';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
|
||||
SwiperCore.use([Navigation, Pagination, Autoplay]);
|
||||
|
||||
const Portfolio = () => {
|
||||
return (
|
||||
<section className="portfolio section-padding bg-gray style-1" data-scroll-index="4">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col offset-lg-1">
|
||||
<div className="section-head mb-60">
|
||||
<h6 className="color-main text-uppercase wow fadeInUp">Portfolio</h6>
|
||||
<h2 className="wow fadeInUp">
|
||||
Latest Projects <span className="fw-normal">From Our Team</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content wow fadeIn slow">
|
||||
<div className="portfolio-slider">
|
||||
<Swiper
|
||||
className="swiper-container"
|
||||
slidesPerView={3}
|
||||
spaceBetween={30}
|
||||
speed={1000}
|
||||
pagination={{
|
||||
el: ".portfolio-slider .swiper-pagination"
|
||||
}}
|
||||
navigation={{
|
||||
nextEl: '.portfolio-slider .swiper-button-next',
|
||||
prevEl: '.portfolio-slider .swiper-button-prev'
|
||||
}}
|
||||
mousewheel={false}
|
||||
keyboard={true}
|
||||
autoplay={{
|
||||
delay: 4000
|
||||
}}
|
||||
loop={true}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 1
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
787: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 3
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 3
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
portfolios.map((portfolio, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="portfolio-card">
|
||||
<div className="img">
|
||||
<img src={portfolio.image} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<h5>
|
||||
<Link to="/page-single-project-5">
|
||||
{ portfolio.title }
|
||||
</Link>
|
||||
</h5>
|
||||
<small className="d-block color-main text-uppercase">
|
||||
{
|
||||
portfolio.types.map((type, i) => (<a href="#" className="me-1" key={i}>{ type }</a>))
|
||||
}
|
||||
</small>
|
||||
<div className="text">
|
||||
{ portfolio.text }
|
||||
</div>
|
||||
<div className="tags">
|
||||
{
|
||||
portfolio.tags.map((tag, i) => (<a href="#" className="me-1" key={i}>{ tag }</a>))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
|
||||
<div className="swiper-pagination"></div>
|
||||
|
||||
<div className="swiper-button-next"></div>
|
||||
<div className="swiper-button-prev"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/projects/prog/shap_r.png" alt="" className="shap_r" />
|
||||
<img src="/assets/img/projects/prog/shap_l.png" alt="" className="shap_l" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Portfolio
|
||||
@ -1,57 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import services from 'data/Digital/services.json';
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<section className="services section-padding style-1" data-scroll-index="2">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col offset-lg-1">
|
||||
<div className="section-head mb-60">
|
||||
<h6 className="color-main text-uppercase wow fadeInUp">our services</h6>
|
||||
<h2 className="wow fadeInUp">
|
||||
Perfect IT Solutions <span className="fw-normal">For Your Business</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
services.map((service, index) => (
|
||||
<div className="col-lg-4" key={index}>
|
||||
<div className="service-box mb-4 wow fadeInUp" data-wow-delay={index * 0.2 + "s"}>
|
||||
<h5>
|
||||
<Link to="/page-services-5">{ service.title }</Link>
|
||||
<span className="num">{ service.number }</span>
|
||||
</h5>
|
||||
<div className="icon">
|
||||
<img src={service.icon} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<div className="text">
|
||||
{ service.text }
|
||||
</div>
|
||||
<div className="tags">
|
||||
{
|
||||
service.tags.map((tag, index) => (
|
||||
<a href="#" className="me-1" key={index}>{ tag }</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/services/ser_shap_l.png" alt="" className="ser_shap_l" />
|
||||
<img src="/assets/img/services/ser_shap_r.png" alt="" className="ser_shap_r" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Services
|
||||
@ -1,58 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import teamMembers from 'data/Digital/team.json'
|
||||
|
||||
const Team = () => {
|
||||
return (
|
||||
<section className="team section-padding pt-0 style-1">
|
||||
<div className="container">
|
||||
<div className="section-head mb-60 text-center">
|
||||
<h6 className="color-main text-uppercase wow fadeInUp">meet our expert</h6>
|
||||
<h2 className="wow fadeInUp">
|
||||
Clients Satisfaction, <span className="fw-normal">Our Reputation</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
{
|
||||
teamMembers.map((member, index) => (
|
||||
<div className="team_box wow fadeInUp" data-wow-delay={index * 0.2 + "s"} key={index}>
|
||||
<div className="avatar">
|
||||
<img src={member.picture} alt="" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<h6><a href="#">{ member.name }</a></h6>
|
||||
<small>{ member.position }</small>
|
||||
<div className="social_icons">
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="bttns mt-4 text-center">
|
||||
<Link to="/page-about-5" className="btn btn-dark wow zoomIn me-2">
|
||||
<span>See All Team</span>
|
||||
</Link>
|
||||
<Link to="/page-contact-5" className="btn butn-gard border-0 text-white wow zoomIn">
|
||||
<span>Join Our Team</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/team/team_shap.png" alt="" className="team_shap" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Team
|
||||
@ -1,80 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import ModalVideo from "react-modal-video";
|
||||
import "react-modal-video/css/modal-video.css";
|
||||
import testimonials from 'data/Digital/testimonials.json'
|
||||
|
||||
const Testimonials = () => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
|
||||
const openVideo = (e) => {
|
||||
e.preventDefault();
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="testimonials section-padding style-1" data-scroll-index="5">
|
||||
<div className="container">
|
||||
<div className="section-head mb-60 text-center">
|
||||
<h6 className="color-main text-uppercase wow fadeInUp">testimonials</h6>
|
||||
<h2 className="wow fadeInUp">
|
||||
The Trust <span className="fw-normal">From Clients</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
<div className="col-lg-5">
|
||||
<div className="vid_img mb-2 mb-md-0 wow zoomIn slow">
|
||||
<img src="/assets/img/testimonials/testi.jpeg" alt="" />
|
||||
<a href="https://youtu.be/pGbIOC83-So?t=21" className="play_icon" onClick={openVideo}>
|
||||
<i className="bi bi-play"></i>
|
||||
</a>
|
||||
<div className="img_info wow fadeInUp">
|
||||
<h4><a href="#">Casper Defloy</a></h4>
|
||||
<small><a href="#">Tech Leader at Esty Inc</a></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="info wow fadeInUp">
|
||||
{
|
||||
testimonials.map((testimonial, index) => (
|
||||
<div className={`client_card ${index !== testimonials.length - 1 ? 'mb-2':''}`} data-wow-delay={index * 0.2 + "s"} key={index}>
|
||||
<div className="user_img">
|
||||
<img src={testimonial.userImg} alt="" />
|
||||
</div>
|
||||
<div className="inf_content">
|
||||
<div className="rate_stars">
|
||||
{
|
||||
Array(testimonial.stars).fill().map((_,i) => (<i key={i} className="bi bi-star-fill"></i>))
|
||||
}
|
||||
</div>
|
||||
<h6>
|
||||
“{ testimonial.comment }”
|
||||
</h6>
|
||||
<p>{ testimonial.username } <span className="text-muted">/ { testimonial.position }</span></p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
typeof window !== "undefined" &&
|
||||
(
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
autoplay
|
||||
isOpen={isOpen}
|
||||
videoId="pGbIOC83-So"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Testimonials
|
||||
@ -1,60 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<section className="about style-13">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<div className="info">
|
||||
<h5> About Me </h5>
|
||||
<div className="text">
|
||||
I’m an freelance ui & ux designer with over two decades of experience. I’ve covered both Milan’s fashion week and the US primaries in the same year. Above all, I believe that fair and free press is fundamental to with healthy society the core ideal behind my work.
|
||||
</div>
|
||||
<div className="logos">
|
||||
<img src="/assets/img/about/logo1.png" alt="" />
|
||||
<img src="/assets/img/about/logo2.png" alt="" />
|
||||
<img src="/assets/img/about/logo3.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="about-contact">
|
||||
<div className="item mt-5 mt-lg-0">
|
||||
<div className="inf">
|
||||
<p> Full Name </p>
|
||||
<h6> Miranda H. Halim </h6>
|
||||
</div>
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/ab_13_1.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item mt-30">
|
||||
<div className="inf">
|
||||
<p> Email Address </p>
|
||||
<h6> info@webmail.com </h6>
|
||||
</div>
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/ab_13_2.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item mt-30">
|
||||
<div className="inf">
|
||||
<p> Phone </p>
|
||||
<h6> +111 222 333 44 </h6>
|
||||
</div>
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/ab_13_3.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
import blogs from 'data/Freelancer/blog.json';
|
||||
|
||||
const Blog = () => {
|
||||
return (
|
||||
<section className="blog section-padding style-13">
|
||||
<div className="container">
|
||||
<div className="section-head text-center mb-50 style-13">
|
||||
<h6> news </h6>
|
||||
<h2> Blog & Insights </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
blogs.map((blog, idx) => (
|
||||
<div className="col-lg-4" key={idx}>
|
||||
<div className="blog-item">
|
||||
<div className="cont">
|
||||
<div className="tags">
|
||||
{
|
||||
blog.tags.map((tag, i) => (<a href="#" key={i}> {tag} </a>))
|
||||
}
|
||||
</div>
|
||||
<h5> <a href="#"> {blog.title}... </a> </h5>
|
||||
<div className="author d-flex align-items-center">
|
||||
<div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
|
||||
<img src={blog.authorPic} alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<h6 className="fw-bold mb-1"> <a href="#"> {blog.authorName} </a> </h6>
|
||||
<p className=""> <span className="color-999"> Date: </span> <a href="#"> {blog.date} </a> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Blog
|
||||
@ -1,76 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Contact = () => {
|
||||
return (
|
||||
<section className="contact style-13">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row gx-0 justify-content-between">
|
||||
<div className="col-lg-5">
|
||||
<div className="contact-info">
|
||||
<div className="section-head side-title mb-40 style-13">
|
||||
<h6> call to action </h6>
|
||||
<h2> Any Project On Mind </h2>
|
||||
</div>
|
||||
<p> A portfolio is a collection of financial investments like stocks, bonds, commodities, cash, & cash equivalent including closed-end funds. </p>
|
||||
<ul className="mt-30">
|
||||
<li>
|
||||
<p> <strong> Address : </strong> 58 Howard Street, San Francisco, CA 941 </p>
|
||||
</li>
|
||||
<li>
|
||||
<p> <strong> Fax : </strong> 888 999 000 99, 000 999 888 99 </p>
|
||||
</li>
|
||||
<li>
|
||||
<p> <strong> Email : </strong> info@webmail.com, jobs@webmail.com </p>
|
||||
</li>
|
||||
<li>
|
||||
<p> <strong> Work Hour : </strong> Mon - Sat : 9:00 - 18:00 </p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="contact-form mt-4 mt-lg-0">
|
||||
<div className="row gx-3 align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Full name" />
|
||||
<span className="icon"> <i className="fas fa-user"></i> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Email address" />
|
||||
<span className="icon"> <i className="fas fa-envelope"></i> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<select name="" id="" className="form-control form-select">
|
||||
<option value=""> Enquiry Subject </option>
|
||||
<option value=""> Enquiry Subject </option>
|
||||
<option value=""> Enquiry Subject </option>
|
||||
</select>
|
||||
<span className="icon"> <i className="fas fa-book"></i> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<textarea name="" rows="5" className="form-control" placeholder="Message"></textarea>
|
||||
<span className="icon"> <i className="fas fa-pen"></i> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#0" className="btn rounded-pill text-white bg-orange3" target="_blank">
|
||||
<small> Submit Request </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Contact
|
||||
@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="style-13">
|
||||
<div className="content">
|
||||
<div className="container">
|
||||
<div className="row gx-0 align-items-center">
|
||||
<div className="col-lg-7">
|
||||
<div className="info">
|
||||
<h2> Shall we have a chat? </h2>
|
||||
<p> If you have a project or collaboration that you would like to discuss with us, or if you are curious to hear more about how we can help you, we look forward to hearing from you. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 offset-lg-1">
|
||||
<div className="links fs-5 pt-40 color-666">
|
||||
<a href="#" className="d-block mb-3"> <i className="fas fa-envelope me-2 text-dark"></i> info@webexample.com </a>
|
||||
<a href="#" className="d-block"> <i className="fas fa-phone-alt me-2 text-dark"></i> +908 (908) 678 77 </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="foot">
|
||||
<div className="container">
|
||||
<div className="row justify-content-between">
|
||||
<div className="col-lg-6">
|
||||
<p> Copyright & Design By <a href="#"> @ThemesCamp </a> - 2022 </p>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="links">
|
||||
<a href="#"> <i className="fab fa-facebook-f"></i> </a>
|
||||
<a href="#"> <i className="fab fa-twitter"></i> </a>
|
||||
<a href="#"> <i className="fab fa-behance"></i> </a>
|
||||
<a href="#"> <i className="fab fa-youtube"></i> </a>
|
||||
<a href="#"> <i className="fab fa-linkedin-in"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -1,53 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="style-13">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row align-items-center gx-0">
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<p className="color-999 text-uppercase mb-10"> Welcome To My Portfolio </p>
|
||||
<h1> I’m Miranda Halim <span className="text-decoration-underline"> UX Designer </span> </h1>
|
||||
<div className="btns d-flex align-content-center mt-30">
|
||||
<a href="#0" className="btn rounded-pill text-white bg-orange3" target="_blank">
|
||||
<small> Download CV </small>
|
||||
</a>
|
||||
<div className="skp ms-3">
|
||||
<p className="color-999">Skype</p>
|
||||
<h6> Miranda.Designer </h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="img mt-5 mt-lg-0">
|
||||
<img src="/assets/img/header/head_13_hero.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-icons">
|
||||
<a href="#"> <i className="fab fa-youtube"></i> </a>
|
||||
<a href="#"> <i className="fab fa-dribbble"></i> </a>
|
||||
<a href="#"> <i className="fab fa-behance"></i> </a>
|
||||
<a href="#"> <i className="fab fa-facebook-f"></i> </a>
|
||||
</div>
|
||||
<div className="head-contact">
|
||||
<a href="mailto:info@webmail.com" className="me-4"> info@webmail.com </a>
|
||||
<a href="callto:+908 999 000 11"> +908 999 000 11 </a>
|
||||
</div>
|
||||
<div className="lines">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,129 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import SwiperCore, { Autoplay } from 'swiper';
|
||||
import projectsData from 'data/Freelancer/projects.json';
|
||||
|
||||
import "swiper/css";
|
||||
import 'swiper/css/autoplay';
|
||||
|
||||
SwiperCore.use([Autoplay]);
|
||||
|
||||
const Projects = () => {
|
||||
const [loadSwiper, setLoadSwiper] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoadSwiper(true);
|
||||
}, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="projects section-padding style-13 overflow-hidden">
|
||||
<div className="container">
|
||||
<div className="section-head text-center mb-40 style-13">
|
||||
<h6> portfolio </h6>
|
||||
<h2> Our Case & Projects </h2>
|
||||
</div>
|
||||
<div className="links-tabs">
|
||||
<ul className="nav nav-pills mb-40 justify-content-center" id="pills-tab" role="tablist">
|
||||
{
|
||||
projectsData.linkTabs.map((link, idx) => (
|
||||
<li className="nav-item" role="presentation" key={idx}>
|
||||
<button className={`nav-link ${idx === 0 ? 'active' : ''}`} id={`pills-${link.id}-tab`} data-bs-toggle="pill" data-bs-target={`#pills-${link.tab}`} type="button" role="tab" aria-controls={link.control} aria-selected={idx === 0 ? 'true' : 'false'}>{link.name}</button>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="tab-content" id="pills-tabContent">
|
||||
{
|
||||
projectsData.tabContent.map((tab, idx) => (
|
||||
<div className={`tab-pane fade ${idx === 0 ? 'show active' : ''}`} id={`pills-${tab.id}`} role="tabpanel" aria-labelledby={`pills-${tab.id}-tab`} key={idx}>
|
||||
<div className="projects-slider13">
|
||||
{
|
||||
loadSwiper && (
|
||||
<Swiper
|
||||
className="swiper-container overflow-visible"
|
||||
spaceBetween={30}
|
||||
observer={true}
|
||||
observeParents={true}
|
||||
speed={1000}
|
||||
autoplay={{
|
||||
delay: 5000
|
||||
}}
|
||||
loop={true}
|
||||
pagination={false}
|
||||
navigation={false}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
787: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 2,
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
tab.slides.map((slide, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="project-card">
|
||||
<a href="#" className="img img-cover">
|
||||
<img src={slide.image} alt="" />
|
||||
<div className="info">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-8">
|
||||
<div className="inf">
|
||||
<p> {slide.subTitle} </p>
|
||||
<h6> {slide.title} </h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-4">
|
||||
<div className="logo">
|
||||
<img src="/assets/img/logos/39.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
)
|
||||
}
|
||||
<div className="text-center mt-50">
|
||||
<a href="#0" className="btn rounded-pill text-dark bg-white border-1 brd-gray shadow-lg hover-orange3" target="_blank">
|
||||
<small> More Works <i className="fal fa-plus ms-2"></i> </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="links">
|
||||
<div className="links-content">
|
||||
<a href="#"> <img src="/assets/img/logos/40.png" alt="" /> </a>
|
||||
<a href="#"> <img src="/assets/img/logos/41.png" alt="" /> </a>
|
||||
<a href="#"> <img src="/assets/img/logos/42.png" alt="" /> </a>
|
||||
<a href="#"> <img src="/assets/img/logos/43.png" alt="" /> </a>
|
||||
<a href="#"> <img src="/assets/img/logos/44.png" alt="" /> </a>
|
||||
</div>
|
||||
<p className="text-center"> <strong> 10000+ </strong> Happy users from around the world </p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Projects
|
||||
@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import services from 'data/Freelancer/services.json';
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<section className="services style-13 section-padding">
|
||||
<div className="container">
|
||||
<div className="section-head text-center mb-40 style-13">
|
||||
<h6> services </h6>
|
||||
<h2> Essential Services </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
services.map((service, idx) => (
|
||||
<div className="col-lg-4" key={idx}>
|
||||
<div className="item">
|
||||
<div className="cont">
|
||||
<div className="title">
|
||||
<img src={service.image} alt="" className="icon" />
|
||||
<span> {service.title} </span>
|
||||
</div>
|
||||
<p> {service.details} </p>
|
||||
<a href="#"> Service Details </a>
|
||||
</div>
|
||||
<span className="circle"></span>
|
||||
<img alt="" src="/assets/img/services/pattern1.png" className="pattern" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Services
|
||||
@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
import testimonials from 'data/Freelancer/testimonials.json';
|
||||
|
||||
const Testimonial = () => {
|
||||
return (
|
||||
<section className="testimonials section-padding style-13">
|
||||
<div className="container">
|
||||
<div className="section-head text-center mb-30 style-13">
|
||||
<h6> testimonials </h6>
|
||||
<h2> Users Feedback </h2>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
{
|
||||
testimonials.map((testimonial, idx) => (
|
||||
<div className="col-lg-4" key={idx}>
|
||||
<div className="testi-card">
|
||||
<div className="info">
|
||||
<span className="card-tag"> {testimonial.category} </span>
|
||||
<p> “ {testimonial.content} ” </p>
|
||||
<div className="stars">
|
||||
<i className="fas fa-star"></i>
|
||||
<i className="fas fa-star"></i>
|
||||
<i className="fas fa-star"></i>
|
||||
<i className="fas fa-star"></i>
|
||||
<i className="fas fa-star"></i>
|
||||
</div>
|
||||
<img src="/assets/img/testimonials/testi_13_icon.png" alt="" className="icon" />
|
||||
</div>
|
||||
<div className="img">
|
||||
<img src={testimonial.image} alt="" className="user_img" />
|
||||
<h6> {testimonial.author.name} </h6>
|
||||
<p> {testimonial.author.position} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Testimonial
|
||||
@ -1,74 +0,0 @@
|
||||
/* eslint-disable react/jsx-no-comment-textnodes */
|
||||
import React from 'react'
|
||||
|
||||
const FeaturesStyle11 = () => {
|
||||
return (
|
||||
<section className="features style-11">
|
||||
<div className="container">
|
||||
<div className="content section-padding border-1 border-top brd-gray">
|
||||
<div className="row justify-content-between align-items-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="info">
|
||||
<div className="section-head wow fadeInUp">
|
||||
<h6 className="color-green text-uppercase"> // Core Features </h6>
|
||||
<h2 className="fs-1"> Why Should You Use Our Iteck Helpdesk </h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li className="wow fadeInUp" data-wow-delay="0.1s">
|
||||
<img src="/assets/img/icons/features/22.png" alt="" className="icon" />
|
||||
<p> Show off your goods in elegant product cards and make more sales while chatting </p>
|
||||
</li>
|
||||
<li className="wow fadeInUp" data-wow-delay="0.2s">
|
||||
<img src="/assets/img/icons/features/23.png" alt="" className="icon" />
|
||||
<p> Qualify leads online with custom forms and AI chatbot automations </p>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#0" className="btn rounded-pill fw-bold border-1 border brd-gray hover-green mt-40 wow fadeInUp" data-wow-delay="0.3s" target="_blank">
|
||||
<small> Learn More </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="features-cards">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="cards-side">
|
||||
<div className="feat-card wow fadeInUp">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/features/24.png" alt="" />
|
||||
</div>
|
||||
<h3> <span> Chatbot </span> Pro Intregrations </h3>
|
||||
<p> Automate customer service with AI support </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="cards-side">
|
||||
<div className="feat-card wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/features/25.png" alt="" />
|
||||
</div>
|
||||
<h3> <span> HelpDesk </span> Auto Generate </h3>
|
||||
<p> Support customers with tickets generate </p>
|
||||
</div>
|
||||
<div className="feat-card mt-30 wow fadeInUp" data-wow-delay="0.4s">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/icons/features/26.png" alt="" />
|
||||
</div>
|
||||
<h3> <span> Knowledgebase </span> Ready </h3>
|
||||
<p> Guide and educate customer in easy way </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/feat_11_pattern.png" alt="" className="pattern rotate-center" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FeaturesStyle11
|
||||
@ -1,49 +0,0 @@
|
||||
/* eslint-disable react/jsx-no-comment-textnodes */
|
||||
import React from 'react';
|
||||
import features from 'data/HelpDesk/features.json';
|
||||
|
||||
const FeaturesStyle9 = () => {
|
||||
return (
|
||||
<section className="features style-9">
|
||||
<div className="container">
|
||||
<div className="content section-padding border-1 border-top brd-gray">
|
||||
<div className="row justify-content-between align-items-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="info wow fadeInUp">
|
||||
<div className="section-head mb-40">
|
||||
<h6 className="color-green text-uppercase"> // Core Features </h6>
|
||||
<h2 className="fs-1"> Easy to customize with ai chat boot. </h2>
|
||||
</div>
|
||||
<div className="accordion accordion-flush" id="accordionFlushExample">
|
||||
{
|
||||
features.map((feature, index) => (
|
||||
<div className="accordion-item" key={index}>
|
||||
<h2 className="accordion-header" id="flush-headingOne">
|
||||
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target={`#flush-collapse${feature.id}`} aria-expanded="false" aria-controls={`flush-collapse${feature.id}`}>
|
||||
<span> {feature.id}. </span> {feature.title}
|
||||
</button>
|
||||
</h2>
|
||||
<div id={`flush-collapse${feature.id}`} className={`accordion-collapse collapse ${index === 1 ? 'show' : ''}`} aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
|
||||
<div className="accordion-body">
|
||||
{feature.details}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="img wow zoomIn" data-wow-delay="0.2s">
|
||||
<img src="/assets/img/feat_9_img.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FeaturesStyle9
|
||||
@ -1,125 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="style-11">
|
||||
<div className="container">
|
||||
<div className="content section-padding">
|
||||
<div className="top-foot-info pb-60">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="logo">
|
||||
<img src="/assets/img/logo_11.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7 text-lg-end">
|
||||
<strong> Get Iteck App: </strong>
|
||||
<a href="#0" className="btn rounded-pill fw-bold border-1 border brd-light hover-green ms-4 py-3 text-white" target="_blank">
|
||||
<small> <i className="fal fa-globe me-2"></i> Web Browser </small>
|
||||
</a>
|
||||
<a href="#0" className="btn rounded-pill fw-bold border-1 border brd-light hover-green ms-4 py-3 text-white" target="_blank">
|
||||
<small> <i className="fab fa-windows me-2"></i> Windows </small>
|
||||
</a>
|
||||
<a href="#0" className="btn rounded-pill fw-bold border-1 border brd-light hover-green ms-4 py-3 text-white" target="_blank">
|
||||
<small> <i className="fab fa-apple me-2"></i> iOs / Mac </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="foot-links pt-30">
|
||||
<div className="row">
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<div className="links-item">
|
||||
<h6> Product </h6>
|
||||
<ul>
|
||||
<li> <a href="#"> Pricing </a> </li>
|
||||
<li> <a href="#"> Iteck Benefits </a> </li>
|
||||
<li> <a href="#"> Tour </a> </li>
|
||||
<li> <a href="#"> Features </a> </li>
|
||||
<li> <a href="#"> Lead Generation </a> </li>
|
||||
<li> <a href="#"> Product Demo </a> </li>
|
||||
<li> <a href="#"> App </a> </li>
|
||||
<li> <a href="#"> Marketplace </a> </li>
|
||||
<li> <a href="#"> Updates </a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<div className="links-item">
|
||||
<h6> Solutions </h6>
|
||||
<ul>
|
||||
<li> <a href="#"> Customer Support </a> </li>
|
||||
<li> <a href="#"> Sales & Marketing </a> </li>
|
||||
<li> <a href="#"> Enterprise </a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="links-item">
|
||||
<h6> Customers </h6>
|
||||
<ul>
|
||||
<li> <a href="#"> Industries </a> </li>
|
||||
<li> <a href="#"> Customers </a> </li>
|
||||
<li> <a href="#"> Reviews & Testimonials </a> </li>
|
||||
<li> <a href="#"> Case Studies </a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<div className="links-item">
|
||||
<h6> Resources </h6>
|
||||
<ul>
|
||||
<li> <a href="#"> Success by Iteck </a> </li>
|
||||
<li> <a href="#"> Customer Service Guide </a> </li>
|
||||
<li> <a href="#"> Customer Service Report </a> </li>
|
||||
<li> <a href="#"> Benchmark </a> </li>
|
||||
<li> <a href="#"> Reports </a> </li>
|
||||
<li> <a href="#"> Typing Speed Test </a> </li>
|
||||
<li> <a href="#"> Privacy Policy Generator </a> </li>
|
||||
<li> <a href="#"> Newsletter </a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<div className="links-item">
|
||||
<h6> Support </h6>
|
||||
<ul>
|
||||
<li> <a href="#"> Help Center </a> </li>
|
||||
<li> <a href="#"> Community </a> </li>
|
||||
<li> <a href="#"> Webinars </a> </li>
|
||||
<li> <a href="#"> Experts Marketplace </a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="links-item">
|
||||
<h6> Company </h6>
|
||||
<ul>
|
||||
<li> <a href="#"> About </a> </li>
|
||||
<li> <a href="#"> Contact </a> </li>
|
||||
<li> <a href="#"> Team </a> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="foot">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="social-icons">
|
||||
<a href="#"> <i className="fab fa-facebook-f"></i> </a>
|
||||
<a href="#"> <i className="fab fa-twitter"></i> </a>
|
||||
<a href="#"> <i className="fab fa-behance"></i> </a>
|
||||
<a href="#"> <i className="fab fa-youtube"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 text-lg-end">
|
||||
<p> Copyright ©2022 <a href="#" className="text-white fw-bold">Iteck,</a> Inc. All rights reserved </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -1,41 +0,0 @@
|
||||
/* eslint-disable react/jsx-no-comment-textnodes */
|
||||
import React from 'react';
|
||||
import Navbar from 'components/Navbars/HelpDeskNav';
|
||||
import TopNav from 'components/Navbars/HelpDeskNav/TopNav';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="style-11">
|
||||
<div className="navs-container">
|
||||
<TopNav />
|
||||
<Navbar />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="content section-padding">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<h6> // Build better bonds automatically </h6>
|
||||
<h1> A Simple Ticketing System For a Team Like Yours </h1>
|
||||
<p className="color-999 me-5 d-inline-block"> <i className="fal fa-check me-2"></i> Ready-to-use automations </p>
|
||||
<p className="color-999 d-inline-block"> <i className="fal fa-check me-2"></i> Free 14-day trial </p>
|
||||
<div className="btns mt-50">
|
||||
<a href="#0" className="btn rounded-pill bg-green fw-bold text-white" target="_blank">
|
||||
<small> Get Started Now </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="img">
|
||||
<img src="/assets/img/header/header_11_img.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,44 +0,0 @@
|
||||
/* eslint-disable react/jsx-no-comment-textnodes */
|
||||
import React from 'react'
|
||||
|
||||
const Integration = () => {
|
||||
return (
|
||||
<section className="integration style-11">
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div className="icons wow zoomIn" data-wow-delay="0.2s">
|
||||
<div className="logo">
|
||||
<img src="/assets/img/logo_11_icon.png" alt="" />
|
||||
</div>
|
||||
<img src="/assets/img/integ/11.png" alt="" className="icon" />
|
||||
<img src="/assets/img/integ/12.png" alt="" className="icon" />
|
||||
<img src="/assets/img/integ/13.png" alt="" className="icon" />
|
||||
<img src="/assets/img/integ/14.png" alt="" className="icon" />
|
||||
<img src="/assets/img/integ/15.png" alt="" className="icon" />
|
||||
<img src="/assets/img/integ/16.png" alt="" className="icon" />
|
||||
<img src="/assets/img/integ_11_pattern.png" alt="" className="pattern_back rotate-center" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="info section-padding wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div className="section-head mb-30">
|
||||
<h6 className="color-green text-uppercase"> // integrations </h6>
|
||||
<h2 className="fs-1 text-white"> Easily connect with essential tools </h2>
|
||||
</div>
|
||||
<p className="mb-20"> Integrate Iteck ticketing system with your CRM, favorite apps, and management platforms to fully reflect your daily workflow. </p>
|
||||
<p className=""> software is a tool that serves a wide range of customer support activities. You can organize messages, give assistance, & exchange information with customers at a single point of contact. The help desk uses tickets for communication. </p>
|
||||
<a href="#0" className="btn rounded-pill fw-bold bg-green mt-40 text-white" target="_blank">
|
||||
<small> Find your integration </small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Integration
|
||||
@ -1,51 +0,0 @@
|
||||
/* eslint-disable react/jsx-no-comment-textnodes */
|
||||
import React from 'react'
|
||||
|
||||
const Recommends = () => {
|
||||
return (
|
||||
<section className="Recommends section-padding">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="section-head text-center wow fadeInUp">
|
||||
<h6 className="color-green text-uppercase"> // Recommends // </h6>
|
||||
<h2 className="fs-1"> Leading industry experts recommend Iteck </h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content mt-70">
|
||||
<div className="row justify-content-between gx-0">
|
||||
<div className="col-lg-2 col-5">
|
||||
<div className="img mb-30 wow fadeInUp">
|
||||
<img src="/assets/img/choose_us/1.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-5">
|
||||
<div className="img mb-30 wow fadeInUp" data-wow-delay="0.2s">
|
||||
<img src="/assets/img/choose_us/2.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-5">
|
||||
<div className="img mb-30 wow fadeInUp" data-wow-delay="0.4s">
|
||||
<img src="/assets/img/choose_us/3.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-5">
|
||||
<div className="img mb-30 wow fadeInUp" data-wow-delay="0.6s">
|
||||
<img src="/assets/img/choose_us/4.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-5">
|
||||
<div className="img mb-30 wow fadeInUp" data-wow-delay="0.8s">
|
||||
<img src="/assets/img/choose_us/5.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="color-666 pt-20 border-1 border-top brd-gray text-center mt-50 wow fadeInDown"> Generate leads, create help tickets, and chat across channels <a href="#" className="color-000 fw-bold"> Get Started Now </a> </p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Recommends
|
||||
@ -1,60 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const ScreenShots = () => {
|
||||
return (
|
||||
<section className="screenshots style-11 section-padding">
|
||||
<div className="container">
|
||||
<div className="links">
|
||||
<div className="row">
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="img wow fadeInRight">
|
||||
<img src="/assets/img/icons/social/massenger.png" alt="" />
|
||||
<strong> massenger </strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="img wow fadeInRight" data-wow-delay="0.2s">
|
||||
<img src="/assets/img/icons/social/line.png" alt="" />
|
||||
<strong> line </strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="img wow fadeInRight" data-wow-delay="0.4s">
|
||||
<img src="/assets/img/icons/social/skype.png" alt="" />
|
||||
<strong> skype </strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="img wow fadeInRight" data-wow-delay="0.6s">
|
||||
<img src="/assets/img/icons/social/twitter.png" alt="" />
|
||||
<strong> twitter </strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="img wow fadeInRight" data-wow-delay="0.8s">
|
||||
<img src="/assets/img/icons/social/wechat.png" alt="" />
|
||||
<strong> wechat </strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-6">
|
||||
<div className="img wow fadeInRight" data-wow-delay="1s">
|
||||
<img src="/assets/img/icons/social/whatsapp.png" alt="" />
|
||||
<strong> whatsapp </strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="main-img wow fadeInUp">
|
||||
<div className="link-icon">
|
||||
<i className="far fa-link"></i>
|
||||
</div>
|
||||
<img src="/assets/img/screenshots/6.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ScreenShots
|
||||
@ -1,34 +0,0 @@
|
||||
/* eslint-disable react/jsx-no-comment-textnodes */
|
||||
import React from 'react'
|
||||
|
||||
const Signup = () => {
|
||||
return (
|
||||
<section className="signup style-11 section-padding bg-light">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-7">
|
||||
<div className="section-head text-center wow fadeInUp">
|
||||
<h6 className="color-green text-uppercase"> // Get free trail // </h6>
|
||||
<h2 className="fs-1"> That delights your customers and fuels your sales </h2>
|
||||
</div>
|
||||
<div className="content mb-80 wow fadeInUp">
|
||||
<div className="form-group">
|
||||
<span className="icon"> <i className="fas fa-envelope-open"></i> </span>
|
||||
<input type="text" className="form-control" placeholder="Business email" />
|
||||
<button> sign up free </button>
|
||||
</div>
|
||||
<div className="text fw-bold text-uppercase mt-20 d-flex justify-content-around">
|
||||
<span> <i className="fal fa-check-circle color-green me-1"></i> Free 14-day trial </span>
|
||||
<span> <i className="fal fa-check-circle color-green me-1"></i> Automation </span>
|
||||
<span> <i className="fal fa-check-circle color-green me-1"></i> Omnichannel messaging </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/pattern_signUp.png" alt="" className="pattern slide_up_down" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Signup
|
||||
@ -1,152 +0,0 @@
|
||||
/* eslint-disable react/jsx-no-comment-textnodes */
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import SwiperCore, { Autoplay, Keyboard, Pagination } from 'swiper';
|
||||
import ModalVideo from "react-modal-video";
|
||||
import testimonials from 'data/HelpDesk/testimonials.json';
|
||||
|
||||
import "react-modal-video/css/modal-video.css";
|
||||
import "swiper/css";
|
||||
import 'swiper/css/autoplay';
|
||||
import 'swiper/css/keyboard';
|
||||
import 'swiper/css/pagination';
|
||||
|
||||
SwiperCore.use([Autoplay, Keyboard, Pagination]);
|
||||
|
||||
const Testimonials = () => {
|
||||
const [load, setLoad] = useState(false);
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoad(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const openVideo = (e) => {
|
||||
e.preventDefault();
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="testimonials pt-100 style-11">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="section-head mb-70 text-center wow fadeInUp">
|
||||
<h6 className="color-green text-uppercase"> // User Feedbacks // </h6>
|
||||
<h2 className="fs-1"> Worldwide use Iteck to support customers </h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="testimonials-slider11 wow fadeInUp" data-wow-delay="0.1s">
|
||||
<div className="container">
|
||||
{
|
||||
load && (
|
||||
<Swiper
|
||||
className="swiper-container"
|
||||
slidesPerView={1}
|
||||
spaceBetween={0}
|
||||
speed={1000}
|
||||
pagination={{
|
||||
el: ".testimonials-slider11 .swiper-pagination",
|
||||
clickable: true,
|
||||
}}
|
||||
navigation={false}
|
||||
mousewheel={false}
|
||||
keyboard={true}
|
||||
autoplay={{
|
||||
delay: 6000
|
||||
}}
|
||||
loop={true}
|
||||
>
|
||||
{
|
||||
testimonials.map((testimonial, idx) => (
|
||||
<SwiperSlide className="swiper-slide" key={idx}>
|
||||
<div className="testimonial-card">
|
||||
<div className="row gx-0">
|
||||
<div className="col-lg-6">
|
||||
<div className="img img-cover">
|
||||
<img src="/assets/img/testimonials/1.jpg" alt="" />
|
||||
<a href="https://www.youtube.com/watch?v=pGbIOC83-So&t=21s" data-lity className="play_icon" onClick={openVideo}>
|
||||
<i className="fas fa-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/testimonials/logo1.png" alt="" />
|
||||
</div>
|
||||
<h4> “ Iteck embraces everything we needed when it comes, to asynchronous customer communication. ” </h4>
|
||||
<div className="author">
|
||||
<div className="img icon-50 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
|
||||
<img src="/assets/img/testimonials/user7.png" alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<p> Head Of Idea </p>
|
||||
<h6> Alonso D.Dowson </h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
)
|
||||
}
|
||||
<div className="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="logos-content section-padding wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div className="container">
|
||||
<div className="logos">
|
||||
<div className="row">
|
||||
<div className="col-lg-3 col-sm-6 col-6">
|
||||
<a href="#" className="logo">
|
||||
<img src="/assets/img/logos/35.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-6">
|
||||
<a href="#" className="logo">
|
||||
<img src="/assets/img/logos/36.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-6">
|
||||
<a href="#" className="logo">
|
||||
<img src="/assets/img/logos/37.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-6">
|
||||
<a href="#" className="logo">
|
||||
<img src="/assets/img/logos/38.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p> <strong> 1000+ </strong> Happy Sponsors Around The World </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
typeof window !== "undefined" &&
|
||||
(
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
autoplay
|
||||
isOpen={isOpen}
|
||||
videoId="pGbIOC83-So"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Testimonials
|
||||
@ -1,110 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import blogs from 'data/IT/blog.json';
|
||||
|
||||
const Blog = () => {
|
||||
const firstBlog = blogs[0];
|
||||
const blogsList = blogs.slice(1);
|
||||
|
||||
return (
|
||||
<section className="blog style-2 section-padding" data-scroll-index="7">
|
||||
<div className="container">
|
||||
<div className="section-head mb-30 text-center">
|
||||
<h2 className="text-white ltspc-20 text-uppercase fs-1 lh-1 mb-70">editorial</h2>
|
||||
</div>
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-10">
|
||||
<div className="content">
|
||||
<div className="row gx-5">
|
||||
<div className="col-lg-6 border-end brd-light">
|
||||
<div className="card border-0 bg-transparent rounded-0 text-white mb-4 mb-lg-0">
|
||||
<div className="img">
|
||||
<img src={firstBlog.cover} className="card-img-top" alt="..." />
|
||||
</div>
|
||||
<div className="card-body px-0">
|
||||
<small className="d-block date text mt-2">
|
||||
<a href="#" className="text-uppercase border-end brd-light pe-3 me-3">News</a>
|
||||
<i className="bi bi-clock me-1"></i>
|
||||
<a href="#" className="op-8">Posted on { firstBlog.time }</a>
|
||||
</small>
|
||||
<h4 className="fw-normal text-white mt-2">
|
||||
<Link to="/page-single-post-5">{ firstBlog.title }</Link>
|
||||
</h4>
|
||||
<p className="small mt-2 op-8">{ firstBlog.short_desc }</p>
|
||||
<div
|
||||
className="d-flex small mt-30 align-items-center justify-content-between op-9">
|
||||
<div className="l_side d-flex align-items-center">
|
||||
<span className="icon-20 rounded-circle d-inline-flex justify-content-center align-items-center text-uppercase bg-main p-1 me-2">
|
||||
{ firstBlog.placeholderImageText }
|
||||
</span>
|
||||
<a href="#" className="mt-1">
|
||||
By { firstBlog.author }
|
||||
</a>
|
||||
</div>
|
||||
<div className="r-side mt-1">
|
||||
<i className="bi bi-chat-left-text me-1"></i>
|
||||
<a href="#">{ firstBlog.comments }</a>
|
||||
<i className="bi bi-eye ms-4 me-1"></i>
|
||||
<a href="#">{ firstBlog.views }</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
{
|
||||
blogsList.map((blog, index) => (
|
||||
<div className={`card border-0 bg-transparent rounded-0 text-white ${index !== blogsList.length - 1 ? 'border-bottom brd-light pb-4 mb-4':''}`} key={index}>
|
||||
<div className="row">
|
||||
<div className="col-lg-5">
|
||||
<div className="img h-100">
|
||||
<img src={blog.cover} className="w-100 h-100 radius-2" alt="..." />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="card-body pt-3 pt-lg-0">
|
||||
<small className="d-block date text">
|
||||
<a href="#" className="text-uppercase border-end brd-light pe-3 me-3">News</a>
|
||||
<i className="bi bi-clock me-1"></i>
|
||||
<a href="#" className="op-8">{ blog.time }</a>
|
||||
</small>
|
||||
<h6 className="fw-normal text-white mt-2 fs-6"> <a href="#">{ blog.title }</a> </h6>
|
||||
<div
|
||||
className="d-flex small mt-20 align-items-center justify-content-between op-9">
|
||||
<div className="l_side d-flex align-items-center">
|
||||
<span className="icon-20 rounded-circle d-inline-flex justify-content-center align-items-center text-uppercase bg-main p-2 me-2">
|
||||
{ blog.placeholderImageText }
|
||||
</span>
|
||||
<a href="#" className="mt-1">
|
||||
By { blog.author }
|
||||
</a>
|
||||
</div>
|
||||
<div className="r-side mt-1">
|
||||
<i className="bi bi-chat-left-text me-1"></i>
|
||||
<a href="#">{ blog.comments }</a>
|
||||
<i className="bi bi-eye ms-4 me-1"></i>
|
||||
<a href="#">{ blog.views }</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<a href="#" className="sm-butn btn border text-white radius-9 mt-80 hover-lightBlue border-lightBlue">
|
||||
<span>See More Articles</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Blog
|
||||
@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import Numbers from './Numbers';
|
||||
import chooseUsData from 'data/IT/chooseus.json';
|
||||
|
||||
const ChooseUs = () => {
|
||||
return (
|
||||
<section className="choose-us style-2 border-top bg-darkBlue brd-light section-padding" data-scroll-index="4">
|
||||
<div className="container">
|
||||
<div className="section-head mb-30 text-center">
|
||||
<h2 className="text-white ltspc-20 text-uppercase fs-1 lh-1 mb-70">why choose us</h2>
|
||||
</div>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="img pe-lg-5">
|
||||
<img src="/assets/img/choose_us/circles.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="info">
|
||||
<p className="text-white text-uppercase mb-60">We create differentiated value to rise to the <br /> top in this field</p>
|
||||
<ul>
|
||||
{
|
||||
chooseUsData.map((item, index) => (
|
||||
<li className={`d-flex ${index !== chooseUsData.length - 1 ? 'mb-30':''}`} key={index}>
|
||||
<div className="icon me-4 flex-shrink-0">
|
||||
<img src={item.image} alt="" />
|
||||
</div>
|
||||
<div className="inf">
|
||||
<h5 className="text-white text-capitalize mb-2">{ item.title }</h5>
|
||||
<small className="text-white op-8">
|
||||
{ typeof item.desc === 'string' ? item.desc : (<>{ item.desc.desc1 } <br /> { item.desc.desc2 }</>) }
|
||||
</small>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<Link to="/page-contact-5" className="btn sm-butn border text-white radius-9 mt-70 hover-darkBlue">
|
||||
<span>Request A Consultation</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Numbers />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChooseUs
|
||||
@ -1,28 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
const Contact = () => {
|
||||
return (
|
||||
<section className="contact style-2 bg-darkBlue pt-50">
|
||||
<div className="container">
|
||||
<div className="content text-center text-white">
|
||||
<p className="op-7 mb-70 text-uppercase">Let us opportunity to help you!</p>
|
||||
<h2 className="ltspc-20 text-uppercase fs-1 lh-1 mb-50">(+23) 5535 68 68</h2>
|
||||
<h4 className="fw-normal mb-20 op-9">contact@Itecksolution.com</h4>
|
||||
<h4 className="fw-normal mb-30 op-7">58 Howard St, San Francisco, CA 941</h4>
|
||||
<div className="text-center">
|
||||
<Link to="/page-contact-5" className="sm-butn btn border text-white radius-9 hover-lightBlue border-lightBlue m-2">
|
||||
<span>Let’s Chat</span>
|
||||
</Link>
|
||||
<Link to="/page-contact-5" className="sm-butn btn border text-white radius-9 hover-lightBlue border-lightBlue m-2">
|
||||
<span>Request Consultation</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/img/global2.png" alt="" className="global_2" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Contact
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user