From 4a973547c1cf11ffbf8b490c8952cc289f80fad0 Mon Sep 17 00:00:00 2001 From: parsa aghaei Date: Sun, 28 Jun 2026 22:07:02 +0330 Subject: [PATCH] fix: replace pink accent with orange, fix RTL overlap, improve contrast and typography --- .../components/aboutMe/AboutMeContent.tsx | 3 +- .../(website)/components/header/header.tsx | 2 +- .../(website)/components/hero/hero.tsx | 17 ++--- .../components/projects/projects.tsx | 67 +++++++++++++------ .../components/services/services.tsx | 2 +- .../components/testimonials/testimonials.tsx | 2 +- src/app/globals.css | 25 +++++-- 7 files changed, 75 insertions(+), 43 deletions(-) diff --git a/src/app/(routes)/(website)/components/aboutMe/AboutMeContent.tsx b/src/app/(routes)/(website)/components/aboutMe/AboutMeContent.tsx index a5bfa14..5c3df81 100644 --- a/src/app/(routes)/(website)/components/aboutMe/AboutMeContent.tsx +++ b/src/app/(routes)/(website)/components/aboutMe/AboutMeContent.tsx @@ -41,7 +41,7 @@ export default function AboutMeContent({ data }: AboutMeContentProps) { return (
{/* Text Section */} @@ -98,7 +98,6 @@ export default function AboutMeContent({ data }: AboutMeContentProps) { className="relative w-full max-w-[450px] flex justify-center lg:w-[40%]" >
-
{dict.website.header.Button} diff --git a/src/app/(routes)/(website)/components/hero/hero.tsx b/src/app/(routes)/(website)/components/hero/hero.tsx index b1f8191..deeeba2 100644 --- a/src/app/(routes)/(website)/components/hero/hero.tsx +++ b/src/app/(routes)/(website)/components/hero/hero.tsx @@ -15,9 +15,6 @@ export default function Hero({ dict }: HeroProps) { { href: "#", src: "/images/icons/linkedin.svg", alt: "linkedin" }, ]; - // Detect RTL - const isRTL = typeof document !== "undefined" && document.dir === "rtl"; - return (
{/* Image Section */}
{/* Glowing background effect */} @@ -76,9 +73,9 @@ export default function Hero({ dict }: HeroProps) { {/* Text Section */} @@ -109,7 +106,7 @@ export default function Hero({ dict }: HeroProps) { {dict.website.homePage.top.profession} - + {dict.website.homePage.top.roll} diff --git a/src/app/(routes)/(website)/components/projects/projects.tsx b/src/app/(routes)/(website)/components/projects/projects.tsx index cac274d..1523edf 100644 --- a/src/app/(routes)/(website)/components/projects/projects.tsx +++ b/src/app/(routes)/(website)/components/projects/projects.tsx @@ -34,6 +34,7 @@ export default function Projects({ dict }: MyProjectsProps) { const [categories, setCategories] = useState([]); const [projects, setProjects] = useState([]); const [selectedCategory, setSelectedCategory] = useState(""); + const [loading, setLoading] = useState(true); const locale = getCookie("selectedLocale") || getCookie("defaultLocale"); useEffect(() => { @@ -41,30 +42,36 @@ export default function Projects({ dict }: MyProjectsProps) { setSelectedCategory(initialCategory); const fetchProjects = async () => { - const res = await fetch( - `/api/website/projects/translation/${locale}?sort=desc&per_page=40`, - ); - const data = await res.json(); - const resProjects: Project[] = - (data.projects as ProjectResponse).data || []; - const resCategories: CategoryResponse[] = data.categories || []; + setLoading(true); + try { + const res = await fetch( + `/api/website/projects/translation/${locale}?sort=desc&per_page=40`, + ); + const data = await res.json(); + const resProjects: Project[] = + (data.projects as ProjectResponse).data || []; + const resCategories: CategoryResponse[] = data.categories || []; - setProjects(resProjects); + setProjects(resProjects); - const uniqueCategories: ProjectCategory[] = [ - { - label: initialCategory, - active: true, - }, - ...resCategories - .slice(0, MAX_CATEGORIES) - .map((category: CategoryResponse) => ({ - label: category.title, - active: false, - })), - ]; + const uniqueCategories: ProjectCategory[] = [ + { + label: initialCategory, + active: true, + }, + ...resCategories + .slice(0, MAX_CATEGORIES) + .map((category: CategoryResponse) => ({ + label: category.title, + active: false, + })), + ]; - setCategories(uniqueCategories); + setCategories(uniqueCategories); + } catch { + setProjects([]); + } + setLoading(false); }; fetchProjects(); @@ -205,7 +212,23 @@ export default function Projects({ dict }: MyProjectsProps) {
)) - : renderSkeletons(3)} + : loading + ? renderSkeletons(3) + : ( +
+
+ + + +
+

+ {locale === "fa" ? "پروژه‌ای یافت نشد" : "No projects found"} +

+

+ {locale === "fa" ? "در حال حاضر پروژه‌ای در این دسته‌بندی وجود ندارد. لطفاً دسته‌بندی دیگری را انتخاب کنید." : "No projects in this category yet. Please try another category."} +

+
+ )}
diff --git a/src/app/(routes)/(website)/components/services/services.tsx b/src/app/(routes)/(website)/components/services/services.tsx index fbc1859..85376d5 100644 --- a/src/app/(routes)/(website)/components/services/services.tsx +++ b/src/app/(routes)/(website)/components/services/services.tsx @@ -47,7 +47,7 @@ export default function Services({ dict }: ServicesProps) { transition={{ duration: 0.5, delay: (index || 0) * 0.1 }} viewport={{ once: true }} whileHover={{ y: -10 }} - className="group flex w-full flex-col items-start rounded-3xl glass-panel p-8 transition-all duration-300 hover:border-primary/50" + className="group flex h-full w-full flex-col items-start rounded-3xl glass-panel p-8 transition-all duration-300 hover:border-primary/50" >
{loading ? ( diff --git a/src/app/(routes)/(website)/components/testimonials/testimonials.tsx b/src/app/(routes)/(website)/components/testimonials/testimonials.tsx index 290d227..050791d 100644 --- a/src/app/(routes)/(website)/components/testimonials/testimonials.tsx +++ b/src/app/(routes)/(website)/components/testimonials/testimonials.tsx @@ -95,7 +95,7 @@ export default function Testimonials({ dict }: TestimonialsProps) { whileHover={{ y: -10 }} className="relative p-8 rounded-3xl glass-panel flex flex-col h-full" > -
+
diff --git a/src/app/globals.css b/src/app/globals.css index 7688ae9..4cac22f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -10,12 +10,12 @@ --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; - --primary: 340 80% 50%; /* Accent Pink/Red */ + --primary: 30 80% 50%; /* Accent Orange */ --primary-foreground: 0 0% 100%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; + --muted-foreground: 240 5% 30%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; @@ -33,12 +33,12 @@ --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; - --primary: 340 80% 60%; + --primary: 30 80% 60%; --primary-foreground: 0 0% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; + --muted-foreground: 240 5% 80%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; @@ -84,8 +84,21 @@ .mesh-gradient { background-image: - radial-gradient(at 0% 0%, hsla(340, 80%, 50%, 0.15) 0px, transparent 50%), + radial-gradient(at 0% 0%, hsla(30, 80%, 50%, 0.15) 0px, transparent 50%), radial-gradient(at 100% 0%, hsla(220, 80%, 50%, 0.15) 0px, transparent 50%), - radial-gradient(at 100% 100%, hsla(340, 80%, 50%, 0.15) 0px, transparent 50%), + radial-gradient(at 100% 100%, hsla(30, 80%, 50%, 0.15) 0px, transparent 50%), radial-gradient(at 0% 100%, hsla(220, 80%, 50%, 0.15) 0px, transparent 50%); } + +[dir="rtl"] body, +[dir="rtl"] p, +[dir="rtl"] span, +[dir="rtl"] li, +[dir="rtl"] h1, +[dir="rtl"] h2, +[dir="rtl"] h3, +[dir="rtl"] h4, +[dir="rtl"] h5, +[dir="rtl"] h6 { + font-family: var(--font-mikhak), ui-sans-serif, system-ui, sans-serif; +}