pooyadf/robinnetwork_website_new_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make software page responsive

Browse Source
This commit is contained in:
Pouya Defaei
2026-04-21 15:05:15 +03:30
parent d981653ea3
commit 72659ddc08
7 changed files with 410 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/globals.css
View File

@@ -25,3 +25,12 @@ body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
} }
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

148
src/components/software/ContactFooter.tsx
View File

@@ -1,104 +1,88 @@
// components/software/ContactFooter.tsx // components/software/ContactFooter.tsx
export default function ContactFooter() { export default function ContactFooter() {
return ( return (
<div className="mx-6 my-16 border bg-card border-border rounded-3xl"> <footer className="px-4 py-12 border-t sm:px-6 sm:py-16 bg-black/30 border-white/[0.02]">
<div className="flex flex-wrap gap-16 p-12"> <div className="grid gap-8 mx-auto mb-8 sm:mb-12 lg:grid-cols-2 max-w-7xl sm:gap-12">
{/* Right Side: Info & Footer */} <div className="text-right">
<div className="flex-1 min-w-[300px] text-right"> <h2 className="mb-3 text-2xl font-bold sm:mb-4 sm:text-3xl">
<span className="inline-block px-4 py-2 mb-4 text-xs border rounded-full text-accent border-accent/30">🎧 مشاوره تخصصی رایین شبکه</span> پروژه بعدی خود را <br />
<h2 className="mb-4 text-3xl font-bold">آماده شروع پروژه نرم‌افزاری هستید؟</h2> <span className="text-accent">با ما شروع کنید</span>
<p className="mb-8 leading-relaxed text-muted"> </h2>
نیازت رو ثبت کن تا تیم رایین شبکه بر اساس مسئله واقعی کسب‌و‌کارت، مسیر اجرای فنی و زمانی پیشنهادی رو ارائه بده. <p className="mb-6 text-sm leading-relaxed sm:mb-8 sm:text-base text-muted">
تیم ما آماده است تا ایده شما را به یک محصول نرم‌افزاری قدرتمند و مقیاس‌پذیر تبدیل کند. از مشاوره رایگان تا پشتیبانی پس از تحویل، در کنار
شما هستیم.
</p> </p>
<ul className="mb-12 space-y-3"> <div className="space-y-3 sm:space-y-4">
{["تماس اولیه در کمتر از ۲۴ ساعت کاری", "تحلیل اولیه متناسب با نوع پروژه", "نقشه اجرا + برآورد زمان‌بندی"].map((item, i) => ( <div className="flex items-center gap-3 text-sm sm:text-base">
<li key={i} className="flex items-center gap-3 text-sm text-muted"> <div className="flex items-center justify-center flex-shrink-0 w-8 h-8 border sm:w-10 sm:h-10 bg-accent/10 border-accent/20 rounded-xl">
<span className="flex items-center justify-center w-5 h-5 text-xs border rounded-full text-accent border-accent">✓</span> 📧
{item}
</li>
))}
</ul>
<div className="flex flex-wrap justify-between gap-8 pt-8 border-t border-border">
<div className="flex-[2] min-w-[200px]">
<h4 className="mb-3 text-lg font-bold">رایین شبکه</h4>
<p className="text-sm leading-relaxed text-muted max-w-[250px]">
معماری سیستم، تولید محتوا و اجرای راهکارهای فنی برای رشد پایدار کسب‌و‌کارها.
</p>
</div>
<div className="min-w-[120px]">
<ul className="space-y-2 text-sm text-left">
{["صفحه اصلی", "خدمات", "پروژه‌ها", "تکنولوژی"].map((link, i) => (
<li key={i}>
<a href="#" className="transition text-muted hover:text-foreground">
{link}
</a>
</li>
))}
</ul>
</div>
<div className="min-w-[200px] text-left">
<div className="flex items-center justify-end gap-2 mb-2 text-sm text-muted">
<span>۰۹۱۲-۰۰۰-۰۰۰۰</span>
<span>📱</span>
</div> </div>
<div className="flex items-center justify-end gap-2 mb-4 text-sm text-muted"> <span className="text-muted">info@company.com</span>
<span>info@raeinnetwork.ir</span> </div>
<span>✉</span> <div className="flex items-center gap-3 text-sm sm:text-base">
<div className="flex items-center justify-center flex-shrink-0 w-8 h-8 border sm:w-10 sm:h-10 bg-accent/10 border-accent/20 rounded-xl">
📞
</div> </div>
<button className="px-4 py-2 text-xs transition border rounded-lg border-border hover:bg-card">مشاهده همه پروژه‌ها</button> <span className="text-muted" style={{ direction: "ltr" }}>
+98 21 1234 5678
</span>
</div>
<div className="flex items-center gap-3 text-sm sm:text-base">
<div className="flex items-center justify-center flex-shrink-0 w-8 h-8 border sm:w-10 sm:h-10 bg-accent/10 border-accent/20 rounded-xl">
📍
</div>
<span className="text-muted">تهران، خیابان ولیعصر، پلاک ۱۲۳</span>
</div> </div>
</div> </div>
<div className="pt-6 mt-8 text-xs text-center border-t text-muted border-white/5">© ۲۰۲۶ رایین شبکه . تمامی حقوق محفوظ است.</div>
</div> </div>
{/* Left Side: Form */} <div className="p-6 border sm:p-8 bg-card border-border rounded-xl">
<div className="flex-1 min-w-[300px] bg-white/[0.02] border border-border p-8 rounded-2xl"> <h3 className="mb-4 text-lg font-bold text-right sm:mb-6 sm:text-xl">درخواست مشاوره رایگان</h3>
<div className="flex gap-4 mb-4"> <form className="space-y-3 sm:space-y-4">
<div className="flex flex-col flex-1 text-right"> <div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
<label className="mb-2 text-sm text-muted">نام و نام خانوادگی</label>
<input <input
type="text" type="text"
placeholder="مثلاً: علی احمدی" placeholder="نام و نام خانوادگی"
className="px-4 py-3 text-sm border rounded-lg bg-input border-border text-foreground focus:outline-none focus:border-accent" className="flex-1 px-3 py-2 text-sm text-right transition border rounded-lg sm:px-4 sm:py-3 sm:text-base bg-background border-border focus:border-accent focus:outline-none"
/> />
</div>
<div className="flex flex-col flex-1 text-right">
<label className="mb-2 text-sm text-muted">شماره تماس</label>
<input <input
type="text" type="email"
placeholder="۰۹xxxxxxxxx" placeholder="ایمیل"
className="px-4 py-3 text-sm border rounded-lg bg-input border-border text-foreground focus:outline-none focus:border-accent" className="flex-1 px-3 py-2 text-sm text-right transition border rounded-lg sm:px-4 sm:py-3 sm:text-base bg-background border-border focus:border-accent focus:outline-none"
/> />
</div> </div>
</div> <input
type="tel"
<div className="flex flex-col mb-4 text-right"> placeholder="شماره تماس"
<label className="mb-2 text-sm text-muted">نوع پروژه</label> className="w-full px-3 py-2 text-sm text-right transition border rounded-lg sm:px-4 sm:py-3 sm:text-base bg-background border-border focus:border-accent focus:outline-none"
<select className="px-4 py-3 text-sm border rounded-lg bg-input border-border text-foreground focus:outline-none focus:border-accent">
<option>انتخاب کنید</option>
<option>وب اپلیکیشن</option>
<option>موبایل اپلیکیشن</option>
<option>طراحی API</option>
</select>
</div>
<div className="flex flex-col text-right">
<label className="mb-2 text-sm text-muted">توضیح کوتاه پروژه</label>
<textarea
placeholder="مسئله اصلی شما چیست و چه خروجی‌ای می‌خواهید؟"
rows={4}
className="px-4 py-3 text-sm border rounded-lg resize-none bg-input border-border text-foreground focus:outline-none focus:border-accent"
/> />
</div> <select className="w-full px-3 py-2 text-sm text-right transition border rounded-lg sm:px-4 sm:py-3 sm:text-base bg-background border-border focus:border-accent focus:outline-none text-muted">
<option>نوع پروژه را انتخاب کنید</option>
<button className="w-full px-6 py-3 mt-6 transition border rounded-lg border-border hover:bg-white/5">ارسال درخواست &lt;</button> <option>وب اپلیکیشن</option>
<option>اپلیکیشن موبایل</option>
<option>Backend API</option>
<option>داشبورد تحلیلی</option>
<option>سایر</option>
</select>
<textarea
placeholder="توضیحات پروژه..."
rows={4}
className="w-full px-3 py-2 text-sm text-right transition border rounded-lg resize-none sm:px-4 sm:py-3 sm:text-base bg-background border-border focus:border-accent focus:outline-none"
></textarea>
<button
type="submit"
className="w-full px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base text-white transition rounded-lg bg-accent hover:bg-accent/90"
>
ارسال درخواست
</button>
</form>
</div> </div>
</div> </div>
</div>
<div className="pt-6 mx-auto text-center border-t sm:pt-8 max-w-7xl border-border">
<p className="text-xs sm:text-sm text-muted">© ۲۰۲۶ تمامی حقوق محفوظ است | طراحی و توسعه توسط پویا دفاعی</p>
</div>
</footer>
); );
} }

