first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,47 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
// Top: 0 takes us all the way back to the top of the page
|
||||
// Behavior: smooth keeps it smooth!
|
||||
const scrollToTop = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Button is displayed after scrolling for 500 pixels
|
||||
const toggleVisibility = () => {
|
||||
if (window.pageYOffset > 500) {
|
||||
setIsVisible(true);
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", toggleVisibility);
|
||||
|
||||
return () => window.removeEventListener("scroll", toggleVisibility);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isVisible && (
|
||||
<div>
|
||||
<button className="scroll-top " onClick={scrollToTop}>
|
||||
<Image width={17} height={17} src="/images/icon/chevron-w.png" alt="icon" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const pathname = usePathname();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [pathname]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6" data-aos="fade-right" data-aos-duration="1200">
|
||||
<Image width={550} height={649} style={{height:'fit-content'}} src="/images/media/img_57.png" alt="about" className="m-auto" />
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-6" data-aos="fade-left" data-aos-duration="1200">
|
||||
<div className="text-wrapper">
|
||||
<div className="client-info font-rubik">
|
||||
Over <span>150,000+ client</span>
|
||||
</div>
|
||||
<div className="title-style-five">
|
||||
<h2>
|
||||
<span>Best event & online</span> ticket platform.
|
||||
</h2>
|
||||
</div>
|
||||
<p className="font-rubik">
|
||||
Things go wrong. You’ll have questions. We understand. So we have
|
||||
people, not bots, on hand to help.
|
||||
</p>
|
||||
<p className="font-rubik">
|
||||
We aim to answer any query in less than 10 minutes.
|
||||
</p>
|
||||
<div className="name font-slab">Mitchell Garner</div>
|
||||
</div>
|
||||
{/* /.text-wrapper */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,53 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const AboutFive = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-lg-6 order-lg-last">
|
||||
<div className="text-wrapper">
|
||||
<div className="title-style-two mb-35 md-mb-20">
|
||||
<h2>
|
||||
<span>
|
||||
Exclusive fetures{" "}
|
||||
<Image width="448" height="48" src="/images/shape/line-shape-5.svg" alt="shape" />
|
||||
</span>
|
||||
with great offers everytime.
|
||||
</h2>
|
||||
</div>
|
||||
{/* /.title-style-two */}
|
||||
<p>
|
||||
With Benefits from deski Pro, Earn rewards & Score discounts on
|
||||
purchases* Foryourself and your customers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-6 order-lg-first">
|
||||
<div className="img-gallery">
|
||||
<Image width={400} height={484} style={{height:'fit-content'}} src="/images/media/img_35.png" alt="media" />
|
||||
<Image width={292} height={309} style={{height:'fit-content'}}
|
||||
src="/images/media/img_36.png"
|
||||
alt="media"
|
||||
className="overlay-img"
|
||||
/>
|
||||
<Image width={100} height={129}
|
||||
src="/images/shape/49.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width={198} height={198}
|
||||
src="/images/shape/50.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
{/* /.img-gallery */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutFive;
|
||||
@@ -0,0 +1,48 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const AboutFour = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-lg-6" data-aos="fade-right" data-aos-duration="1200">
|
||||
<div className="text-wrapper">
|
||||
<div className="title-style-two">
|
||||
<p>About us</p>
|
||||
<h2>Best event & online ticket platform.</h2>
|
||||
</div>
|
||||
{/* /.title-style-two */}
|
||||
<p className="sub-text">
|
||||
Things go wrong. You’ll have questions. We understand. So we have
|
||||
real people, not bots, on hand to help, 7 days a week.
|
||||
</p>
|
||||
<p className="sub-text">
|
||||
We aim to answer any query in less than 10 minutes. Try now
|
||||
</p>
|
||||
<div className="name">
|
||||
Mr Rashed Kabir, <span>CEO</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-6" data-aos="fade-left" data-aos-duration="1200">
|
||||
<div className="img-holder md-mt-80">
|
||||
<Image width={450} height={560} style={{height:'fit-content'}} src="/images/media/img_39.png" alt="media" />
|
||||
<Image width={122} height={108}
|
||||
src="/images/shape/60.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width={152} height={152}
|
||||
src="/images/shape/61.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutFour;
|
||||
@@ -0,0 +1,68 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const AboutThree = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-lg-6 order-lg-last"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="text-wrapper ps-3">
|
||||
<div className="title-style-three mb-35 md-mb-20">
|
||||
<h6>Certified by trustpilot</h6>
|
||||
<h2>
|
||||
<span>
|
||||
Certified and trusted{" "}
|
||||
<Image width="526" height="53" src="/images/shape/line-shape-7.svg" alt="shape" />
|
||||
</span>
|
||||
support portal.
|
||||
</h2>
|
||||
</div>
|
||||
{/* /.title-style-two */}
|
||||
<p>
|
||||
Whether you're a theatre, stadium, intimate music venue, church,
|
||||
gala or concert hall, our seating chart tooi accurately represent
|
||||
your venue and seating layout.
|
||||
</p>
|
||||
<p className="mt-30">
|
||||
It's easy to incorporate socialy distanced spaces, add tables, edit
|
||||
the numbering or have.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-lg-first">
|
||||
<div className="img-gallery">
|
||||
<Image width={402} height={487} style={{width:'100%',height:'fit-content'}}
|
||||
src="/images/media/img_38.png"
|
||||
alt="media"
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1200"
|
||||
/>
|
||||
<Image width={292} height={309} style={{width:'100%',height:'fit-content'}}
|
||||
src="/images/media/img_36.png"
|
||||
alt="media"
|
||||
className="overlay-img"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="100"
|
||||
/>
|
||||
<Image width={100} height={129}
|
||||
src="/images/shape/49.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width={144} height={144}
|
||||
src="/images/shape/54.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
</div>
|
||||
{/* /.img-gallery */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutThree;
|
||||
@@ -0,0 +1,53 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const AboutTwo = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-lg-5 col-md-6 col-sm-10 m-auto"
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="img-holder">
|
||||
<Image width={441} height={550} style={{height:'fit-content'}} src="/images/media/img_19.png" alt="media" />
|
||||
<Image width={179} height={179}
|
||||
src="/images/shape/34.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-six"
|
||||
/>
|
||||
</div>
|
||||
{/* img-holder */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div
|
||||
className="col-xl-6 col-lg-7 ms-auto"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="quote-wrapper pt-60">
|
||||
<Image width="60" height="43" src="/images/icon/26.svg" alt="icon" className="icon" />
|
||||
<blockquote className="font-rubik">
|
||||
Deski combines excellent live chat, ticketing and automation that
|
||||
allow us to provide quality.
|
||||
</blockquote>
|
||||
<h6>
|
||||
Bostami Hasan <span>CEO & Founder deksi</span>
|
||||
</h6>
|
||||
<Link href="/about-cs" className="theme-btn-two mt-45 md-mt-30">
|
||||
{" "}
|
||||
Learn More
|
||||
</Link>
|
||||
</div>
|
||||
{/* /.quote-wrapper */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutTwo;
|
||||
@@ -0,0 +1,60 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
|
||||
const AboutTabs = () => {
|
||||
return (
|
||||
<>
|
||||
<Tabs>
|
||||
<TabList className="nav nav-tabs md-mt-50">
|
||||
<Tab className="nav-link font-slab">Our Story</Tab>
|
||||
<Tab className="nav-link font-slab">Our Mission</Tab>
|
||||
<Tab className="nav-link font-slab">Our Vision</Tab>
|
||||
</TabList>
|
||||
{/* End TabList */}
|
||||
|
||||
<div className="tab-content mt-20">
|
||||
<TabPanel>
|
||||
<p className="font-rubik">
|
||||
Lorem ipsum dolor sit amet, consecteur adipiscng elit sed do
|
||||
eiusmod tempor non sunt
|
||||
</p>
|
||||
<p className="font-rubik">
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore nulla
|
||||
pariaturExcepteur sint occaecat cu proident, sunter in culpa qui
|
||||
officia deserunt mollit .
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<p className="font-rubik">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry
|
||||
</p>
|
||||
<p className="font-rubik">
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text.
|
||||
It has roots in a piece of classical Latin literature from 45 BC,
|
||||
making it over 2000 years old. Richard McClintock, a Latin
|
||||
professor.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<p className="font-rubik">
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
but the majority,
|
||||
</p>
|
||||
<p className="font-rubik">
|
||||
Many desktop publishing packages and web page editors now use
|
||||
Lorem Ipsum as their default model text, and a search for 'lorem
|
||||
ipsum' will uncover many web sites still in their infancy.
|
||||
</p>
|
||||
</TabPanel>
|
||||
</div>
|
||||
{/* End TabContent */}
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutTabs;
|
||||
@@ -0,0 +1,70 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
|
||||
const DocAsTabs = () => {
|
||||
return (
|
||||
<>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab>
|
||||
<div className="d-flex align-items-center">
|
||||
<Image width="17" height="18" src="/images/icon/90.svg" alt="icon" />
|
||||
<p>Team Box</p>
|
||||
</div>
|
||||
</Tab>
|
||||
{/* End .d-felx */}
|
||||
<Tab>
|
||||
<div className="d-flex align-items-center ">
|
||||
<Image width="17" height="18" src="/images/icon/91.svg" alt="icon" />
|
||||
<p>Project & Task</p>
|
||||
</div>
|
||||
</Tab>
|
||||
{/* End .d-felx */}
|
||||
<Tab>
|
||||
<div className="d-flex align-items-center">
|
||||
<Image width={18} height={18} src="/images/icon/92.svg" alt="icon" />
|
||||
<p>Note & Docs</p>
|
||||
</div>
|
||||
</Tab>
|
||||
{/* End .d-felx */}
|
||||
</TabList>
|
||||
|
||||
<div className="mt-50 sm-mt-30">
|
||||
<TabPanel>
|
||||
<Image width={1155} height={685} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_11.png"
|
||||
alt="screen"
|
||||
className="m-auto"
|
||||
data-aos="fade"
|
||||
data-aos-duration="1200"
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Image width={1155} height={685} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_15.png"
|
||||
alt="screen"
|
||||
className="m-auto"
|
||||
data-aos="fade"
|
||||
data-aos-duration="1200"
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Image width={1155} height={685} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_16.png"
|
||||
alt="screen"
|
||||
className="m-auto"
|
||||
data-aos="fade"
|
||||
data-aos-duration="1200"
|
||||
/>
|
||||
</TabPanel>
|
||||
</div>
|
||||
{/* /.pricing-table-area-six */}
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocAsTabs;
|
||||
@@ -0,0 +1,126 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
|
||||
const tabList = [
|
||||
{ iconOne: "105", iconTwo: "105-c" },
|
||||
{ iconOne: "106", iconTwo: "106-c" },
|
||||
{ iconOne: "107", iconTwo: "107-c" },
|
||||
{ iconOne: "108", iconTwo: "108-c" },
|
||||
{ iconOne: "109", iconTwo: "109-c" },
|
||||
{ iconOne: "110", iconTwo: "110-c" },
|
||||
{ iconOne: "111", iconTwo: "111-c" },
|
||||
];
|
||||
|
||||
const tabListContent = [
|
||||
{
|
||||
img: "img_81",
|
||||
innerText: "Track Human faces",
|
||||
title: "Motation Tracking",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_92",
|
||||
innerText: "keyframing experience",
|
||||
title: "Keyframing",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_93",
|
||||
innerText: "Audio track down",
|
||||
title: "Audio Ducking",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_94",
|
||||
innerText: "Take the color",
|
||||
title: "Color Matching",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_95",
|
||||
innerText: "Edit videos at up to 4K",
|
||||
title: "4K Editing Support",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_96",
|
||||
innerText: "Remove unwanted noise",
|
||||
title: "Noise Removal",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_97",
|
||||
innerText: "Layer multiple video clips",
|
||||
title: "Picture in Picture (PIP)",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
];
|
||||
|
||||
const DocEditorTabs = () => {
|
||||
return (
|
||||
<>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
{tabList.map((img, i) => (
|
||||
<Tab key={i}>
|
||||
<div className="nav-link d-flex align-items-center justify-content-center">
|
||||
<Image width={55} height={55} style={{width:'100%',height:'fit-content'}}
|
||||
src={`/images/icon/${img.iconOne}.svg`}
|
||||
alt="icon"
|
||||
className="current tran3s"
|
||||
/>
|
||||
<Image width={55} height={55} style={{objectFit:'contain'}}
|
||||
src={`/images/icon/${img.iconTwo}.svg`}
|
||||
alt="icon"
|
||||
className="hover tran3s"
|
||||
/>
|
||||
</div>
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
|
||||
<div className="mt-60 sm-mt-40 tab-content">
|
||||
{tabListContent.map((tabContent, i) => (
|
||||
<TabPanel key={i}>
|
||||
<div className="row no-gutters align-items-center">
|
||||
<div className="col-md-6">
|
||||
<div className="img-holder">
|
||||
<Image width={768} height={520} style={{height:'fit-content'}}
|
||||
src={`/images/media/${tabContent.img}.png`}
|
||||
alt="media"
|
||||
/>
|
||||
<div className="ripple-box d-flex align-items-center justify-content-center">
|
||||
<p>{tabContent.innerText}</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
{/* /.img-holder */}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="text-wrapper">
|
||||
<h4>{tabContent.title}</h4>
|
||||
<p>{tabContent.description}</p>
|
||||
</div>{" "}
|
||||
{/* /.text-wrapper */}
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
))}
|
||||
</div>
|
||||
{/* /.pricing-table-area-six */}
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocEditorTabs;
|
||||
@@ -0,0 +1,84 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Slider from "react-slick";
|
||||
import Image from "next/image";
|
||||
export default function SlickAsNav() {
|
||||
const [nav1, setNav1] = useState();
|
||||
const [nav2, setNav2] = useState();
|
||||
|
||||
var settings = {
|
||||
slidesToShow: 3,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider
|
||||
className="slick-nav-none"
|
||||
asNavFor={nav2}
|
||||
ref={(slider1) => setNav1(slider1)}
|
||||
autoplay={true}
|
||||
>
|
||||
<div className="item">
|
||||
<Image width={1174} height={663} style={{height:'fit-content'}} src="/images/assets/feature-img-12.png" alt="feature" />
|
||||
</div>
|
||||
<div className="item">
|
||||
<Image width={1174} height={663} style={{height:'fit-content'}} src="/images/assets/feature-img-12.png" alt="feature" />
|
||||
</div>
|
||||
<div className="item">
|
||||
<Image width={1174} height={663} style={{height:'fit-content'}} src="/images/assets/feature-img-12.png" alt="feature" />
|
||||
</div>
|
||||
</Slider>
|
||||
{/* Top Image slide */}
|
||||
|
||||
<Slider
|
||||
{...settings}
|
||||
asNavFor={nav1}
|
||||
ref={(slider2) => setNav2(slider2)}
|
||||
swipeToSlide={true}
|
||||
focusOnSelect={true}
|
||||
className="slick-nav-custom"
|
||||
>
|
||||
<div className="block-style-eleven mt-40">
|
||||
<div className="num font-rubik">01</div>
|
||||
<div className="title">Personal Notes</div>
|
||||
<p className="font-rubik">
|
||||
A place to think and track ideas for you and your team
|
||||
</p>
|
||||
</div>
|
||||
{/* /.block-style-eleven */}
|
||||
<div className="block-style-eleven mt-40">
|
||||
<div className="num font-rubik">02</div>
|
||||
<div className="title">Knowledge Base</div>
|
||||
<p className="font-rubik">
|
||||
A home for your team, best practices and thoughts.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.block-style-eleven */}
|
||||
<div className="block-style-eleven mt-40">
|
||||
<div className="num font-rubik">03</div>
|
||||
<div className="title">Products Doc</div>
|
||||
<p className="font-rubik">
|
||||
Beautiful docs for your APIs, Products, FAQs, & User Guides,
|
||||
</p>
|
||||
</div>
|
||||
{/* /.block-style-eleven */}
|
||||
</Slider>
|
||||
{/* Bottom text slide */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
import Slider from "react-slick";
|
||||
|
||||
export default function DocSlickAsNavTwo() {
|
||||
const [nav1, setNav1] = useState();
|
||||
const [nav2, setNav2] = useState();
|
||||
|
||||
var settings = {
|
||||
slidesToShow: 3,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider
|
||||
{...settings}
|
||||
asNavFor={nav1}
|
||||
ref={(slider2) => setNav2(slider2)}
|
||||
swipeToSlide={true}
|
||||
focusOnSelect={true}
|
||||
className="slick-nav-custom "
|
||||
>
|
||||
<div className="d-flex item_content">
|
||||
<div className="icon d-flex align-items-center justify-content-center">
|
||||
<Image width="11" height="15" src="/images/icon/81.svg" alt="icon" />
|
||||
</div>
|
||||
<p>
|
||||
Create task for any <br />
|
||||
team person
|
||||
</p>
|
||||
</div>
|
||||
{/* /.d-flex */}
|
||||
<div className="d-flex item_content">
|
||||
<div className="icon d-flex align-items-center justify-content-center">
|
||||
<Image width="11" height="15" src="/images/icon/81.svg" alt="icon" />
|
||||
</div>
|
||||
<p>
|
||||
Make timeframe for <br />
|
||||
do the task
|
||||
</p>
|
||||
</div>
|
||||
{/* /.d-flex */}
|
||||
<div className="d-flex item_content">
|
||||
<div className="icon d-flex align-items-center justify-content-center">
|
||||
<Image width="11" height="15" src="/images/icon/81.svg" alt="icon" />
|
||||
</div>
|
||||
<p>
|
||||
Get task complated by <br />
|
||||
your member
|
||||
</p>
|
||||
</div>
|
||||
{/* /.d-flex */}
|
||||
</Slider>
|
||||
{/* Bottom text slide */}
|
||||
|
||||
<div className="position-relative">
|
||||
<Slider
|
||||
className="slick-nav-none carousel-inner"
|
||||
asNavFor={nav2}
|
||||
fade={true}
|
||||
speed={600}
|
||||
ref={(slider1) => setNav1(slider1)}
|
||||
>
|
||||
<div className="carousel-item">
|
||||
<Image width={1160} height={700} style={{height:'fit-content'}} src="/images/assets/screen_07.png" alt="feature" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<Image width={1160} height={700} style={{height:'fit-content'}} src="/images/assets/screen_08.png" alt="feature" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<Image width={1160} height={700} style={{height:'fit-content'}} src="/images/assets/screen_09.png" alt="feature" />
|
||||
</div>
|
||||
</Slider>
|
||||
{/* Top Image slide */}
|
||||
<Image width="151" height="151"
|
||||
src="/images/shape/152.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width={292} height={292}
|
||||
src="/images/shape/153.png"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import BlogSidebarForm from "../form/BlogSidebarForm";
|
||||
import { recentNews } from "@/data/blogs";
|
||||
|
||||
const categroies = [
|
||||
{
|
||||
catName: "Web Design",
|
||||
numberOfPOst: "09",
|
||||
},
|
||||
{
|
||||
catName: "Graphics",
|
||||
numberOfPOst: "13",
|
||||
},
|
||||
{
|
||||
catName: "Web Development",
|
||||
numberOfPOst: "05",
|
||||
},
|
||||
{
|
||||
catName: "IOS/Android Development",
|
||||
numberOfPOst: "24",
|
||||
},
|
||||
{
|
||||
catName: "Others",
|
||||
numberOfPOst: "08",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const blogKeyword = ["Ideas", "Education", "Design", "Development", "Branding"];
|
||||
|
||||
const BlogSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="blog-sidebar-one">
|
||||
<div className="sidebar-search-form mb-85 sm-mb-60">
|
||||
<BlogSidebarForm />
|
||||
</div>
|
||||
{/* /.sidebar-search-form */}
|
||||
|
||||
<div className="sidebar-categories mb-85 sm-mb-60">
|
||||
<h4 className="sidebar-title">Categories</h4>
|
||||
<ul>
|
||||
{categroies.map((cat, i) => (
|
||||
<li key={i}>
|
||||
<Link href="/blogs/1">
|
||||
{cat.catName} <span>({cat.numberOfPOst})</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.sidebar-categories */}
|
||||
|
||||
<div className="sidebar-recent-news mb-85 sm-mb-60">
|
||||
<h4 className="sidebar-title">Recent News</h4>
|
||||
<ul>
|
||||
{recentNews.map((news, i) => (
|
||||
<li key={i}>
|
||||
<Link href={`/blogs/${news.id}`}>
|
||||
<span className="title">{news.title}</span>
|
||||
<span className="date">{news.date}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.sidebar-recent-news */}
|
||||
|
||||
<div className="sidebar-keyword">
|
||||
<h4 className="sidebar-title">Keywords</h4>
|
||||
<ul className="cleafix">
|
||||
{blogKeyword.map((val, i) => (
|
||||
<li key={i}>
|
||||
<Link href="/blogs/1"> {val}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.sidebar-keyword */}
|
||||
</div>
|
||||
{/* /.blog-sidebar-one */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogSidebar;
|
||||
@@ -0,0 +1,87 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import BlogSidebarForm from "../form/BlogSidebarForm2";
|
||||
import { recentNews } from "@/data/blogs";
|
||||
|
||||
const categroies = [
|
||||
{
|
||||
catName: "Web Design",
|
||||
numberOfPOst: "09",
|
||||
},
|
||||
{
|
||||
catName: "Graphics",
|
||||
numberOfPOst: "13",
|
||||
},
|
||||
{
|
||||
catName: "Web Development",
|
||||
numberOfPOst: "05",
|
||||
},
|
||||
{
|
||||
catName: "IOS/Android Development",
|
||||
numberOfPOst: "24",
|
||||
},
|
||||
{
|
||||
catName: "Others",
|
||||
numberOfPOst: "08",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const blogKeyword = ["Ideas", "Education", "Design", "Development", "Branding"];
|
||||
|
||||
const BlogSidebarClassic = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="blog-sidebar-one">
|
||||
<div className="sidebar-search-form mb-85 sm-mb-60">
|
||||
<BlogSidebarForm />
|
||||
</div>
|
||||
{/* /.sidebar-search-form */}
|
||||
|
||||
<div className="sidebar-categories mb-85 sm-mb-60">
|
||||
<h4 className="sidebar-title">Categories</h4>
|
||||
<ul>
|
||||
{categroies.map((cat, i) => (
|
||||
<li key={i}>
|
||||
<Link href="/blogs/1">
|
||||
{cat.catName} <span>({cat.numberOfPOst})</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.sidebar-categories */}
|
||||
|
||||
<div className="sidebar-recent-news mb-85 sm-mb-60">
|
||||
<h4 className="sidebar-title">Recent News</h4>
|
||||
<ul>
|
||||
{recentNews.map((news, i) => (
|
||||
<li key={i}>
|
||||
<Link href={`/blogs/${news.id}`}>
|
||||
<span className="title">{news.title}</span>
|
||||
<span className="date">{news.date}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.sidebar-recent-news */}
|
||||
|
||||
<div className="sidebar-keyword">
|
||||
<h4 className="sidebar-title">Keywords</h4>
|
||||
<ul className="cleafix">
|
||||
{blogKeyword.map((val, i) => (
|
||||
<li key={i}>
|
||||
<Link href="/blogs/1"> {val}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.sidebar-keyword */}
|
||||
</div>
|
||||
{/* /.blog-sidebar-one */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogSidebarClassic;
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { BlogContent } from "@/data/blogs";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const BlogStyle1 = () => {
|
||||
return (
|
||||
<>
|
||||
{BlogContent.map((item, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-md-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
key={i}
|
||||
data-aos-delay={item.dealyAnimation}
|
||||
>
|
||||
<div className="post-meta">
|
||||
<Image width={321} height={241} style={{width:'100%',height:'fit-content'}}
|
||||
src={`/images/blog/${item.img}`}
|
||||
alt="media"
|
||||
className="image-meta"
|
||||
/>
|
||||
<div className="tag">{item.tag}</div>
|
||||
<h3>
|
||||
<Link href={`/blogs/${item.id}`} className="title">
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<Link
|
||||
href={`/blogs/${item.id}`}
|
||||
className="read-more d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<span>Read More</span>
|
||||
<i className="flaticon-right-arrow"></i>
|
||||
</Link>
|
||||
</div>
|
||||
{/* /.post-meta */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogStyle1;
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { BlogContentTwo } from "@/data/blogs";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const BlogStyle2 = () => {
|
||||
return (
|
||||
<>
|
||||
{BlogContentTwo.map((item, i) => (
|
||||
<div className="post-meta" key={i}>
|
||||
<Image width={681} height={336} style={{height:'fit-content'}}
|
||||
src={`/images/blog/${item.img}`}
|
||||
alt="media"
|
||||
className="image-meta"
|
||||
/>
|
||||
<div className="tag">{item.tag}</div>
|
||||
<h3>
|
||||
<Link href={`/blogs/${item.id}`} className="title">
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p>{item.desc}</p>
|
||||
<Link
|
||||
href={`/blogs/${item.id}`}
|
||||
className="read-more d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<span>Read More</span>
|
||||
<i className="flaticon-right-arrow"></i>
|
||||
</Link>
|
||||
</div>
|
||||
// /.post-meta
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogStyle2;
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { BlogContentThree } from "@/data/blogs";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const BlogStyle3 = () => {
|
||||
return (
|
||||
<>
|
||||
{BlogContentThree.map((item, i) => (
|
||||
<div className="post-meta" key={i}>
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={`/images/blog/${item.img}`}
|
||||
alt="media"
|
||||
className="image-meta"
|
||||
/>
|
||||
<div className="post">
|
||||
<div className="date">{item.date}</div>
|
||||
<h3>
|
||||
<Link href={`/blogs/${item.id}`} className="title">
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p>{item.desc}</p>
|
||||
<Link
|
||||
href={`/blogs/${item.id}`}
|
||||
className="read-more d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<span>Continue Reading</span>
|
||||
<i className="flaticon-right-arrow"></i>
|
||||
</Link>
|
||||
</div>
|
||||
{/* End post */}
|
||||
</div>
|
||||
// /.post-meta
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogStyle3;
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { BlogContentFour } from "@/data/blogs";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const BlogStyle4 = () => {
|
||||
return (
|
||||
<>
|
||||
{BlogContentFour.map((item, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-md-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
key={i}
|
||||
data-aos-delay={item.dealyAnimation}
|
||||
>
|
||||
<div className="post-meta">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={`/images/blog/${item.img}`}
|
||||
alt="media"
|
||||
className="image-meta"
|
||||
/>
|
||||
<h3>
|
||||
<Link href={`/blogs/${item.id}`} className="title">
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<Link
|
||||
href={`/blogs/${item.id}`}
|
||||
className="read-more d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<span>Read More</span>
|
||||
<i className="flaticon-right-arrow"></i>
|
||||
</Link>
|
||||
</div>
|
||||
{/* /.post-meta */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogStyle4;
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { BlogContentSix } from "@/data/blogs";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const BlogStyle5 = () => {
|
||||
return (
|
||||
<>
|
||||
{BlogContentSix.map((val, i) => (
|
||||
<div
|
||||
className="col-lg-4"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={val.animationDealy}
|
||||
key={i}
|
||||
>
|
||||
<div className="feature-article-meta">
|
||||
<div className="img-meta">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}} src={`/images/blog/${val.img}`} alt="media" />
|
||||
</div>
|
||||
<div className="post-meta">
|
||||
<h3>
|
||||
<Link href={`/blogs/${val.id}`}>{val.title}</Link>
|
||||
</h3>
|
||||
<div className="author_info">
|
||||
{val.author}. <span>{val.designation}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.feature-article-meta */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogStyle5;
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { BlogContentFive } from "@/data/blogs";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const BlogStyle6 = () => {
|
||||
return (
|
||||
<>
|
||||
{BlogContentFive.map((item, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-md-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
key={i}
|
||||
data-aos-delay={item.dealyAnimation}
|
||||
>
|
||||
<div className="post-meta">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={`/images/blog/${item.img}`}
|
||||
alt="media"
|
||||
className="image-meta"
|
||||
/>
|
||||
<div className="tag">{item.tag}</div>
|
||||
<h3>
|
||||
<Link href={`/blogs/${item.id}`} className="title">
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<Link
|
||||
href={`/blogs/${item.id}`}
|
||||
className="read-more d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<span>Read More</span>
|
||||
<i className="flaticon-right-arrow"></i>
|
||||
</Link>
|
||||
</div>
|
||||
{/* /.post-meta */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogStyle6;
|
||||
@@ -0,0 +1,87 @@
|
||||
'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 LogoSlider = [
|
||||
{
|
||||
img: "logo-1",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-2",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-3",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-4",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-5",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-6",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-7",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-3",
|
||||
url: "",
|
||||
},
|
||||
];
|
||||
|
||||
const brand = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrow: true,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 7,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
margin: 30,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 6,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<Slider {...settings}>
|
||||
{LogoSlider.map((val, i) => (
|
||||
<div className="item" key={i}>
|
||||
<a href={val.url}>
|
||||
<Image width={140} height={38} style={{height:'38px',width:'fit-content'}} src={`/images/logo/${val.img}.png`} alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
);
|
||||
};
|
||||
|
||||
export default brand;
|
||||
@@ -0,0 +1,81 @@
|
||||
'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 LogoSlider = [
|
||||
{
|
||||
img: "logo-1",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-2",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-3",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-4",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-6",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-3",
|
||||
url: "",
|
||||
},
|
||||
];
|
||||
|
||||
const BrandFive = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrow: true,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
margin: 30,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<Slider {...settings}>
|
||||
{LogoSlider.map((val, i) => (
|
||||
<div className="item" key={i}>
|
||||
<div className="img-meta d-flex align-items-center justify-content-center">
|
||||
<a href={val.url}>
|
||||
<Image width={122} height={38} style={{objectFit:'contain'}} src={`/images/logo/${val.img}.png`} alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandFive;
|
||||
@@ -0,0 +1,85 @@
|
||||
'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 LogoSlider = [
|
||||
{
|
||||
img: "logo-21",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-22",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-23",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-24",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-25",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-22",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-24",
|
||||
url: "",
|
||||
},
|
||||
];
|
||||
|
||||
const BrandFour = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrow: true,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
margin: 30,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<Slider {...settings}>
|
||||
{LogoSlider.map((val, i) => (
|
||||
<div className="item" key={i}>
|
||||
<div className="img-meta d-flex align-items-center justify-content-center">
|
||||
<a href={val.url}>
|
||||
<Image width={163} height={150} style={{width:'100%',height:'fit-content'}} src={`/images/logo/${val.img}.png`} alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandFour;
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
|
||||
const brandContent = [
|
||||
{ name: "fa-facebook", link: "https://www.facebook.com/" },
|
||||
{ name: "fa-twitter", link: "https://twitter.com/home" },
|
||||
{ name: "fa-linkedin", link: "https://www.linkedin.com/feed/" },
|
||||
];
|
||||
|
||||
const BrandSeven = () => {
|
||||
return (
|
||||
<>
|
||||
{brandContent.map((val, i) => (
|
||||
<li key={i}>
|
||||
<a href={val.link} target="_blank" rel="noopener noreferrer">
|
||||
<i className={`fa ${val.name}`} aria-hidden="true"></i>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandSeven;
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const brandContent = [
|
||||
{
|
||||
colClass: `line-one`,
|
||||
imgList: [
|
||||
{
|
||||
img: "logo-47",
|
||||
},
|
||||
{
|
||||
img: "logo-48",
|
||||
},
|
||||
{
|
||||
img: "logo-49",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
colClass: `line-two`,
|
||||
imgList: [
|
||||
{
|
||||
img: "logo-50",
|
||||
},
|
||||
{
|
||||
img: "logo-51",
|
||||
},
|
||||
{
|
||||
img: "logo-52",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const BrandSix = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
{brandContent.map((val, i) => (
|
||||
<div className="col-sm-6" key={i}>
|
||||
<div className={val.colClass}>
|
||||
{val.imgList.map((brand, i) => (
|
||||
<div
|
||||
className="icon d-flex align-items-center justify-content-center"
|
||||
key={i}
|
||||
>
|
||||
<Image width={197} height={130} style={{maxHeight:'36%',maxWidth:'92%',objectFit:'contain'}} src={`/images/logo/${brand.img}.png`} alt="brand" />
|
||||
</div>
|
||||
// /.icon
|
||||
))}
|
||||
</div>
|
||||
{/* /.line-two */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandSix;
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const BrandImages = [
|
||||
"logo-32",
|
||||
"logo-33",
|
||||
"logo-34",
|
||||
"logo-35",
|
||||
"logo-36",
|
||||
"logo-37",
|
||||
"logo-38",
|
||||
];
|
||||
|
||||
const BrandThree = () => {
|
||||
return (
|
||||
<>
|
||||
{BrandImages.map((val, i) => (
|
||||
<div
|
||||
className="logo d-flex align-items-center justify-content-center"
|
||||
key={i}
|
||||
|
||||
>
|
||||
<Image width={130} height={82} style={{maxHeight:'50%',objectFit:'contain'}} src={`/images/logo/${val}.png`} alt="logo" />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandThree;
|
||||
@@ -0,0 +1,82 @@
|
||||
'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 LogoSlider = [
|
||||
{
|
||||
img: "logo-12",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-13",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-14",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-15",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-16",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
img: "logo-13",
|
||||
url: "",
|
||||
},
|
||||
];
|
||||
|
||||
const BrandTwo = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrow: true,
|
||||
infinite: true,
|
||||
speed: 600,
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
margin: 30,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<Slider {...settings}>
|
||||
{LogoSlider.map((val, i) => (
|
||||
<div
|
||||
className="img-meta d-flex align-items-center justify-content-center"
|
||||
key={i}
|
||||
>
|
||||
<a href={val.url}>
|
||||
<Image width={200} height={200} style={{width:'100%',height:'fit-content'}} src={`/images/logo/${val.img}.png`} alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandTwo;
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
const CallToAction = () => {
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
bg-wrapper
|
||||
d-lg-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<h2 className="font-gilroy-bold">
|
||||
Don’t find the answer? contact us for any query.
|
||||
</h2>
|
||||
<Link href="contact-cs">Contact us</Link>
|
||||
<div className="bubble-one"></div>
|
||||
<div className="bubble-two"></div>
|
||||
<div className="bubble-three"></div>
|
||||
<div className="bubble-four"></div>
|
||||
<div className="bubble-five"></div>
|
||||
</div>
|
||||
// /.bg-wrapper
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToAction;
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import FormEvent from "../../components/form/FormEvent";
|
||||
import Link from "next/link";
|
||||
|
||||
const CallToActionFive = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="title-style-five text-center">
|
||||
<h2>
|
||||
<span>Sign up & get started</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-7 col-lg-8 col-md-9 m-auto">
|
||||
<p className="font-rubik sub-heading">
|
||||
Our ticketing platform is made for you - & loved by everyone lorem
|
||||
ipsum.
|
||||
</p>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
{/* End .row */}
|
||||
<div className="row">
|
||||
<div className="col-xl-7 col-lg-8 col-md-10 m-auto">
|
||||
<FormEvent />
|
||||
<p className="info-text">
|
||||
Already a member? <Link href="login">Sign in.</Link>
|
||||
</p>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
{/* End .row */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToActionFive;
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
import FormEvent from "../form/FormEvent";
|
||||
import Link from "next/link";
|
||||
|
||||
const CallToActionFour = () => {
|
||||
return (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="title-style-one">
|
||||
<h6 className="font-rubik" style={{ color: "#787CFF" }}>
|
||||
Start your free trial.
|
||||
</h6>
|
||||
<h2>New here? Start your free trial now.</h2>
|
||||
</div>
|
||||
{/* /.title-style-one */}
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form-wrapper">
|
||||
<FormEvent />
|
||||
<p className="font-rubik">
|
||||
Already a member? <Link href="login">Sign in.</Link>
|
||||
</p>
|
||||
</div>
|
||||
{/* /.form-wrapper */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToActionFour;
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const CallToActionSeven = () => {
|
||||
return (
|
||||
<div className="fancy-short-banner-fourteen mt-150 md-mt-80">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12" data-aos="fade-up" data-aos-duration="1200">
|
||||
<div className="title-style-thirteen">
|
||||
<h2>
|
||||
200k+ Customers <br />
|
||||
have our deski.Try it now!
|
||||
</h2>
|
||||
</div>
|
||||
<p>Try it risk free — we don’t charge cancellation fees.</p>
|
||||
<Link href="/signup" className="theme-btn-twelve">
|
||||
Let’s Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.container --> */}
|
||||
<Image width="72" height="141"
|
||||
src="/images/shape/239.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="90" height="150"
|
||||
src="/images/shape/240.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
<Image width="13" height="12"
|
||||
src="/images/shape/232.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
<Image width="17" height="20"
|
||||
src="/images/shape/233.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-four"
|
||||
/>
|
||||
<Image width="13" height="16"
|
||||
src="/images/shape/234.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-five"
|
||||
/>
|
||||
<Image width="14" height="14"
|
||||
src="/images/shape/235.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-six"
|
||||
/>
|
||||
<Image width="36" height="30"
|
||||
src="/images/shape/236.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-seven"
|
||||
/>
|
||||
<Image width="13" height="12"
|
||||
src="/images/shape/232.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-eight"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToActionSeven;
|
||||
@@ -0,0 +1,24 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const CallToActionSix = () => {
|
||||
return (
|
||||
<div className="title-style-twelve">
|
||||
<h2>
|
||||
<span>
|
||||
Try Deski Free{" "}
|
||||
<Image width="355" height="37" src="/images/shape/line-shape-13.svg" alt="sahpe" />
|
||||
</span>
|
||||
</h2>
|
||||
<p className="pt-45 pb-50 text-dark">
|
||||
After your 14-day trial of our Professional plan, enjoy the Free version
|
||||
of deski– forever.
|
||||
</p>
|
||||
<a href="#" className="theme-btn-nine">
|
||||
Start Free Trial
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToActionSix;
|
||||
@@ -0,0 +1,42 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
const CallToActionThree = () => {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
return (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="title-style-one">
|
||||
<h6 className="font-rubik" style={{ color: "#f96f60" }}>
|
||||
Start your free trial.
|
||||
</h6>
|
||||
<h2>New here? Start your free trial now.</h2>
|
||||
</div>
|
||||
{/* /.title-style-one */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-wrapper">
|
||||
<form onClick={handleSubmit}>
|
||||
<input type="text" placeholder="Email address" />
|
||||
<button>Subscribe</button>
|
||||
</form>
|
||||
{/* End form */}
|
||||
<p className="font-rubik">
|
||||
Already a member? <Link href="login">Sign in.</Link>
|
||||
</p>
|
||||
</div>
|
||||
{/* /.form-wrapper */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToActionThree;
|
||||
@@ -0,0 +1,40 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
const CallToActionTwo = () => {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="title">
|
||||
<h6>Subscribe Now</h6>
|
||||
<h2>Subscriber to our Newsletter</h2>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-wrapper">
|
||||
<form onClick={handleSubmit}>
|
||||
<input type="text" placeholder="Email address" />
|
||||
<button>Subscribe</button>
|
||||
</form>
|
||||
{/* End form */}
|
||||
<p className="font-rubik">
|
||||
Already a member? <Link href="login">Sign in.</Link>
|
||||
</p>
|
||||
</div>
|
||||
{/* /.form-wrapper */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToActionTwo;
|
||||
@@ -0,0 +1,75 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
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/",
|
||||
},
|
||||
];
|
||||
|
||||
const ContactAddress = () => {
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-4 col-sm-6 d-lg-flex">
|
||||
<div className="address-info">
|
||||
<div className="icon d-flex align-items-end">
|
||||
<Image width="60" height="76" src="/images/icon/44.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="title">Location</div>
|
||||
<p className="font-rubik">
|
||||
Melbourne, R. Market <br /> 1201 VIC
|
||||
</p>
|
||||
</div>{" "}
|
||||
{/* /.address-info */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-4 col-sm-6 d-lg-flex">
|
||||
<div className="address-info">
|
||||
<div className="icon d-flex align-items-end">
|
||||
<Image width="75" height="68" src="/images/icon/45.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="title">Contact</div>
|
||||
<p className="font-rubik">
|
||||
bawejkor@duwvude.gov <br />
|
||||
(779) 564-1593
|
||||
</p>
|
||||
</div>{" "}
|
||||
{/* /.address-info */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-4 col-sm-6 d-lg-flex">
|
||||
<div className="address-info">
|
||||
<div className="icon d-flex align-items-end">
|
||||
<Image width="66" height="75" src="/images/icon/46.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="title">Social Media</div>
|
||||
<p className="font-rubik">Find on social media</p>
|
||||
<ul className="d-flex justify-content-center">
|
||||
{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>
|
||||
{/* /.address-info */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactAddress;
|
||||
@@ -0,0 +1,75 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
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/",
|
||||
},
|
||||
];
|
||||
|
||||
const ContactAddressTwo = () => {
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-4 col-sm-6">
|
||||
<div className="address-info">
|
||||
<div className="icon">
|
||||
<Image width="82" height="86" src="/images/icon/15.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="title">Location</div>
|
||||
<p className="font-rubik">
|
||||
Melbourne, R. Market <br /> 1201 VIC
|
||||
</p>
|
||||
</div>
|
||||
{/* /.address-info */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-md-4 col-sm-6">
|
||||
<div className="address-info">
|
||||
<div className="icon">
|
||||
<Image width="75" height="83" src="/images/icon/16.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="title">Contact</div>
|
||||
<p className="font-rubik">
|
||||
bawejkor@duwvude.gov <br />
|
||||
(779) 564-1593
|
||||
</p>
|
||||
</div>{" "}
|
||||
{/* /.address-info */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-md-4 col-sm-6">
|
||||
<div className="address-info">
|
||||
<div className="icon">
|
||||
<Image width="71" height="77" src="/images/icon/17.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="title">Social Media</div>
|
||||
<p className="font-rubik">Follow on social media</p>
|
||||
<ul className="d-flex justify-content-center">
|
||||
{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>{" "}
|
||||
{/* /.address-info */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactAddressTwo;
|
||||
@@ -0,0 +1,118 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const ContactForm = () => {
|
||||
// for validation
|
||||
const validationSchema = Yup.object().shape({
|
||||
firstName: Yup.string().required("First Name is required"),
|
||||
lastName: Yup.string().required("Last name is required"),
|
||||
sendMessage: Yup.string().required("Please,leave us a message."),
|
||||
email: Yup.string()
|
||||
.required("Email is required")
|
||||
.email("Entered value does not match email format"),
|
||||
});
|
||||
|
||||
const formOptions = { resolver: yupResolver(validationSchema) };
|
||||
// get functions to build form with useForm() hook
|
||||
const { register, handleSubmit, formState } = useForm(formOptions);
|
||||
const { errors } = formState;
|
||||
|
||||
function onSubmit(data, e) {
|
||||
// display form data on success
|
||||
console.log("Message submited: " + JSON.stringify(data));
|
||||
e.target.reset();
|
||||
}
|
||||
|
||||
return (
|
||||
<form id="contact-form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="messages"></div>
|
||||
<div className="row controls">
|
||||
<div className="col-md-6">
|
||||
<div className="input-group-meta form-group mb-60">
|
||||
<label>First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="First Name"
|
||||
name="firstName"
|
||||
{...register("firstName")}
|
||||
className={`${errors.firstName ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<div className="invalid-feedback">
|
||||
{errors.firstName?.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-md-6">
|
||||
<div className="input-group-meta form-group mb-60">
|
||||
<label>Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Last Name"
|
||||
name="lastName"
|
||||
{...register("lastName")}
|
||||
className={`${errors.lastName ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<div className="invalid-feedback">{errors.lastName?.message}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-12">
|
||||
<div className="input-group-meta form-group mb-60">
|
||||
<label>Email Address</label>
|
||||
<input
|
||||
placeholder="Enter Your Email"
|
||||
name="email"
|
||||
type="text"
|
||||
{...register("email")}
|
||||
className={` ${errors.email ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.email && (
|
||||
<div className="invalid-feedback">{errors.email?.message}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-12">
|
||||
<div className="input-group-meta form-group lg mb-40">
|
||||
<label>Message</label>
|
||||
<textarea
|
||||
placeholder="Your message goes here.."
|
||||
name="sendMessage"
|
||||
type="text"
|
||||
{...register("message")}
|
||||
className={`${errors.sendMessage ? "is-invalid" : ""}`}
|
||||
></textarea>
|
||||
{errors.sendMessage && (
|
||||
<div className="invalid-feedback">
|
||||
{errors.sendMessage?.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-12">
|
||||
<button type="submit" className="theme-btn-two">
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
@@ -0,0 +1,104 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import * as Yup from "yup";
|
||||
import Image from "next/image";
|
||||
|
||||
const LoginForm = () => {
|
||||
// for password show hide
|
||||
const [passwordShown, setPasswordShown] = useState(false);
|
||||
const togglePasswordVisiblity = () => {
|
||||
setPasswordShown(passwordShown ? false : true);
|
||||
};
|
||||
|
||||
// for validation
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.required("Email is required")
|
||||
.email("Entered value does not match email format"),
|
||||
password: Yup.string().required("Password is required"),
|
||||
});
|
||||
|
||||
const formOptions = { resolver: yupResolver(validationSchema) };
|
||||
// get functions to build form with useForm() hook
|
||||
const { register, handleSubmit, formState } = useForm(formOptions);
|
||||
const { errors } = formState;
|
||||
|
||||
function onSubmit(data, e) {
|
||||
// display form data on success
|
||||
console.log("Message submited: " + JSON.stringify(data));
|
||||
e.target.reset();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="user-data-form ">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="input-group-meta mb-80 sm-mb-70">
|
||||
<label>Email</label>
|
||||
<input
|
||||
placeholder="Enter Your Email"
|
||||
name="email"
|
||||
type="text"
|
||||
{...register("email")}
|
||||
className={` ${errors.email ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.email && (
|
||||
<div className="invalid-feedback">{errors.email?.message}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="input-group-meta mb-25">
|
||||
<label>Password</label>
|
||||
<input
|
||||
placeholder="Enter Password"
|
||||
name="password"
|
||||
type={passwordShown ? "text" : "password"}
|
||||
{...register("password")}
|
||||
className={` ${errors.password ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.password && (
|
||||
<div className="invalid-feedback">
|
||||
{errors.password?.message}
|
||||
</div>
|
||||
)}
|
||||
<span
|
||||
className="placeholder_icon"
|
||||
onClick={togglePasswordVisiblity}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
passwordShown ? "passVicon eye-slash" : "passVicon"
|
||||
}
|
||||
>
|
||||
<Image width="24" height="16" src="/images/icon/view.svg" alt="ico" />
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="agreement-checkbox d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<input type="checkbox" id="remember" />
|
||||
<label htmlFor="remember">Keep me logged in</label>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.agreement-checkbox */}
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<button className="theme-btn-one mt-50 mb-50">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginForm;
|
||||
@@ -0,0 +1,185 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import * as Yup from "yup";
|
||||
import Image from "next/image";
|
||||
|
||||
const SignUpForm = () => {
|
||||
// for password show hide
|
||||
const [passwordShown, setPasswordShown] = useState(false);
|
||||
const togglePasswordVisiblity = () => {
|
||||
setPasswordShown(passwordShown ? false : true);
|
||||
};
|
||||
|
||||
// for Re password show hide
|
||||
const [rePasswordShown, setRePasswordShown] = useState(false);
|
||||
const toggleRePasswordVisiblity = () => {
|
||||
setRePasswordShown(rePasswordShown ? false : true);
|
||||
};
|
||||
|
||||
// for validation
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required("Name is required"),
|
||||
email: Yup.string()
|
||||
.required("Email is required")
|
||||
.email("Entered value does not match email format"),
|
||||
password: Yup.string()
|
||||
.min(6, "Password must be at least 6 characters")
|
||||
.required("Password is required"),
|
||||
confirmPassword: Yup.string()
|
||||
.oneOf([Yup.ref("password"), null], "Passwords must match")
|
||||
.required("Confirm Password is required"),
|
||||
acceptTerms: Yup.bool().oneOf(
|
||||
[true],
|
||||
"Accept Terms and Conditions is required"
|
||||
),
|
||||
});
|
||||
|
||||
const formOptions = { resolver: yupResolver(validationSchema) };
|
||||
// get functions to build form with useForm() hook
|
||||
const { register, handleSubmit, formState } = useForm(formOptions);
|
||||
const { errors } = formState;
|
||||
|
||||
function onSubmit(data, e) {
|
||||
// display form data on success
|
||||
console.log("Message submited: " + JSON.stringify(data));
|
||||
e.target.reset();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<form className="user-data-form " onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="input-group-meta mb-50">
|
||||
<label>Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter Full Name"
|
||||
name="name"
|
||||
{...register("name")}
|
||||
className={` ${errors.name ? "is-invalid" : ""}`}
|
||||
/>
|
||||
|
||||
{errors.name && (
|
||||
<div className="invalid-feedback">{errors.name?.message}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="input-group-meta mb-50">
|
||||
<label>Email</label>
|
||||
<input
|
||||
placeholder="Enter Your Email"
|
||||
name="email"
|
||||
type="text"
|
||||
{...register("email")}
|
||||
className={` ${errors.email ? "is-invalid" : ""}`}
|
||||
/>
|
||||
|
||||
{errors.email && (
|
||||
<div className="invalid-feedback">{errors.email?.message}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="input-group-meta mb-50">
|
||||
<label>Password</label>
|
||||
<input
|
||||
placeholder="Enter Password"
|
||||
name="password"
|
||||
type={passwordShown ? "text" : "password"}
|
||||
{...register("password")}
|
||||
className={` ${errors.password ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.password && (
|
||||
<div className="invalid-feedback">
|
||||
{errors.password?.message}
|
||||
</div>
|
||||
)}
|
||||
{/* End error msg */}
|
||||
<span
|
||||
className="placeholder_icon"
|
||||
onClick={togglePasswordVisiblity}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
passwordShown ? "passVicon eye-slash" : "passVicon"
|
||||
}
|
||||
>
|
||||
<Image width="24" height="16" src="/images/icon/view.svg" alt="image" />
|
||||
</span>
|
||||
</span>
|
||||
{/* End placeholder icon */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="input-group-meta mb-25">
|
||||
<label>Re-type Password</label>
|
||||
<input
|
||||
placeholder="Enter Password"
|
||||
name="confirmPassword"
|
||||
type={rePasswordShown ? "text" : "password"}
|
||||
{...register("confirmPassword")}
|
||||
className={` ${errors.confirmPassword ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.confirmPassword && (
|
||||
<div className="invalid-feedback">
|
||||
{errors.confirmPassword?.message}
|
||||
</div>
|
||||
)}
|
||||
{/* End error msg */}
|
||||
<span
|
||||
className="placeholder_icon"
|
||||
onClick={toggleRePasswordVisiblity}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
rePasswordShown ? "passVicon eye-slash" : "passVicon"
|
||||
}
|
||||
>
|
||||
<Image width="24" height="16" src="/images/icon/view.svg" alt="image" />
|
||||
</span>
|
||||
</span>
|
||||
{/* End placeholder icon */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="agreement-checkbox d-flex justify-content-between align-items-center sm-mt-10">
|
||||
<div className="position-relative">
|
||||
<input
|
||||
name="acceptTerms"
|
||||
type="checkbox"
|
||||
{...register("acceptTerms")}
|
||||
id="acceptTerms"
|
||||
className={` ${errors.acceptTerms ? "is-invalid" : ""}`}
|
||||
/>
|
||||
|
||||
<label htmlFor="acceptTerms">
|
||||
By clicking "SIGN UP" I agree to the Terms and Conditions and
|
||||
Privacy Policy.
|
||||
</label>
|
||||
{errors.acceptTerms && (
|
||||
<div className="invalid-feedback">
|
||||
{errors.acceptTerms?.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.agreement-checkbox */}
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<button type="submit" className="theme-btn-one mt-30 mb-50">
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUpForm;
|
||||
@@ -0,0 +1,84 @@
|
||||
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
|
||||
const counterUpContent = [
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "1500",
|
||||
endPointText: "+",
|
||||
countMeta: "Positive Review",
|
||||
meta: "A place to think and track ideas",
|
||||
animationDelay: "0",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "200",
|
||||
endPointText: "+",
|
||||
countMeta: "Branches",
|
||||
meta: "A home for your iqu team, best",
|
||||
animationDelay: "100",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "2",
|
||||
endPointText: "k+",
|
||||
countMeta: "Work Done",
|
||||
meta: "Beautiful docs for your APIs, Products",
|
||||
animationDelay: "200",
|
||||
},
|
||||
];
|
||||
|
||||
const CounterFive = () => {
|
||||
const [focus, setFocus] = React.useState(false);
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
{counterUpContent.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="counter-box-two">
|
||||
<h2 className="number">
|
||||
<span className="timer">
|
||||
{" "}
|
||||
<CountUp
|
||||
start={focus ? val.startCount : null}
|
||||
end={val.endCount}
|
||||
duration={1}
|
||||
redraw={true}
|
||||
>
|
||||
{({ countUpRef }) => (
|
||||
<VisibilitySensor
|
||||
onChange={(isVisible) => {
|
||||
if (isVisible) {
|
||||
setFocus(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span ref={countUpRef} />
|
||||
</VisibilitySensor>
|
||||
)}
|
||||
</CountUp>
|
||||
</span>
|
||||
{val.endPointText}
|
||||
</h2>
|
||||
<em>{val.countMeta}</em>
|
||||
<p className="font-rubik">{val.meta}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterFive;
|
||||
@@ -0,0 +1,82 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
|
||||
const counterUpContent = [
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "1200",
|
||||
endPointText: "+",
|
||||
countMeta: "Positive Review",
|
||||
meta: "A place to think and track ideas",
|
||||
animationDelay: "0",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "200",
|
||||
endPointText: "+",
|
||||
countMeta: "Branches",
|
||||
meta: "A home for your iqu team, best",
|
||||
animationDelay: "100",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "3",
|
||||
endPointText: "k+",
|
||||
countMeta: "Work Done",
|
||||
meta: "Beautiful docs for your APIs, Products",
|
||||
animationDelay: "200",
|
||||
},
|
||||
];
|
||||
|
||||
const CounterFiveColored = () => {
|
||||
const [focus, setFocus] = React.useState(false);
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
{counterUpContent.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="counter-box-two">
|
||||
<h2 className="number">
|
||||
<span className="timer">
|
||||
{" "}
|
||||
<CountUp
|
||||
start={focus ? val.startCount : null}
|
||||
end={val.endCount}
|
||||
duration={1}
|
||||
redraw={true}
|
||||
>
|
||||
{({ countUpRef }) => (
|
||||
<VisibilitySensor
|
||||
onChange={(isVisible) => {
|
||||
if (isVisible) {
|
||||
setFocus(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span ref={countUpRef} />
|
||||
</VisibilitySensor>
|
||||
)}
|
||||
</CountUp>
|
||||
</span>
|
||||
{val.endPointText}
|
||||
</h2>
|
||||
<em>{val.countMeta}</em>
|
||||
<p className="font-rubik">{val.meta}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterFiveColored;
|
||||
@@ -0,0 +1,78 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
|
||||
const counterUpContent = [
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "5",
|
||||
endPointText: "",
|
||||
meta: "Positive review and counting",
|
||||
animationDelay: "0",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "29",
|
||||
endPointText: "k",
|
||||
meta: "Subscirber trust on our services",
|
||||
animationDelay: "100",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "73",
|
||||
endPointText: "k+",
|
||||
meta: "Order complete successfully",
|
||||
animationDelay: "200",
|
||||
},
|
||||
];
|
||||
|
||||
const CounterFour = () => {
|
||||
const [focus, setFocus] = React.useState(false);
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
{counterUpContent.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="counter-box-two">
|
||||
<h2 className="number">
|
||||
<span className="timer">
|
||||
{" "}
|
||||
<CountUp
|
||||
start={focus ? val.startCount : null}
|
||||
end={val.endCount}
|
||||
duration={1}
|
||||
redraw={true}
|
||||
>
|
||||
{({ countUpRef }) => (
|
||||
<VisibilitySensor
|
||||
onChange={(isVisible) => {
|
||||
if (isVisible) {
|
||||
setFocus(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span ref={countUpRef} />
|
||||
</VisibilitySensor>
|
||||
)}
|
||||
</CountUp>
|
||||
</span>
|
||||
{val.endPointText}
|
||||
</h2>
|
||||
<p className="font-rubik">{val.meta}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterFour;
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
|
||||
const counterUpContent = [
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "13",
|
||||
meta: "Projects",
|
||||
colorClass: "color-one",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "3",
|
||||
meta: "Workers",
|
||||
colorClass: "color-two",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "123",
|
||||
meta: "Offices",
|
||||
colorClass: "color-three",
|
||||
},
|
||||
];
|
||||
|
||||
const CounterOne = () => {
|
||||
const [focus, setFocus] = React.useState(false);
|
||||
return (
|
||||
<div className="counter-info-classic">
|
||||
{counterUpContent.map((val, i) => (
|
||||
<div className={`counter-box-one ${val.colorClass}`} key={i}>
|
||||
<h2 className="number font-rubik">
|
||||
<span className="timer">
|
||||
{" "}
|
||||
<CountUp
|
||||
start={focus ? val.startCount : null}
|
||||
end={val.endCount}
|
||||
duration={1}
|
||||
redraw={true}
|
||||
>
|
||||
{({ countUpRef }) => (
|
||||
<VisibilitySensor
|
||||
onChange={(isVisible) => {
|
||||
if (isVisible) {
|
||||
setFocus(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span ref={countUpRef} />
|
||||
</VisibilitySensor>
|
||||
)}
|
||||
</CountUp>{" "}
|
||||
</span>{" "}
|
||||
k
|
||||
</h2>
|
||||
<p className="font-rubik">{val.meta}</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="bubble-one"></div>
|
||||
<div className="bubble-two"></div>
|
||||
<div className="bubble-three"></div>
|
||||
<div className="bubble-four"></div>
|
||||
<div className="bubble-five"></div>
|
||||
<div className="bubble-six"></div>
|
||||
<div className="bubble-seven"></div>
|
||||
<Image width="242" height="387" src="/images/shape/8.svg" alt="image" className="cs-screen dot-shape" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterOne;
|
||||
@@ -0,0 +1,82 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
|
||||
const counterUpContent = [
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "13",
|
||||
endPointText: "k",
|
||||
meta: "Job done successfully",
|
||||
animationDelay: "0",
|
||||
bgColor: "#25E5DA",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "20",
|
||||
endPointText: "million",
|
||||
meta: "3,280 avg rating",
|
||||
animationDelay: "100",
|
||||
bgColor: "#FF36AF",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "3000",
|
||||
endPointText: "+",
|
||||
meta: "Using Deski",
|
||||
animationDelay: "200",
|
||||
bgColor: "#FFB13A",
|
||||
},
|
||||
];
|
||||
|
||||
const CounterSix = () => {
|
||||
const [focus, setFocus] = React.useState(false);
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
{counterUpContent.map((val, i) => (
|
||||
<div
|
||||
className="col-lg-4 "
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={val.animationDelay}
|
||||
key={i}
|
||||
>
|
||||
<div className="counter-box-five text-center mb-65">
|
||||
<div className="dot" style={{ background: val.bgColor }}></div>
|
||||
<h2 className="number font-gordita">
|
||||
<span className="timer">
|
||||
{" "}
|
||||
<CountUp
|
||||
start={focus ? val.startCount : null}
|
||||
end={val.endCount}
|
||||
duration={1}
|
||||
redraw={true}
|
||||
>
|
||||
{({ countUpRef }) => (
|
||||
<VisibilitySensor
|
||||
onChange={(isVisible) => {
|
||||
if (isVisible) {
|
||||
setFocus(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span ref={countUpRef} />
|
||||
</VisibilitySensor>
|
||||
)}
|
||||
</CountUp>
|
||||
</span>
|
||||
{val.endPointText}
|
||||
</h2>
|
||||
<p>{val.meta}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterSix;
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
import Image from "next/image";
|
||||
const counterUpContent = [
|
||||
{
|
||||
icon: "23",
|
||||
startCount: "0",
|
||||
endCount: "13",
|
||||
meta: "Ticket Sold",
|
||||
},
|
||||
{
|
||||
icon: "24",
|
||||
startCount: "0",
|
||||
endCount: "3000",
|
||||
meta: "Event organisers",
|
||||
},
|
||||
{
|
||||
icon: "25",
|
||||
startCount: "0",
|
||||
endCount: "134",
|
||||
meta: "Countries",
|
||||
},
|
||||
];
|
||||
|
||||
const CounterThree = () => {
|
||||
const [focus, setFocus] = React.useState(false);
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
{counterUpContent.map((val, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
key={i}
|
||||
>
|
||||
<div className="counter-box-three">
|
||||
<div className="icon">
|
||||
<Image width={72} height={62} style={{objectFit:'contain'}} src={`/images/icon/${val.icon}.svg`} alt="icon" />
|
||||
</div>
|
||||
<h2 className="number">
|
||||
<span className="timer">
|
||||
{" "}
|
||||
<CountUp
|
||||
start={focus ? val.startCount : null}
|
||||
end={val.endCount}
|
||||
duration={1}
|
||||
redraw={true}
|
||||
>
|
||||
{({ countUpRef }) => (
|
||||
<VisibilitySensor
|
||||
onChange={(isVisible) => {
|
||||
if (isVisible) {
|
||||
setFocus(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span ref={countUpRef} />
|
||||
</VisibilitySensor>
|
||||
)}
|
||||
</CountUp>{" "}
|
||||
</span>{" "}
|
||||
m
|
||||
</h2>
|
||||
<p className="font-rubik">{val.meta}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterThree;
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
import Image from "next/image";
|
||||
const counterUpContent = [
|
||||
{
|
||||
icon: "31",
|
||||
startCount: "0",
|
||||
endCount: "13",
|
||||
meta: "Ticket Sold",
|
||||
},
|
||||
{
|
||||
icon: "32",
|
||||
startCount: "0",
|
||||
endCount: "3000",
|
||||
meta: "Event organisers",
|
||||
},
|
||||
{
|
||||
icon: "33",
|
||||
startCount: "0",
|
||||
endCount: "134",
|
||||
meta: "Countries",
|
||||
},
|
||||
];
|
||||
|
||||
const CounterThreeColored = () => {
|
||||
const [focus, setFocus] = React.useState(false);
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
{counterUpContent.map((val, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
key={i}
|
||||
>
|
||||
<div className="counter-box-three">
|
||||
<div className="icon">
|
||||
<Image width={31} height={28} style={{objectFit:'contain'}} src={`/images/icon/${val.icon}.svg`} alt="icon" />
|
||||
</div>
|
||||
<h2 className="number">
|
||||
<span className="timer">
|
||||
{" "}
|
||||
<CountUp
|
||||
start={focus ? val.startCount : null}
|
||||
end={val.endCount}
|
||||
duration={1}
|
||||
redraw={true}
|
||||
>
|
||||
{({ countUpRef }) => (
|
||||
<VisibilitySensor
|
||||
onChange={(isVisible) => {
|
||||
if (isVisible) {
|
||||
setFocus(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span ref={countUpRef} />
|
||||
</VisibilitySensor>
|
||||
)}
|
||||
</CountUp>{" "}
|
||||
</span>{" "}
|
||||
m
|
||||
</h2>
|
||||
<p className="font-rubik">{val.meta}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterThreeColored;
|
||||
@@ -0,0 +1,78 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
|
||||
const counterUpContent = [
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "3",
|
||||
endPointText: "k",
|
||||
meta: "Job done successfully",
|
||||
animationDelay: "0",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "20",
|
||||
endPointText: "million",
|
||||
meta: "3,280 avg rating",
|
||||
animationDelay: "100",
|
||||
},
|
||||
{
|
||||
startCount: "0",
|
||||
endCount: "3000",
|
||||
endPointText: "+",
|
||||
meta: "Using Deski",
|
||||
animationDelay: "200",
|
||||
},
|
||||
];
|
||||
|
||||
const CounterTwo = () => {
|
||||
const [focus, setFocus] = React.useState(false);
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
{counterUpContent.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="counter-box-four">
|
||||
<h2 className="number">
|
||||
<span className="timer">
|
||||
{" "}
|
||||
<CountUp
|
||||
start={focus ? val.startCount : null}
|
||||
end={val.endCount}
|
||||
duration={1}
|
||||
redraw={true}
|
||||
>
|
||||
{({ countUpRef }) => (
|
||||
<VisibilitySensor
|
||||
onChange={(isVisible) => {
|
||||
if (isVisible) {
|
||||
setFocus(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span ref={countUpRef} />
|
||||
</VisibilitySensor>
|
||||
)}
|
||||
</CountUp>
|
||||
</span>
|
||||
{val.endPointText}
|
||||
</h2>
|
||||
<p className="font-rubik">{val.meta}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterTwo;
|
||||
@@ -0,0 +1,49 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from 'react'
|
||||
import ScrollspyNav from 'react-scrollspy-nav'
|
||||
|
||||
export default function DocScrollNav() {
|
||||
return (
|
||||
<nav className="d-none d-xl-block col-xl-2 doc-sideNav">
|
||||
<div className="wrapper">
|
||||
<nav className="main-side-nav">
|
||||
<ScrollspyNav
|
||||
scrollTargetIds={[
|
||||
"installing",
|
||||
"verifying",
|
||||
"manual-installation",
|
||||
"running-example",
|
||||
"launching-server",
|
||||
"loading-dialog",
|
||||
]}
|
||||
activeNavClass="active"
|
||||
offset={-90}
|
||||
scrollDuration="300"
|
||||
>
|
||||
<a href="#installing" className="nav-link">
|
||||
Installing Deski
|
||||
</a>
|
||||
<a href="#verifying" className="nav-link">
|
||||
Verifying Installation
|
||||
</a>
|
||||
<a href="#manual-installation" className="nav-link">
|
||||
Manual Installation
|
||||
</a>
|
||||
<a href="#running-example" className="nav-link">
|
||||
Running example website
|
||||
</a>
|
||||
<a href="#launching-server" className="nav-link">
|
||||
Launching the server
|
||||
</a>
|
||||
<a href="#loading-dialog" className="nav-link">
|
||||
Loading dialog
|
||||
</a>
|
||||
</ScrollspyNav>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import ScrollspyNav from 'react-scrollspy-nav'
|
||||
import React from 'react'
|
||||
|
||||
export default function DocScrollNavTwo() {
|
||||
return (
|
||||
<nav className="d-none d-xl-block col-xl-2 doc-sideNav">
|
||||
<div className="wrapper">
|
||||
<nav className="main-side-nav">
|
||||
<ScrollspyNav
|
||||
scrollTargetIds={[
|
||||
"installing",
|
||||
"verifying",
|
||||
"manual-installation",
|
||||
"running-example",
|
||||
"launching-server",
|
||||
"loading-dialog",
|
||||
]}
|
||||
activeNavClass="active"
|
||||
offset={-90}
|
||||
scrollDuration="300"
|
||||
>
|
||||
<a href="#installing" className="nav-link">
|
||||
Installing Deski
|
||||
</a>
|
||||
<a href="#verifying" className="nav-link">
|
||||
Verifying Installation
|
||||
</a>
|
||||
<a href="#manual-installation" className="nav-link">
|
||||
Manual Installation
|
||||
</a>
|
||||
<a href="#running-example" className="nav-link">
|
||||
Running example website
|
||||
</a>
|
||||
<a href="#launching-server" className="nav-link">
|
||||
Launching the server
|
||||
</a>
|
||||
<a href="#loading-dialog" className="nav-link">
|
||||
Loading dialog
|
||||
</a>
|
||||
</ScrollspyNav>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
|
||||
|
||||
'use client'
|
||||
import React, { useState } from "react";
|
||||
|
||||
import DocSidebarContent from "./DocSidebarContent";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function DocSidebar() {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
return (
|
||||
<div className="col-md-3 col-xl-2 doc-sidebar">
|
||||
<div className="clearfix">
|
||||
<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>
|
||||
<nav
|
||||
className={
|
||||
click
|
||||
? "doc-links collapse clearfix nav-fix show"
|
||||
: "doc-links collapse clearfix nav-fix"
|
||||
}
|
||||
id="doc-sidebar-nav"
|
||||
>
|
||||
<div className="search-form">
|
||||
<form onClick={handleSubmit}>
|
||||
<input type="text" placeholder="Search here.." />
|
||||
<button>
|
||||
<Image width="17" height="16" src="/images/icon/59.svg" alt="icon" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<DocSidebarContent />
|
||||
</nav>
|
||||
{/* /.doc-links */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from "react-accessible-accordion";
|
||||
import HeaderThree from "../header/HeaderThree";
|
||||
|
||||
const FaqContent = [
|
||||
{
|
||||
title: " Getting Started",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "Quick start",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: " Installation",
|
||||
activeClass: "active",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Site Preparation",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Manual Installation",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Publishing your site",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Deski",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "a",
|
||||
},
|
||||
{
|
||||
title: " Customization",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "Theme color",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: " Header",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Blog widget",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Theme Footer",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "b",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Layout",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "Box Layout",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Full width Layout",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "c",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Table of Content",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "HTML Structure",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Favicon Settings",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Logo Settings",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "CSS Structure",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "d",
|
||||
},
|
||||
|
||||
{
|
||||
title: "API",
|
||||
sidebarContent: [
|
||||
{
|
||||
itemName: "Getting started",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: " Subscriptions",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Invoices",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
itemName: "Refunds",
|
||||
activeClass: "",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
expand: "e",
|
||||
},
|
||||
];
|
||||
|
||||
const DocSidebarContent = () => {
|
||||
return (
|
||||
<div className="accordion-style-two doc-sidebar-menu">
|
||||
|
||||
{/* End Page SEO Content */}
|
||||
<HeaderThree />
|
||||
{/* End Header */}
|
||||
|
||||
<div className="faq-wrraper ">
|
||||
<Accordion preExpanded={["a"]} allowZeroExpanded>
|
||||
{FaqContent.map((item, i) => (
|
||||
<AccordionItem className="card" key={i} uuid={item.expand}>
|
||||
<AccordionItemHeading className="card-header">
|
||||
<AccordionItemButton>
|
||||
<h4 className="mb-0">
|
||||
<button className="btn btn-link">{item.title}</button>{" "}
|
||||
</h4>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
{/* Accordion Heading */}
|
||||
<AccordionItemPanel className="card-body fadeInUp">
|
||||
<ul className="sub-menu">
|
||||
{item.sidebarContent.map((val, i) => (
|
||||
<li key={i}>
|
||||
<a className={val.activeClass} href={val.link}>
|
||||
{val.itemName}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</AccordionItemPanel>
|
||||
{/* Accordion Body Content */}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocSidebarContent;
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
|
||||
'use client'
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import DocSidebarContent from "./DocSidebarContent";
|
||||
|
||||
export default function DocSidebarThree() {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
return (
|
||||
<div className="col-xl-3 col-md-4 doc-sidebar">
|
||||
<div className="clearfix">
|
||||
<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>
|
||||
<nav
|
||||
className={
|
||||
click
|
||||
? "doc-links collapse clearfix nav-fix show"
|
||||
: "doc-links collapse clearfix nav-fix"
|
||||
}
|
||||
id="doc-sidebar-nav"
|
||||
>
|
||||
<div className="search-form">
|
||||
<form onClick={handleSubmit}>
|
||||
<input type="text" placeholder="Search here.." />
|
||||
<button>
|
||||
<Image width={17} height={16} style={{height:'fit-content'}} src="/images/icon/59.svg" alt="icon" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<DocSidebarContent />
|
||||
</nav>
|
||||
{/* /.doc-links */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Link from "next/link";
|
||||
import { bestSellingItem } from "@/data/products";
|
||||
|
||||
const BestSelling = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrows: false,
|
||||
centerPadding: "0",
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{bestSellingItem.map((item) => (
|
||||
<div className="item" key={item.id}>
|
||||
<div className="product-block-two">
|
||||
<div className="img-holder">
|
||||
<Link
|
||||
href={`/products/${item.id}`}
|
||||
className="d-flex align-items-center justify-content-center h-100"
|
||||
>
|
||||
<Image width={372} height={356} style={{objectFit:'contain'}}
|
||||
src={`/images/shop/${item.img}.png`}
|
||||
alt="shop"
|
||||
className="product-img tran4s"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="/cart" className="cart-icon" title="Add To Cart">
|
||||
<i className="fa fa-shopping-cart" aria-hidden="true"></i>
|
||||
</Link>
|
||||
</div>
|
||||
{/* <!-- /.img-holder --> */}
|
||||
<div className="product-meta">
|
||||
<ul className="style-none d-flex justify-content-center rating">
|
||||
{item.ratings}
|
||||
</ul>
|
||||
<Link href={`/products/${item.id}`} className="product-title">
|
||||
{item.title}
|
||||
</Link>
|
||||
|
||||
<div className="price">${item.price}</div>
|
||||
</div>
|
||||
{/* <!-- /.product-meta --> */}
|
||||
</div>
|
||||
{/* <!-- /.product-block-two --> */}
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BestSelling;
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const CallToAction = () => {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row align-items-end">
|
||||
<div className="col-lg-6" data-aos="fade-right">
|
||||
<div className="title-style-eleven">
|
||||
<h2 className="pe-xl-5 me-xl-2">Signup & get 20% flat dicount</h2>
|
||||
<p className="pt-25 text-dark">
|
||||
Receive offers, product alerts, styling inspiration and more. By
|
||||
signing up, you agree to our Privacy Policy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-6" data-aos="fade-left">
|
||||
<div className="form-wrapper">
|
||||
<form onClick={handleSubmit}>
|
||||
<input type="email" placeholder="ihidago@ujufidnan.gov" />
|
||||
<button className="tran3s">
|
||||
<Image width={21} height={10} src="/images/icon/53.svg" alt="image" className="m-auto" />
|
||||
</button>
|
||||
</form>
|
||||
<p className="mt-15">
|
||||
Already a member?{" "}
|
||||
<Link href="/login" className="text-dark">
|
||||
Sign in.
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.form-wrapper --> */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToAction;
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
const CartDropdown = () => {
|
||||
const {cartProducts,totalPrice} = useContextElement()
|
||||
return (
|
||||
<>
|
||||
{cartProducts.length ?
|
||||
<ul className="style-none cart-product-list" style={{maxHeight:'400px',overflow:'scroll'}}>
|
||||
|
||||
{cartProducts.map((item,i)=>
|
||||
<li className="d-flex align-items-center selected-item">
|
||||
<Link
|
||||
href={`/products/${item.id}`}
|
||||
className="item-img d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<Image width={465} height={609} style={{height:'fit-content'}} src={`/images/shop/${item.img}.png`} alt="cart" />
|
||||
</Link>
|
||||
<div className="item-info">
|
||||
<Link href={`/products/${item.id}`} className="name">
|
||||
{item.name}
|
||||
</Link>
|
||||
<div className="price">
|
||||
${item.price.toFixed(2)} <span className="quantity">x {item.quantity}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.item-info --> */}
|
||||
</li>)}
|
||||
{/* <!-- /.selected-item --> */}
|
||||
|
||||
|
||||
{/* <!-- /.selected-item --> */}
|
||||
</ul> : <div style={{fontSize:'18px',margin:'15px auto'}} >Cart is empty</div>}
|
||||
{/* <!-- /.cart-product-list --> */}
|
||||
|
||||
<div className="subtotal d-flex justify-content-between align-items-center">
|
||||
<div className="title">Subtotal</div>
|
||||
<div className="total-price">${totalPrice.toFixed(2)}</div>
|
||||
</div>
|
||||
<ul className="style-none button-group">
|
||||
{cartProducts.length ? <>
|
||||
<li>
|
||||
<Link href="/cart" className="view-cart">
|
||||
View Cart
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/checkout" className="checkout">
|
||||
Checkout
|
||||
</Link>
|
||||
</li></> : <li>
|
||||
<Link href="/e-commerce" className="view-cart">
|
||||
Continue Shoping
|
||||
</Link>
|
||||
</li> }
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CartDropdown;
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
|
||||
const Categorie = () => {
|
||||
const categorieContent = [
|
||||
{
|
||||
id: 1,
|
||||
bgImage: "url(/images/shop/img_04.png)",
|
||||
title: "Kids",
|
||||
delayAnimation: "0",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
bgImage: "url(/images/shop/img_05.png)",
|
||||
title: "Woman",
|
||||
delayAnimation: "100",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
bgImage: "url(/images/shop/img_06.png)",
|
||||
title: "Man",
|
||||
delayAnimation: "200",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
bgImage: "url(/images/shop/img_07.png)",
|
||||
title: "Others",
|
||||
delayAnimation: "300",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
{categorieContent.map((item) => (
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay={item.delayAnimation}
|
||||
key={item.id}
|
||||
>
|
||||
<div
|
||||
className="SC_block_one d-flex flex-column justify-content-center align-items-center"
|
||||
style={{ backgroundImage: item.bgImage }}
|
||||
>
|
||||
<h3 className="tran3s">{item.title}</h3>
|
||||
<a href="#" className="sp-now-btn tran3s">
|
||||
Shop Now
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- /.SC_block_one --> */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Categorie;
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const FancyBlock = () => {
|
||||
const fancyBlockCotent = [
|
||||
{
|
||||
id: 1,
|
||||
icon: "203",
|
||||
title: "Free Shipping",
|
||||
text: `Simplify the process to create proposals.`,
|
||||
delayAnim: "0",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "204",
|
||||
title: "Free Return",
|
||||
text: `Return money within 7 days only!`,
|
||||
delayAnim: "100",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "205",
|
||||
title: "Secured Payment",
|
||||
text: `We ensure secure payment with PEV`,
|
||||
delayAnim: "200",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "206",
|
||||
title: "100% Safe",
|
||||
text: `We provide world best security system`,
|
||||
delayAnim: "300",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{fancyBlockCotent.map((item) => (
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay={item.delayAnim}
|
||||
key={item.id}
|
||||
>
|
||||
<div className="block-style-thirtyNine mt-40 text-center">
|
||||
<div className="icon rounded-circle d-flex align-items-center justify-content-center m-auto">
|
||||
<Image width={30} height={30} style={{objectFit:'contain'}} src={`/images/icon/${item.icon}.svg`} alt="icon" />
|
||||
</div>
|
||||
<h3>{item.title}</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">{item.text}</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyBlock;
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
|
||||
const FlashSaleBanner = () => {
|
||||
return (
|
||||
<div className="banner-bg row no-gutters" data-aos="fade-up">
|
||||
<div className="col-lg-6 right-half position-relative order-lg-2">
|
||||
<div className="fancy-text font-recoleta">45% Off</div>
|
||||
<div className="sale-text">FLASH SALE</div>
|
||||
<h3>
|
||||
Summer hit <br /> collection sale go on...
|
||||
</h3>
|
||||
<p className="pt-20 pb-35">Event will be continue till 23 Aug</p>
|
||||
<a href="#" className="shop-btn-two tran3s">
|
||||
Shop Now
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-6 left-half position-relative order-lg-1"
|
||||
style={{ background: "url(../images/media/img_125.jpg)" }}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlashSaleBanner;
|
||||
@@ -0,0 +1,58 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Gallery, Item } from "react-photoswipe-gallery";
|
||||
|
||||
const GalleryBox = () => {
|
||||
const gridGallery = [
|
||||
{
|
||||
id: 1,
|
||||
img: "/images/media/img_126.jpg",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: "/images/media/img_127.jpg",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: "/images/media/img_128.jpg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: "/images/media/img_129.jpg",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Gallery>
|
||||
<div className="row">
|
||||
{gridGallery.map((val) => (
|
||||
<div className="col-lg-3 col-6" key={val.id}>
|
||||
<div className="fancybox d-block w-100 mt-20">
|
||||
<Item
|
||||
original={val.img}
|
||||
thumbnail={val.img}
|
||||
width={400}
|
||||
height={394}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div className="gallery-link">
|
||||
<Image width={400} height={330} style={{width:'100%',height:'fit-content'}}
|
||||
src={val.img}
|
||||
alt="Trend Ui Gallery"
|
||||
className="w-100"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Gallery>
|
||||
);
|
||||
};
|
||||
|
||||
export default GalleryBox;
|
||||
@@ -0,0 +1,115 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState , useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import CartDropdown from "./CartDropdown";
|
||||
import Sidebar from "./Sidebar";
|
||||
import Image from "next/image";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
|
||||
const Header = () => {
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [click2, setClick2] = useState(false);
|
||||
const handleClick2 = () => setClick2(!click2);
|
||||
|
||||
const {cartProducts} = useContextElement()
|
||||
|
||||
const changeBackground = () => {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu bg-none theme-menu-eight fixed"
|
||||
: "theme-main-menu sticky-menu bg-none theme-menu-eight"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width="137" height="34" src="/images/logo/deski_10.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="right-widget d-flex align-items-center">
|
||||
<Link
|
||||
href="/login"
|
||||
className="signIn-action d-none d-sm-flex align-items-center"
|
||||
>
|
||||
<Image width="20" height="21" src="/images/icon/199.svg" alt="icon" className="me-2" />
|
||||
<span>login</span>
|
||||
</Link>
|
||||
|
||||
<div className="cart-group-wrapper position-relative">
|
||||
<button
|
||||
className="btn dropdown-toggle"
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Image width="24" height="24" src="/images/icon/200.svg" alt="image" className="m-auto" />
|
||||
<span className="item-count">{cartProducts.length}</span>
|
||||
</button>
|
||||
<div
|
||||
className={click ? "dropdown-cart cart-show" : "dropdown-cart"}
|
||||
>
|
||||
<CartDropdown />
|
||||
</div>
|
||||
</div>
|
||||
{/* End .cart-group-wrapper */}
|
||||
|
||||
<button className="sidebar-nav-button" onClick={handleClick2}>
|
||||
<Image width="20" height="20" src="/images/icon/201.svg" alt="icon" />
|
||||
</button>
|
||||
{/* sidebar nav toggle button */}
|
||||
|
||||
<div
|
||||
className={click2 ? "main-sidebar-nav show" : "main-sidebar-nav"}
|
||||
>
|
||||
<div className="offcanvas-header d-flex justify-content-between align-items-center">
|
||||
<div className="logo">
|
||||
<Link href="/" className="d-block">
|
||||
<Image width="137" height="34" src="/images/logo/deski_10.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="close-btn tran3s"
|
||||
onClick={handleClick2}
|
||||
>
|
||||
<i className="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
{/* offcanvas-header */}
|
||||
|
||||
<Sidebar />
|
||||
</div>
|
||||
{/* main-sidebar-nav */}
|
||||
</div>
|
||||
{/* <!-- /.right-widget --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const Hero = () => {
|
||||
return (
|
||||
<div className="hero-banner-fifteen lg-container">
|
||||
<div className="container">
|
||||
<div className="position-relative">
|
||||
<div className="row">
|
||||
<div className="col-xl-5 col-md-6">
|
||||
<h1 className="hero-heading font-recoleta" data-aos="fade-right">
|
||||
New Wineter Item.
|
||||
</h1>
|
||||
<p
|
||||
className="hero-sub-heading"
|
||||
data-aos="fade-right"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
We helping client to create websites with our talented expert.
|
||||
</p>
|
||||
<div
|
||||
className="d-sm-flex align-items-center"
|
||||
data-aos="fade-right"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<a href="#" className="shop-btn tran3s me-4">
|
||||
Shop Now
|
||||
</a>
|
||||
<a href="#" className="cart-btn tran3s">
|
||||
+
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
|
||||
<div className="product-img-holder" data-aos="fade-left">
|
||||
<Image width={1009} height={955} style={{height:'fit-content'}} src="/images/shop/img_03.png" alt="image" className="product-img" />
|
||||
<div className="offer-sticker d-flex flex-column align-items-center justify-content-center">
|
||||
<span className="sn1">30%</span>
|
||||
<span className="sn2">OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .product-img-holder */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,23 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import MobileMenu from "../header/MobileMenu";
|
||||
|
||||
|
||||
|
||||
const Sidebar = () => {
|
||||
|
||||
return (
|
||||
<div className="mega-menu-wrapper ecommer-sidebar-wrapper">
|
||||
<div>
|
||||
<div>
|
||||
<MobileMenu/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
@@ -0,0 +1,87 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Link from "next/link";
|
||||
import { topItemContent } from "@/data/products";
|
||||
|
||||
const TopItem = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrows: false,
|
||||
centerPadding: "0",
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{topItemContent.map((item) => (
|
||||
<div className="item" key={item.id}>
|
||||
<div className="product-block-one">
|
||||
<div className="img-holder">
|
||||
<Link
|
||||
href={`/products/${item.id}`}
|
||||
className="d-flex align-items-center justify-content-center h-100"
|
||||
>
|
||||
<Image width={305} height={370} style={{objectFit:'contain'}}
|
||||
src={`/images/shop/${item.img}.png`}
|
||||
alt="shop product"
|
||||
className="product-img tran4s"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="/cart" className="cart-icon" title="Add To Cart">
|
||||
<i className="fa fa-shopping-cart" aria-hidden="true"></i>
|
||||
</Link>
|
||||
<div className="tag-one">{item.tag}</div>
|
||||
</div>
|
||||
{/* <!-- /.img-holder --> */}
|
||||
|
||||
<div className="product-meta">
|
||||
<div className="d-lg-flex align-items-center justify-content-between">
|
||||
<Link href={`/products/${item.id}`} className="product-title">
|
||||
{item.title}
|
||||
</Link>
|
||||
<ul className="style-none d-flex rating">{item.ratings}</ul>
|
||||
</div>
|
||||
<div className="price">${item.price.toFixed(2)}</div>
|
||||
</div>
|
||||
{/* <!-- /.product-meta --> */}
|
||||
</div>
|
||||
{/* <!-- /.product-block-one --> */}
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopItem;
|
||||
@@ -0,0 +1,107 @@
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
import Link from "next/link";
|
||||
const CartProduct = () => {
|
||||
|
||||
const {cartProducts,
|
||||
setCartProducts} = useContextElement()
|
||||
const handleIncrease = (index) => {
|
||||
const item = cartProducts[index];
|
||||
|
||||
item.quantity += 1;
|
||||
const updated = [...cartProducts];
|
||||
updated[index] = item;
|
||||
|
||||
setCartProducts(updated);
|
||||
};
|
||||
const handleDecrease = (index) => {
|
||||
const item = cartProducts[index];
|
||||
|
||||
if (item.quantity > 1) {
|
||||
item.quantity -= 1;
|
||||
const updated = [...cartProducts];
|
||||
updated[index] = item;
|
||||
|
||||
setCartProducts(updated);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveCart = (index) => {
|
||||
const item = cartProducts[index];
|
||||
|
||||
setCartProducts((pre) => [...pre.filter((elm) => elm !== item)]);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
|
||||
{cartProducts.map((elm,i)=>
|
||||
<tr key={i} >
|
||||
<td className="product-thumbnails">
|
||||
<a href="#" className="product-img">
|
||||
<Image width={465} height={609} style={{width:'100%',height:'fit-content'}} src={`/images/shop/${elm.img}.png`} alt="image" />
|
||||
</a>
|
||||
</td>
|
||||
<td className="product-info">
|
||||
<Link href={`/products/${elm.id}`} className="product-name">
|
||||
{elm.title}
|
||||
</Link>
|
||||
<div className="serial">#859632007881</div>
|
||||
<ul className="style-none">
|
||||
<li className="size">Size: 23”</li>
|
||||
<li className="color">Color: Red</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className="price">
|
||||
<span>${elm.price.toFixed(2)}</span>
|
||||
</td>
|
||||
<td className="quantity">
|
||||
<ul className="order-box style-none">
|
||||
<li>
|
||||
<div onClick={()=>handleDecrease(i)} className="btn value-decrease">-</div>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="22"
|
||||
|
||||
value={elm.quantity}
|
||||
disabled
|
||||
className="product-value val"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<div onClick={()=>handleIncrease(i)} className="btn value-increase">+ </div>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className="price total-price">
|
||||
<span>${(elm.price * elm.quantity).toFixed(2)}</span>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" onClick={()=>handleRemoveCart(i)} className="remove-product">
|
||||
x
|
||||
</a>
|
||||
</td>
|
||||
</tr>)}
|
||||
|
||||
|
||||
{cartProducts.length ? <>
|
||||
</> : <button className="theme-btn-seven update-cart-button hoverPurple" style={{margin:'20px auto'}} >
|
||||
<Link style={{color:'inherit',margin:'0px',padding:'0px'}} href={'/e-commerce'}>
|
||||
Continue Shoping</Link>
|
||||
</button> }
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CartProduct;
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
const CartTotal = () => {
|
||||
const {totalPrice,cartProducts} = useContextElement()
|
||||
return (
|
||||
<>
|
||||
<table className="cart-total-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Subtotal</th>
|
||||
<td>${totalPrice.toFixed(2)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Shipping Cost</th>
|
||||
<td>${(cartProducts.length * 10).toFixed(2)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<td>${((cartProducts.length * 10) + (totalPrice)).toFixed(2)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{/* <!-- /.cart-total-table --> */}
|
||||
<Link href="/checkout" className="theme-btn-seven checkout-process mt-30">
|
||||
Checkout
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CartTotal;
|
||||
@@ -0,0 +1,27 @@
|
||||
'use client'
|
||||
|
||||
import { useContextElement } from "@/context/Context";
|
||||
import React from "react";
|
||||
|
||||
const Coupon = () => {
|
||||
const {cartProducts} = useContextElement()
|
||||
return (
|
||||
<div className="coupon-section d-flex flex-column">
|
||||
{!cartProducts.length ? <></> :
|
||||
<div className="coupon-form d-lg-flex align-items-center">
|
||||
<input type="text" placeholder="Enter your code" />
|
||||
<button className="theme-btn-seven md-mt-20 sm-mb-20">
|
||||
Apply Coupne
|
||||
</button>
|
||||
</div> }
|
||||
{/* <!-- /.coupon-form --> */}
|
||||
<div className="mt-auto">
|
||||
<button className="theme-btn-seven update-cart-button">
|
||||
Update cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Coupon;
|
||||
@@ -0,0 +1,106 @@
|
||||
import React from "react";
|
||||
|
||||
const BillingDetails = () => {
|
||||
return (
|
||||
<div className="user-profile-data">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="First Name*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Last Name*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Company Name*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<select className="theme-select-menu">
|
||||
<option defaultValue="">Country*</option>
|
||||
<option defaultValue="AF">Afghanistan</option>
|
||||
<option defaultValue="AX">Åland Islands</option>
|
||||
<option defaultValue="AL">Albania</option>
|
||||
<option defaultValue="DZ">Algeria</option>
|
||||
<option defaultValue="AS">American Samoa</option>
|
||||
<option defaultValue="AD">Andorra</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Street Address*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Town/City*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="State*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Zip Code*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email Address*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Phone Number*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<ul className="checkbox-list style-none">
|
||||
<li>
|
||||
<input type="checkbox" id="new-account" />
|
||||
<label htmlFor="new-account">Create Account?</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="shipping" />
|
||||
<label htmlFor="shipping">Ship to Different Address?</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="other-note-area">
|
||||
<p>Order Note (Optional)</p>
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
{/* <!-- /.other-note-area --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.row --> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BillingDetails;
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
|
||||
const CreditCard = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<h6>Card number</h6>
|
||||
<input type="number" />
|
||||
</div>
|
||||
<div className="col-8">
|
||||
<h6>Expiry date</h6>
|
||||
<div className="d-flex align-items-center">
|
||||
<input type="number" placeholder="MM" />
|
||||
<span>/</span>
|
||||
<input type="number" placeholder="YY" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-4 ms-auto">
|
||||
<h6>CVV</h6>
|
||||
<input type="number" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreditCard;
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
const LogIn = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<p className="card-header">
|
||||
Already have an account?{" "}
|
||||
<button className="d-inline-block collapsed" onClick={handleClick}>
|
||||
Click here to login.
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<form
|
||||
onClick={handleSubmit}
|
||||
id="login-form"
|
||||
className={click ? "collapse show" : "collapse"}
|
||||
>
|
||||
<p>Please enter your details below.</p>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<input type="text" placeholder="User name or email" required />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<input type="password" placeholder="Password" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="theme-btn-seven">Login</button>
|
||||
<a href="#" className="lost-passw">
|
||||
Lost your Password?
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogIn;
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
|
||||
const OrderDetails = () => {
|
||||
return (
|
||||
<table className="product-review">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
<span>Bluthooth Speaker</span>
|
||||
</th>
|
||||
<td>
|
||||
<span>$123.78</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<span>Subtotal</span>
|
||||
</th>
|
||||
<td>
|
||||
<span>$123.78</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<span>Shipping</span>
|
||||
</th>
|
||||
<td>
|
||||
<span>$5.00</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>
|
||||
<span>Total</span>
|
||||
</th>
|
||||
<td>
|
||||
<span>$128.00</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderDetails;
|
||||
@@ -0,0 +1,76 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
import CreditCard from "./CreditCard";
|
||||
|
||||
const Payment = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
|
||||
return (
|
||||
<div className="order-review">
|
||||
{/* <!-- /.product-review --> */}
|
||||
<div className="payment-option">
|
||||
<ul className="payment-list style-none">
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="paymenttype"
|
||||
defaultValue="directbank"
|
||||
defaultChecked="checked"
|
||||
className="payment-radio-button"
|
||||
id="directbank"
|
||||
/>
|
||||
<label htmlFor="directbank">Direct Bank Transfer</label>
|
||||
<p>
|
||||
Make your payment directly into our account. Plase use your Order
|
||||
ID as payment reference.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="paymenttype"
|
||||
defaultValue="paypal"
|
||||
id="paypal"
|
||||
className="payment-radio-button"
|
||||
/>
|
||||
<label htmlFor="paypal">PayPal</label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="paymenttype"
|
||||
value="creditCard"
|
||||
id="credit-card"
|
||||
className="payment-radio-button"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
<label>Credit Card</label>
|
||||
</li>
|
||||
<li className={click ? "credit-card-form show" : "credit-card-form"}>
|
||||
<CreditCard />
|
||||
</li>
|
||||
</ul>
|
||||
{/* <!-- /.payment-list --> */}
|
||||
</div>
|
||||
{/* <!-- /.payment-option --> */}
|
||||
|
||||
<p className="policy-text">
|
||||
Your personal data will be use for your order, support your experience
|
||||
through this website & for other purpose described in our privacy policy
|
||||
</p>
|
||||
<div className="agreement-checkbox">
|
||||
<input type="checkbox" id="agreement" />
|
||||
<label htmlFor="agreement">
|
||||
I have read and agree to the website terms and conditions*
|
||||
</label>
|
||||
</div>
|
||||
{/* <!-- /.agreement-checkbox --> */}
|
||||
|
||||
<button className="theme-btn-seven w-100">Place Order</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Payment;
|
||||
@@ -0,0 +1,34 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
const PromoCode = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<p className="card-header">
|
||||
Have a promo code?{" "}
|
||||
<button className="d-inline-block collapsed" onClick={handleClick}>
|
||||
Click to enter your code.
|
||||
</button>
|
||||
</p>
|
||||
<form
|
||||
onClick={handleSubmit}
|
||||
id="promo-code"
|
||||
className={click ? "collapse show" : "collapse"}
|
||||
>
|
||||
<p>Please enter your promo code below.</p>
|
||||
<input type="text" placeholder="Coupon code" />
|
||||
<button className="theme-btn-seven">Apply coupon</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromoCode;
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
const BreadCrumb = ({data}) => {
|
||||
return (
|
||||
<nav className="breadcrumb-style-one mt-20">
|
||||
<ol className="breadcrumb bg-white style-none m0 p0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link href="/">Home</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">
|
||||
<Link href="/e-commerce">Shop</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item active" aria-current="page">
|
||||
{data ? data.title:'Quilted Gilet With Hood'}
|
||||
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default BreadCrumb;
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from "react";
|
||||
|
||||
const Colors = () => {
|
||||
return (
|
||||
<ul className="style-none d-flex align-items-center color-custome-input">
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
defaultValue="color01"
|
||||
className="color-check-btn"
|
||||
defaultChecked="checked"
|
||||
/>
|
||||
<label style={{ background: "#9CD2FF" }}></label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
defaultValue="color02"
|
||||
className="color-check-btn"
|
||||
/>
|
||||
<label style={{ background: "#FF9153" }}></label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
defaultValue="color03"
|
||||
className="color-check-btn"
|
||||
/>
|
||||
<label style={{ background: "#5FF2BE" }}></label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
defaultValue="color04"
|
||||
className="color-check-btn"
|
||||
/>
|
||||
<label style={{ background: "#9A82FF" }}></label>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default Colors;
|
||||
@@ -0,0 +1,67 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const ProductFratureBlock = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="col-lg-3 col-sm-6" data-aos="fade-up">
|
||||
<div className="block-style-thirtyNine mt-40 text-center">
|
||||
<div className="icon rounded-circle d-flex align-items-center justify-content-center m-auto">
|
||||
<Image width="26" height="26" src="/images/icon/203.svg" alt="image" />
|
||||
</div>
|
||||
<h3>Free Shipping</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">
|
||||
Simplify the process to create proposals.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
<div className="block-style-thirtyNine mt-40 text-center">
|
||||
<div className="icon rounded-circle d-flex align-items-center justify-content-center m-auto">
|
||||
<Image width="30" height="31" src="/images/icon/204.svg" alt="image" />
|
||||
</div>
|
||||
<h3>Free Return</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">Return money within 7 days only!</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<div className="block-style-thirtyNine mt-40 text-center">
|
||||
<div className="icon rounded-circle d-flex align-items-center justify-content-center m-auto">
|
||||
<Image width="26" height="26" src="/images/icon/205.svg" alt="image" />
|
||||
</div>
|
||||
<h3>Secured Payment</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">We ensure secure payment with PEV</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="300"
|
||||
>
|
||||
<div className="block-style-thirtyNine mt-40 text-center">
|
||||
<div className="icon rounded-circle d-flex align-items-center justify-content-center m-auto">
|
||||
<Image width="34" height="34" src="/images/icon/206.svg" alt="image" />
|
||||
</div>
|
||||
<h3>100% Safe</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">
|
||||
We provide world best security system
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductFratureBlock;
|
||||
@@ -0,0 +1,135 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import ProductGalleryContent from "./ProductGalleryContent";
|
||||
import { Gallery, Item } from "react-photoswipe-gallery";
|
||||
|
||||
const ProductGallery = ({data}) => {
|
||||
return (
|
||||
<Gallery>
|
||||
<Tabs>
|
||||
<div className="row">
|
||||
<div className="col-lg-5 order-lg-2">
|
||||
<div className=" product-img-tab-content h-100 " style={{display:'flex',alignItems:'center',justifyContent:'center'}} >
|
||||
<TabPanel>
|
||||
<div className="h-100">
|
||||
<Item
|
||||
original= {`/images/shop/${data.img}.png`}
|
||||
thumbnail= {`/images/shop/${data.img}.png`}
|
||||
width={465}
|
||||
height={609}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div className="fancybox h-100 w-100 d-flex align-items-center justify-content-center">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src= {`/images/shop/${data.img}.png`}
|
||||
alt="Gallery"
|
||||
className="m-auto"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
</TabPanel>
|
||||
{/* End tabpanel */}
|
||||
|
||||
<TabPanel>
|
||||
<div className="h-100">
|
||||
<Item
|
||||
original="/images/shop/img_21.png"
|
||||
thumbnail="/images/shop/img_21.png"
|
||||
width={533}
|
||||
height={611}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div className="fancybox h-100 w-100 d-flex align-items-center justify-content-center">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src="/images/shop/img_21.png"
|
||||
alt="Gallery"
|
||||
className="m-auto"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
</TabPanel>
|
||||
{/* End tabpanel */}
|
||||
|
||||
<TabPanel>
|
||||
<div className="h-100">
|
||||
<Item
|
||||
original="/images/shop/img_22.png"
|
||||
thumbnail="/images/shop/img_22.png"
|
||||
width={395}
|
||||
height={588}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div className="fancybox h-100 w-100 d-flex align-items-center justify-content-center">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src="/images/shop/img_22.png"
|
||||
alt="Gallery"
|
||||
className="m-auto"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</div>
|
||||
</div>
|
||||
{/* End larget gallery */}
|
||||
|
||||
<div className="col-lg-1 order-lg-1">
|
||||
<TabList className="nav nav-tabs flex-lg-column product-img-tab">
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src= {`/images/shop/${data.img}.png`}
|
||||
alt="shop "
|
||||
className="m-auto"
|
||||
/>
|
||||
</button>
|
||||
</Tab>
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src="/images/shop/img_18.png"
|
||||
alt="shop "
|
||||
className="m-auto"
|
||||
/>
|
||||
</button>
|
||||
</Tab>
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src="/images/shop/img_19.png"
|
||||
alt="shop "
|
||||
className="m-auto"
|
||||
/>
|
||||
</button>
|
||||
</Tab>
|
||||
</TabList>
|
||||
</div>
|
||||
{/* End thumb gallery */}
|
||||
|
||||
<div className="col-lg-6 order-lg-3">
|
||||
<ProductGalleryContent data={data} />
|
||||
</div>
|
||||
{/* End product gallery content */}
|
||||
</div>
|
||||
</Tabs>
|
||||
</Gallery>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductGallery;
|
||||
@@ -0,0 +1,93 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Colors from "./Colors";
|
||||
import Quantity from "./Quantity";
|
||||
import Size from "./Size";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
const ProductGalleryContent = ({data}) => {
|
||||
const {addProductToCart,
|
||||
isAddedToCartProducts,} = useContextElement()
|
||||
return (
|
||||
<div className="product-info ps-xl-5 md-mt-50">
|
||||
<div className="stock-tag">In Stock</div>
|
||||
<h3 className="product-name">{data.title}</h3>
|
||||
<ul className="style-none d-flex align-items-center rating">
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star-o" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">(2 Customer Reviews)</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="price">${Math.round(data.price - 3).toFixed(2)} - ${Math.round(data.price + 3).toFixed(2)}</div>
|
||||
<p className="availability">38 Piece Available </p>
|
||||
<p className="description-text">
|
||||
Tote bag gochujang dreamcatcher fanny pack ban cold-pressed. Vape mlkshk
|
||||
sriracha marfa.{" "}
|
||||
</p>
|
||||
<ul className="product-feature style-none">
|
||||
<li>Free delivery available</li>
|
||||
<li>Use promo-code and save up to 25%</li>
|
||||
</ul>
|
||||
|
||||
<div className="customize-order">
|
||||
<div className="row">
|
||||
<div className="col-xl-11">
|
||||
<div className="row">
|
||||
<div className="col-lg-3 col-md-3 col-sm-4">
|
||||
<div className="quantity mt-25">
|
||||
<h6>Quantity</h6>
|
||||
<Quantity data={data} />
|
||||
</div>
|
||||
</div>
|
||||
{/* End Quantity */}
|
||||
|
||||
<div className="col-lg-3 col-md-3 col-sm-4">
|
||||
<div className="color-selection mt-25">
|
||||
<h6>Colors</h6>
|
||||
<Colors />
|
||||
</div>
|
||||
</div>
|
||||
{/* End colors */}
|
||||
|
||||
<div className="col-xl-5 col-md-6 col-sm-4">
|
||||
<div className="size-selection mt-25">
|
||||
<h6>Size</h6>
|
||||
<Size />
|
||||
</div>
|
||||
</div>
|
||||
{/* End Size */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.customize-order --> */}
|
||||
|
||||
<div className="button-group mt-30 d-sm-flex align-items-center">
|
||||
<span style={{cursor:'pointer'}} onClick={()=>addProductToCart(data.id)} className="cart-btn mt-15 me-sm-4 d-block">
|
||||
{isAddedToCartProducts(data.id) ? <Link style={{color:'inherit',padding:'0px',margin:'0px'}} href={'/cart'}>View Cart</Link>:'Add to Cart'}
|
||||
</span>
|
||||
<a href="#" className="wishlist-btn mt-15 d-block">
|
||||
Add To wishlist
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductGalleryContent;
|
||||
@@ -0,0 +1,151 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
|
||||
const ProductTabContent = () => {
|
||||
return (
|
||||
<div className="product-review-tab mt-150 lg-mt-100">
|
||||
<Tabs>
|
||||
<TabList className="nav nav-tabs">
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link">Description</button>
|
||||
</Tab>
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link ">Technical Info</button>
|
||||
</Tab>
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link "> Feedback</button>
|
||||
</Tab>
|
||||
</TabList>
|
||||
|
||||
<div className="tab-content mt-40 lg-mt-20">
|
||||
<TabPanel>
|
||||
<div className="row gx-5">
|
||||
<div className="col-xl-6">
|
||||
<h5>Specifications:</h5>
|
||||
<p>
|
||||
One touch of a red-hot stove is usually all we need to avoid
|
||||
that . The same is true as we experience in emotional
|
||||
sensation of stress from our first instances of social
|
||||
rejection ridicule.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<h5>Check product main features:</h5>
|
||||
<ul className="style-none product-feature">
|
||||
<li>
|
||||
Lorem ipsum best lightweight bra cool rejection avoid text
|
||||
</li>
|
||||
<li>Lightweight bras cool rejection quickly quis.</li>
|
||||
<li>
|
||||
We quickly learn to fear and automatically avoid potentially
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="row gx-5">
|
||||
<div className="col-xl-6">
|
||||
<h5>Check product main features:</h5>
|
||||
<ul className="style-none product-feature">
|
||||
<li>
|
||||
Lorem ipsum best lightweight bra cool rejection avoid text
|
||||
</li>
|
||||
<li>Lightweight bras cool rejection quickly quis.</li>
|
||||
<li>
|
||||
We quickly learn to fear and automatically avoid potentially
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<h5>Specifications:</h5>
|
||||
<p>
|
||||
One touch of a red-hot stove is usually all we need to avoid
|
||||
that . The same is true as we experience in emotional
|
||||
sensation of stress from our first instances of social
|
||||
rejection ridicule.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="user-comment-area">
|
||||
<div className="single-comment d-flex align-items-top">
|
||||
<Image width={60} height={60} style={{height:'fit-content'}}
|
||||
src="/images/shop/avatar_01.jpg"
|
||||
alt="image"
|
||||
className="user-img"
|
||||
/>
|
||||
<div className="user-comment-data">
|
||||
<h6 className="name">Rashed ka.</h6>
|
||||
<ul className="style-none d-flex rating">
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star-o" aria-hidden="true"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
One touch of a red-hot stove is usually all we need to avoid
|
||||
that kind of discomfort in future. The same true we
|
||||
experience the emotional sensation.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.user-comment-data --> */}
|
||||
</div>
|
||||
{/* <!-- /.single-comment --> */}
|
||||
<div className="single-comment d-flex align-items-top">
|
||||
<Image width={60} height={60} style={{height:'fit-content'}}
|
||||
src="/images/shop/avatar_02.jpg"
|
||||
alt="image"
|
||||
className="user-img"
|
||||
/>
|
||||
<div className="user-comment-data">
|
||||
<h6 className="name">Zubayer hasan</h6>
|
||||
<ul className="style-none d-flex rating">
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star-o" aria-hidden="true"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
One touch of a red-hot stove is usually all we need to avoid
|
||||
that kind of discomfort in future. The same true we
|
||||
experience the emotional sensation.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.user-comment-data --> */}
|
||||
</div>
|
||||
{/* <!-- /.single-comment --> */}
|
||||
</div>
|
||||
</TabPanel>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductTabContent;
|
||||
@@ -0,0 +1,88 @@
|
||||
|
||||
|
||||
'use client'
|
||||
|
||||
import { useContextElement } from "@/context/Context";
|
||||
import React from "react";
|
||||
|
||||
const Quantity = ({data}) => {
|
||||
|
||||
const { cartProducts, setCartProducts , isAddedToCartProducts } = useContextElement();
|
||||
|
||||
const handleIncrease = () => {
|
||||
const productQuantity = document.getElementById('productQuantity')
|
||||
productQuantity.value = Number(productQuantity.value) + 1
|
||||
if (isAddedToCartProducts(data.id) ) {
|
||||
|
||||
const cartItem = cartProducts.filter((elm)=>elm.id == data.id)[0]
|
||||
const itemIndex = cartProducts.indexOf(cartItem)
|
||||
const item = cartProducts[itemIndex];
|
||||
|
||||
item.quantity += 1;
|
||||
const updated = [...cartProducts];
|
||||
updated[itemIndex] = item;
|
||||
|
||||
|
||||
setCartProducts(updated);
|
||||
}
|
||||
};
|
||||
const handleQuantity = (e) => {
|
||||
if (isAddedToCartProducts(data.id)) {
|
||||
const cartItem = cartProducts.filter((elm)=>elm.id == data.id)[0]
|
||||
const itemIndex = cartProducts.indexOf(cartItem)
|
||||
const item = cartProducts[itemIndex];
|
||||
item.quantity = Number(e.target.value);
|
||||
const updated = [...cartProducts];
|
||||
updated[itemIndex] = item;
|
||||
|
||||
setCartProducts(updated);
|
||||
}
|
||||
}
|
||||
const handleDecrease = () => {
|
||||
const productQuantity = document.getElementById('productQuantity')
|
||||
productQuantity.value = Number(productQuantity.value) - 1
|
||||
if (isAddedToCartProducts(data.id)) {
|
||||
|
||||
const cartItem = cartProducts.filter((elm)=>elm.id == data.id)[0]
|
||||
|
||||
|
||||
const itemIndex = cartProducts.indexOf(cartItem)
|
||||
const item = cartProducts[itemIndex];
|
||||
|
||||
if (item.quantity > 1) {
|
||||
item.quantity -= 1;
|
||||
const updated = [...cartProducts];
|
||||
updated[itemIndex] = item;
|
||||
|
||||
|
||||
setCartProducts(updated);
|
||||
} }
|
||||
};
|
||||
return (
|
||||
<div className="button-group">
|
||||
<ul className="style-none d-flex align-items-center">
|
||||
<li>
|
||||
<button onClick={()=>handleDecrease()} className="value-decrease">-</button>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
|
||||
defaultValue={cartProducts.filter((elm)=>elm.id == data.id)[0] ? cartProducts.filter((elm)=>elm.id == data.id)[0].quantity : "1"}
|
||||
id="productQuantity"
|
||||
|
||||
|
||||
onChange={handleQuantity}
|
||||
className="product-value val"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={()=>handleIncrease()} className="value-increase">+ </button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Quantity;
|
||||
@@ -0,0 +1,86 @@
|
||||
'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 Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { bestSellingItem } from "@/data/products";
|
||||
const RelatedProducts = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrows: false,
|
||||
centerPadding: "0",
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{bestSellingItem.map((item) => (
|
||||
<div className="item" key={item.id}>
|
||||
<div className="product-block-two">
|
||||
<div className="img-holder">
|
||||
<Link
|
||||
href={`/products/${item.id}`}
|
||||
className="d-flex align-items-center justify-content-center h-100"
|
||||
>
|
||||
<Image width={465} height={609} style={{height:'fit-content'}}
|
||||
src={`/images/shop/${item.img}.png`}
|
||||
alt="shop"
|
||||
className="product-img tran4s"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="/cart" className="cart-icon" title="Add To Cart">
|
||||
<i className="fa fa-shopping-cart" aria-hidden="true"></i>
|
||||
</Link>
|
||||
</div>
|
||||
{/* <!-- /.img-holder --> */}
|
||||
<div className="product-meta">
|
||||
<ul className="style-none d-flex justify-content-center rating">
|
||||
{item.ratings}
|
||||
</ul>
|
||||
<Link href={`/products/${item.id}`} className="product-title">
|
||||
{item.title}
|
||||
</Link>
|
||||
|
||||
<div className="price">${item.price}</div>
|
||||
</div>
|
||||
{/* <!-- /.product-meta --> */}
|
||||
</div>
|
||||
{/* <!-- /.product-block-two --> */}
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RelatedProducts;
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
|
||||
const Size = () => {
|
||||
return (
|
||||
<ul className="style-none d-flex align-items-center size-custome-input">
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
defaultValue="small"
|
||||
className="size-check-btn"
|
||||
/>
|
||||
<label>S</label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
defaultValue="medium"
|
||||
className="size-check-btn"
|
||||
/>
|
||||
<label>M</label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
defaultValue="large"
|
||||
className="size-check-btn"
|
||||
/>
|
||||
<label>L</label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
defaultValue="extra large"
|
||||
className="size-check-btn"
|
||||
/>
|
||||
<label>XL</label>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default Size;
|
||||
@@ -0,0 +1,42 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
const SocialShare = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
|
||||
return (
|
||||
<div className="share-dropdown mt-20 position-relative">
|
||||
<button
|
||||
className="btn dropdown-toggle"
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
|
||||
<div className={click ? "dropdown-menu show" : "dropdown-menu"}>
|
||||
<ul className="d-flex justify-content-between social-icon style-none">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fa fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fa fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fa fa-pinterest"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SocialShare;
|
||||
@@ -0,0 +1,81 @@
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function FancyBanner() {
|
||||
// For header select menu
|
||||
const [selected, setSelected] = useState('')
|
||||
const [click1, setClick1] = useState(false);
|
||||
const handleClick1 = (elm) => {setClick1(!click1);
|
||||
setSelected(elm)}
|
||||
|
||||
return (
|
||||
<div className="fancy-short-banner-nine mt-170 md-mt-80">
|
||||
<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+ Customers have our deski.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 data-aos="fade-up" data-aos-duration="1200" data-aos-delay="150">
|
||||
<div
|
||||
className={
|
||||
click1 ? "dropdown download-btn show" : "dropdown download-btn"
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="dropdown-toggle"
|
||||
onClick={()=>setClick1(pre=>!pre)}
|
||||
type="button"
|
||||
>
|
||||
{selected || ' Get Deski app'}
|
||||
|
||||
</button>
|
||||
<div className={click1 ? "dropdown-menu show" : "dropdown-menu"}>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>handleClick1('IOS & Android')}
|
||||
>
|
||||
<Image width="22" height="22" src="/images/icon/103.svg" alt="icon" />
|
||||
<span>IOS & Android</span>
|
||||
</div>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
|
||||
onClick={()=>handleClick1('Mac & Windows')}
|
||||
>
|
||||
<Image width="20" height="20" src="/images/icon/104.svg" alt="icon" />
|
||||
<span>Mac & Windows</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.container */}
|
||||
<Image width="344" height="503"
|
||||
src="/images/shape/177.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="333" height="555"
|
||||
src="/images/shape/178.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
'use client'
|
||||
|
||||
import Tilt from "react-parallax-tilt";
|
||||
import React from 'react'
|
||||
import Image from "next/image";
|
||||
|
||||
export default function FancyFeature() {
|
||||
return (
|
||||
<div className="fancy-feature-fourteen mt-250 pt-80 md-mt-80">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-6 col-lg-7 col-md-8">
|
||||
<div className="title-style-six">
|
||||
<h6 style={{ color: "#FF2759", fontSize: "15" }}>
|
||||
Integrategration
|
||||
</h6>
|
||||
<h2>
|
||||
Connect App <br /> with the <span>Software</span> you use.
|
||||
</h2>
|
||||
<p className="text-xs pe-5 me-5">
|
||||
Lorem ipsum dolor on adipisci elit io quis sed do eiusmod tem.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.title-style-six */}
|
||||
</div>
|
||||
|
||||
<div className="col-lg-5 ms-auto">
|
||||
<div className="right-side md-mt-60">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<Tilt>
|
||||
<div className="logo-meta lg d-flex align-items-center justify-content-center ">
|
||||
<Image width="142" height="54" src="/images/logo/logo-17.svg" alt="logo" />
|
||||
</div>
|
||||
</Tilt>
|
||||
<Tilt>
|
||||
<div className="logo-meta d-flex align-items-center justify-content-center ">
|
||||
<Image width="146" height="37" src="/images/logo/logo-18.svg" alt="logo" />
|
||||
</div>
|
||||
</Tilt>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-md-6">
|
||||
<Tilt>
|
||||
<div className="logo-meta mt-40 d-flex align-items-center justify-content-center ">
|
||||
<Image width="162" height="50" src="/images/logo/logo-19.svg" alt="logo" />
|
||||
</div>
|
||||
</Tilt>
|
||||
<Tilt>
|
||||
<div className="logo-meta lg d-flex align-items-center justify-content-center ">
|
||||
<Image width="140" height="76" src="/images/logo/logo-20.svg" alt="logo" />
|
||||
<Image width="98" height="83"
|
||||
src="/images/shape/154.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
</div>
|
||||
</Tilt>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.right-side */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
|
||||
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
|
||||
|
||||
|
||||
|
||||
export default function FancyFeaturesTwo() {
|
||||
const [click1, setClick1] = useState(false);
|
||||
const [selected, setSelected] = useState('')
|
||||
const handleClick1 = (elm) => {setClick1(!click1);
|
||||
setSelected(elm)}
|
||||
|
||||
return (
|
||||
<div className="fancy-short-banner-eight mt-170 md-mt-80">
|
||||
<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>
|
||||
<span>200k+</span> Customers have our deski.Try it now!
|
||||
</h2>
|
||||
<p>Try it risk free — we don’t charge cancellation fees.</p>
|
||||
</div>
|
||||
{/* /.title-style-six */}
|
||||
</div>
|
||||
</div>
|
||||
<div data-aos="fade-up" data-aos-duration="1200" data-aos-delay="150">
|
||||
<div
|
||||
className={
|
||||
click1 ? "dropdown download-btn show" : "dropdown download-btn"
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="dropdown-toggle"
|
||||
onClick={()=>setClick1(pre=>!pre)}
|
||||
type="button"
|
||||
>
|
||||
{selected || ' Get Deski app'}
|
||||
</button>
|
||||
<div className={click1 ? "dropdown-menu show" : "dropdown-menu"}>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>handleClick1('IOS & Android')}
|
||||
>
|
||||
<Image width="22" height="22" src="/images/icon/103.svg" alt="icon" />
|
||||
<span>IOS & Android</span>
|
||||
</div>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>handleClick1('Mac & Windows')}
|
||||
>
|
||||
<Image width="20" height="20" src="/images/icon/104.svg" alt="icon" />
|
||||
<span>Mac & Windows</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.container */}
|
||||
<Image width="78" height="131"
|
||||
src="/images/shape/171.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="78" height="131"
|
||||
src="/images/shape/172.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import Tilt from "react-parallax-tilt";
|
||||
import React from 'react'
|
||||
import Image from "next/image";
|
||||
|
||||
export default function FancyShortBanner() {
|
||||
return (
|
||||
<div className="fancy-short-banner-seven mt-250 md-mt-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-8 col-lg-11 m-auto">
|
||||
<div className="title-style-six text-center">
|
||||
<h2>
|
||||
love our product? <span>Save $20</span> by grab it today.
|
||||
</h2>
|
||||
</div>
|
||||
{/* /.title-style-six */}
|
||||
<a
|
||||
href="#"
|
||||
className="d-flex align-items-center ios-button gr-bg-one hover-reverse-gr-bg-one"
|
||||
>
|
||||
<Image width="25" height="32" src="/images/icon/apple.svg" alt="icon" className="icon" />
|
||||
<div>
|
||||
<span>Download on the</span>
|
||||
<strong>App store</strong>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
{/* End .row */}
|
||||
<Tilt>
|
||||
<div className="screen-meta">
|
||||
<Image width={1160} height={340} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_10.png"
|
||||
alt="screen"
|
||||
className="m-auto"
|
||||
/>
|
||||
<Image width="104" height="89"
|
||||
src="/images/shape/165.svg"
|
||||
alt="screen"
|
||||
className="shapes shape-four"
|
||||
/>
|
||||
<Image width={324} height={324}
|
||||
src="/images/shape/166.png"
|
||||
alt="screen"
|
||||
className="shapes shape-five"
|
||||
/>
|
||||
</div>
|
||||
</Tilt>
|
||||
</div>
|
||||
{/* /.container */}
|
||||
|
||||
<Image width="12" height="12"
|
||||
src="/images/shape/162.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="15" height="15"
|
||||
src="/images/shape/163.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
<Image width="15" height="15"
|
||||
src="/images/shape/164.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function FancybBannerTen() {
|
||||
// For header select menu
|
||||
const [selected, setSelected] = useState('')
|
||||
const [click1, setClick1] = useState(false);
|
||||
const handleClick1 = (elm) => {setClick1(!click1);
|
||||
setSelected(elm)}
|
||||
return (
|
||||
<div className="fancy-short-banner-ten mt-170 md-mt-80">
|
||||
<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="text-center">
|
||||
<h2>Try Deski Free</h2>
|
||||
<p>
|
||||
After your 14-day trial of our Professional plan, enjoy the
|
||||
Free version of Calendly – forever.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.title-style-six */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
<div data-aos="fade-up" data-aos-duration="1200" data-aos-delay="150">
|
||||
<div
|
||||
className={
|
||||
click1 ? "dropdown download-btn show" : "dropdown download-btn"
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="dropdown-toggle"
|
||||
onClick={()=>setClick1(pre=>!pre)}
|
||||
type="button"
|
||||
>
|
||||
{selected || ' Get Deski app'}
|
||||
|
||||
</button>
|
||||
<div className={click1 ? "dropdown-menu show" : "dropdown-menu"}>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>handleClick1('IOS & Android')}
|
||||
>
|
||||
<Image width="22" height="22" src="/images/icon/103.svg" alt="icon" />
|
||||
<span>IOS & Android</span>
|
||||
</div>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
|
||||
onClick={()=>handleClick1('Mac & Windows')}
|
||||
>
|
||||
<Image width="20" height="20" src="/images/icon/104.svg" alt="icon" />
|
||||
<span>Mac & Windows</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End dropdown */}
|
||||
<div className="info-text">
|
||||
No Credit Card Required. Cancel Anytime
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.container */}
|
||||
<Image width="321" height="471"
|
||||
src="/images/shape/210.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="311" height="445"
|
||||
src="/images/shape/211.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const BlockMetaData = () => {
|
||||
const blockMetaCotent = [
|
||||
{
|
||||
_id: 1,
|
||||
icon: "01",
|
||||
title: "Create Project",
|
||||
metaHoverContent: ` Don’t waste time on tedious manual tasks. Let Automation do it for
|
||||
you. Simplify workflows, reduce errors, and save time for solving
|
||||
more.`,
|
||||
},
|
||||
{
|
||||
_id: 2,
|
||||
icon: "02",
|
||||
title: "Making Plan",
|
||||
metaHoverContent: ` Now it's more easy to make plan. Let Automation do it for you.
|
||||
Simplify workflows, reduce errors, and save time for solving more.`,
|
||||
},
|
||||
{
|
||||
_id: 3,
|
||||
icon: "03",
|
||||
title: "Create Wearframe",
|
||||
metaHoverContent: ` You are one step ahead to create wireframe. Let Automation do it for
|
||||
you. Simplify workflows.`,
|
||||
},
|
||||
{
|
||||
_id: 4,
|
||||
icon: "04",
|
||||
title: "Final Output",
|
||||
metaHoverContent: ` Checkout the final output. Let Automation do it for you. Simplify
|
||||
workflows, reduce errors, and save time for solving more.`,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
{blockMetaCotent.map((blockMeta) => (
|
||||
<div className="block-meta-data text-center" key={blockMeta._id}>
|
||||
<div className="line-dot-container">
|
||||
<div className="icon-box">
|
||||
<Image width={blockMeta._id == 1 ? 85 : 35} height={blockMeta._id == 1 ? 85 : 35} style={{objectFit:'contain'}} src={`/images/icon/${blockMeta.icon}.svg`} alt="icon" />
|
||||
</div>
|
||||
{/* /.icon-box */}
|
||||
<p>{blockMeta.title}</p>
|
||||
</div>
|
||||
<div className="hover-content">
|
||||
<span>{blockMeta.metaHoverContent}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlockMetaData;
|
||||
@@ -0,0 +1,64 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
import ModalVideo from "react-modal-video";
|
||||
|
||||
const FancyTextBlock21 = () => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<div className="row align-items-center">
|
||||
<div
|
||||
className="col-lg-6 col-md-7 m-auto"
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="img-meta">
|
||||
<Image width={703} height={676} style={{height:'fit-content'}} src="/images/media/img_72.png" alt="media" className="m-auto" />
|
||||
<Image width="291" height="296"
|
||||
src="/images/shape/138.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div
|
||||
className="col-xl-5 col-lg-6 ms-auto"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
<div className="text-wrapper md-pt-50">
|
||||
<a className="fancybox" onClick={() => setOpen(true)}>
|
||||
<Image width="66" height="66" src="/images/icon/71.svg" alt="icon" className="icon" />
|
||||
</a>
|
||||
|
||||
<div className="client-info">
|
||||
Over <span>150,000+ client</span>
|
||||
</div>
|
||||
<p>
|
||||
We created over <span>27,000+</span> stunning and quality products
|
||||
over last 5 years with satisfaction.
|
||||
</p>
|
||||
<div className="name">Carl Henderson</div>
|
||||
</div>
|
||||
{/* /.text-wrapper */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
autoplay
|
||||
isOpen={isOpen}
|
||||
videoId="FDaF8_5dzzk"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyTextBlock21;
|
||||
@@ -0,0 +1,66 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
import ModalVideo from "react-modal-video";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const FancyTextBlock22 = () => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<div className="row align-items-center">
|
||||
<div
|
||||
className="col-xl-5 col-lg-6 order-lg-last"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="text-wrapper md-pt-50">
|
||||
<a
|
||||
className="fancybox mb-20 md-mb-10"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<Image width="66" height="66" src="/images/icon/71.svg" alt="icon" className="icon" />
|
||||
</a>
|
||||
<div className="title-style-seven">
|
||||
<h2>
|
||||
Why you should <span>choose</span> Deski?
|
||||
</h2>
|
||||
</div>
|
||||
{/* /.title-style-seven */}
|
||||
<p>
|
||||
So how does it work? Let’s check our Getting Started tutorial
|
||||
pre-made templates.
|
||||
</p>
|
||||
<Link href="/product-customer-support" className="theme-btn-eight">
|
||||
Learn more
|
||||
</Link>
|
||||
</div>
|
||||
{/* /.text-wrapper */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div
|
||||
className="col-xl-7 col-lg-6 col-md-8 m-auto order-lg-first"
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="illustration-holder">
|
||||
<Image width="759" height="597" src="/images/assets/ils_21.svg" alt="about" />
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
autoplay
|
||||
isOpen={isOpen}
|
||||
videoId="FDaF8_5dzzk"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyTextBlock22;
|
||||
@@ -0,0 +1,137 @@
|
||||
import React from "react";
|
||||
import FancyFeatureTewentyEight from "../features/FancyFeatureTewentyEight";
|
||||
import FancyFeatureThirtyOne from "../features/FancyFeatureThirtyOne";
|
||||
import Image from "next/image";
|
||||
const featureList = [
|
||||
{
|
||||
icon: "157",
|
||||
title: "Drag Image & SVG",
|
||||
description: ` Create beautiful sites at breakneck speed without
|
||||
compromising on your creativit`,
|
||||
},
|
||||
{
|
||||
icon: "158",
|
||||
title: "Create Custom Field",
|
||||
description: `Keep your brand front & center with your customer`,
|
||||
},
|
||||
{
|
||||
icon: "159",
|
||||
title: "Custom Attribute",
|
||||
description: ` Increase your client retention rate by showing your results
|
||||
and value.`,
|
||||
},
|
||||
];
|
||||
|
||||
const FancyTextBlock29 = () => {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="block-style-thirty bottom-border pb-80 mb-170 md-pb-40 md-mb-90">
|
||||
<div className="row">
|
||||
<div className="col-xl-5 col-lg-6">
|
||||
<div className="text-block md-pb-60">
|
||||
<div className="feature">DRAG & DROP</div>
|
||||
<div className="title-style-nine mb-60 md-mb-40">
|
||||
<h2>Control all elements super easy.</h2>
|
||||
</div>
|
||||
|
||||
<ul className="feature-list-one">
|
||||
{featureList.map((list, i) => (
|
||||
<li key={i}>
|
||||
<Image width={35} height={35} style={{objectFit:'contain'}}
|
||||
src={`/images/icon/${list.icon}.svg`}
|
||||
alt="icon"
|
||||
className="icon"
|
||||
/>
|
||||
<strong>{list.title}</strong>
|
||||
<span>{list.description}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* End .feature-list-one */}
|
||||
|
||||
<a href="#" className="theme-btn-thirteen mt-20">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- /.text-block --> */}
|
||||
</div>
|
||||
<div className="col-xl-7 col-lg-6">
|
||||
<Image width={845} height={910} style={{height:'fit-content'}} src="/images/assets/screen_35.png" alt="screen" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirty --> */}
|
||||
|
||||
<div className="block-style-thirty">
|
||||
<div className="row">
|
||||
<div className="col-xl-5 col-lg-6 order-lg-last">
|
||||
<div className="text-block md-pb-60">
|
||||
<div className="feature">EMAIL & SMS BROADCAST</div>
|
||||
<div className="title-style-nine mb-45 md-mb-30">
|
||||
<h2>We have email, sms Broadcast for you.</h2>
|
||||
</div>
|
||||
<p>
|
||||
Broadcast and email is best use for something announcing
|
||||
significant changes .
|
||||
</p>
|
||||
<ul className="feature-list-two">
|
||||
<li>
|
||||
Makes them <span>purchase</span> your product, service and
|
||||
quis interact website due.
|
||||
</li>
|
||||
<li>
|
||||
Holds and catches their <span>attention</span> lorem.
|
||||
</li>
|
||||
<li>Diverts them to your brand.</li>
|
||||
</ul>
|
||||
<a href="#" className="theme-btn-thirteen mt-30">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- /.text-block --> */}
|
||||
</div>
|
||||
<div className="col-xl-7 col-lg-6 order-lg-first">
|
||||
<Image width={860} height={800} style={{height:'fit-content'}} src="/images/assets/screen_36.png" alt="screen" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirty --> */}
|
||||
|
||||
<div className="mt-80 pb-100 md-pb-80 bottom-border">
|
||||
<FancyFeatureTewentyEight />
|
||||
</div>
|
||||
|
||||
<div className="block-style-thirty mt-150 md-mt-90">
|
||||
<div className="row">
|
||||
<div className="col-xl-5 col-lg-6">
|
||||
<div className="text-block md-pb-60">
|
||||
<div className="feature">PRE-made template</div>
|
||||
<div className="title-style-nine mb-45">
|
||||
<h2>Pre-Made Stunning Templates.</h2>
|
||||
</div>
|
||||
<p className="pb-30">
|
||||
Feel free to choose from our huge selection of templates,
|
||||
customize easily, and create a stunning website for your
|
||||
customers
|
||||
</p>
|
||||
<a href="#" className="theme-btn-thirteen">
|
||||
See all Template
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- /.text-block --> */}
|
||||
</div>
|
||||
<div className="col-xl-7 col-lg-6">
|
||||
<Image width={883} height={683} style={{height:'fit-content'}} src="/images/assets/screen_37.png" alt="screen" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirty --> */}
|
||||
|
||||
<div className="mt-30">
|
||||
<FancyFeatureThirtyOne />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyTextBlock29;
|
||||
@@ -0,0 +1,87 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const FancyTextBlockTen = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="row align-items-end">
|
||||
<div
|
||||
className="col-xl-5 col-lg-6 ms-auto order-lg-last"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<Image width="58" height="42" src="/images/icon/34.svg" alt="image" className="icon" />
|
||||
<p className="font-rubik">
|
||||
Deski combines excellent live chat, ticketing and automation that
|
||||
allow us to provide quality.
|
||||
</p>
|
||||
<div className="name sm-mb-40">
|
||||
Mike Lucas.{" "}
|
||||
<span>
|
||||
CEO & Founder <br />
|
||||
deksi
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-6 order-lg-first">
|
||||
<div className="row align-items-end">
|
||||
<div
|
||||
className="col-6"
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
<Image width={291} height={311} style={{height:'fit-content'}} src="/images/media/img_25.png" alt="image" className="img-meta" />
|
||||
</div>
|
||||
<div
|
||||
className="col-6"
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<Image width={325} height={421} style={{height:'fit-content'}} src="/images/media/img_26.png" alt="image" className="img-meta" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-10 ms-auto">
|
||||
<div className="img-gallery mt-60 md-mt-20">
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-sm-5 sm-mb-20"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<Image width={446} height={311} style={{height:'fit-content'}}
|
||||
src="/images/media/img_27.png"
|
||||
alt="media"
|
||||
className="img-meta"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="col-sm-7"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
<Image width={566} height={382} style={{height:'fit-content'}}
|
||||
src="/images/media/img_28.png"
|
||||
alt="media"
|
||||
className="img-meta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.img-gallery */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyTextBlockTen;
|
||||
@@ -0,0 +1,115 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const FancyTextBlockThree = () => {
|
||||
return (
|
||||
<div className="row no-gutters">
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-content light-bg">
|
||||
<div className="header" data-aos="fade-up" data-aos-duration="1200">
|
||||
<h3>Individual</h3>
|
||||
<p className="font-rubik">
|
||||
Wzprenr Investor Network is a global community that extends the
|
||||
reach of leading
|
||||
</p>
|
||||
</div>
|
||||
{/* /.header */}
|
||||
|
||||
<div
|
||||
className="feature-list d-flex"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
<div className="icon-box d-flex align-items-center justify-content-center">
|
||||
<Image width="24" height="24" src="/images/icon/07.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="text-meta">
|
||||
<h4>Time well spent</h4>
|
||||
<p>
|
||||
Facilitates access to capital entrepreneurs through road show
|
||||
preparation.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.text-meta */}
|
||||
</div>
|
||||
{/* /.feature-list */}
|
||||
<div
|
||||
className="feature-list d-flex"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<div className="icon-box d-flex align-items-center justify-content-center">
|
||||
<Image width="24" height="24" src="/images/icon/08.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="text-meta">
|
||||
<h4>Quietly powerful</h4>
|
||||
<p>
|
||||
Let intuition be your guide. We get out of your way and fight
|
||||
the friction in your team’s workflow so you don’t have to.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.text-meta */}
|
||||
</div>
|
||||
{/* /.feature-list */}
|
||||
</div>
|
||||
{/* /.feature-content */}
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-content dark-bg">
|
||||
<div className="header" data-aos="fade-up" data-aos-duration="1200">
|
||||
<h3>Big Company</h3>
|
||||
<p className="font-rubik">
|
||||
Wzprenr Investor Network is a global community that extends the
|
||||
reach of leading
|
||||
</p>
|
||||
</div>
|
||||
{/* /.header */}
|
||||
|
||||
<div
|
||||
className="feature-list d-flex"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
<div className="icon-box d-flex align-items-center justify-content-center">
|
||||
<Image width="24" height="24" src="/images/icon/07.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="text-meta">
|
||||
<h4>Make your work easy</h4>
|
||||
<p>
|
||||
Remove the fog. We don’t want to be another task to complete or
|
||||
a tool to decipher.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.text-meta */}
|
||||
</div>
|
||||
{/* /.feature-list */}
|
||||
<div
|
||||
className="feature-list d-flex"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<div className="icon-box d-flex align-items-center justify-content-center">
|
||||
<Image width="24" height="24" src="/images/icon/08.svg" alt="icon" />
|
||||
</div>
|
||||
<div className="text-meta">
|
||||
<h4>Build together</h4>
|
||||
<p>
|
||||
Software is made better together. From task completion to
|
||||
product launch, we celebrate team wins big and small.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.text-meta */}
|
||||
</div>
|
||||
{/* /.feature-list */}
|
||||
</div>{" "}
|
||||
{/* /.feature-content */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyTextBlockThree;
|
||||
@@ -0,0 +1,59 @@
|
||||
'use client'
|
||||
import React from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from "react-accessible-accordion";
|
||||
|
||||
const FaqContent = [
|
||||
{
|
||||
title: " Register and create your first seller portal.",
|
||||
desc: ` It only takes 5 minutes. Set-up is smooth & simple, with fully
|
||||
customisable page design to reflect your brand lorem dummy.`,
|
||||
expand: "a",
|
||||
},
|
||||
{
|
||||
title: "Manage your client easily",
|
||||
desc: ` It only takes 5 minutes. Set-up is smooth & simple, with fully
|
||||
customisable page design to reflect your brand lorem dummy.`,
|
||||
expand: "b",
|
||||
},
|
||||
{
|
||||
title: "Start selling ticket",
|
||||
desc: ` It only takes 5 minutes. Set-up is smooth & simple, with fully
|
||||
customisable page design to reflect your brand lorem dummy.`,
|
||||
expand: "c",
|
||||
},
|
||||
];
|
||||
|
||||
const Faq = () => {
|
||||
return (
|
||||
<div className="accordion-style-two pe-5">
|
||||
<div className="faq-wrraper">
|
||||
<Accordion preExpanded={["a"]} allowZeroExpanded>
|
||||
{FaqContent.map((item, i) => (
|
||||
<AccordionItem className="card" key={i} uuid={item.expand}>
|
||||
<AccordionItemHeading className="card-header">
|
||||
<AccordionItemButton>
|
||||
<h5 className="mb-0">
|
||||
<button className="btn btn-link">{item.title}</button>{" "}
|
||||
</h5>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
{/* Accordion Heading */}
|
||||
<AccordionItemPanel className="card-body fadeInUp">
|
||||
<p>{item.desc}</p>
|
||||
</AccordionItemPanel>
|
||||
{/* Accordion Body Content */}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Faq;
|
||||
@@ -0,0 +1,122 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from "react-accessible-accordion";
|
||||
|
||||
const FaqContent = [
|
||||
{
|
||||
title: "How the affiliate programe works?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "a",
|
||||
},
|
||||
{
|
||||
title: "How delete my account?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "b",
|
||||
},
|
||||
{
|
||||
title: "How to invite people with refferel link?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "c",
|
||||
},
|
||||
{
|
||||
title: "Is ios app available for the iphone?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "d",
|
||||
},
|
||||
];
|
||||
const FaqContentTwo = [
|
||||
{
|
||||
title: " Do you recommend Pay as you go?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "e",
|
||||
},
|
||||
{
|
||||
title: " Can I pass the fees on to my customers?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "f",
|
||||
},
|
||||
{
|
||||
title: "How to create Signup?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "g",
|
||||
},
|
||||
{
|
||||
title: "What's the last dat of this offer?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "h",
|
||||
},
|
||||
];
|
||||
|
||||
const FaqClassic = () => {
|
||||
return (
|
||||
<div className="accordion-style-four">
|
||||
<div className="faq-wrraper">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<Accordion allowZeroExpanded>
|
||||
<div className="row">
|
||||
{FaqContent.map((item, i) => (
|
||||
<div className="col-lg-12" key={i}>
|
||||
<AccordionItem className="card">
|
||||
<AccordionItemHeading className="card-header">
|
||||
<AccordionItemButton>
|
||||
<h5 className="mb-0">
|
||||
<button className="btn btn-link">
|
||||
{item.title}
|
||||
</button>{" "}
|
||||
</h5>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
{/* Accordion Heading */}
|
||||
<AccordionItemPanel className="card-body fadeInUp">
|
||||
<p>{item.desc}</p>
|
||||
</AccordionItemPanel>
|
||||
{/* Accordion Body Content */}
|
||||
</AccordionItem>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Accordion>
|
||||
</div>
|
||||
{/* End.col */}
|
||||
|
||||
<div className="col-lg-6">
|
||||
<Accordion allowZeroExpanded>
|
||||
<div className="row">
|
||||
{FaqContentTwo.map((item, i) => (
|
||||
<div className="col-lg-12" key={i}>
|
||||
<AccordionItem className="card">
|
||||
<AccordionItemHeading className="card-header">
|
||||
<AccordionItemButton>
|
||||
<h5 className="mb-0">
|
||||
<button className="btn btn-link">
|
||||
{item.title}
|
||||
</button>{" "}
|
||||
</h5>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
{/* Accordion Heading */}
|
||||
<AccordionItemPanel className="card-body fadeInUp">
|
||||
<p>{item.desc}</p>
|
||||
</AccordionItemPanel>
|
||||
{/* Accordion Body Content */}
|
||||
</AccordionItem>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FaqClassic;
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from "react-accessible-accordion";
|
||||
|
||||
const FaqContent = [
|
||||
{
|
||||
title: "How does the free trial work?",
|
||||
desc: `It's free to use for your first five ticket sales. Once your sixth ticket purchase comes through we will start charging the standard PAYG rate. If you would like to move to Pre pay then head to "Billing" and "Buy ticket credits".`,
|
||||
expand: "a",
|
||||
},
|
||||
{
|
||||
title: "How do you different criteria in your process?",
|
||||
desc: `It's free to use for your first five ticket sales. Once your sixth ticket purchase comes through we will start charging the standard PAYG rate. If you would like to move to Pre pay then head to "Billing" and "Buy ticket credits".`,
|
||||
expand: "b",
|
||||
},
|
||||
{
|
||||
title: "What does First Round look for in an idea?",
|
||||
desc: `It's free to use for your first five ticket sales. Once your sixth ticket purchase comes through we will start charging the standard PAYG rate. If you would like to move to Pre pay then head to "Billing" and "Buy ticket credits".`,
|
||||
expand: "c",
|
||||
},
|
||||
{
|
||||
title: "What do you look for in a founding team?",
|
||||
desc: `It's free to use for your first five ticket sales. Once your sixth ticket purchase comes through we will start charging the standard PAYG rate. If you would like to move to Pre pay then head to "Billing" and "Buy ticket credits".`,
|
||||
expand: "d",
|
||||
},
|
||||
{
|
||||
title: "Do you recommend Pay as you go or Pre pay?",
|
||||
desc: `It's free to use for your first five ticket sales. Once your sixth ticket purchase comes through we will start charging the standard PAYG rate. If you would like to move to Pre pay then head to "Billing" and "Buy ticket credits".`,
|
||||
expand: "e",
|
||||
},
|
||||
{
|
||||
title: "Can I pass the fees on to my customers?",
|
||||
desc: `It's free to use for your first five ticket sales. Once your sixth ticket purchase comes through we will start charging the standard PAYG rate. If you would like to move to Pre pay then head to "Billing" and "Buy ticket credits".`,
|
||||
expand: "f",
|
||||
},
|
||||
{
|
||||
title: " How do I get paid for the tickets sold?",
|
||||
desc: `It's free to use for your first five ticket sales. Once your sixth ticket purchase comes through we will start charging the standard PAYG rate. If you would like to move to Pre pay then head to "Billing" and "Buy ticket credits".`,
|
||||
expand: "g",
|
||||
},
|
||||
];
|
||||
|
||||
const FaqClassicThree = () => {
|
||||
return (
|
||||
<div className="accordion-style-five md-mt-60">
|
||||
<div className="faq-wrraper">
|
||||
<Accordion allowZeroExpanded>
|
||||
{FaqContent.map((item, i) => (
|
||||
<AccordionItem className="card" key={i} uuid={item.expand}>
|
||||
<AccordionItemHeading className="card-header">
|
||||
<AccordionItemButton>
|
||||
<h5 className="mb-0">
|
||||
<button className="btn btn-link">{item.title}</button>{" "}
|
||||
</h5>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
{/* Accordion Heading */}
|
||||
<AccordionItemPanel className="card-body fadeInUp">
|
||||
<p>{item.desc}</p>
|
||||
</AccordionItemPanel>
|
||||
{/* Accordion Body Content */}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FaqClassicThree;
|
||||
@@ -0,0 +1,67 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from "react-accessible-accordion";
|
||||
|
||||
const FaqContent = [
|
||||
{
|
||||
title: "How the affiliate programe works?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "a",
|
||||
},
|
||||
{
|
||||
title: "How delete my account?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "b",
|
||||
},
|
||||
{
|
||||
title: "How to invite people with refferel link?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "c",
|
||||
},
|
||||
{
|
||||
title: "Is ios app available for the iphone?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "d",
|
||||
},
|
||||
{
|
||||
title: " How to create customer panel?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "e",
|
||||
},
|
||||
];
|
||||
|
||||
const FaqClassic = () => {
|
||||
return (
|
||||
<div className="accordion-style-four">
|
||||
<div className="faq-wrraper">
|
||||
<Accordion preExpanded={["b"]} allowZeroExpanded>
|
||||
{FaqContent.map((item, i) => (
|
||||
<AccordionItem className="card" key={i} uuid={item.expand}>
|
||||
<AccordionItemHeading className="card-header">
|
||||
<AccordionItemButton>
|
||||
<h5 className="mb-0">
|
||||
<button className="btn btn-link">{item.title}</button>{" "}
|
||||
</h5>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
{/* Accordion Heading */}
|
||||
<AccordionItemPanel className="card-body fadeInUp">
|
||||
<p>{item.desc}</p>
|
||||
</AccordionItemPanel>
|
||||
{/* Accordion Body Content */}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FaqClassic;
|
||||
@@ -0,0 +1,82 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from "react-accessible-accordion";
|
||||
|
||||
const FaqContent = [
|
||||
{
|
||||
title: "How does the free trial work?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "a",
|
||||
},
|
||||
{
|
||||
title: "How do you weigh different criteria in your process?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "b",
|
||||
},
|
||||
{
|
||||
title: " What does First Round look for in an idea?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "c",
|
||||
},
|
||||
{
|
||||
title: " What do you look for in a founding team?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "d",
|
||||
},
|
||||
{
|
||||
title: " Do you recommend Pay as you go or Pre pay?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "e",
|
||||
},
|
||||
{
|
||||
title: " Can I pass the fees on to my customers?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "f",
|
||||
},
|
||||
{
|
||||
title: "Roem ipsum dummy here will some questions?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
expand: "g",
|
||||
},
|
||||
];
|
||||
|
||||
const FaqFour = () => {
|
||||
return (
|
||||
<div
|
||||
className="accordion-style-four"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="faq-wrraper">
|
||||
<Accordion preExpanded={["b"]} allowZeroExpanded>
|
||||
{FaqContent.map((item, i) => (
|
||||
<AccordionItem className="card" key={i} uuid={item.expand}>
|
||||
<AccordionItemHeading className="card-header">
|
||||
<AccordionItemButton>
|
||||
<h5 className="mb-0">
|
||||
<button className="btn btn-link">{item.title}</button>{" "}
|
||||
</h5>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
{/* Accordion Heading */}
|
||||
<AccordionItemPanel className="card-body fadeInUp">
|
||||
<p>{item.desc}</p>
|
||||
</AccordionItemPanel>
|
||||
{/* Accordion Body Content */}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FaqFour;
|
||||
@@ -0,0 +1,87 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from "react-accessible-accordion";
|
||||
|
||||
const FaqContent = [
|
||||
{
|
||||
title: "How does the free trial work?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
},
|
||||
{
|
||||
title: "How do you weigh different criteria in your process?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
},
|
||||
{
|
||||
title: " What does First Round look for in an idea?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
},
|
||||
{
|
||||
title: " What do you look for in a founding team?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
},
|
||||
{
|
||||
title: " Do you recommend Pay as you go or Pre pay?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
},
|
||||
{
|
||||
title: " Can I pass the fees on to my customers?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
},
|
||||
{
|
||||
title: "Roem ipsum dummy text here will some questions?",
|
||||
desc: `mea case duis tollit et. Etiam nusquam set minium eu sea, ei tale paulo elab. Noluisse mnesarch Et is vero incorrupte eos deserunt quaeren.`,
|
||||
},
|
||||
{
|
||||
title: " How do I get paid for the tickets sold?",
|
||||
desc: `As a dealer, you are as yet in charge of chargebacks as the vendor account is possessed by you. ChargeMonk causes you with the correct apparatuses to convey regularly & impartunambiguously to keep away from chargebacks from your customers. Here are some extra resources on how to avoid chargebacks.`,
|
||||
},
|
||||
{
|
||||
title: "Do you invest in companies located outside of New York?",
|
||||
desc: `Yes, you will be able to at any time. It’s referred to as the "DBA name" ("Doing-Business-As"). Please contact your trader account provider/payment gateway to update the proper name.`,
|
||||
},
|
||||
{
|
||||
title: " How do i pay fees?",
|
||||
desc: `Yes, you will be able to at any time. It’s referred to as the "DBA name" ("Doing-Business-As"). Please contact your trader account provider/payment gateway to update the proper name.`,
|
||||
},
|
||||
];
|
||||
|
||||
const FaqThree = () => {
|
||||
return (
|
||||
<div className="accordion-style-three">
|
||||
<div className="faq-wrraper">
|
||||
<Accordion allowZeroExpanded>
|
||||
{FaqContent.map((item, i) => (
|
||||
<AccordionItem
|
||||
className="card"
|
||||
key={i}
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<AccordionItemHeading className="card-header">
|
||||
<AccordionItemButton>
|
||||
<h5 className="mb-0">
|
||||
<button className="btn btn-link">{item.title}</button>{" "}
|
||||
</h5>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
{/* Accordion Heading */}
|
||||
<AccordionItemPanel className="card-body fadeInUp">
|
||||
<p>{item.desc}</p>
|
||||
</AccordionItemPanel>
|
||||
{/* Accordion Body Content */}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FaqThree;
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
const FeaturesContent = [
|
||||
{
|
||||
img: "55",
|
||||
title: "Personal",
|
||||
desc: ` With deski docs, you can write, edit, and collaborate wherever you
|
||||
are. For Free.`,
|
||||
routePath: "/",
|
||||
dataDelay: "100",
|
||||
},
|
||||
{
|
||||
img: "57",
|
||||
title: "Business",
|
||||
desc: `The deski Docs you love with added security and control for teams.`,
|
||||
routePath: "/",
|
||||
dataDelay: "200",
|
||||
},
|
||||
];
|
||||
|
||||
const FancyFeatureEight = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
{FeaturesContent.map((val, i) => (
|
||||
<div
|
||||
className="col-md-6"
|
||||
key={i}
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={val.dataDelay}
|
||||
>
|
||||
<div className="block-style-ten">
|
||||
<div className="icon">
|
||||
<Image width={81} height={80} style={{objectFit:'contain'}} src={`/images/icon/${val.img}.svg`} alt="icon" />
|
||||
</div>
|
||||
<h6 className="title">{val.title}</h6>
|
||||
<p>{val.desc}</p>
|
||||
<Link href="about-pm">
|
||||
{" "}
|
||||
<Image width="49" height="18" src="/images/icon/56.svg" alt="icon" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* /.block-style-ten */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyFeatureEight;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user