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

services get responsive

Browse Source
This commit is contained in:
parsa aghaei 2024-09-24 13:55:22 +03:30
parent 23da4335f7
commit 677bffe219
3 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/_components/about-me/page.tsx
View File

@ -46,7 +46,7 @@ export default function AboutMe() {
className="my-20 flex w-full flex-wrap items-center justify-center gap-10 px-5"
id="about-me"
>
<div className="ms-0 flex w-full min-w-[300px] max-w-[80%] flex-col items-start md:w-[50%]">
<div className="ms-0 flex w-full min-w-[300px] max-w-[90%] flex-col items-start md:w-[50%]">
<h2 className="w-full text-[65px] font-[600] text-black">
{aboutMe?.title || <Skeleton width={300} height={100} />}
</h2>
@ -77,7 +77,7 @@ export default function AboutMe() {
</ul>
</div>
{aboutMe?.image ? (
<div className="flex w-full max-w-[80%] items-center justify-center md:w-[40%]">
<div className="flex w-full max-w-[90%] items-center justify-center md:w-[40%]">
<img src={aboutMe.image} alt="profile picture" className="" />
</div>
) : (

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

@ -38,24 +38,28 @@ export default function Services() {
};
fetchServices();
}, []);
if (loading) {
return (
<div className="flex flex-col items-center" id="services">
<div
className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
id="services"
>
<h2 className="my-10 text-[65px] font-[600] text-black">Services</h2>
<p className="w-[930px] text-center text-[21px] font-[400] text-black">
<p className="w-full text-center text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
lectus netus in. Aliquet donec morbi convallis pretium
</p>
<div className="service mt-20 flex w-[1420px] items-center justify-between gap-[30px]">
<div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-10">
{Array.from({ length: 4 }).map((_, index) => (
<div
key={index}
className="flex flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] w-full"
className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
>
<div className="my-5 flex w-full justify-center">
<Skeleton containerClassName={"w-[100px]"} height={120} />
</div>
<Skeleton containerClassName={"w-full"} height={32} />
<Skeleton containerClassName={"w-full"} height={60} />
</div>
@ -68,25 +72,28 @@ export default function Services() {
if (error) return <p>Error: {error}</p>;
return (
<div className="flex flex-col items-center" id="services">
<div
className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
id="services"
>
<h2 className="my-10 text-[65px] font-[600] text-black">Services</h2>
<p className="w-[930px] text-center text-[21px] font-[400] text-black">
<p className="w-full text-center text-[21px] font-[400] text-black">
Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
lectus netus in. Aliquet donec morbi convallis pretium
</p>
<div className="service mt-20 flex w-[1420px] items-center justify-between gap-[30px]">
<div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-10">
{services.map((service) => (
<div
key={service.id} // استفاده از id به عنوان کلید
className="flex flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px]"
className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
>
<div className="my-5 w-full">
<div className="my-5 flex w-full justify-center">
<img src={service.imageSrc} alt={service.altText} />
</div>
<h3 className="text-[32px] font-[600] text-black">
<h3 className="text-[24px] font-[700] text-black xl:text-[32px]">
{service.title}
</h3>
<p className="text-[19px] font-[400] text-black">
<p className="text-[15px] font-[400] text-black xl:text-[20px]">
{service.description}
</p>
</div>

2
src/app/page.tsx
View File

@ -59,7 +59,7 @@ export default function Home() {
</div>
</div>
{/* end */}
<div className="items flex w-full max-w-[80%] flex-col md:max-w-[70%] lg:w-[45%] xl:w-[50%]">
<div className="items flex w-full max-w-[90%] flex-col md:max-w-[70%] lg:w-[45%] xl:w-[50%]">
<p className="text-[20px] font-[400] text-black 2xl:text-[24px]">
Hi I am{" "}
</p>