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
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>
<p className="text-justify text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
@ -85,7 +88,7 @@ export default function MyProjects() {
<li
key={index}
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
? "bg-[#FD6F00] text-[#FFFFFF]"
: "text-[#000]"
@ -106,8 +109,11 @@ export default function MyProjects() {
<div className="flex flex-wrap items-start justify-center gap-8">
{filteredProjects.length > 0 ? (
filteredProjects.map((project, index) => (
<div key={index} className="project flex w-[45%] md:w-[30%] flex-wrap">
<div className="relative my-5 h-[200px] md:h-[250px] lg:h-[300px] w-full overflow-hidden bg-[#FFEBDB]">
<div
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) => (
<img
key={idx}
@ -117,10 +123,10 @@ export default function MyProjects() {
/>
))}
</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}
</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}
</p>
</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} />
)}
</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 ? (
<Skeleton containerClassName={"w-full"} height={32} />
) : (
service!.title
)}
</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 ? (
<Skeleton containerClassName={"w-full"} height={60} />
) : (

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

@ -48,28 +48,32 @@ export default function Testimonials() {
];
return (
<div className="flex flex-col items-center" id="testimonials">
<h2 className="my-10 text-[65px] font-[600] text-black">Testominials</h2>
<p className="w-[930px] text-center text-[21px] font-[400] text-black">
<div
className="flex w-full max-w-[90%] flex-wrap justify-center"
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
est risus lectus. Phasellus consequat urna tellus
</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) => (
<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]"
}`}
key={index}
>
<Image
src={testimonial.image}
width={235}
height={235}
alt="user profile picture"
/>
<div className="flex flex-wrap items-center">
<p className="mb-5 w-full text-[21px] font-[400] text-black">
<div className="flex w-full justify-center sm:w-[30%]">
<img
src={testimonial.image}
className="w-[100px] sm:w-[150px]"
alt="user profile picture"
/>
</div>
<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>
@ -79,10 +83,10 @@ export default function Testimonials() {
“
</span>
</p>
<h5 className="w-full text-[24px] font-[500] text-[#000]">
<h5 className="w-full text-[20px] font-[700] text-[#000]">
{testimonial.name}
</h5>
<p className="w-full text-[19px] font-[400] text-[#000]">
<p className="w-full text-[15px] font-[400] text-[#000]">
{testimonial.position}
</p>
</div>