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="max-w-7xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
{/* Globe */} {/* 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"> <div className="relative mx-auto w-full max-w-[860px] aspect-[1/1] -mt-10 lg:-mt-16">
<Image <Image
src="/images/domain-globe.png" src="/images/domain-globe.png"
@@ -191,8 +191,8 @@ export default async function DomainPage({
{/* Feature pills */} {/* Feature pills */}
<div <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' 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)]`} } divide-[rgba(148,163,184,0.12)] light:divide-[color:var(--border-10)]`}
> >
<div className="grid grid-cols-2 sm:grid-cols-4"> <div className="grid grid-cols-2 sm:grid-cols-4">
{[ {[
@@ -203,10 +203,10 @@ export default async function DomainPage({
].map((item) => ( ].map((item) => (
<div <div
key={item.t} 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> <span className="whitespace-nowrap">{item.t}</span>
</div> </div>
))} ))}
@@ -524,7 +524,7 @@ export default async function DomainPage({
</div> </div>
<button <button
type="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'} {isFa ? 'جستجوی دامنه' : 'Search domain'}
</button> </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' }} transition={{ duration: 1.1, ease: 'easeOut' }}
className="absolute inset-0 opacity-[var(--hero-image-opacity)]" 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 <Image
src={ src={
mounted && resolvedTheme === 'light' mounted && resolvedTheme === 'light'
@@ -144,12 +144,12 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
unoptimized unoptimized
quality={100} quality={100}
sizes="(min-width: 1024px) 52vw, 100vw" sizes="(min-width: 1024px) 52vw, 100vw"
className="object-contain object-left" className={`object-contain ${locale === 'en' ? 'object-right scale-x-[-1]' : 'object-left'}`}
/> />
</div> </div>
{/* Right-side fade so text never blends into artwork */} {/* Side fade so text never blends into artwork */}
<div className="absolute inset-y-0 right-0 w-[78%] pointer-events-none" /> <div className={`absolute inset-y-0 ${locale === 'en' ? 'left-0' : 'right-0'} w-[78%] pointer-events-none`} />
{/* Bottom fade */} {/* Bottom fade */}
<div className="absolute inset-x-0 bottom-0 h-2/3 pointer-events-none" /> <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 */} {/* 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 <motion.div
variants={heroItem} 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" 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"> <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) => ( {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> <GradientIconBox>
<HeroIcon name={h.icon} /> <HeroIcon name={h.icon} />
</GradientIconBox> </GradientIconBox>

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

@@ -55,8 +55,8 @@ export default function DomainSearchResults({
className={[ className={[
'shrink-0 px-3 py-1 rounded-full text-xs font-semibold border', 'shrink-0 px-3 py-1 rounded-full text-xs font-semibold border',
available available
? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-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', : 'border-rose-400/30 bg-rose-400/10 text-rose-200 light:text-[#0a192f]',
].join(' ')} ].join(' ')}
> >
{available ? (isFa ? 'موجود' : 'Available') : isFa ? 'گرفته شده' : 'Taken'} {available ? (isFa ? 'موجود' : 'Available') : isFa ? 'گرفته شده' : 'Taken'}
@@ -69,7 +69,7 @@ export default function DomainSearchResults({
className={[ className={[
'mt-3 w-full px-4 py-2 rounded-xl text-xs font-extrabold transition-opacity', 'mt-3 w-full px-4 py-2 rounded-xl text-xs font-extrabold transition-opacity',
available 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', : 'text-[color:var(--text-muted-2)] bg-[color:var(--glass-02)] border border-[color:var(--border-10)] cursor-not-allowed',
].join(' ')} ].join(' ')}
> >
@@ -129,8 +129,8 @@ export default function DomainSearchResults({
className={[ className={[
'px-3 py-1 rounded-full text-xs font-semibold border inline-flex', 'px-3 py-1 rounded-full text-xs font-semibold border inline-flex',
available available
? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-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', : 'border-rose-400/30 bg-rose-400/10 text-rose-200 light:text-[#0a192f]',
].join(' ')} ].join(' ')}
> >
{available ? (isFa ? 'موجود' : 'Available') : isFa ? 'گرفته شده' : 'Taken'} {available ? (isFa ? 'موجود' : 'Available') : isFa ? 'گرفته شده' : 'Taken'}

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

@@ -1,7 +1,6 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { Search } from 'lucide-react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { normalizeSld } from './domain-search-data'; import { normalizeSld } from './domain-search-data';
@@ -33,17 +32,12 @@ export default function DomainSearch({
<button <button
type="button" type="button"
onClick={submit} 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'} {isFa ? 'جستجو' : 'Search'}
</button> </button>
<div className="relative flex-1"> <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 <input
type="text" type="text"
value={query} value={query}
@@ -53,7 +47,7 @@ export default function DomainSearch({
}} }}
placeholder={isFa ? 'نام دامنه خود را وارد کنید…' : 'Enter your domain name…'} 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 ${ 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> </div>

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

@@ -20,7 +20,6 @@ export default function HeroSection() {
// تنظیمات انیمیشن برای نمایش متوالی (Stagger) // تنظیمات انیمیشن برای نمایش متوالی (Stagger)
const { locale, t } = useI18n(); const { locale, t } = useI18n();
const dir = locale === 'en' ? 'ltr' : 'rtl'; const dir = locale === 'en' ? 'ltr' : 'rtl';
const flipClass = locale === 'en' ? '-scale-x-100' : '';
const { resolvedTheme } = useTheme(); const { resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
@@ -62,7 +61,7 @@ export default function HeroSection() {
unoptimized unoptimized
quality={100} quality={100}
sizes="100vw" sizes="100vw"
className={`object-left md:object-center transform ${flipClass}`} className={`object-left md:object-center transform ${locale === 'en' ? 'scale-x-[-1]' : ''}`}
/> />
{/* لایه گرادینت */} {/* لایه گرادینت */}
@@ -79,14 +78,14 @@ export default function HeroSection() {
{/* Hero Content */} {/* Hero Content */}
<main className="flex-1 flex flex-col lg:flex-row items-center pt-20 pb-10 px-8 lg:px-16"> <main className="flex-1 flex flex-col lg:flex-row items-center pt-20 pb-10 px-8 lg:px-16">
{/* Right Side - Text & Buttons */} {/* Right Side - Text & Buttons */}
<motion.div <motion.div
variants={containerVariants} variants={containerVariants}
initial="hidden" initial="hidden"
animate="visible" 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"> <motion.h1 variants={itemVariants} className="text-5xl lg:text-[64px] font-bold leading-[1.3] mb-6">
{t('hero_title_1')} {t('hero_title_1')}
@@ -123,7 +122,7 @@ export default function HeroSection() {
</motion.div> </motion.div>
{/* Left Side - Glassmorphism Floating Cards */} {/* 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 */} {/* Top Shield Card */}
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.8 }} 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="relative p-6 sm:p-8 md:p-10">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
{/* Left illustration */} {/* 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="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%)]" /> <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> </div>
{/* Right copy */} {/* 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"> <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>{isFa ? 'ایمیل سازمانی' : 'Business Email'}</span>
<span className="w-1 h-1 rounded-full bg-emerald-400/70" /> <span className="w-1 h-1 rounded-full bg-emerald-400/70" />