haniyerz/Mugcloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fixes

Browse Source
This commit is contained in:
haniyeroozmand
2026-05-24 18:16:00 +03:30
parent a1775718d9
commit e158972bd6
6 changed files with 25 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/[locale]/domain/page.tsx
View File

@@ -105,7 +105,7 @@ export default async function DomainPage({
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
{/* Globe */}
<div className="lg:col-span-6 order-2">
<div className={`lg:col-span-6 ${isFa ? 'order-2 lg:order-1' : 'order-2 lg:order-2'}`}>
<div className="relative mx-auto w-full max-w-[860px] aspect-[1/1] -mt-10 lg:-mt-16">
<Image
src="/images/domain-globe.png"
@@ -191,8 +191,8 @@ export default async function DomainPage({
{/* Feature pills */}
<div
className={`mt-5 rounded-2xl border border-[rgba(148,163,184,0.14)] bg-[rgba(2,6,23,0.32)] backdrop-blur-xl overflow-hidden ${isFa ? 'divide-x divide-x-reverse' : 'divide-x'
} divide-[rgba(148,163,184,0.12)]`}
className={`mt-5 rounded-2xl border border-[rgba(148,163,184,0.14)] dark:border-[rgba(148,163,184,0.14)] light:border-[color:var(--border-10)] bg-[rgba(2,6,23,0.32)] dark:bg-[rgba(2,6,23,0.32)] light:bg-[color:var(--glass-05)] backdrop-blur-xl overflow-hidden ${isFa ? 'divide-x divide-x-reverse' : 'divide-x'
} divide-[rgba(148,163,184,0.12)] light:divide-[color:var(--border-10)]`}
>
<div className="grid grid-cols-2 sm:grid-cols-4">
{[
@@ -203,10 +203,10 @@ export default async function DomainPage({
].map((item) => (
<div
key={item.t}
className={`flex items-center justify-center gap-2 px-4 py-4 text-xs sm:text-sm text-slate-200/80 ${isFa ? 'flex-row-reverse' : ''
className={`flex items-center justify-center gap-2 px-4 py-4 text-xs sm:text-sm text-slate-200/80 light:text-[#0a192f] ${isFa ? 'flex-row-reverse' : ''
}`}
>
<item.i className="w-5 h-5 text-indigo-300/80" />
<item.i className="w-5 h-5 text-indigo-300/80 light:text-[#80c8f5]" />
<span className="whitespace-nowrap">{item.t}</span>
</div>
))}
@@ -524,7 +524,7 @@ export default async function DomainPage({
</div>
<button
type="button"
className="px-8 py-3.5 rounded-2xl bg-gradient-to-r from-emerald-400 to-indigo-500 text-[#071027] font-extrabold text-sm hover:opacity-90 transition-opacity"
className="px-8 py-3.5 rounded-2xl bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] font-extrabold text-sm hover:opacity-90 transition-opacity"
>
{isFa ? 'جستجوی دامنه' : 'Search domain'}
</button>

12
src/app/[locale]/services/[slug]/service-detail-page.tsx
View File

@@ -131,7 +131,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
transition={{ duration: 1.1, ease: 'easeOut' }}
className="absolute inset-0 opacity-[var(--hero-image-opacity)]"
>
<div className="absolute inset-y-0 left-20 w-[70%] max-w-[1120px] pointer-events-none">
<div className={`absolute inset-y-0 ${locale === 'en' ? 'right-20' : 'left-20'} w-[70%] max-w-[1120px] pointer-events-none`}>
<Image
src={
mounted && resolvedTheme === 'light'
@@ -144,12 +144,12 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
unoptimized
quality={100}
sizes="(min-width: 1024px) 52vw, 100vw"
className="object-contain object-left"
className={`object-contain ${locale === 'en' ? 'object-right scale-x-[-1]' : 'object-left'}`}
/>
</div>
{/* Right-side fade so text never blends into artwork */}
<div className="absolute inset-y-0 right-0 w-[78%] pointer-events-none" />
{/* Side fade so text never blends into artwork */}
<div className={`absolute inset-y-0 ${locale === 'en' ? 'left-0' : 'right-0'} w-[78%] pointer-events-none`} />
{/* Bottom fade */}
<div className="absolute inset-x-0 bottom-0 h-2/3 pointer-events-none" />
@@ -184,7 +184,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
>
{/* Right side - text */}
<div className="lg:col-span-6">
<div className={`lg:col-span-6 ${locale === 'en' ? 'lg:order-1' : 'lg:order-2'}`}>
<motion.div
variants={heroItem}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md text-sm text-[#84e1bc] mb-5"
@@ -204,7 +204,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
<motion.div variants={heroItem} className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-[color:var(--text-muted)] mb-10">
{content.heroHighlights.map((h) => (
<div key={h.label} className="flex items-center gap-3 en-justify-end justify-start">
<div key={h.label} className="flex items-center gap-3 justify-start">
<GradientIconBox>
<HeroIcon name={h.icon} />
</GradientIconBox>

10
src/app/components/domain-search-results.tsx
View File

@@ -55,8 +55,8 @@ export default function DomainSearchResults({
className={[
'shrink-0 px-3 py-1 rounded-full text-xs font-semibold border',
available
? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200'
: 'border-rose-400/30 bg-rose-400/10 text-rose-200',
? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200 light:text-[#0a192f]'
: 'border-rose-400/30 bg-rose-400/10 text-rose-200 light:text-[#0a192f]',
].join(' ')}
>
{available ? (isFa ? 'موجود' : 'Available') : isFa ? 'گرفته شده' : 'Taken'}
@@ -69,7 +69,7 @@ export default function DomainSearchResults({
className={[
'mt-3 w-full px-4 py-2 rounded-xl text-xs font-extrabold transition-opacity',
available
? 'text-[#071027] bg-gradient-to-r from-emerald-400 via-cyan-400 to-indigo-500 hover:opacity-95 shadow-[0_12px_40px_rgba(34,211,238,0.14)] light:shadow-[0_14px_55px_rgba(2,6,23,0.12)]'
? 'text-[#0a192f] bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] hover:opacity-90'
: 'text-[color:var(--text-muted-2)] bg-[color:var(--glass-02)] border border-[color:var(--border-10)] cursor-not-allowed',
].join(' ')}
>
@@ -129,8 +129,8 @@ export default function DomainSearchResults({
className={[
'px-3 py-1 rounded-full text-xs font-semibold border inline-flex',
available
? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200'
: 'border-rose-400/30 bg-rose-400/10 text-rose-200',
? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200 light:text-[#0a192f]'
: 'border-rose-400/30 bg-rose-400/10 text-rose-200 light:text-[#0a192f]',
].join(' ')}
>
{available ? (isFa ? 'موجود' : 'Available') : isFa ? 'گرفته شده' : 'Taken'}

10
src/app/components/domain-search.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import { useState } from 'react';
import { Search } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { normalizeSld } from './domain-search-data';
@@ -33,17 +32,12 @@ export default function DomainSearch({
<button
type="button"
onClick={submit}
className="px-10 py-4 text-sm font-extrabold text-[#071027] bg-gradient-to-r from-emerald-400 via-cyan-400 to-indigo-500 hover:opacity-95 transition-opacity min-w-[160px] shadow-[0_12px_40px_rgba(34,211,238,0.14)] light:shadow-[0_14px_55px_rgba(2,6,23,0.12)]"
className="px-10 py-4 text-sm font-extrabold text-[#0a192f] bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] hover:opacity-90 transition-opacity min-w-[160px]"
>
{isFa ? 'جستجو' : 'Search'}
</button>
<div className="relative flex-1">
<div className={`absolute inset-y-0 ${isFa ? 'left-4' : 'left-4'} flex items-center`}>
<div className="w-10 h-10 rounded-xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] flex items-center justify-center">
<Search className="w-5 h-5 text-[color:var(--text-muted)]" />
</div>
</div>
<input
type="text"
value={query}
@@ -53,7 +47,7 @@ export default function DomainSearch({
}}
placeholder={isFa ? 'نام دامنه خود را وارد کنید…' : 'Enter your domain name…'}
className={`w-full h-full bg-transparent px-4 py-4 text-sm text-[color:var(--text-primary)] placeholder:text-slate-300/40 light:placeholder:text-slate-500/60 outline-none ${
isFa ? 'pr-6 pl-16 text-right' : 'pl-16 pr-6 text-left'
isFa ? 'pr-6 pl-6 text-right' : 'pl-6 pr-6 text-left'
}`}
/>
</div>

7
src/app/components/hero.tsx
View File

@@ -20,7 +20,6 @@ export default function HeroSection() {
// تنظیمات انیمیشن برای نمایش متوالی (Stagger)
const { locale, t } = useI18n();
const dir = locale === 'en' ? 'ltr' : 'rtl';
const flipClass = locale === 'en' ? '-scale-x-100' : '';
const { resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
@@ -62,7 +61,7 @@ export default function HeroSection() {
unoptimized
quality={100}
sizes="100vw"
className={`object-left md:object-center transform ${flipClass}`}
className={`object-left md:object-center transform ${locale === 'en' ? 'scale-x-[-1]' : ''}`}
/>
{/* لایه گرادینت */}
@@ -86,7 +85,7 @@ export default function HeroSection() {
variants={containerVariants}
initial="hidden"
animate="visible"
className="w-full lg:w-[55%] flex flex-col justify-center text-right en-text-left z-20"
className={`w-full lg:w-[55%] flex flex-col justify-center text-right en-text-left z-20 ${locale === 'en' ? 'lg:order-2' : 'lg:order-1'}`}
>
<motion.h1 variants={itemVariants} className="text-5xl lg:text-[64px] font-bold leading-[1.3] mb-6">
{t('hero_title_1')}
@@ -123,7 +122,7 @@ export default function HeroSection() {
</motion.div>
{/* Left Side - Glassmorphism Floating Cards */}
<div className="w-full lg:w-[45%] relative h-[500px] hidden lg:block">
<div className={`w-full lg:w-[45%] relative h-[500px] hidden lg:block ${locale === 'en' ? 'lg:order-2' : 'lg:order-1'}`}>
{/* Top Shield Card */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}

4
src/app/components/org-email-hero.tsx
View File

@@ -62,7 +62,7 @@ export default function OrgEmailHero({
<div className="relative p-6 sm:p-8 md:p-10">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
{/* Left illustration */}
<div className="lg:col-span-6">
<div className={`lg:col-span-6 ${isFa ? 'lg:order-1' : 'lg:order-2'}`}>
<div className="relative mx-auto w-full max-w-[560px] aspect-[6/5]">
<div className="absolute inset-0 rounded-[2rem] bg-[radial-gradient(closest-side_at_40%_45%,rgba(34,211,238,0.10),transparent_60%),radial-gradient(closest-side_at_70%_40%,rgba(167,139,250,0.10),transparent_62%)]" />
@@ -209,7 +209,7 @@ export default function OrgEmailHero({
</div>
{/* Right copy */}
<div className="lg:col-span-6">
<div className={`lg:col-span-6 ${isFa ? 'lg:order-2' : 'lg:order-1'}`}>
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[rgba(255,255,255,0.04)] border border-white/10 text-xs text-slate-200/70">
<span>{isFa ? 'ایمیل سازمانی' : 'Business Email'}</span>
<span className="w-1 h-1 rounded-full bg-emerald-400/70" />