feat(ui): update UI v1

frontend/src/components/home/FeaturedProjects.tsx

@@ -1,22 +1,23 @@
 import React, { useState } from 'react'
-import { ArrowLeftIcon } from 'lucide-react'
+
 import { AnimatePresence, motion } from 'framer-motion'
 import { Reveal } from '../Reveal'
-import { ButtonLink } from '../Button'
+import { PremiumButton } from '../PremiumButton'
 import { ProjectCard } from '../ProjectCard'
 import { SectionHeading } from '../SectionHeading'
 import { useSectionHeading, useSite, useStatusLabel } from '../../api'
 import { useFieldSaver } from '../../admin/AdminContext'
 import { useLang } from '../../i18n/lang'
 import { InlineEdit } from '../admin/InlineEdit'
-import { AddItemButton, EditableItem } from '../../admin/Editable'
 import type { ProjectStatus } from '../../data/site'
+import { projectsData } from '../../data/projectsData'
 
 export function FeaturedProjects() {
-  const { projects, status_labels } = useSite()
+  const { status_labels } = useSite()
   const { t, href } = useLang()
   const heading = useSectionHeading('featured_projects')
   const save = useFieldSaver()
+
   const saveStatusLabel = (key: string, value: string) => {
     const label = status_labels.find((s) => s.key === key)
     if (!label) return
@@ -30,8 +31,12 @@ export function FeaturedProjects() {
     { key: 'done', label: useStatusLabel('done') },
     { key: 'progress', label: useStatusLabel('progress') },
   ]
+  
   const [status, setStatus] = useState<ProjectStatus>('done')
-  const list = projects.filter((p) => p.status === status).slice(0, 3)
+  
+  // Filter and slice static project data
+  const list = projectsData.filter((p) => p.status === status).slice(0, 3)
+  const BASE_IMG_URL = "/seed-media/2026/09/";
 
   return (
     <section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
@@ -44,7 +49,6 @@ export function FeaturedProjects() {
             const isSelected = status === filter.key
             return (
               <React.Fragment key={filter.key}>
-                {/* خط جداکننده بین دکمه‌ها */}
                 {index > 0 && (
                   <span className="h-6 w-[2px] rounded-full bg-ivory/10" aria-hidden="true" />
                 )}
@@ -82,19 +86,26 @@ export function FeaturedProjects() {
               transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
               className="grid gap-6 lg:grid-cols-3"
             >
-              {list.map((project, i) => (
-                <motion.div
-                  key={project.id}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: i * 0.1, ease: [0.23, 1, 0.32, 1] }}
-                  className="h-full"
-                >
-                  <EditableItem resource="projects" item={project} className="h-full">
-                    <ProjectCard project={project} />
-                  </EditableItem>
-                </motion.div>
-              ))}
+              {list.map((project, i) => {
+                const dummyImageName = `${(i % 6) + 1}.png`;
+                const imageUrl = `${BASE_IMG_URL}${dummyImageName}`;
+
+                return (
+                  <motion.div
+                    key={project.id}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: i * 0.1, ease: [0.23, 1, 0.32, 1] }}
+                    className="h-full"
+                  >
+                    <ProjectCard 
+                      project={project} 
+                      imageUrl={imageUrl} 
+                      detailHref={`/projects/${project.slug}`} 
+                    />
+                  </motion.div>
+                )
+              })}
             </motion.div>
           </AnimatePresence>
         </div>
@@ -103,11 +114,7 @@ export function FeaturedProjects() {
         {heading.cta_label && heading.cta_href && (
           <Reveal delay={0.1}>
             <div className="mt-12 flex justify-center">
-              <ButtonLink
-                to={href(heading.cta_href)}
-                variant="outline"
-                className="group flex items-center gap-3 rounded-full border border-white/20 bg-white/[0.04] px-8 py-3.5 text-sm backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_8px_20px_rgba(0,0,0,0.3)] transition-all duration-300 hover:border-copper hover:bg-copper/10 hover:shadow-[0_0_30px_rgba(197,143,92,0.35)]"
-              >
+              <PremiumButton to={href(heading.cta_href)}>
                 <InlineEdit
                   value={heading.cta_label}
                   onSave={(v) =>
@@ -117,10 +124,7 @@ export function FeaturedProjects() {
                     })
                   }
                 />
-                <span className="flex h-7 w-7 items-center justify-center rounded-full bg-white/10 text-copper transition-all duration-300 rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1 group-hover:bg-copper group-hover:text-char">
-                  <ArrowLeftIcon className="h-3.5 w-3.5 ltr:-scale-x-100" />
-                </span>
-              </ButtonLink>
+              </PremiumButton>
             </div>
           </Reveal>
         )}