parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

testimonial gets responsive

Browse Source
This commit is contained in:
parsa aghaei 2024-09-24 15:04:19 +03:30
parent 06f0bba18b
commit 1349b9b28e
3 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/_components/my-projects/page.tsx
View File

@ -73,7 +73,10 @@ export default function MyProjects() {
: groupedProjects[selectedCategory]?.slice(0, 6) || []; // Get first 6 projects from selected category : groupedProjects[selectedCategory]?.slice(0, 6) || []; // Get first 6 projects from selected category
return ( return (
<div className="flex w-full flex-wrap items-center max-w-[90%] justify-center" id="projects"> <div
className="flex w-full max-w-[90%] flex-wrap items-center justify-center"
id="projects"
>
<h2 className="my-10 text-[65px] font-[600] text-black">My Projects</h2> <h2 className="my-10 text-[65px] font-[600] text-black">My Projects</h2>
<p className="text-justify text-[21px] font-[400] text-black"> <p className="text-justify text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
@ -85,7 +88,7 @@ export default function MyProjects() {
<li <li
key={index} key={index}
onClick={() => setSelectedCategory(category.label)} onClick={() => setSelectedCategory(category.label)}
className={`select-none rounded-md border whitespace-nowrap border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[18px] font-[600] hover:cursor-pointer hover:border-[#FD6F00] ${ className={`select-none whitespace-nowrap rounded-md border border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[18px] font-[600] hover:cursor-pointer hover:border-[#FD6F00] ${
selectedCategory === category.label selectedCategory === category.label
? "bg-[#FD6F00] text-[#FFFFFF]" ? "bg-[#FD6F00] text-[#FFFFFF]"
: "text-[#000]" : "text-[#000]"
@ -106,8 +109,11 @@ export default function MyProjects() {
<div className="flex flex-wrap items-start justify-center gap-8"> <div className="flex flex-wrap items-start justify-center gap-8">
{filteredProjects.length > 0 ? ( {filteredProjects.length > 0 ? (
filteredProjects.map((project, index) => ( filteredProjects.map((project, index) => (
<div key={index} className="project flex w-[45%] md:w-[30%] flex-wrap"> <div
<div className="relative my-5 h-[200px] md:h-[250px] lg:h-[300px] w-full overflow-hidden bg-[#FFEBDB]"> key={index}
className="project flex w-[45%] flex-wrap md:w-[30%]"
>
<div className="relative my-5 h-[200px] w-full overflow-hidden bg-[#FFEBDB] md:h-[250px] lg:h-[300px]">
{project.images.map((image, idx) => ( {project.images.map((image, idx) => (
<img <img
key={idx} key={idx}
@ -117,10 +123,10 @@ export default function MyProjects() {
/> />
))} ))}
</div> </div>
<h5 className="w-full text-[15px] lg:text-[20px] font-[600] text-[#FD6F00]"> <h5 className="w-full text-[15px] font-[600] text-[#FD6F00] lg:text-[20px]">
{project.category} {project.category}
</h5> </h5>
<p className="text-[18px] lg:text-[22px] font-[800] text-black hover:cursor-pointer"> <p className="text-[18px] font-[800] text-black hover:cursor-pointer lg:text-[22px]">
{project.title} {project.title}
</p> </p>
</div> </div>

4
src/app/_components/services/page.tsx
View File

@ -53,14 +53,14 @@ export default function Services() {
<img src={service!.imageSrc} alt={service!.altText} /> <img src={service!.imageSrc} alt={service!.altText} />
)} )}
</div> </div>
<h3 className="text-[24px] font-[700] text-black xl:text-[32px] w-full"> <h3 className="w-full text-[24px] font-[700] text-black xl:text-[32px]">
{loading ? ( {loading ? (
<Skeleton containerClassName={"w-full"} height={32} /> <Skeleton containerClassName={"w-full"} height={32} />
) : ( ) : (
service!.title service!.title
)} )}
</h3> </h3>
<p className="text-[15px] font-[400] text-black xl:text-[20px] w-full"> <p className="w-full text-[15px] font-[400] text-black xl:text-[20px]">
{loading ? ( {loading ? (
<Skeleton containerClassName={"w-full"} height={60} /> <Skeleton containerClassName={"w-full"} height={60} />
) : ( ) : (

28
src/app/_components/testimonials/page.tsx
View File

@ -48,28 +48,32 @@ export default function Testimonials() {
]; ];
return ( return (
<div className="flex flex-col items-center" id="testimonials"> <div
<h2 className="my-10 text-[65px] font-[600] text-black">Testominials</h2> className="flex w-full max-w-[90%] flex-wrap justify-center"
<p className="w-[930px] text-center text-[21px] font-[400] text-black"> id="testimonials"
>
<h2 className="text-[65px] font-[600] text-black">Testominials</h2>
<p className="my-10 text-justify text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
est risus lectus. Phasellus consequat urna tellus est risus lectus. Phasellus consequat urna tellus
</p> </p>
<div className="mt-10 flex max-w-[1800px] select-none items-center justify-center gap-[30px] overflow-hidden hover:cursor-grab"> <div className="flex select-none flex-wrap items-center justify-center gap-8 overflow-hidden hover:cursor-grab">
{testimonials.map((testimonial, index) => ( {testimonials.map((testimonial, index) => (
<div <div
className={`flex min-w-[800px] items-center justify-around gap-10 rounded-lg bg-[#F8F8F8] p-[25px] ${ className={`flex w-full max-w-[600px] flex-wrap items-center justify-around gap-3 rounded-lg bg-[#F8F8F8] p-5 ${
currentIndex === index ? "" : "blur-[2px]" currentIndex === index ? "" : "blur-[2px]"
}`} }`}
key={index} key={index}
> >
<Image <div className="flex w-full justify-center sm:w-[30%]">
<img
src={testimonial.image} src={testimonial.image}
width={235} className="w-[100px] sm:w-[150px]"
height={235}
alt="user profile picture" alt="user profile picture"
/> />
<div className="flex flex-wrap items-center"> </div>
<p className="mb-5 w-full text-[21px] font-[400] text-black"> <div className="flex w-full flex-wrap items-center sm:w-[60%]">
<p className="mb-3 w-full text-justify text-[15px] font-[400] text-black">
<span className="me-2 text-[21px] font-[700] text-[#FD6F00]"> <span className="me-2 text-[21px] font-[700] text-[#FD6F00]">
“ “
</span> </span>
@ -79,10 +83,10 @@ export default function Testimonials() {
“ “
</span> </span>
</p> </p>
<h5 className="w-full text-[24px] font-[500] text-[#000]"> <h5 className="w-full text-[20px] font-[700] text-[#000]">
{testimonial.name} {testimonial.name}
</h5> </h5>
<p className="w-full text-[19px] font-[400] text-[#000]"> <p className="w-full text-[15px] font-[400] text-[#000]">
{testimonial.position} {testimonial.position}
</p> </p>
</div> </div>