testinomial
This commit is contained in:
npcdazai
BIN
src/assets/gsfcircle.png
Normal file
BIN
src/assets/gsfcircle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/properity.png
Normal file
BIN
src/assets/properity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/regccircle.png
Normal file
BIN
src/assets/regccircle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/wokacircle.png
Normal file
BIN
src/assets/wokacircle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -13,7 +13,7 @@ import tsx from "../../assets/typescript.png";
|
||||
const techStack = [
|
||||
{ name: "HTML", image: htmlpng },
|
||||
{ name: "React", image: reactjs },
|
||||
{ name: "Code Igniter", image: codeIgniter },
|
||||
{ name: "CodeIgniter", image: codeIgniter },
|
||||
{ name: "Java", image: java },
|
||||
{ name: "Angular", image: angular },
|
||||
{ name: "Vue", image: vue },
|
||||
@@ -38,150 +38,133 @@ const Hybrid = () => {
|
||||
bgColor="black"
|
||||
gap={3}
|
||||
px={{ base: "1rem", md: "2rem" }}
|
||||
>
|
||||
>
|
||||
<Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
|
||||
Front-End
|
||||
</Heading>
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
flexDirection="column"
|
||||
maxHeight="300px"
|
||||
overflowY="scroll"
|
||||
w="100%"
|
||||
>
|
||||
<Box display="flex" alignItems="center" flexDirection="column">
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection={{ base: "column", md: "column" }}
|
||||
flexDirection={{ base: "row", md: "row" }} // Stack items on mobile
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={4}
|
||||
py="2rem"
|
||||
flexWrap="wrap"
|
||||
flexWrap="wrap" // Ensure wrapping on smaller screens
|
||||
>
|
||||
{techStack.slice(0, 3).map((tech) => (
|
||||
{techStack.slice(0, 2).map((tech) => (
|
||||
<Box
|
||||
key={tech.name}
|
||||
w={{ base: "100%", sm: "288px" }}
|
||||
w={{ base: "110px", sm: "288px" }}
|
||||
h="99px"
|
||||
p="1.4rem"
|
||||
p="1rem"
|
||||
display="flex"
|
||||
bgColor="#0F0F0F"
|
||||
flexDirection="column"
|
||||
flexDirection="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
filter="grayscale(100%)"
|
||||
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
|
||||
>
|
||||
<Image src={tech.image} w="45.31px" h="50px" />
|
||||
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||
<Image src={tech.image} h="30px" />
|
||||
<Text fontSize="14px" fontWeight={400} color="#FFFFFF">
|
||||
{tech.name}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection={{ base: "column", md: "column" }}
|
||||
flexDirection={{ base: "row", md: "row" }}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={4}
|
||||
flexWrap="wrap"
|
||||
>
|
||||
{techStack.slice(3).map((tech) => (
|
||||
{techStack.slice(2).map((tech) => (
|
||||
<Box
|
||||
key={tech.name}
|
||||
w={{ base: "100%", sm: "288px" }}
|
||||
h="99px"
|
||||
p="1.4rem"
|
||||
display="flex"
|
||||
bgColor="#0F0F0F"
|
||||
flexDirection="column"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
filter="grayscale(100%)"
|
||||
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
|
||||
>
|
||||
<Image src={tech.image} w="45.31px" h="50px" />
|
||||
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||
{tech.name}
|
||||
</Text>
|
||||
</Box>
|
||||
key={tech.name}
|
||||
w={{ base: "110px", sm: "288px" }}
|
||||
h="99px"
|
||||
p="10px"
|
||||
display="flex"
|
||||
bgColor="#0F0F0F"
|
||||
flexDirection="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
filter="grayscale(100%)"
|
||||
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
|
||||
>
|
||||
<Image src={tech.image} h="30px" />
|
||||
<Text fontSize="14px" fontWeight={400} color="#FFFFFF">
|
||||
{tech.name}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Back-End Section */}
|
||||
<Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
|
||||
Back-End
|
||||
</Heading>
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
flexDirection="column"
|
||||
maxHeight="300px"
|
||||
overflowY="auto"
|
||||
w="100%"
|
||||
>
|
||||
<Box display="flex" alignItems="center" flexDirection="column">
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection={{ base: "column", md: "column" }}
|
||||
flexDirection={{ base: "row", md: "row" }}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={4}
|
||||
py="2rem"
|
||||
flexWrap="wrap"
|
||||
>
|
||||
{backEnd.slice(0, 3).map((tech) => (
|
||||
<Box
|
||||
key={tech.name}
|
||||
w={{ base: "100%", sm: "288px" }}
|
||||
h="99px"
|
||||
p="1.4rem"
|
||||
display="flex"
|
||||
bgColor="#0F0F0F"
|
||||
flexDirection="column"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
filter="grayscale(100%)"
|
||||
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
|
||||
>
|
||||
<Image src={tech.image} w="45.31px" h="50px" />
|
||||
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||
{tech.name}
|
||||
</Text>
|
||||
</Box>
|
||||
{backEnd.slice(0, 2).map((tech) => (
|
||||
<Box
|
||||
key={tech.name}
|
||||
w={{ base: "110px", sm: "288px" }}
|
||||
h="99px"
|
||||
p="1rem"
|
||||
display="flex"
|
||||
bgColor="#0F0F0F"
|
||||
flexDirection="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
filter="grayscale(100%)"
|
||||
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
|
||||
>
|
||||
<Image src={tech.image} h="30px" />
|
||||
<Text fontSize="14px" fontWeight={400} color="#FFFFFF">
|
||||
{tech.name}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection={{ base: "column", md: "column" }}
|
||||
flexDirection={{ base: "row", md: "row" }}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={4}
|
||||
flexWrap="wrap"
|
||||
>
|
||||
{backEnd.slice(3).map((tech) => (
|
||||
{backEnd.slice(2).map((tech) => (
|
||||
<Box
|
||||
key={tech.name}
|
||||
w={{ base: "100%", sm: "288px" }}
|
||||
h="99px"
|
||||
p="1.4rem"
|
||||
display="flex"
|
||||
bgColor="#0F0F0F"
|
||||
flexDirection="column"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
filter="grayscale(100%)"
|
||||
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
|
||||
>
|
||||
<Image src={tech.image} w="45.31px" h="50px" />
|
||||
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||
{tech.name}
|
||||
</Text>
|
||||
</Box>
|
||||
key={tech.name}
|
||||
w={{ base: "110px", sm: "288px" }}
|
||||
h="99px"
|
||||
p="1rem"
|
||||
display="flex"
|
||||
bgColor="#0F0F0F"
|
||||
flexDirection="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
filter="grayscale(100%)"
|
||||
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
|
||||
>
|
||||
<Image src={tech.image} h="30px" />
|
||||
<Text fontSize="14px" fontWeight={400} color="#FFFFFF">
|
||||
{tech.name}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -1,28 +1,58 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Box, Flex, Text, Image, Heading, HStack, Container } from "@chakra-ui/react";
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Text,
|
||||
Image,
|
||||
Heading,
|
||||
HStack,
|
||||
Container,
|
||||
} from "@chakra-ui/react";
|
||||
import simpletend from "../assets/simpletend.png";
|
||||
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
|
||||
import upperQuotes from "../assets/upperquotes.png";
|
||||
import lowerQuotes from "../assets/lowerqoutes.png";
|
||||
import regc from "../assets/regccircle.png"
|
||||
import wokacircle from "../assets/wokacircle.png"
|
||||
import gsfcircle from "../assets/gsfcircle.png"
|
||||
import prosperity from "../assets/properity.png"
|
||||
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
quote:
|
||||
"The team is professional and dedicated to the project; we feel they’re part of our own team.",
|
||||
"The team is professional and dedicated to the project; we feel they’re part of our own team. Although the app is still in development, we are impressed with WDI’s ability to solve problems quickly. The team is knowledgeable and professional; they’ve delivered everything they promised and communicated effectively through emails and Zoom calls. Customers can expect a great experience.",
|
||||
author: "Saeed Saatchi",
|
||||
role: "CEO & Founder, SimpliFiend",
|
||||
img :simpletend
|
||||
},
|
||||
{
|
||||
quote:
|
||||
"We had an excellent experience working with the team; they were highly skilled and collaborative.",
|
||||
author: "John Doe",
|
||||
role: "Product Manager, Example Corp",
|
||||
"Indeed, I am very happy with the quality of work carried out by Website Developers India Pvt. Ltd. They are prompt at work, and their team delivers on time with high-value solutions at affordable costs. Everything from them was outstanding in their delivery.",
|
||||
author: "Manvendra Kishor",
|
||||
role: "Director, WOKA",
|
||||
img :wokacircle
|
||||
},
|
||||
{
|
||||
quote:
|
||||
"Their commitment to the project was evident from the start, and they delivered exceptional results.",
|
||||
author: "Jane Smith",
|
||||
role: "CTO, Tech Innovations",
|
||||
"I'm so excited about the services offered by Website Developers India Pvt. Ltd. Their team did a great job and at cheaper rates. The supportive team at WDI helped in make my project more than I had expected. I would recommend them for web or app development services.",
|
||||
author: "Samantha Johnson",
|
||||
role: "Founder, prosperity.",
|
||||
img:prosperity
|
||||
},
|
||||
{
|
||||
quote:
|
||||
"I am very pleased with the services of WDI Their knowledgeable developers created a high-quality website for me at an affordable cost. The supportive team quickly solved any bugs arising in the project.",
|
||||
author: "Sophia Garcia,",
|
||||
role: "Founder, Regroup.",
|
||||
img :regc
|
||||
},
|
||||
{
|
||||
quote:
|
||||
"Indeed, I am very happy with the quality of work carried out by Website Developers India Pvt. Ltd. They are prompt at work, and their team delivers on time with high-value solutions at affordable costs. Everything from them was outstanding in their delivery.",
|
||||
author: "Shramesh Sharma",
|
||||
role: "Founder, GetSetFit.",
|
||||
img :gsfcircle
|
||||
},
|
||||
];
|
||||
|
||||
@@ -71,115 +101,124 @@ const Carousel = () => {
|
||||
}, []); // Empty dependency array ensures effect runs once on mount
|
||||
|
||||
return (
|
||||
<Container bgColor="black" maxW="container.2xl" overflow="hidden">
|
||||
<Heading fontWeight={600} fontSize="40px" textAlign="center" color="#ffff">Testimonial</Heading>
|
||||
<Flex
|
||||
w="full"
|
||||
bg="black"
|
||||
_dark={{
|
||||
bg: "#3e3e3e",
|
||||
}}
|
||||
py={"6rem"}
|
||||
// px={"3rem"}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Flex w="full" pos="relative">
|
||||
<Flex h="100%" w="100%" {...carouselStyle}>
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<Container bgColor="black" maxW="container.2xl" overflow="hidden" p={4}>
|
||||
|
||||
<Heading
|
||||
fontWeight={600}
|
||||
fontSize="40px"
|
||||
textAlign="center"
|
||||
color="#ffff"
|
||||
>
|
||||
Testimonial
|
||||
</Heading>
|
||||
<Flex
|
||||
w="full"
|
||||
bg="black"
|
||||
_dark={{
|
||||
bg: "#3e3e3e",
|
||||
}}
|
||||
py={"6rem"}
|
||||
// px={"3rem"}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Flex w="full" pos="relative" p={4}>
|
||||
<Flex h="100%" w="100%" {...carouselStyle}>
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<Box
|
||||
px="3rem"
|
||||
key={`slide-${index}`}
|
||||
flex="none"
|
||||
boxSize="full"
|
||||
shadow="md"
|
||||
>
|
||||
<Box
|
||||
px="3rem"
|
||||
key={`slide-${index}`}
|
||||
flex="none"
|
||||
boxSize="full"
|
||||
shadow="md"
|
||||
position="relative"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
>
|
||||
<Box
|
||||
position="relative"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
bgColor="#6D6D6D40"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
px="5rem"
|
||||
py="4rem"
|
||||
w="100%"
|
||||
h="300px"
|
||||
gap="1.1rem"
|
||||
borderRadius="10px"
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
bgColor="#6D6D6D40"
|
||||
p="4rem"
|
||||
w="100%"
|
||||
h="100%"
|
||||
gap="2rem"
|
||||
borderRadius="10px"
|
||||
<Heading
|
||||
mt="1rem"
|
||||
fontSize="20px"
|
||||
lineHeight="30px"
|
||||
fontWeight={600}
|
||||
color="#FFFFFF"
|
||||
>
|
||||
<Heading
|
||||
mt="1rem"
|
||||
fontSize="20px"
|
||||
lineHeight="30px"
|
||||
fontWeight={600}
|
||||
color="#FFFFFF"
|
||||
>
|
||||
“{testimonial.quote}”
|
||||
</Heading>
|
||||
<Text
|
||||
color="#E8155D"
|
||||
fontWeight={500}
|
||||
fontSize="18px"
|
||||
lineHeight="27px"
|
||||
>
|
||||
{testimonial.role}
|
||||
</Text>
|
||||
<Text
|
||||
color="#E8155D"
|
||||
fontWeight={500}
|
||||
fontSize="18px"
|
||||
lineHeight="27px"
|
||||
>
|
||||
{testimonial.author}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
p={2}
|
||||
bg="black"
|
||||
position="absolute"
|
||||
w="149px"
|
||||
h="149px"
|
||||
top="-80px"
|
||||
left="50%"
|
||||
transform="translateX(-50%)"
|
||||
borderRadius="50%"
|
||||
“{testimonial.quote}”
|
||||
</Heading>
|
||||
<Text
|
||||
color="#E8155D"
|
||||
fontWeight={500}
|
||||
fontSize="18px"
|
||||
lineHeight="20px"
|
||||
>
|
||||
<Image src={simpletend} w="129px" h="129px" />
|
||||
</Box>
|
||||
<Image
|
||||
src={lowerQuotes}
|
||||
w="99.15px"
|
||||
h="88.39px"
|
||||
position="absolute"
|
||||
bottom="-37"
|
||||
right="10px"
|
||||
/>
|
||||
<Image
|
||||
src={upperQuotes}
|
||||
w="99.15px"
|
||||
h="88.39px"
|
||||
position="absolute"
|
||||
top="-37"
|
||||
left="40px"
|
||||
/>
|
||||
{testimonial.role}
|
||||
</Text>
|
||||
<Text
|
||||
color="#E8155D"
|
||||
fontWeight={500}
|
||||
fontSize="18px"
|
||||
lineHeight="27px"
|
||||
>
|
||||
{testimonial.author}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
p={2}
|
||||
bg="black"
|
||||
position="absolute"
|
||||
w="149px"
|
||||
h="149px"
|
||||
top="-80px"
|
||||
left="50%"
|
||||
transform="translateX(-50%)"
|
||||
borderRadius="50%"
|
||||
>
|
||||
<Image src={testimonial.img} w="129px" h="129px" />
|
||||
</Box>
|
||||
<Image
|
||||
src={lowerQuotes}
|
||||
w="99.15px"
|
||||
h="88.39px"
|
||||
position="absolute"
|
||||
bottom="-37"
|
||||
right="10px"
|
||||
/>
|
||||
<Image
|
||||
src={upperQuotes}
|
||||
w="99.15px"
|
||||
h="88.39px"
|
||||
position="absolute"
|
||||
top="-37"
|
||||
left="40px"
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Flex>
|
||||
<Text {...arrowStyles} left="0" onClick={prevSlide}>
|
||||
<FaChevronLeft />
|
||||
</Text>
|
||||
<Text {...arrowStyles} right="0" onClick={nextSlide}>
|
||||
<FaChevronRight />
|
||||
</Text>
|
||||
|
||||
</Box>
|
||||
))}
|
||||
</Flex>
|
||||
<Text {...arrowStyles} left="0" onClick={prevSlide}>
|
||||
<FaChevronLeft />
|
||||
</Text>
|
||||
<Text {...arrowStyles} right="0" onClick={nextSlide}>
|
||||
<FaChevronRight />
|
||||
</Text>
|
||||
</Flex>
|
||||
</Container>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Container, Flex, Box, Text } from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
import Hybrid from "../../OS/Hybrid";
|
||||
import Hybrid from "../../OS/HybridMobile";
|
||||
|
||||
const HybridComponent = () => <Hybrid />;
|
||||
const IOSComponent = () => <div>IOS Content</div>;
|
||||
|
||||
Reference in New Issue
Block a user