first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { BlogContentSeven } from "@/data/blogs";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const Blog = () => {
|
||||
return (
|
||||
<>
|
||||
{BlogContentSeven.map((val, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={val.animationDealy}
|
||||
key={i}
|
||||
>
|
||||
<article className="post-meta mt-30">
|
||||
<figure className="post-img m0">
|
||||
<Link href={`/blogs/${val.id}`} className="w-100 d-block">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={`/images/blog/${val.img}`}
|
||||
alt="blog"
|
||||
className="w-100 tran4s"
|
||||
/>
|
||||
</Link>
|
||||
</figure>
|
||||
<div className="post-data">
|
||||
<h3 className="blog-title">
|
||||
<Link href={`/blogs/${val.id}`}>{val.title}</Link>
|
||||
</h3>
|
||||
<Link href={`/blogs/${val.id}`} className="read-btn tran3s">
|
||||
Continue Reading
|
||||
</Link>
|
||||
</div>
|
||||
{/* <!-- /.post-data --> */}
|
||||
</article>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blog;
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
|
||||
const CallToAction = () => {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-xl-8 col-lg-11 m-auto"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="title-style-seven text-center">
|
||||
<h2>200k+ Satisfied Client Try it now!</h2>
|
||||
<p>Try it risk free — we don’t charge cancellation fees.</p>
|
||||
</div>
|
||||
{/* <!-- /.title-style-six --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
|
||||
<div
|
||||
className="text-center mt-50"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="150"
|
||||
>
|
||||
<a href="#" className="theme-btn-fourteen">
|
||||
Create my survay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToAction;
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const Features = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-xl-6 col-lg-7 order-lg-last" data-aos="fade-left">
|
||||
<div className="ps-lg-5">
|
||||
<div className="title-style-fourteen">
|
||||
<div className="upper-title">Made for human</div>
|
||||
<h2>Quality, actionable data process.</h2>
|
||||
</div>
|
||||
<div className="tag-line">
|
||||
Creating an online survey has never been easier. With many advanced
|
||||
features of deski.
|
||||
</div>
|
||||
<ul className="list-item">
|
||||
<li>Easy-to-use survey maker interface</li>
|
||||
<li>Drag and Drop to change the order of questions</li>
|
||||
<li>Quota management</li>
|
||||
<li>Step view layout for interactive survey filling experiences</li>
|
||||
<li>Customizable URL</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* Emd .col */}
|
||||
|
||||
<div
|
||||
className="col-xl-6 col-lg-5 text-center text-lg-left order-lg-first"
|
||||
data-aos="fade-right"
|
||||
>
|
||||
<div className="illustration-holder d-inline-block md-mt-60">
|
||||
<Image width="500" height="541" src="/images/assets/ils_23.svg" alt="image" className="w-100" />
|
||||
<Image width="361" height="170"
|
||||
src="/images/assets/ils_23.1.svg"
|
||||
alt="image"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="389" height="184"
|
||||
src="/images/assets/ils_23.2.svg"
|
||||
alt="image"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
<Image width="367" height="167"
|
||||
src="/images/assets/ils_23.3.svg"
|
||||
alt="image"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Features;
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const FeaturesAbout = () => {
|
||||
return (
|
||||
<div className="row align-items-center">
|
||||
<div
|
||||
className="col-xl-5 col-lg-6 ms-auto order-lg-last"
|
||||
data-aos="fade-left"
|
||||
>
|
||||
<div className="title-style-fourteen">
|
||||
<div className="upper-title">GREAT INTERFACE</div>
|
||||
<h2>First-class & smooth user experience.</h2>
|
||||
</div>
|
||||
<div className="tag-line pb-10">
|
||||
Deski responds to previous answers to show only the most relevant
|
||||
questions. A better experience for respondents better data for you.
|
||||
</div>
|
||||
<a href="#" className="theme-btn-fourteen">
|
||||
Create survay now{" "}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-6 order-lg-first text-center text-lg-left"
|
||||
data-aos="fade-right"
|
||||
>
|
||||
<div className="illustration-holder-two d-inline-block ps-4 ps-md-5 md-mt-90">
|
||||
<Image width={582} height={520} style={{height:'fit-content'}} src="/images/assets/screen_38.png" alt="image" className="w-100" />
|
||||
<Image width={582} height={210} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_38.1.png"
|
||||
alt="image"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeaturesAbout;
|
||||
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
const Footer = () => {
|
||||
const socialContent = [
|
||||
{
|
||||
icon: "fa-facebook",
|
||||
link: "https://www.facebook.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa-twitter",
|
||||
link: "https://twitter.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa-linkedin",
|
||||
link: "https://www.linkedin.com/",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="d-lg-flex align-items-center justify-content-between">
|
||||
<div className="logo text-center">
|
||||
<Link href="/">
|
||||
<Image width={138} height={47} style={{width:'100%',height:'fit-content'}} src="/images/logo/deski_06.svg" alt="logo" />
|
||||
</Link>
|
||||
</div>
|
||||
<ul className="style-none footer-nav d-flex flex-wrap justify-content-center md-pt-10 md-pb-20">
|
||||
<li>
|
||||
<Link href="/pricing-cs">Pricing</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/about-eo">About us</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/features-customer-support">Careers</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/solution-management">Features</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog-v3">Blog</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="d-flex justify-content-center social-icon style-none">
|
||||
{socialContent.map((val, i) => (
|
||||
<li key={i}>
|
||||
<a href={val.link} target="_blank" rel="noreferrer">
|
||||
<i className={`fa ${val.icon}`}></i>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,255 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState , useEffect } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import Modal from "react-modal";
|
||||
import HeaderPopupForm from "../form/HeaderPopupForm";
|
||||
import MegaMenuLanding from "../../components/header/mega-menu/MegaMenuLanding";
|
||||
import Image from "next/image";
|
||||
|
||||
// Modal.setAppElement("#root");
|
||||
|
||||
const HeaderLandingFormSurvey = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
function toggleModalOne() {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-six bg-none fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-six bg-none"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="logo order-lg-1">
|
||||
<Link href="/">
|
||||
<Image width={138} height={47} style={{width:'100%',height:'fit-content'}} src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<div className="right-widget ms-xl-5 order-lg-3">
|
||||
<ul className="d-flex align-items-center">
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="signIn-action d-flex align-items-center"
|
||||
>
|
||||
<Image width="20" height="21" src="/images/icon/120.svg" alt="icon" />
|
||||
<span>login</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="demo-button d-none d-sm-block"
|
||||
onClick={toggleModalOne}
|
||||
>
|
||||
<span>Request A Demo</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
id="mega-menu-holder"
|
||||
className="navbar navbar-expand-lg ms-lg-auto order-lg-2"
|
||||
>
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
// items={[
|
||||
// "home",
|
||||
// "feature",
|
||||
// "product",
|
||||
// "feedback",
|
||||
// "pricing",
|
||||
// ]}
|
||||
// currentClassName="active"
|
||||
// offset={-500}
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link">
|
||||
Product
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/">
|
||||
<Image width={138} height={47} style={{width:'100%',height:'fit-content'}} src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
<div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link" onClick={handleClick}>
|
||||
Product
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link" onClick={handleClick}>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link" onClick={handleClick}>
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={toggleModalOne}
|
||||
contentLabel="My dialog"
|
||||
className="custom-modal modal-contact-popup-one"
|
||||
overlayClassName="custom-overlay"
|
||||
closeTimeoutMS={500}
|
||||
>
|
||||
<div className="box_inner ">
|
||||
<main className="main-body box_inner modal-content clearfix">
|
||||
<button className="close" onClick={toggleModalOne}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="close" />
|
||||
</button>
|
||||
{/* End close icon */}
|
||||
|
||||
<div className="left-side">
|
||||
<div className="d-flex flex-column justify-content-between h-100">
|
||||
<div className="row">
|
||||
<div className="col-xl-10 col-lg-8 m-auto">
|
||||
<blockquote>
|
||||
“I never dreamed about success. I worked for it.”
|
||||
</blockquote>
|
||||
<span className="bio">—Estée Lauder</span>
|
||||
</div>
|
||||
</div>
|
||||
<Image width="649" height="466"
|
||||
src="/images/assets/ils_18.svg"
|
||||
alt="image"
|
||||
className="illustration mt-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.left-side */}
|
||||
|
||||
<div className="right-side">
|
||||
<h2 className="form-title">Contact us</h2>
|
||||
<HeaderPopupForm />
|
||||
</div>
|
||||
{/* /.right-side */}
|
||||
</main>
|
||||
{/* /.main-body */}
|
||||
</div>
|
||||
</Modal>
|
||||
{/* End Modal For Request a demo */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLandingFormSurvey;
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
const HeroBannerThirteen = () => {
|
||||
return (
|
||||
// <!--
|
||||
// =============================================
|
||||
// Theme Hero Banner
|
||||
// ==============================================
|
||||
// -->
|
||||
<div className="hero-banner-thirteen lg-container" id="home">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<Link href="/pricing-pm" className="slogan tran3s">
|
||||
<strong>Offer</strong> is going on till friday, $1.99/mo.{" "}
|
||||
<i className="fa fa-chevron-right" aria-hidden="true"></i>
|
||||
</Link>
|
||||
<h1 className="hero-heading">Ask your customer in a better way.</h1>
|
||||
<p className="hero-sub-heading">
|
||||
Deski delivered blazing fast performance, striking word soludtion
|
||||
</p>
|
||||
<a href="#" className="theme-btn-fourteen">
|
||||
Get Started - It’s Free
|
||||
</a>
|
||||
<div className="info">No credit card required</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="screen-holder">
|
||||
<Image width="812" height="689"
|
||||
src="/images/assets/ils_22.svg"
|
||||
alt="illustration"
|
||||
className="img-meta"
|
||||
/>
|
||||
<Image width="333" height="297"
|
||||
src="/images/assets/ils_22.1.svg"
|
||||
alt="illustration"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="604" height="190"
|
||||
src="/images/assets/ils_22.2.svg"
|
||||
alt="illustration"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- /.screen-holder --> */}
|
||||
</div>
|
||||
</div>
|
||||
// <!-- /.hero-banner-thirteen -->
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerThirteen;
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from "react";
|
||||
import icon1 from "../../public/images/icon/190.svg";
|
||||
import icon2 from "../../public/images/icon/191.svg";
|
||||
import icon3 from "../../public/images/icon/192.svg";
|
||||
import icon4 from "../../public/images/icon/193.svg";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const HowWorks = () => {
|
||||
const surveyContent = [
|
||||
{
|
||||
_id: 1,
|
||||
icon: icon1,
|
||||
title: "Choose",
|
||||
descriptions: `Simplify the process to create proposals.`,
|
||||
bgColor: "#F0F0FF",
|
||||
delayAnimation: "0",
|
||||
},
|
||||
{
|
||||
_id: 2,
|
||||
icon: icon2,
|
||||
title: "Create",
|
||||
descriptions: `Create interactive, error-free quotes.`,
|
||||
bgColor: "#FCF2DA",
|
||||
delayAnimation: "100",
|
||||
},
|
||||
{
|
||||
_id: 3,
|
||||
icon: icon3,
|
||||
title: "Check",
|
||||
descriptions: `Create interactive, error-free quotes.`,
|
||||
bgColor: "#EBFBED",
|
||||
delayAnimation: "200",
|
||||
},
|
||||
{
|
||||
_id: 4,
|
||||
icon: icon4,
|
||||
title: "Final",
|
||||
descriptions: `Create interactive, error-free quotes.`,
|
||||
bgColor: "#FFEEEE",
|
||||
delayAnimation: "300",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
{surveyContent.map((survey) => (
|
||||
<div
|
||||
className="col-lg-3 col-md-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay={survey.delayAnimation}
|
||||
key={survey._id}
|
||||
>
|
||||
<div className="block-style-thirtyFive text-center mt-30">
|
||||
<div
|
||||
className="icon d-flex align-items-center justify-content-center"
|
||||
style={{ background: survey.bgColor }}
|
||||
>
|
||||
<Image src={survey.icon} alt="survey icon" />
|
||||
</div>
|
||||
<h4>{survey.title}</h4>
|
||||
<p>{survey.descriptions}</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyFive --> */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HowWorks;
|
||||
@@ -0,0 +1,91 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Image from "next/image";
|
||||
const Portfolio = () => {
|
||||
const settings = {
|
||||
dots: true,
|
||||
arrow: false,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
centerMode: true,
|
||||
centerPadding: "0",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const portfolioContent = [
|
||||
{
|
||||
_id: 1,
|
||||
image: "img_110_1",
|
||||
editLink: "#",
|
||||
viewLink: "#",
|
||||
},
|
||||
{
|
||||
_id: 2,
|
||||
image: "img_111_1",
|
||||
editLink: "#",
|
||||
viewLink: "#",
|
||||
},
|
||||
{
|
||||
_id: 3,
|
||||
image: "img_112",
|
||||
editLink: "#",
|
||||
viewLink: "#",
|
||||
},
|
||||
{
|
||||
_id: 4,
|
||||
image: "img_112",
|
||||
editLink: "#",
|
||||
viewLink: "#",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{portfolioContent.map((item) => (
|
||||
<div className="item" key={item._id}>
|
||||
<div className="card-block">
|
||||
<Image width={444} height={440} style={{height:'fit-content'}}
|
||||
src={`/images/media/${item.image}.jpg`}
|
||||
alt="image"
|
||||
className="w-100"
|
||||
/>
|
||||
<div className="hover tran3s d-flex align-items-center justify-content-center flex-column">
|
||||
<a href={item.editLink} className="edit tran3s">
|
||||
Edit
|
||||
</a>
|
||||
<a href={item.viewLink} className="view tran3s">
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Portfolio;
|
||||
@@ -0,0 +1,100 @@
|
||||
import React from "react";
|
||||
|
||||
const PricingContent = [
|
||||
{
|
||||
packName: "Single",
|
||||
packDetails: "Analyze performance and do more with your data",
|
||||
price: "23.00",
|
||||
durationNumber: "Per monthy",
|
||||
facility: "Biller Yearly",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat",
|
||||
"Backling",
|
||||
"Discount Programe",
|
||||
],
|
||||
animationDelay: "",
|
||||
activeClass: "",
|
||||
},
|
||||
{
|
||||
packName: "Team",
|
||||
packDetails: "Analyze performance and do more with your data",
|
||||
price: "47.00",
|
||||
durationNumber: "Per monthy",
|
||||
facility: "Biller Yearly",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat",
|
||||
"Backling",
|
||||
"Discount Programe",
|
||||
],
|
||||
animationDelay: "100",
|
||||
activeClass: "active most-popular",
|
||||
},
|
||||
{
|
||||
packName: "Business",
|
||||
packDetails: "Analyze performance and do more with your data",
|
||||
price: "89.00",
|
||||
durationNumber: "Per monthy",
|
||||
facility: "Biller Yearly",
|
||||
features: [
|
||||
"Unlimited Email",
|
||||
"5gb Hosting",
|
||||
"2 website 3 sub domain",
|
||||
"Email & Live chat",
|
||||
"Backling",
|
||||
"Discount Programe",
|
||||
],
|
||||
animationDelay: "200",
|
||||
activeClass: "",
|
||||
},
|
||||
];
|
||||
|
||||
const Pricing = () => {
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
{PricingContent.map((val, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={val.animationDelay}
|
||||
key={i}
|
||||
>
|
||||
<div className={`pr-table-wrapper mt-40 ${val.activeClass}`}>
|
||||
<div className="pack-name">{val.packName}</div>
|
||||
<div className="pack-details">{val.packDetails}</div>
|
||||
<div className="top-banner d-md-flex align-items-center">
|
||||
<div className="price">
|
||||
<sup>$</sup>
|
||||
{val.price}
|
||||
</div>
|
||||
<div>
|
||||
<span>{val.durationNumber}</span>
|
||||
<em>{val.facility}</em>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.top-banner */}
|
||||
<a href="#" className="trial-button tran3s">
|
||||
Start 30 days free trial
|
||||
</a>
|
||||
<ul className="pr-feature">
|
||||
{val.features.map((list, i) => (
|
||||
<li key={i}>{list}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="trial-text">No card required, cancel any time</div>
|
||||
</div>
|
||||
{/* /.pr-table-wrapper */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pricing;
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const Social = () => {
|
||||
const socialContent = [
|
||||
{ image: "16", delayAnimatin: "0" },
|
||||
{ image: "logo-33", delayAnimatin: "100" },
|
||||
{ image: "11", delayAnimatin: "200" },
|
||||
{ image: "19", delayAnimatin: "300" },
|
||||
{ image: "18", delayAnimatin: "400" },
|
||||
{ image: "22", delayAnimatin: "500" },
|
||||
];
|
||||
return (
|
||||
<ul className="d-flex align-items-center justify-content-center justify-content-lg-between">
|
||||
{socialContent.map((social, i) => (
|
||||
<li
|
||||
className="mt-20 ms-3 me-3"
|
||||
data-aos="fade-up"
|
||||
key={i}
|
||||
data-aos-delay={social.delayAnimatin}
|
||||
>
|
||||
<Image width={60} height={50} style={{width:'100%',height:'fit-content'}} src={`/images/logo/${social.image}.png`} alt="social" />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default Social;
|
||||
@@ -0,0 +1,69 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Image from "next/image";
|
||||
const Testimonial = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrow: false,
|
||||
infinite: true,
|
||||
fade: true,
|
||||
speed: 900,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
centerMode: false,
|
||||
centerPadding: "0",
|
||||
};
|
||||
const testimonialContent = [
|
||||
{
|
||||
_id: 1,
|
||||
img: "img_113",
|
||||
name: "Sara Harsa",
|
||||
designation: "Head of Content Marketing",
|
||||
descriptions: ` Form builders are as old as the web, but Typeform elevates the
|
||||
medium substantially.`,
|
||||
},
|
||||
{
|
||||
_id: 1,
|
||||
img: "img_114",
|
||||
name: "Bostami Hasan",
|
||||
designation: "Front-end Lead",
|
||||
descriptions: `Whether you’re promoting your business, showcasing your work
|
||||
or opening your store.`,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{testimonialContent.map((review) => (
|
||||
<div className="item" key={review._id}>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6 col-md-7">
|
||||
<div className="feedback-wrapper">
|
||||
<div className="tag">Client Feefdback</div>
|
||||
<p className="pe-xl-5">{review.descriptions}</p>
|
||||
<h4 className="name">{review.name}</h4>
|
||||
<div className="cr-position">{review.designation}</div>
|
||||
</div>
|
||||
{/* <!-- /.feedback-wrapper --> */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
<div className="col-lg-6 col-md-5">
|
||||
<div className="img-meta sm-mb-30">
|
||||
<Image width={566} height={665} style={{width:'100%',height:'fit-content'}} src={`/images/media/${review.img}.jpg`} alt="social" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonial;
|
||||
Reference in New Issue
Block a user