first commit
This commit is contained in:
mukesh13
45
src/components/CloudHosting/About.jsx
Normal file
45
src/components/CloudHosting/About.jsx
Normal file
@ -0,0 +1,45 @@
|
||||
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
|
||||
27
src/components/CloudHosting/ChatBanner.jsx
Normal file
27
src/components/CloudHosting/ChatBanner.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
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
|
||||
95
src/components/CloudHosting/ChooseUs.jsx
Normal file
95
src/components/CloudHosting/ChooseUs.jsx
Normal file
@ -0,0 +1,95 @@
|
||||
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
|
||||
79
src/components/CloudHosting/Domain.jsx
Normal file
79
src/components/CloudHosting/Domain.jsx
Normal file
@ -0,0 +1,79 @@
|
||||
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
|
||||
96
src/components/CloudHosting/Footer.jsx
Normal file
96
src/components/CloudHosting/Footer.jsx
Normal file
@ -0,0 +1,96 @@
|
||||
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">
|
||||
<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">
|
||||
<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
|
||||
53
src/components/CloudHosting/Header.jsx
Normal file
53
src/components/CloudHosting/Header.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
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
|
||||
66
src/components/CloudHosting/Partners.jsx
Normal file
66
src/components/CloudHosting/Partners.jsx
Normal file
@ -0,0 +1,66 @@
|
||||
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
|
||||
53
src/components/CloudHosting/Pricing.jsx
Normal file
53
src/components/CloudHosting/Pricing.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
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
|
||||
36
src/components/CloudHosting/Services.jsx
Normal file
36
src/components/CloudHosting/Services.jsx
Normal file
@ -0,0 +1,36 @@
|
||||
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" 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
|
||||
54
src/components/CloudHosting/SideMenu.jsx
Normal file
54
src/components/CloudHosting/SideMenu.jsx
Normal file
@ -0,0 +1,54 @@
|
||||
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
|
||||
67
src/components/CloudHosting/Testimonials.jsx
Normal file
67
src/components/CloudHosting/Testimonials.jsx
Normal file
@ -0,0 +1,67 @@
|
||||
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
|
||||
Reference in New Issue
Block a user