Behrad/aramesh-backend
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): complete responsive design and layout optimizations across landing page

Browse Source
This commit is contained in:
Behrad
2026-10-04 23:48:19 +03:30
parent 846682ac4a
commit 575e4868be
13 changed files with 686 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/home/FeaturedProjects.tsx
+9 -10
View File
@@ -1,5 +1,4 @@
import React, { useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { Reveal } from '../Reveal'
import { PremiumButton } from '../PremiumButton'
@@ -39,18 +38,18 @@ export function FeaturedProjects() {
const BASE_IMG_URL = "/seed-media/2026/09/";
return (
<section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<section className="w-full max-w-full overflow-x-clip bg-ink py-16 md:py-24 lg:py-32" aria-labelledby="projects-title">
<div className="mx-auto max-w-site px-4 md:px-6 lg:px-10">
<SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />
{/* دکمه‌های فیلتر مینیمال و شیشه‌ای (بدون کادر) */}
<div className="mt-10 flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label={t('projectFilterAria')}>
<div className="mt-8 flex flex-wrap items-center justify-center gap-3 md:mt-10 md:gap-6" role="tablist" aria-label={t('projectFilterAria')}>
{FILTERS.map((filter, index) => {
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" />
<span className="hidden h-6 w-[2px] rounded-full bg-ivory/10 sm:inline-block" aria-hidden="true" />
)}
<button
@@ -58,7 +57,7 @@ export function FeaturedProjects() {
role="tab"
aria-selected={isSelected}
onClick={() => setStatus(filter.key)}
className={`group relative rounded-lg px-6 py-2.5 text-sm font-medium transition-all duration-300 ease-lux active:scale-95 cursor-pointer select-none backdrop-blur-md ${
className={`group relative rounded-lg px-4 py-2 text-xs font-medium transition-all duration-300 ease-lux active:scale-95 cursor-pointer select-none backdrop-blur-md md:px-6 md:py-2.5 md:text-sm ${
isSelected
? 'bg-copper/15 text-copper shadow-[0_4px_15px_rgba(197,143,92,0.1)]'
: 'bg-transparent text-ivory/60 hover:bg-white/5 hover:text-ivory'
@@ -76,7 +75,7 @@ export function FeaturedProjects() {
})}
</div>
<div className="mt-10 min-h-[420px]">
<div className="mt-8 min-h-[380px] md:mt-10 md:min-h-[420px]">
<AnimatePresence mode="wait">
<motion.div
key={status}
@@ -84,7 +83,7 @@ export function FeaturedProjects() {
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -15 }}
transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
className="grid gap-6 lg:grid-cols-3"
className="flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] md:grid md:grid-cols-3 md:gap-6 md:overflow-visible md:pb-0"
>
{list.map((project, i) => {
const dummyImageName = `${(i % 6) + 1}.png`;
@@ -96,7 +95,7 @@ export function FeaturedProjects() {
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"
className="h-full w-[82vw] max-w-[320px] shrink-0 snap-center md:w-auto md:max-w-none md:shrink"
>
<ProjectCard
project={project}
@@ -113,7 +112,7 @@ export function FeaturedProjects() {
{/* دکمه مشاهده همه پروژه‌ها */}
{heading.cta_label && heading.cta_href && (
<Reveal delay={0.1}>
<div className="mt-12 flex justify-center">
<div className="mt-10 flex justify-center md:mt-12">
<PremiumButton to={href(heading.cta_href)}>
<InlineEdit
value={heading.cta_label}