ui fixes
This commit is contained in:
haniyeroozmand
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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]' : ''}`}
|
||||
/>
|
||||
|
||||
{/* لایه گرادینت */}
|
||||
@@ -79,14 +78,14 @@ export default function HeroSection() {
|
||||
|
||||
|
||||
{/* 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 */}
|
||||
<motion.div
|
||||
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 }}
|
||||
|
||||
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user