fix: replace pink accent with orange, fix RTL overlap, improve contrast and typography

2026-06-28 22:07:02 +03:30 · 2026-06-28 22:07:02 +03:30 · 4a973547c1
commit 4a973547c1
parent 8c2c63904a
7 changed files with 75 additions and 43 deletions
--- 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 (
    <section
-      className="relative flex w-full max-w-[1200px] flex-col items-center justify-center gap-12 py-20 lg:flex-row"
+      className="relative flex w-full max-w-[1200px] flex-col items-center justify-center gap-12 py-20 lg:flex-row lg:gap-16"
      id="about-me"
    >
      {/* 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%]"
      >
        <div className="relative group">
-          <div className="absolute -inset-4 bg-gradient-to-tr from-primary to-purple-600 rounded-3xl blur opacity-20 group-hover:opacity-40 transition duration-500"></div>
          <div className="relative overflow-hidden rounded-3xl border-4 border-background shadow-2xl">
            <Image
              src={process.env.NEXT_PUBLIC_BACK_URL + data.image}
--- a/src/app/(routes)/(website)/components/header/header.tsx
+++ b/src/app/(routes)/(website)/components/header/header.tsx
@ -64,7 +64,7 @@ export default async function Header() {
          href="/Parsa Aghayi CV Resume.pdf"
          download
          target="_blank"
-          className="hidden sm:flex items-center justify-center whitespace-nowrap rounded-full bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground shadow-[0_0_20px_rgba(255,84,128,0.3)] transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,84,128,0.5)] hover:scale-105 active:scale-95"
+          className="hidden sm:flex items-center justify-center whitespace-nowrap rounded-full bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground shadow-[0_0_20px_rgba(253,111,0,0.3)] transition-all duration-300 hover:shadow-[0_0_30px_rgba(253,111,0,0.5)] hover:scale-105 active:scale-95"
        >
          {dict.website.header.Button}
        </a>
--- 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 (
    <section 
      id="home" 
@ -25,11 +22,11 @@ export default function Hero({ dict }: HeroProps) {
    >
      {/* Image Section */}
      <motion.div 
-        initial={{ opacity: 0, x: isRTL ? 50 : -50 }}
-        whileInView={{ opacity: 1, x: 0 }}
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        viewport={{ once: true }}
-        className="relative z-10 flex w-full max-w-[500px] flex-col items-center justify-center lg:w-[45%] xl:w>[50%]"
+        className="relative z-10 flex w-full max-w-[500px] flex-shrink-0 flex-col items-center justify-center lg:w-[45%] xl:w-[50%]"
      >
        <div className="relative group">
          {/* Glowing background effect */}
@ -76,9 +73,9 @@ export default function Hero({ dict }: HeroProps) {

      {/* Text Section */}
      <motion.div 
-        initial={{ opacity: 0, x: isRTL ? -50 : 50 }}
-        whileInView={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease: "easeOut", delay: 0.1 }}
        viewport={{ once: true }}
        className="flex w-full max-w-[700px] flex-col items-start text-start"
      >
@ -109,7 +106,7 @@ export default function Hero({ dict }: HeroProps) {
          <span className="text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold tracking-tighter text-foreground leading-tight">
            {dict.website.homePage.top.profession}
          </span>
-          <span className="text-3xl md:text-5xl lg:text-6xl xl:text-7xl font-mono font-bold text-primary/80 tracking-tighter leading-tight italic">
+          <span className="text-xl md:text-2xl lg:text-3xl xl:text-4xl font-mono font-bold text-primary/80 tracking-tighter leading-tight italic">
            {dict.website.homePage.top.roll}
          </span>
        </motion.div>
--- 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<ProjectCategory[]>([]);
  const [projects, setProjects] = useState<Project[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<string>("");
+  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) {
                  </div>
                </motion.div>
              ))
-            : renderSkeletons(3)}
+            : loading
+              ? renderSkeletons(3)
+              : (
+                <div className="col-span-full flex flex-col items-center justify-center py-20 text-center">
+                  <div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center mb-6">
+                    <svg className="w-10 h-10 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                    </svg>
+                  </div>
+                  <h3 className="text-xl font-bold text-foreground mb-2">
+                    {locale === "fa" ? "پروژه‌ای یافت نشد" : "No projects found"}
+                  </h3>
+                  <p className="text-muted-foreground max-w-md">
+                    {locale === "fa" ? "در حال حاضر پروژه‌ای در این دسته‌بندی وجود ندارد. لطفاً دسته‌بندی دیگری را انتخاب کنید." : "No projects in this category yet. Please try another category."}
+                  </p>
+                </div>
+              )}
        </AnimatePresence>
      </motion.div>
    </section>
--- 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"
    >
      <div className="mb-6 relative overflow-hidden rounded-2xl w-20 h-20 bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
        {loading ? (
--- 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"
          >
-            <div className="absolute -top-6 -left-6 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg">
+            <div className="absolute -top-6 -start-6 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg">
              <Quote className="w-6 h-6" />
            </div>
            
--- 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;
+}