From 575e4868befab4e8a0324220b568be5c0e602350 Mon Sep 17 00:00:00 2001 From: Behrad Date: Sun, 4 Oct 2026 23:48:19 +0330 Subject: [PATCH] feat(mobile): complete responsive design and layout optimizations across landing page --- frontend/src/components/ArticleCard.tsx | 27 +- frontend/src/components/ContactSection.tsx | 136 +++++++- frontend/src/components/Footer.tsx | 314 +++++++++++++----- frontend/src/components/ProjectCard.tsx | 16 +- frontend/src/components/home/Articles.tsx | 104 +++++- .../src/components/home/FeaturedProjects.tsx | 19 +- frontend/src/components/home/Services.tsx | 30 +- frontend/src/components/home/Stats.tsx | 14 +- frontend/src/components/home/Team.tsx | 18 +- frontend/src/components/home/Testimonials.tsx | 74 +++-- frontend/src/components/home/Timeline.tsx | 72 +++- frontend/src/components/home/WhyUs.tsx | 113 +++++-- structure.txt | Bin 0 -> 1582996 bytes 13 files changed, 686 insertions(+), 251 deletions(-) create mode 100644 structure.txt diff --git a/frontend/src/components/ArticleCard.tsx b/frontend/src/components/ArticleCard.tsx index efd725e..efac172 100644 --- a/frontend/src/components/ArticleCard.tsx +++ b/frontend/src/components/ArticleCard.tsx @@ -1,4 +1,3 @@ -import React from 'react' import { Link } from 'react-router-dom' import { ArrowLeftIcon, ClockIcon } from 'lucide-react' import type { Article } from '../data/site' @@ -11,43 +10,43 @@ export function ArticleCard({ article }: { article: Article }) { return ( -
+
{`${t('articleImagePrefix')} {/* برچسب دسته‌بندی کپسولی شیشه‌ای روی تصویر */} -
+
{article.category}
-
-

+
+

{article.title}

-

+

{article.excerpt}

-
- +
+ {formatJalali(article.date)} - - + + {toPersianDigits(article.read)} {/* دکمه کپسولی ادامه مطلب با افکت شیشه‌ای */} - + {t('readMore')} - +
diff --git a/frontend/src/components/ContactSection.tsx b/frontend/src/components/ContactSection.tsx index 0053917..dd562be 100644 --- a/frontend/src/components/ContactSection.tsx +++ b/frontend/src/components/ContactSection.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import { CheckCircle2Icon, MailIcon, MapPinIcon, PhoneIcon } from 'lucide-react' import Swal from 'sweetalert2' import { Reveal } from './Reveal' @@ -100,18 +100,139 @@ export function ContactSection() { } } + const cleanOptionalLabel = `(${content.note_optional_label?.replace(/^\(+|\)+$/g, '') || 'اختیاری'})` + return ( -
+
-
+
-
-
+
+ + {/* Mobile View: High-Conversion Streamlined Layout */} +
+ {/* Header */} +
+

+ saveContent('label', v)} /> +

+

+ saveContent('title', v)} /> +

+

+ saveContent('lead', v)} /> +

+
+ + {/* High-Conversion Form Box */} +
+ {sent ? ( +
+
+ +
+

+ {content.success_title} +

+

+ {content.success_text} +

+ +
+ ) : ( +
+ setForm({ ...form, website: e.target.value })} + tabIndex={-1} + autoComplete="off" + aria-hidden="true" + className="pointer-events-none absolute -left-[9999px] h-0 w-0 opacity-0" + /> +
+ + setForm({ ...form, name: e.target.value })} + placeholder={content.name_placeholder} + className="w-full py-2.5 px-3 text-xs rounded-xl border border-white/10 bg-ink/60 text-ivory placeholder:text-ivory/35 backdrop-blur-md focus:border-copper/70 focus:outline-none" + /> +
+ +
+ + setForm({ ...form, phone: e.target.value })} + placeholder={content.phone_placeholder} + className="w-full py-2.5 px-3 text-xs rounded-xl border border-white/10 bg-ink/60 text-ivory placeholder:text-ivory/35 backdrop-blur-md focus:border-copper/70 focus:outline-none text-left font-mono" + /> +
+ +
+ +