27
src/components/software/Hero.tsx
View File

@@ -1,43 +1,48 @@
// components/software/Hero.tsx
export default function Hero() { export default function Hero() {
return ( return (
<section className="px-4 py-20 text-center"> <section className="px-4 py-12 text-center sm:py-16 md:py-20">
<div className="inline-block px-4 py-2 mb-6 text-sm border rounded-full bg-accent/10 border-accent/20 text-accent"> <div className="inline-block px-3 py-1.5 sm:px-4 sm:py-2 mb-4 sm:mb-6 text-xs sm:text-sm border rounded-full bg-accent/10 border-accent/20 text-accent">
⚙ توسعه نرم‌افزار سفارشی ⚙ توسعه نرم‌افزار سفارشی
</div> </div>
<h1 className="mb-4 text-5xl font-bold leading-tight"> <h1 className="mb-3 text-3xl font-bold leading-tight sm:mb-4 sm:text-4xl md:text-5xl">
از ایده تا <br /> از ایده تا <br />
<span className="text-accent">پلتفرم زنده</span> <span className="text-accent">پلتفرم زنده</span>
</h1> </h1>
<p className="max-w-2xl mx-auto mb-12 text-muted"> <p className="max-w-2xl px-4 mx-auto mb-8 text-sm sm:mb-12 sm:text-base text-muted">
ساخت اپلیکیشن‌های وب مدرن، API های مقیاس‌پذیر و سیستم‌های سازمانی با معماری تمیز و کد قابل نگهداری. ساخت اپلیکیشن‌های وب مدرن، API های مقیاس‌پذیر و سیستم‌های سازمانی با معماری تمیز و کد قابل نگهداری.
</p> </p>
<div className="flex justify-center gap-12 mb-12 bg-white/[0.02] px-12 py-6 rounded-xl border border-border w-fit mx-auto"> <div className="flex flex-col justify-center gap-6 px-4 py-4 mx-auto mb-8 border sm:flex-row sm:gap-12 sm:mb-12 bg-white/[0.02] sm:px-12 sm:py-6 rounded-xl border-border w-fit">
<div className="text-center"> <div className="text-center">
<h3 className="mb-1 text-3xl font-bold text-accent" style={{ direction: "ltr" }}> <h3 className="mb-1 text-2xl font-bold sm:text-3xl text-accent" style={{ direction: "ltr" }}>
+۵۰ +۵۰
</h3> </h3>
<p className="text-xs text-muted">پروژه تحویلی</p> <p className="text-xs text-muted">پروژه تحویلی</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="mb-1 text-3xl font-bold text-accent" style={{ direction: "ltr" }}> <h3 className="mb-1 text-2xl font-bold sm:text-3xl text-accent" style={{ direction: "ltr" }}>
+۱۲ +۱۲
</h3> </h3>
<p className="text-xs text-muted">تکنولوژی</p> <p className="text-xs text-muted">تکنولوژی</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="mb-1 text-3xl font-bold text-accent" style={{ direction: "ltr" }}> <h3 className="mb-1 text-2xl font-bold sm:text-3xl text-accent" style={{ direction: "ltr" }}>
٪۹۸ ٪۹۸
</h3> </h3>
<p className="text-xs text-muted">رضایت مشتری</p> <p className="text-xs text-muted">رضایت مشتری</p>
</div> </div>
</div> </div>
<div className="flex justify-center gap-4"> <div className="flex flex-col justify-center gap-3 px-4 sm:flex-row sm:gap-4">
<button className="px-6 py-3 text-white transition rounded-lg bg-accent hover:bg-accent/90">شروع پروژه &lt;</button> <button className="px-5 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base text-white transition rounded-lg bg-accent hover:bg-accent/90">
<button className="px-6 py-3 transition border rounded-lg border-border hover:bg-card">مشاهده نمونه‌کارها</button> شروع پروژه &lt;
</button>
<button className="px-5 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base transition border rounded-lg border-border hover:bg-card">
مشاهده نمونه‌کارها
</button>
</div> </div>
</section> </section>
); );

26
src/components/software/Process.tsx
View File

@@ -52,23 +52,23 @@ export default function Process() {
]; ];
return ( return (
<section className="px-6 py-16 bg-black/30 border-t border-white/[0.02]"> <section className="px-4 py-12 sm:px-6 sm:py-16 bg-black/30 border-t border-white/[0.02]">
<div className="mx-auto mb-12 text-center max-w-7xl"> <div className="mx-auto mb-8 text-center sm:mb-12 max-w-7xl">
<h2 className="mb-2 text-3xl font-bold">فرآیند توسعه نرم‌افزار</h2> <h2 className="mb-2 text-2xl font-bold sm:text-3xl">فرآیند توسعه نرم‌افزار</h2>
<p className="text-muted">از ایده تا محصول نهایی با متدولوژی Agile</p> <p className="text-sm sm:text-base text-muted">از ایده تا محصول نهایی با متدولوژی Agile</p>
</div> </div>
<div className="grid gap-8 px-6 mx-auto mb-12 max-w-7xl md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 px-4 mx-auto mb-8 sm:gap-8 sm:px-6 sm:mb-12 max-w-7xl sm:grid-cols-2 lg:grid-cols-3">
{steps.map((step, i) => ( {steps.map((step, i) => (
<div key={i} className="relative p-8 text-center transition-transform border bg-card border-border rounded-xl hover:-translate-y-1"> <div key={i} className="relative p-6 text-center transition-transform border sm:p-8 bg-card border-border rounded-xl hover:-translate-y-1">
<div className="absolute -top-4 right-5 w-8 h-8 bg-accent text-white rounded-full flex items-center justify-center text-sm font-bold shadow-[0_4px_10px_rgba(249,115,22,0.3)]"> <div className="absolute -top-3 sm:-top-4 right-4 sm:right-5 w-7 h-7 sm:w-8 sm:h-8 bg-accent text-white rounded-full flex items-center justify-center text-xs sm:text-sm font-bold shadow-[0_4px_10px_rgba(249,115,22,0.3)]">
{step.number} {step.number}
</div> </div>
<div className="flex items-center justify-center w-12 h-12 mx-auto mb-6 text-2xl border bg-accent/10 border-accent/20 rounded-xl"> <div className="flex items-center justify-center w-10 h-10 mx-auto mb-4 text-xl border sm:w-12 sm:h-12 sm:mb-6 sm:text-2xl bg-accent/10 border-accent/20 rounded-xl">
{step.icon} {step.icon}
</div> </div>
<h3 className="mb-2 text-xl font-bold">{step.title}</h3> <h3 className="mb-2 text-lg font-bold sm:text-xl">{step.title}</h3>
<p className="mb-6 text-sm text-muted">{step.description}</p> <p className="mb-4 text-sm sm:mb-6 text-muted">{step.description}</p>
<div className="flex flex-wrap justify-center gap-2"> <div className="flex flex-wrap justify-center gap-2">
{step.tags.map((tag, j) => ( {step.tags.map((tag, j) => (
<span key={j} className="px-2 py-1 text-xs border rounded text-muted border-border"> <span key={j} className="px-2 py-1 text-xs border rounded text-muted border-border">
@@ -80,11 +80,11 @@ export default function Process() {
))} ))}
</div> </div>
<div className="flex flex-wrap justify-center gap-6"> <div className="flex flex-col flex-wrap justify-center gap-4 sm:flex-row sm:gap-6">
{badges.map((badge, i) => ( {badges.map((badge, i) => (
<div key={i} className="flex items-center justify-between w-64 gap-4 px-6 py-4 border bg-card border-border rounded-xl"> <div key={i} className="flex items-center justify-between gap-4 px-6 py-4 border bg-card border-border rounded-xl">
<div className="text-right"> <div className="text-right">
<h4 className="text-xl font-bold">{badge.title}</h4> <h4 className="text-lg font-bold sm:text-xl">{badge.title}</h4>
<p className="text-sm text-muted">{badge.subtitle}</p> <p className="text-sm text-muted">{badge.subtitle}</p>
</div> </div>
<div className="flex items-center justify-center w-10 h-10 text-xl rounded-lg bg-accent">{badge.icon}</div> <div className="flex items-center justify-center w-10 h-10 text-xl rounded-lg bg-accent">{badge.icon}</div>

165
src/components/software/Projects.tsx
View File

@@ -1,7 +1,7 @@
// components/software/Projects.tsx // components/software/Projects.tsx
"use client"; "use client";
import { useState } from "react"; import { useState, useRef } from "react";
const projects = [ const projects = [
{ {
@@ -26,90 +26,117 @@ const projects = [
type: "Backend API", type: "Backend API",
company: "استارتاپ دیجی‌مارکت", company: "استارتاپ دیجی‌مارکت",
title: "API فروشگاه آنلاین", title: "API فروشگاه آنلاین",
description: "RESTful API مقیاس‌پذیر با معماری Microservices برای پلتفرم تجارت الکترونیک", description: "RESTful API مقیاس‌پذیر با معماری Microservices برای پلتفرم e-commerce",
tech: ["⚙ NestJS + TypeScript", "🐳 Docker + Kubernetes"], tech: ["🟢 NestJS + GraphQL", "🍃 MongoDB + Redis"],
stat: "🚀 Microservices", stat: "⚡ 10k req/s",
year: "۲۰۲۵", year: "۲۰۲۵",
}, },
{ {
type: "وب اپلیکیشن", type: "اپلیکیشن موبایل",
company: "موسسه آموزشی نوین", company: "شرکت حمل‌ونقل سریع",
title: "پلتفرم آموزشی", title: "اپ درخواست تاکسی",
description: "سیستم LMS پیشرفته با قابلیت برگزاری کلاس آنلاین و ارزیابی خودکار", description: "اپلیکیشن کراس‌پلتفرم با قابلیت ردیابی مسیر و پرداخت آنلاین",
tech: ["🟢 Vue.js + Nuxt", "🍃 MongoDB + Redis"], tech: ["📱 React Native", "🔥 Firebase + Maps API"],
stat: "📚 +۱۰۰۰ دوره", stat: "📍 GPS Tracking",
year: "۲۰۲۵",
},
{
type: "پنل مدیریتی",
company: "آکادمی آنلاین دانش",
title: "سیستم مدیریت آموزش",
description: "LMS کامل با قابلیت برگزاری کلاس آنلاین و مدیریت دوره‌ها",
tech: ["⚛ Next.js + Tailwind", "🎥 WebRTC + AWS S3"],
stat: "🎓 +۲۰۰۰ دانشجو",
year: "۲۰۲۵", year: "۲۰۲۵",
}, },
]; ];
const filters = ["همه", "وب اپ", "API", "داشبورد"];
export default function Projects() { export default function Projects() {
const [activeFilter, setActiveFilter] = useState("همه"); const [filter, setFilter] = useState("همه");
const scrollRef = useRef<HTMLDivElement>(null);
const filters = ["همه", "وب اپلیکیشن", "داشبورد تحلیلی", "Backend API", "اپلیکیشن موبایل", "پنل مدیریتی"];
const filtered = filter === "همه" ? projects : projects.filter((p) => p.type === filter);
const scroll = (direction: "left" | "right") => {
if (scrollRef.current) {
const scrollAmount = 350;
scrollRef.current.scrollBy({
left: direction === "left" ? -scrollAmount : scrollAmount,
behavior: "smooth",
});
}
};
return ( return (
<section className="px-6 py-16"> <section className="px-4 py-12 sm:px-6 sm:py-16">
<div className="mx-auto mb-12 text-right max-w-7xl"> <div className="mx-auto mb-8 text-right sm:mb-12 max-w-7xl">
<h2 className="mb-2 text-3xl font-bold">پروژه‌های نرم‌افزاری</h2> <h2 className="mb-2 text-2xl font-bold sm:text-3xl">نمونه‌کارهای اخیر</h2>
<p className="text-muted">منتخب پروژه‌های نرم‌افزاری با تمرکز بر کیفیت کد و معماری تمیز</p> <p className="text-sm sm:text-base text-muted">پروژه‌های موفق تحویل‌شده به مشتریان</p>
</div> </div>
<div className="flex flex-wrap items-center justify-between gap-4 px-6 mx-auto mb-8 max-w-7xl"> <div className="flex flex-wrap justify-center gap-2 px-4 mx-auto mb-8 sm:gap-3 sm:mb-12 max-w-7xl">
<div className="flex gap-2"> {filters.map((f) => (
{filters.map((filter) => ( <button
<button key={f}
key={filter} onClick={() => setFilter(f)}
onClick={() => setActiveFilter(filter)} className={`px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm rounded-lg transition ${
className={`px-4 py-2 text-sm border rounded-lg transition ${ filter === f ? "bg-accent text-white" : "bg-card border border-border hover:border-accent/50"
activeFilter === filter ? "bg-accent text-white border-accent" : "bg-transparent text-muted border-border hover:border-accent/50" }`}
}`} >
{f}
</button>
))}
</div>
<div className="relative px-4 mx-auto max-w-7xl sm:px-6">
<button
onClick={() => scroll("right")}
className="absolute z-10 flex items-center justify-center w-8 h-8 transition -translate-y-1/2 border rounded-full sm:w-10 sm:h-10 -right-2 sm:-right-4 top-1/2 bg-card border-border hover:bg-accent hover:border-accent"
aria-label="Scroll right"
>
&lt;
</button>
<div ref={scrollRef} className="flex gap-4 pb-4 overflow-x-auto sm:gap-6 scrollbar-hide snap-x snap-mandatory">
{filtered.map((project, i) => (
<div
key={i}
className="flex-shrink-0 w-[280px] sm:w-[320px] lg:w-[380px] p-5 sm:p-6 text-right border bg-card border-border rounded-xl snap-start"
> >
{filter} <div className="flex items-start justify-between mb-3 sm:mb-4">
</button> <span className="px-2 py-1 text-xs border rounded sm:px-3 text-accent border-accent/30 bg-accent/10">{project.type}</span>
<span className="text-xs sm:text-sm text-muted">{project.year}</span>
</div>
<h3 className="mb-1 text-base font-bold sm:mb-2 sm:text-lg">{project.title}</h3>
<p className="mb-2 text-xs sm:mb-3 sm:text-sm text-muted">{project.company}</p>
<p className="mb-4 text-xs leading-relaxed sm:mb-6 sm:text-sm text-muted">{project.description}</p>
<div className="flex flex-wrap gap-2 mb-4 sm:mb-6">
{project.tech.map((t, j) => (
<span key={j} className="px-2 py-1 text-xs border rounded bg-background border-border">
{t}
</span>
))}
</div>
<div className="flex items-center justify-between pt-3 border-t sm:pt-4 border-border">
<button className="text-xs sm:text-sm text-accent hover:underline">مشاهده جزئیات &lt;</button>
<span className="text-xs sm:text-sm text-muted">{project.stat}</span>
</div>
</div>
))} ))}
</div> </div>
<div className="flex items-center gap-4"> <button
<button className="px-4 py-2 text-sm transition border rounded-lg border-border hover:bg-card">مشاهده همه پروژه‌ها</button> onClick={() => scroll("left")}
<div className="flex gap-2"> className="absolute z-10 flex items-center justify-center w-8 h-8 transition -translate-y-1/2 border rounded-full sm:w-10 sm:h-10 -left-2 sm:-left-4 top-1/2 bg-card border-border hover:bg-accent hover:border-accent"
<button className="flex items-center justify-center transition border rounded-lg w-9 h-9 border-border hover:bg-card">&gt;</button> aria-label="Scroll left"
<button className="flex items-center justify-center transition border rounded-lg w-9 h-9 border-border hover:bg-card">&lt;</button> >
</div> &gt;
</div> </button>
</div>
<div className="flex gap-6 px-6 pb-4 mx-auto overflow-x-auto max-w-7xl scrollbar-hide">
{projects.map((project, i) => (
<div
key={i}
className="min-w-[320px] bg-gradient-to-b from-card to-bg border border-border rounded-2xl p-6 flex flex-col relative overflow-hidden"
>
<div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
<div className="flex items-center justify-between mb-6">
<span className="px-3 py-1 text-xs border rounded bg-accent/10 border-accent/20 text-accent">{project.type}</span>
<span className="text-xs text-muted">{project.company}</span>
</div>
<div className="mb-6">
<h3 className="mb-2 text-xl font-bold">{project.title}</h3>
<p className="text-sm leading-relaxed text-muted">{project.description}</p>
</div>
<div className="mb-6">
{project.tech.map((tech, j) => (
<div key={j} className="flex items-center gap-2 mb-2 text-sm text-muted">
{tech}
</div>
))}
</div>
<div className="flex items-center justify-between pt-4 mt-auto border-t border-border">
<div className="text-sm text-muted">{project.stat}</div>
<div className="px-3 py-1 text-xs rounded bg-white/5 text-muted">{project.year}</div>
</div>
</div>
))}
</div> </div>
<style jsx>{` <style jsx>{`

17
src/components/software/Services.tsx
View File

@@ -1,3 +1,4 @@
// components/software/Services.tsx
const services = [ const services = [
{ {
icon: "💻", icon: "💻",
@@ -33,19 +34,19 @@ const services = [
export default function Services() { export default function Services() {
return ( return (
<section className="px-6 py-16 mx-auto max-w-7xl"> <section className="px-4 py-12 mx-auto sm:px-6 sm:py-16 max-w-7xl">
<div className="mb-12 text-right"> <div className="mb-8 text-right sm:mb-12">
<h2 className="mb-2 text-3xl font-bold">خدمات توسعه نرم‌افزار</h2> <h2 className="mb-2 text-2xl font-bold sm:text-3xl">خدمات توسعه نرم‌افزار</h2>
<p className="text-muted">راهکارهای جامع از طراحی تا استقرار و نگهداری</p> <p className="text-sm sm:text-base text-muted">راهکارهای جامع از طراحی تا استقرار و نگهداری</p>
</div> </div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
{services.map((service, i) => ( {services.map((service, i) => (
<div key={i} className="p-8 text-right transition-transform border bg-card border-border rounded-xl hover:-translate-y-1"> <div key={i} className="p-6 text-right transition-transform border sm:p-8 bg-card border-border rounded-xl hover:-translate-y-1">
<div className="flex items-center justify-center w-12 h-12 mb-6 text-2xl border rounded-lg bg-accent/10 border-accent/20 text-accent"> <div className="flex items-center justify-center w-10 h-10 mb-4 text-xl border rounded-lg sm:w-12 sm:h-12 sm:mb-6 sm:text-2xl bg-accent/10 border-accent/20 text-accent">
{service.icon} {service.icon}
</div> </div>
<h3 className="mb-3 text-xl font-bold">{service.title}</h3> <h3 className="mb-2 text-lg font-bold sm:mb-3 sm:text-xl">{service.title}</h3>
<p className="text-sm leading-relaxed text-muted">{service.description}</p> <p className="text-sm leading-relaxed text-muted">{service.description}</p>
</div> </div>
))} ))}

266
src/components/software/TechStack.tsx
View File

@@ -1,119 +1,255 @@
// components/software/TechStack.tsx
"use client"; "use client";
import { useState } from "react"; import { useState, useEffect } from "react";
const techItems = [ const techItems = [
{ name: "React", icon: "⚛️", orbit: 1, description: "کتابخانه قدرتمند برای ساخت رابط‌های تعاملی" }, // ================= ORBIT 1 =================
{ name: "Next.js", icon: "▲", orbit: 1, description: "فریم‌ورک پیشرفته React برای پروژه‌های تولیدی" }, {
name: "React",
orbit: 1,
startAngle: 0,
description: "کتابخانه قدرتمند برای ساخت رابط‌های تعاملی",
icon: (
<svg viewBox="-11.5 -10.2 23 20.4" className="w-6 h-6 sm:w-8 sm:h-8 text-[#61DAFB]">
<circle r="2.05" fill="currentColor" />
<g stroke="currentColor" strokeWidth="1" fill="none">
<ellipse rx="11" ry="4.2" />
<ellipse rx="11" ry="4.2" transform="rotate(60)" />
<ellipse rx="11" ry="4.2" transform="rotate(120)" />
</g>
</svg>
),
},
{
name: "Next.js",
orbit: 1,
startAngle: 180,
description: "فریم‌ورک پیشرفته React برای پروژه‌های تولیدی",
icon: (
<svg viewBox="0 0 100 100" className="w-6 h-6 sm:w-8 sm:h-8 text-foreground" fill="currentColor">
<path d="M50 0C22.4 0 0 22.4 0 50s22.4 50 50 50 50-22.4 50-50S77.6 0 50 0zm0 90c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm-4.9-57.5h6v32.1l-20.8-32.1h-6.6v41.7h6v-32.2l21 32.5h5.9V32.5h-6v..." />
<polygon points="63.2,32.5 57.2,32.5 57.2,74.2 63.2,74.2" />
<polygon points="36.8,32.5 30.2,32.5 30.2,74.2 36.8,74.2" />
<polygon points="36.8,32.5 57.2,64.2 63.2,64.2 42.8,32.5" />
</svg>
),
},
{ name: "TypeScript", icon: "TS", orbit: 2, description: "جاوااسکریپت تایپ‌دار برای کد امن‌تر و قابل نگهداری" }, // ================= ORBIT 2 =================
{ name: "Node.js", icon: "🟢", orbit: 2, description: "محیط اجرای سمت سرور با سرعت بالا" }, {
name: "PostgreSQL",
orbit: 2,
startAngle: 90,
description: "پایگاه داده رابطه‌ای قدرتمند با امکانات پیشرفته",
icon: (
<svg viewBox="0 0 100 100" className="w-6 h-6 sm:w-8 sm:h-8 text-[#336791]" fill="currentColor">
<path d="M82.8 68.6c-1.3-4.7-5-9.2-10-12.2 4.1-1.3 7.8-3.4 10.9-6.3-4.6 1.8-9.8 2.6-15 2.2-5-4.5-12.1-7.1-19.5-6.5-12.8 1.1-23.4 11-25.5 23.7C20.6 88 35.8 100 50 100c14.2 0 26.6-9.5 30.6-22.7 1.1-3.6 1.8-7.3 2.2-8.7z" />
<path d="M47.7 5c-15.6 0-28.5 12.1-29.6 27.6-1 15 9.4 28.2 24 31.4 16.4 3.5 32.3-8.8 32.3-25.4 0-16-13-29-28.9-29-4.8 0-9.4 1.2-13.5 3.3 4.1-1.4 8.6-2.2 13.2-2.2 13.6 0 24.8 10.9 25.1 24.5.3 15-11.8 27.3-26.8 27.3-13.8 0-25.2-10.6-26.1-24.3-.9-14.4 10.5-26.6 24.9-26.6 5.8 0 11.2 1.9 15.6 5.2 0 0-5.8-11.8-10.4-11.8z" />
</svg>
),
},
{
name: "MongoDB",
orbit: 2,
startAngle: 270,
description: "پایگاه داده NoSQL سریع و مقیاس‌پذیر",
icon: (
<svg viewBox="0 0 100 100" className="w-6 h-6 sm:w-8 sm:h-8 text-[#47A248]" fill="currentColor">
<path d="M49.9 8.7c0 0-17.8 24.3-17.8 45.4 0 17 8.3 29.8 15.6 37.1 1.2 1.2 3.1 1.2 4.3 0 7.3-7.3 15.6-20.1 15.6-37.1 0-21.1-17.7-45.4-17.7-45.4zM49.9 96.5c-2.4 0-4.3-1.9-4.3-4.3s1.9-4.3 4.3-4.3 4.3 1.9 4.3 4.3-1.9 4.3-4.3 4.3z" />
</svg>
),
},
{ name: "PostgreSQL", icon: "🐘", orbit: 3, description: "پایگاه داده رابطه‌ای قدرتمند با امکانات پیشرفته" }, // ================= ORBIT 3 =================
{ name: "MongoDB", icon: "🍃", orbit: 3, description: "پایگاه داده NoSQL سریع و مقیاس‌پذیر" }, {
name: "Docker",
orbit: 3,
startAngle: 45,
description: "کانتینرسازی برای استقرار و توسعه یکپارچه",
icon: (
<svg viewBox="0 0 100 100" className="w-6 h-6 sm:w-8 sm:h-8 text-[#2496ED]" fill="currentColor">
<path d="M12.4 62.6c0 10.6 19 19.3 42.4 19.3 23.4 0 42.4-8.6 42.4-19.3 0-5.1-4.4-9.7-11.7-13.4H12.4v13.4zM24.7 41.5h11v11h-11v-11zm15.4 0h11v11h-11v-11zm15.4 0h11v11h-11v-11zm-15.4-15h11v11h-11v-11zm15.4 0h11v11h-11v-11z" />
</svg>
),
},
{
name: "Django",
orbit: 3,
startAngle: 225,
description: "فریم‌ورک سطح بالای پایتون برای توسعه سریع",
icon: (
<svg viewBox="0 0 100 100" className="w-6 h-6 sm:w-8 sm:h-8">
<rect width="100" height="100" rx="20" fill="#092E20" />
<text x="50" y="65" fontFamily="sans-serif" fontSize="45" fontWeight="bold" fill="#ffffff" textAnchor="middle">
dj
</text>
</svg>
),
},
{ name: "Docker", icon: "🐳", orbit: 4, description: "کانتینرسازی برای استقرار و توسعه یکپارچه" }, // ================= ORBIT 4 =================
{ name: "AWS", icon: "☁️", orbit: 4, description: "سرویس‌های ابری امن و مقیاس‌پذیر" }, {
name: "NestJS",
orbit: 4,
startAngle: 135,
description: "فریم‌ورک پیشرونده Node.js برای ساخت برنامه‌های مقیاس‌پذیر",
icon: (
<svg viewBox="0 0 100 100" className="w-6 h-6 sm:w-8 sm:h-8 text-[#E0234E]" fill="currentColor">
<path d="M49.3 5.2L5.2 30.6v40.3L49.3 96.3l44.1-25.4V30.6L49.3 5.2zm0 9.3l36.6 20.8v41.6L49.3 97.7 12.7 76.9V35.3L49.3 14.5z" />
<path d="M35.6 29.3L50.5 37.8l27.1-15.6v27.2l-27.1 15.6-27.2-15.6v-20.1z" />
</svg>
),
},
{
name: "TypeScript",
orbit: 4,
startAngle: 315,
description: "جاوااسکریپت تایپ‌دار برای کد امن‌تر و قابل نگهداری",
icon: (
<svg viewBox="0 0 24 24" className="w-6 h-6 sm:w-8 sm:h-8 text-[#3178C6]" fill="currentColor">
<path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zM11.734 18.906c-1.39 0-2.437-.36-3.14-.984l.875-1.516c.547.453 1.344.828 2.234.828 1.078 0 1.547-.468 1.547-1.078 0-1.844-4.578-.89-4.578-4.218 0-1.688 1.36-2.907 3.656-2.907 1.25 0 2.28.313 2.922.75l-.75 1.516c-.469-.328-1.188-.64-2.031-.64-.938 0-1.39.422-1.39.953 0 1.844 4.578.86 4.578 4.266 0 1.765-1.36 2.953-3.922 2.953zM16.14 8.781h5.813v2.094h-3.64v8.031h-2.172v-8.03h-3.64v-2.094h3.64z" />
</svg>
),
},
]; ];
export default function TechStack() { export default function TechStack() {
const [selected, setSelected] = useState(techItems[0]); const [selected, setSelected] = useState(techItems[0]);
const [dimensions, setDimensions] = useState({
size: 800,
center: 400,
baseRadius: 120,
gap: 70,
});
useEffect(() => {
const updateDimensions = () => {
const width = window.innerWidth;
if (width < 640) {
setDimensions({ size: 400, center: 200, baseRadius: 60, gap: 35 });
} else if (width < 1024) {
setDimensions({ size: 500, center: 250, baseRadius: 80, gap: 45 });
} else {
setDimensions({ size: 800, center: 400, baseRadius: 120, gap: 70 });
}
};
updateDimensions();
window.addEventListener("resize", updateDimensions);
return () => window.removeEventListener("resize", updateDimensions);
}, []);
const { size, center, baseRadius, gap } = dimensions;
return ( return (
<section className="flex flex-col items-center px-6 py-16"> <section className="flex flex-col items-center px-4 py-12 overflow-hidden sm:px-6 sm:py-16">
<div className="w-full mb-12 text-right max-w-7xl"> <div className="w-full mb-8 text-right sm:mb-12 max-w-7xl">
<h2 className="mb-2 text-3xl font-bold">تکنولوژی‌های ما</h2> <h2 className="mb-2 text-2xl font-bold sm:text-3xl">تکنولوژی‌های ما</h2>
<p className="text-muted">اکوسیستم کامل توسعه نرم‌افزار در یک نگاه</p> <p className="text-sm sm:text-base text-muted">اکوسیستم کامل توسعه نرم‌افزار در یک نگاه</p>
</div> </div>
<div className="flex flex-wrap items-center justify-center w-full gap-16 max-w-7xl lg:flex-nowrap"> <div className="flex flex-col items-center justify-center w-full gap-8 lg:flex-row lg:flex-nowrap lg:gap-16 max-w-7xl">
{/* ============================= */} {/* Orbital Tech System */}
{/* ORBITAL TECH SYSTEM */} <div
{/* ============================= */} className="relative flex-shrink-0"
<div className="relative w-[500px] h-[500px] flex-shrink-0"> style={{
{/* Center glowing core */} width: `${size}px`,
<div height: `${size}px`,
className="absolute top-1/2 left-1/2 }}
-translate-x-1/2 -translate-y-1/2 >
w-20 h-20 bg-accent rounded-full {/* Sun (Center) */}
shadow-[0_0_60px_rgba(249,115,22,0.6)] <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 lg:w-24 lg:h-24 text-2xl sm:text-3xl lg:text-4xl rounded-full bg-accent shadow-[0_0_40px_rgba(249,115,22,0.6)] sm:shadow-[0_0_60px_rgba(249,115,22,0.6)]">
flex items-center justify-center text-3xl z-10" ☀️
>
🚀
</div> </div>
{/* Orbit rings */} {/* Orbits (Rings 1 to 4) */}
{[1, 2, 3, 4].map((orbit) => ( {[1, 2, 3, 4].map((orbit) => {
<div const radius = baseRadius + orbit * gap;
key={orbit} return (
className="absolute -translate-x-1/2 -translate-y-1/2 border rounded-full top-1/2 left-1/2 border-border/40" <div
style={{ key={`ring-${orbit}`}
width: `${orbit * 130}px`, className="absolute -translate-x-1/2 -translate-y-1/2 border rounded-full pointer-events-none top-1/2 left-1/2 border-border/40"
height: `${orbit * 130}px`, style={{
}} width: `${radius * 2}px`,
/> height: `${radius * 2}px`,
))} }}
/>
);
})}
{/* Rotating tech icons */} {/* Orbiting Items */}
{techItems.map((tech, i) => { {techItems.map((tech, i) => {
const radius = tech.orbit * 65; const radius = baseRadius + tech.orbit * gap;
const speed = 25 + tech.orbit * 10; const speed = 25 + tech.orbit * 10;
const delay = i * -4; const angleRad = (tech.startAngle * Math.PI) / 180;
const x = center + radius * Math.cos(angleRad);
const y = center + radius * Math.sin(angleRad);
return ( return (
<div <div
key={i} key={`item-${i}`}
className="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" className="absolute"
style={{ style={{
width: radius * 2, left: `${x}px`,
height: radius * 2, top: `${y}px`,
animation: `spin ${speed}s linear infinite`, animation: `orbit-${tech.orbit} ${speed}s linear infinite`,
animationDelay: `${delay}s`, transformOrigin: `${center - x}px ${center - y}px`,
}} }}
> >
<button <button
onClick={() => setSelected(tech)} onClick={() => setSelected(tech)}
className={`absolute top-0 left-1/2 className={`pointer-events-auto cursor-pointer
-translate-x-1/2 -translate-y-1/2 -translate-x-1/2 -translate-y-1/2
w-14 h-14 rounded-full flex items-center justify-center text-xl transition-all w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-full flex items-center justify-center transition-all z-20 bg-background
${ ${
selected.name === tech.name selected.name === tech.name
? "bg-accent text-white shadow-[0_0_20px_rgba(249,115,22,0.5)] scale-110" ? "border-2 border-accent shadow-[0_0_15px_rgba(249,115,22,0.5)] sm:shadow-[0_0_20px_rgba(249,115,22,0.5)] scale-110"
: "bg-card border border-border hover:border-accent/50 hover:scale-105" : "border border-border hover:border-accent/50 hover:scale-110"
} }
`} `}
style={{ style={{
animation: `spin ${speed}s linear infinite reverse`, animation: `counter-rotate ${speed}s linear infinite`,
animationDelay: `${delay}s`,
}} }}
> >
{tech.icon} <div className="flex items-center justify-center w-full h-full">{tech.icon}</div>
</button> </button>
</div> </div>
); );
})} })}
</div> </div>
{/* ============================= */} {/* Information Card */}
{/* INFORMATION CARD */} <div className="w-full max-w-md p-6 text-right border sm:p-8 bg-card border-border rounded-xl">
{/* ============================= */} <div className="flex items-center justify-center w-12 h-12 mb-4 border sm:w-16 sm:h-16 sm:mb-6 bg-accent/10 border-accent/20 rounded-xl">
<div className="w-full max-w-md p-8 text-right border bg-card border-border rounded-xl">
<div className="flex items-center justify-center w-16 h-16 mb-6 text-3xl border bg-accent/10 border-accent/20 rounded-xl">
{selected.icon} {selected.icon}
</div> </div>
<h3 className="mb-3 text-xl font-bold sm:mb-4 sm:text-2xl">{selected.name}</h3>
<h3 className="mb-4 text-2xl font-bold">{selected.name}</h3> <p className="text-sm leading-relaxed sm:text-base text-muted">{selected.description}</p>
<p className="leading-relaxed text-muted">{selected.description}</p>
</div> </div>
</div> </div>
{/* Keyframes */}
<style>{` <style>{`
@keyframes spin { @keyframes orbit-1 {
from { transform: rotate(0deg); } from { transform: rotate(0deg); }
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
@keyframes orbit-2 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes orbit-3 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes orbit-4 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes counter-rotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(-360deg); }
}
`}</style> `}</style>
</section> </section>
); );