FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Pages/Testimonials/TestimonialsOne.js
+266
View File
@@ -0,0 +1,266 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import styles from "@/components/Pages/Testimonials/TestimonialsOne.module.css";
const Feedbacks = [
{
id: 1,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user1.png",
name: "Roberto",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 2,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user2.png",
name: "Ramon",
designation: 'UI/UX Designer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 3,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user3.png",
name: "Nathaniel",
designation: 'Angular Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 4,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user4.png",
name: "Milton",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 5,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user5.png",
name: "Antonio",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 6,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user6.png",
name: "Julian",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
]
const TestimonialsOne = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "30px",
mb: "30px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 600,
borderBottom: "1px solid #EEF0F7",
paddingBottom: "5px",
mb: "20px",
}}
className="for-dark-bottom-border"
>
Testimonials One
</Typography>
<Swiper
slidesPerView={1}
spaceBetween={30}
navigation={true}
breakpoints={{
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
992: {
slidesPerView: 3,
},
1400: {
slidesPerView: 4,
},
}}
modules={[Navigation]}
className="testimonialStyle1"
>
{Feedbacks.map((feedback) => (
<SwiperSlide key={feedback.id}>
<div className={styles.feedbackContent}>
<div className={styles.feedbackText}>
<q>
{feedback.feedbackText}
</q>
</div>
<div className={styles.feedbackImg}>
<div>
<img src={feedback.image} alt="Client" />
</div>
<div>
<h4>{feedback.name}</h4>
<p>{feedback.designation}</p>
<ul>
{feedback.ratings.map((rating) => (
<li key={rating.id}>
<i className={rating.icon}></i>
</li>
))}
</ul>
</div>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</Card>
</>
);
};
export default TestimonialsOne;
components/Pages/Testimonials/TestimonialsOne.module.css
+61
View File
@@ -0,0 +1,61 @@
.feedbackText {
background-color: #f2f1f3;
padding: 30px;
border-radius: 25px 25px 25px 0;
font-size: 16px;
margin-bottom: 20px;
}
.feedbackImg {
display: flex;
}
.feedbackImg img {
width: 50px;
height: 50px;
border-radius: 100%;
margin-right: 10px;
}
.feedbackImg h4 {
margin: 0 0 3px;
font-size: 14px;
}
.feedbackImg p {
margin: 0 0 5px;
font-size: 12px;
}
.feedbackImg ul {
margin: 0;
list-style-type: none;
padding: 0;
}
.feedbackImg ul li {
display: inline-block;
margin-right: 3px;
color: #ffc744;
}
.feedbackImg ul li:last-child {
margin-right: 0;
}
/* For RTL Style */
[dir="rtl"] .feedbackText {
border-radius: 25px 25px 0 25px;
}
[dir="rtl"] .feedbackImg img {
margin-right: 0;
margin-left: 10px;
}
[dir="rtl"] .feedbackImg ul li {
margin-right: 0;
margin-left: 3px;
}
[dir="rtl"] .feedbackImg ul li:last-child {
margin-left: 0;
}
/* For dark mode */
[class="dark"] .feedbackText {
background-color: var(--colorBlack);
}
[class="dark"] .feedbackText q {
color: var(--darkBodyTextColor);
}
components/Pages/Testimonials/TestimonialsThree.js
+265
View File
@@ -0,0 +1,265 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper";
import styles from "@/components/Pages/Testimonials/TestimonialsThree.module.css";
const Feedbacks = [
{
id: 1,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/member1.png",
name: "Roberto",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 2,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/member2.png",
name: "Ramon",
designation: 'UI/UX Designer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 3,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/member3.png",
name: "Nathaniel",
designation: 'Angular Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 4,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/member4.png",
name: "Milton",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 5,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/member5.png",
name: "Antonio",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 6,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/member6.png",
name: "Julian",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
]
const TestimonialsThree = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "30px",
mb: "30px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
borderBottom: "1px solid #EEF0F7",
paddingBottom: "5px",
mb: "20px",
}}
className="for-dark-bottom-border"
>
Testimonials Three
</Typography>
<Swiper
slidesPerView={1}
spaceBetween={30}
pagination={{
clickable: true,
}}
breakpoints={{
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1400: {
slidesPerView: 3,
},
}}
modules={[Pagination]}
className="testimonialStyle3"
>
{Feedbacks.map((feedback) => (
<SwiperSlide key={feedback.id}>
<div className={styles.feedbackContent}>
<div className={styles.feedbackText}>
<div className={styles.feedbackImg}>
<div>
<img src={feedback.image} alt="Client" />
</div>
<div>
<h4>{feedback.name}</h4>
<p>{feedback.designation}</p>
<ul>
{feedback.ratings.map((rating) => (
<li key={rating.id}>
<i className={rating.icon}></i>
</li>
))}
</ul>
</div>
</div>
<q>
{feedback.feedbackText}
</q>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</Card>
</>
);
};
export default TestimonialsThree;
components/Pages/Testimonials/TestimonialsThree.module.css
+48
View File
@@ -0,0 +1,48 @@
.feedbackContent {
text-align: center;
}
.feedbackText {
background-color: #f2f1f3;
padding: 40px 30px;
border-radius: 10px;
font-size: 16px;
margin-bottom: 20px;
}
.feedbackImg {
margin-bottom: 10px;
}
.feedbackImg img {
width: 100px;
height: 100px;
border-radius: 100%;
margin-bottom: 5px;
}
.feedbackImg h4 {
margin: 0 0 3px;
font-size: 18px;
}
.feedbackImg p {
margin: 0 0 5px;
font-size: 13px;
}
.feedbackImg ul {
margin: 0;
list-style-type: none;
padding: 0;
}
.feedbackImg ul li {
display: inline-block;
margin-right: 3px;
color: #ffc744;
}
.feedbackImg ul li:last-child {
margin-right: 0;
}
/* For dark mode */
[class="dark"] .feedbackText {
background-color: var(--colorBlack);
}
[class="dark"] .feedbackText q {
color: var(--darkBodyTextColor);
}
components/Pages/Testimonials/TestimonialsTwo.js
+269
View File
@@ -0,0 +1,269 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import styles from "@/components/Pages/Testimonials/TestimonialsTwo.module.css";
const Feedbacks = [
{
id: 1,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user1.png",
name: "Roberto",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 2,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user2.png",
name: "Ramon",
designation: 'UI/UX Designer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 3,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user3.png",
name: "Nathaniel",
designation: 'Angular Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 4,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user4.png",
name: "Milton",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 5,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user5.png",
name: "Antonio",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
{
id: 6,
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
image: "/images/user6.png",
name: "Julian",
designation: 'React Developer',
ratings: [
{
id: 1,
icon: "ri-star-fill",
},
{
id: 2,
icon: "ri-star-fill",
},
{
id: 3,
icon: "ri-star-fill",
},
{
id: 4,
icon: "ri-star-fill",
},
{
id: 5,
icon: "ri-star-fill",
}
]
},
]
const TestimonialsTwo = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "30px",
mb: "30px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
borderBottom: "1px solid #EEF0F7",
paddingBottom: "5px",
mb: "20px",
}}
className="for-dark-bottom-border"
>
Testimonials Two
</Typography>
<Swiper
slidesPerView={1}
spaceBetween={30}
navigation={true}
breakpoints={{
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
992: {
slidesPerView: 3,
},
1050: {
slidesPerView: 2,
},
1400: {
slidesPerView: 4,
},
}}
modules={[Navigation]}
className="testimonialStyle2"
>
{Feedbacks.map((feedback) => (
<SwiperSlide key={feedback.id}>
<div className={styles.feedbackContent}>
<div className={styles.feedbackText}>
<div className={styles.feedbackImg}>
<div>
<img src={feedback.image} alt="Client" />
</div>
<div>
<h4>{feedback.name}</h4>
<p>{feedback.designation}</p>
<ul>
{feedback.ratings.map((rating) => (
<li key={rating.id}>
<i className={rating.icon}></i>
</li>
))}
</ul>
</div>
</div>
<q>
{feedback.feedbackText}
</q>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</Card>
</>
);
};
export default TestimonialsTwo;
components/Pages/Testimonials/TestimonialsTwo.module.css
+59
View File
@@ -0,0 +1,59 @@
.feedbackText {
background-color: #f2f1f3;
padding: 40px 30px;
border-radius: 25px;
font-size: 16px;
margin-bottom: 20px;
}
.feedbackImg {
display: flex;
margin-bottom: 10px;
}
.feedbackImg img {
width: 50px;
height: 50px;
border-radius: 100%;
margin-right: 10px;
}
.feedbackImg h4 {
margin: 0 0 3px;
font-size: 14px;
}
.feedbackImg p {
margin: 0 0 5px;
font-size: 12px;
}
.feedbackImg ul {
margin: 0;
list-style-type: none;
padding: 0;
}
.feedbackImg ul li {
display: inline-block;
margin-right: 3px;
color: #ffc744;
}
.feedbackImg ul li:last-child {
margin-right: 0;
}
/* For RTL Style */
[dir="rtl"] .feedbackImg img {
margin-right: 0;
margin-left: 10px;
}
[dir="rtl"] .feedbackImg ul li {
margin-right: 0;
margin-left: 3px;
}
[dir="rtl"] .feedbackImg ul li:last-child {
margin-left: 0;
}
/* For dark mode */
[class="dark"] .feedbackText {
background-color: var(--colorBlack);
}
[class="dark"] .feedbackText q {
color: var(--darkBodyTextColor);
}