Public sayfalarını dark mod eklendi
This commit is contained in:
Sedat Öztürk
parent
ef201fda13
commit
b38aabb5bd
23 changed files with 389 additions and 328 deletions
|
|
@ -6864,6 +6864,18 @@
|
|||
"tr": "Satış Sipariş Kalemleri",
|
||||
"en": "Sales Order Items"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "App.Dark",
|
||||
"tr": "Karanlık",
|
||||
"en": "Dark"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "App.Light",
|
||||
"tr": "Açık",
|
||||
"en": "Light"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "Public.about.description.closing",
|
||||
|
|
|
|||
|
|
@ -421,7 +421,7 @@ public class ListFormSeeder_Saas : IDataSeedContributor, ITransientDependency
|
|||
Visible = true,
|
||||
IsActive = true,
|
||||
AllowSearch = true,
|
||||
ValidationRuleJson = DefaultValidationRuleEmailJson,
|
||||
ValidationRuleJson = DefaultValidationRuleEmailRequiredJson,
|
||||
ColumnCustomizationJson = DefaultColumnCustomizationJson,
|
||||
PermissionJson = DefaultFieldPermissionJson(TenantManagementPermissions.Tenants.Create, TenantManagementPermissions.Tenants.Default, TenantManagementPermissions.Tenants.Update, true, true, false),
|
||||
PivotSettingsJson = DefaultPivotSettingsJson
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import View from '@/views/Views'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useLocation, Link } from 'react-router-dom'
|
||||
import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram } from 'react-icons/fa';
|
||||
import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram } from 'react-icons/fa'
|
||||
import {
|
||||
LuMenu,
|
||||
LuX,
|
||||
|
|
@ -14,13 +14,17 @@ import {
|
|||
LuPhone,
|
||||
LuMapPin,
|
||||
LuMail,
|
||||
} from 'react-icons/lu';
|
||||
LuMoon,
|
||||
LuSun,
|
||||
} from 'react-icons/lu'
|
||||
import Logo from '@/views/public/Logo'
|
||||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import LanguageSelector from '../template/LanguageSelector'
|
||||
import Demo from '@/views/public/Demo'
|
||||
import { ScrollContext } from '@/contexts/ScrollContext'
|
||||
import useDarkMode from '@/utils/hooks/useDarkmode'
|
||||
import { THEME_ENUM } from '@/constants/theme.constant'
|
||||
|
||||
interface NavLink {
|
||||
resourceKey?: string
|
||||
|
|
@ -33,6 +37,7 @@ interface NavLink {
|
|||
const PublicLayout = () => {
|
||||
const location = useLocation()
|
||||
const { translate } = useLocalization()
|
||||
const [isDarkMode, setThemeMode] = useDarkMode()
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [scrolled, setScrolled] = useState(false)
|
||||
|
|
@ -109,6 +114,38 @@ const PublicLayout = () => {
|
|||
|
||||
const isLoginLink = (resourceKey?: string) => resourceKey === 'Public.nav.giris'
|
||||
|
||||
const themeToggle = (
|
||||
<div className="inline-flex items-center rounded-lg p-0.5 shadow-inner shadow-black/10">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setThemeMode(THEME_ENUM.MODE_LIGHT)}
|
||||
aria-pressed={!isDarkMode}
|
||||
title="Light mode"
|
||||
className={`inline-flex h-8 items-center gap-1.5 px-2.5 text-xs font-semibold transition-colors rounded-l-md ${
|
||||
!isDarkMode
|
||||
? 'bg-white text-gray-950'
|
||||
: 'text-gray-300 hover:bg-white/10 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<LuSun size={15} strokeWidth={1.8} />
|
||||
{translate('::App.Light')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setThemeMode(THEME_ENUM.MODE_DARK)}
|
||||
aria-pressed={isDarkMode}
|
||||
title="Dark mode"
|
||||
className={`inline-flex h-8 items-center gap-1.5 px-2.5 text-xs font-semibold transition-colors rounded-r-md ${
|
||||
isDarkMode ? 'bg-white text-gray-950' : 'text-gray-300 hover:bg-white/10 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<LuMoon size={15} strokeWidth={1.8} />
|
||||
{translate('::App.Dark')}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
const isActiveLink = (path?: string) => {
|
||||
if (!path) return false
|
||||
if (path === ROUTES_ENUM.public.home) return location.pathname === path
|
||||
|
|
@ -137,20 +174,18 @@ const PublicLayout = () => {
|
|||
const active = isActiveLink(link.path)
|
||||
const baseClass =
|
||||
'relative flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 group'
|
||||
const activeClass = active
|
||||
? 'text-white'
|
||||
: 'text-gray-300 hover:text-white'
|
||||
const activeClass = active ? 'text-white' : 'text-gray-300 hover:text-white'
|
||||
return link.path ? (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
className={`${baseClass} ${activeClass}`}
|
||||
>
|
||||
<Link key={link.path} to={link.path} className={`${baseClass} ${activeClass}`}>
|
||||
{link.icon && (
|
||||
<link.icon
|
||||
size={22}
|
||||
strokeWidth={1.75}
|
||||
className={active ? 'text-blue-400' : 'text-gray-400 group-hover:text-blue-400 transition-colors'}
|
||||
className={
|
||||
active
|
||||
? 'text-blue-400'
|
||||
: 'text-gray-400 group-hover:text-blue-400 transition-colors'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{link.name}
|
||||
|
|
@ -183,6 +218,7 @@ const PublicLayout = () => {
|
|||
{/* Right side: Language + Login */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<LanguageSelector />
|
||||
{themeToggle}
|
||||
<div className="w-px h-5 bg-white/20" />
|
||||
{navLinks
|
||||
.filter((l) => isLoginLink(l.resourceKey))
|
||||
|
|
@ -262,13 +298,18 @@ const PublicLayout = () => {
|
|||
}}
|
||||
className="flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white rounded-md transition-colors text-left"
|
||||
>
|
||||
{link.icon && <link.icon size={16} strokeWidth={1.75} className="text-gray-400" />}
|
||||
{link.icon && (
|
||||
<link.icon size={16} strokeWidth={1.75} className="text-gray-400" />
|
||||
)}
|
||||
{link.name}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
<div className="pt-2 pb-1 border-t border-white/10 mt-1">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<LanguageSelector />
|
||||
{themeToggle}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -440,12 +481,14 @@ const PublicLayout = () => {
|
|||
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold mb-4 text-white">
|
||||
{translate('::App.Contact')}
|
||||
</h3>
|
||||
<h3 className="text-lg font-bold mb-4 text-white">{translate('::App.Contact')}</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start space-x-3">
|
||||
<LuMapPin size={18} strokeWidth={1.75} className="text-gray-400 mt-1 flex-shrink-0" />
|
||||
<LuMapPin
|
||||
size={18}
|
||||
strokeWidth={1.75}
|
||||
className="text-gray-400 mt-1 flex-shrink-0"
|
||||
/>
|
||||
<span className="text-gray-400">{translate('::Public.footer.address')}</span>
|
||||
</li>
|
||||
<li className="flex items-center space-x-3">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`sticky z-20 bg-white border-b border-gray-200 shadow-sm mb-6 transition-all duration-300 ${
|
||||
className={`sticky z-20 bg-white border-b border-gray-200 shadow-sm mb-6 transition-all duration-300 dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-950/40 ${
|
||||
isScrolled ? 'top-[5.5rem]' : 'top-[6.5rem]'
|
||||
}`}
|
||||
>
|
||||
|
|
@ -41,8 +41,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
|
|||
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="flex items-center space-x-2 rounded-lg">
|
||||
<FaCalendar className="w-5 h-5 text-gray-600" />
|
||||
<span className="font-medium text-gray-900">
|
||||
<FaCalendar className="w-5 h-5 text-gray-600 dark:text-gray-300" />
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{translate('::Public.products.billingcycle')}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -55,8 +55,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
|
|||
globalBillingCycle === 'monthly'
|
||||
? 'bg-blue-600 text-white shadow-md'
|
||||
: hasCartItems
|
||||
? 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
? 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
title={
|
||||
hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined
|
||||
|
|
@ -71,8 +71,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
|
|||
globalBillingCycle === 'yearly'
|
||||
? 'bg-blue-600 text-white shadow-md'
|
||||
: hasCartItems
|
||||
? 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
? 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
title={
|
||||
hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined
|
||||
|
|
@ -86,8 +86,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
|
|||
<div className="flex items-center space-x-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<FaClock className="w-5 h-5 text-gray-600" />
|
||||
<span className="font-medium text-gray-900">
|
||||
<FaClock className="w-5 h-5 text-gray-600 dark:text-gray-300" />
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{translate('::Public.products.period')}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -95,10 +95,10 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
|
|||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => !hasCartItems && setGlobalPeriod(Math.max(1, globalPeriod - 1))}
|
||||
className={`p-2 rounded-md border border-gray-300 transition-colors ${
|
||||
className={`p-2 rounded-md border border-gray-300 transition-colors dark:border-gray-700 dark:text-gray-200 ${
|
||||
globalPeriod <= 1 || hasCartItems
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'hover:bg-gray-50'
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
disabled={globalPeriod <= 1 || hasCartItems}
|
||||
title={hasCartItems ? 'Sepette ürün varken periyod değiştirilemez' : undefined}
|
||||
|
|
@ -106,9 +106,9 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
|
|||
<FaMinus className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center space-x-2 bg-gray-50 px-4 py-2 rounded-lg">
|
||||
<div className="flex items-center space-x-2 bg-gray-50 px-4 py-2 rounded-lg dark:bg-gray-800">
|
||||
<span className="font-bold text-lg text-blue-600">{globalPeriod}</span>
|
||||
<span className="text-sm text-gray-600">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{globalBillingCycle === 'monthly'
|
||||
? translate('::Public.products.billingcycle.month')
|
||||
: translate('::Public.products.billingcycle.year')}
|
||||
|
|
@ -117,10 +117,10 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
|
|||
|
||||
<button
|
||||
onClick={() => !hasCartItems && setGlobalPeriod(globalPeriod + 1)}
|
||||
className={`p-2 rounded-md border border-gray-300 transition-colors ${
|
||||
className={`p-2 rounded-md border border-gray-300 transition-colors dark:border-gray-700 dark:text-gray-200 ${
|
||||
hasCartItems
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'hover:bg-gray-50'
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
disabled={hasCartItems}
|
||||
title={hasCartItems ? 'Sepette ürün varken periyod değiştirilemez' : undefined}
|
||||
|
|
|
|||
|
|
@ -51,17 +51,17 @@ export const Cart: React.FC<CartProps> = ({
|
|||
<div className="fixed inset-0 z-50 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-black bg-opacity-50" onClick={onClose} />
|
||||
|
||||
<div className="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl">
|
||||
<div className="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl dark:bg-gray-900">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
<h2 className="text-base font-semibold text-gray-900">
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
|
||||
{translate('::Public.cart.title')}
|
||||
</h2>
|
||||
<div className="flex items-center space-x-2">
|
||||
{cartState.items.length > 0 && (
|
||||
<button
|
||||
onClick={handleClearCart}
|
||||
className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||||
className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors dark:hover:bg-red-950/40"
|
||||
title={translate('::Public.cart.clear')}
|
||||
>
|
||||
<FaTrash className="w-5 h-5" />
|
||||
|
|
@ -69,7 +69,7 @@ export const Cart: React.FC<CartProps> = ({
|
|||
)}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors dark:text-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
<FaTimes className="w-5 h-5" />
|
||||
</button>
|
||||
|
|
@ -78,7 +78,7 @@ export const Cart: React.FC<CartProps> = ({
|
|||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{cartState.items.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
|
||||
<FaShoppingBag className="w-16 h-16 mb-4" />
|
||||
<p className="text-lg font-medium">{translate('::Public.cart.empty.title')}</p>
|
||||
<p className="text-sm">{translate('::Public.cart.empty.subtitle')}</p>
|
||||
|
|
@ -88,10 +88,10 @@ export const Cart: React.FC<CartProps> = ({
|
|||
{cartState.items.map((item: BasketItem, index: number) => (
|
||||
<div
|
||||
key={`${item.product.id}-${item.billingCycle}-${index}`}
|
||||
className="border border-gray-200 rounded-lg p-4"
|
||||
className="border border-gray-200 rounded-lg p-4 dark:border-gray-700 dark:bg-gray-950"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-medium text-gray-900 text-sm leading-tight">
|
||||
<h4 className="font-medium text-gray-900 text-sm leading-tight dark:text-gray-100">
|
||||
{translate('::' + item.product.name)}
|
||||
</h4>
|
||||
<button
|
||||
|
|
@ -103,9 +103,9 @@ export const Cart: React.FC<CartProps> = ({
|
|||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-gray-600">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{item.product.isQuantityBased && item.quantity > 1 && (
|
||||
<span className="font-medium text-gray-900">{item.quantity}x - </span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">{item.quantity}x - </span>
|
||||
)}
|
||||
{item.billingCycle === 'monthly'
|
||||
? translate('::Public.products.billingcycle.monthly')
|
||||
|
|
@ -113,7 +113,7 @@ export const Cart: React.FC<CartProps> = ({
|
|||
? translate('::Public.products.billingcycle.yearly')
|
||||
: translate('::Public.products.billingcycle.monthly')}
|
||||
{cartState.globalPeriod > 1 && item.product.isQuantityBased && (
|
||||
<span className="text-xs text-gray-500">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
({cartState.globalPeriod}{' '}
|
||||
{item.billingCycle === 'monthly'
|
||||
? translate('::Public.products.billingcycle.month')
|
||||
|
|
@ -127,14 +127,14 @@ export const Cart: React.FC<CartProps> = ({
|
|||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => updateQuantity(item.product.id, item.quantity - 1)}
|
||||
className="p-1 rounded border border-gray-300 hover:bg-gray-50"
|
||||
className="p-1 rounded border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
<FaMinus className="w-3 h-3" />
|
||||
</button>
|
||||
<span className="w-8 text-center text-sm">{item.quantity}</span>
|
||||
<span className="w-8 text-center text-sm dark:text-gray-100">{item.quantity}</span>
|
||||
<button
|
||||
onClick={() => updateQuantity(item.product.id, item.quantity + 1)}
|
||||
className="p-1 rounded border border-gray-300 hover:bg-gray-50"
|
||||
className="p-1 rounded border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
<FaPlus className="w-3 h-3" />
|
||||
</button>
|
||||
|
|
@ -152,9 +152,9 @@ export const Cart: React.FC<CartProps> = ({
|
|||
</div>
|
||||
|
||||
{cartState.items.length > 0 && (
|
||||
<div className="border-t border-gray-200 p-6">
|
||||
<div className="border-t border-gray-200 p-6 dark:border-gray-700">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<span className="text-lg font-semibold text-gray-900">
|
||||
<span className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
{translate('::App.Listform.ListformField.Total')}
|
||||
</span>
|
||||
<span className="text-xl font-bold text-blue-600">
|
||||
|
|
|
|||
|
|
@ -15,24 +15,24 @@ export const OrderSuccess: React.FC<OrderSuccessProps> = ({ orderId, onBackToSho
|
|||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8">
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
<div className="mb-6">
|
||||
<FaCheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-bold text-gray-900">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{translate('::Public.order.success.title')}
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-600">
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
{translate('::Public.order.success.number')}{' '}
|
||||
<span className="font-semibold text-blue-600">#{orderId}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
|
||||
<h3 className="font-semibold text-green-800 mb-2">
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6 dark:border-green-900/60 dark:bg-green-950/30">
|
||||
<h3 className="font-semibold text-green-800 mb-2 dark:text-green-300">
|
||||
{translate('::Public.order.success.nextSteps')}
|
||||
</h3>
|
||||
<ul className="text-sm text-green-700 space-y-1 text-left">
|
||||
<ul className="text-sm text-green-700 space-y-1 text-left dark:text-green-200">
|
||||
<li>• {translate('::Public.order.success.step1')}</li>
|
||||
<li>• {translate('::Public.order.success.step2')}</li>
|
||||
<li>• {translate('::Public.order.success.step3')}</li>
|
||||
|
|
@ -42,7 +42,7 @@ export const OrderSuccess: React.FC<OrderSuccessProps> = ({ orderId, onBackToSho
|
|||
<div className="flex flex-col sm:flex-row gap-4 items-center justify-center">
|
||||
<button
|
||||
onClick={() => navigate(ROUTES_ENUM.public.home)}
|
||||
className="flex items-center justify-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
className="flex items-center justify-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
<FaArrowLeft className="w-4 h-4 mr-2" />
|
||||
{translate('::Public.notFound.button')}
|
||||
|
|
|
|||
|
|
@ -127,15 +127,15 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
<form onSubmit={handleSubmit} className="flex flex-col lg:flex-row gap-6">
|
||||
{/* 3 Sütun: Ödeme Yöntemi | Taksit Seçenekleri | Sipariş Özeti */}
|
||||
<div className="w-full lg:w-1/3 flex flex-col gap-6">
|
||||
<div className="bg-white rounded-xl shadow border p-6">
|
||||
<div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
{tenant && (
|
||||
<>
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center">
|
||||
<FaUser className="w-5 h-5 text-green-600 mr-2" />{' '}
|
||||
{translate('::Public.payment.customerInfo')}
|
||||
</h2>
|
||||
<div className="pt-4 border-t border-gray-200">
|
||||
<div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700">
|
||||
<div className="pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700 dark:text-gray-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaUser className="w-4 h-4 text-gray-500" />
|
||||
<span className="font-medium">
|
||||
|
|
@ -252,7 +252,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
|
||||
<div className="w-full lg:w-1/3 flex flex-col gap-6">
|
||||
{/* 1. Sütun: Ödeme Yöntemi */}
|
||||
<div className="bg-white rounded-xl shadow border p-6">
|
||||
<div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center">
|
||||
<FaLock className="w-5 h-5 text-green-600 mr-2" />{' '}
|
||||
{translate('::Public.payment.method.title')}
|
||||
|
|
@ -264,7 +264,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
className={`flex items-center p-3 border-2 rounded-lg cursor-pointer transition-all ${
|
||||
selectedPaymentMethod === method.name
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
: 'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-500'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
|
|
@ -279,8 +279,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
/>
|
||||
<span className="text-2xl mr-3">{method.logo}</span>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{method.name}</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
<div className="font-medium text-gray-900 dark:text-gray-100">{method.name}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{method.name === defaultPaymentMethod
|
||||
? translate('::Public.payment.method.installmentsAvailable')
|
||||
: translate('::Public.payment.method.noCommission')}
|
||||
|
|
@ -293,8 +293,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
|
||||
{/* Taksit Seçenekleri */}
|
||||
{selectedPaymentMethod === defaultPaymentMethod && (
|
||||
<div className="bg-white rounded-xl shadow border p-4">
|
||||
<h3 className="text-md font-medium text-gray-800 mb-2">
|
||||
<div className="bg-white rounded-xl shadow border p-4 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
<h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-2">
|
||||
{translate('::App.Orders.InstallmentOptions')}
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
|
|
@ -304,7 +304,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
className={`flex flex-col items-center justify-center h-full p-4 border-2 rounded-xl cursor-pointer transition-all text-xs md:text-sm text-center select-none ${
|
||||
selectedInstallment?.installment === option.installment
|
||||
? 'border-blue-500 bg-blue-50 shadow-md scale-105'
|
||||
: 'border-gray-200 hover:border-blue-200'
|
||||
: 'border-gray-200 hover:border-blue-200 dark:border-gray-700 dark:hover:border-blue-500'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
|
|
@ -327,7 +327,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
? `${option.installment} ${translate('::Public.payment.installments.monthly')}`
|
||||
: translate('::Public.payment.installments.single')}
|
||||
</div>
|
||||
<div className="font-extrabold text-lg text-gray-900 mt-1">
|
||||
<div className="font-extrabold text-lg text-gray-900 dark:text-gray-100 mt-1">
|
||||
{formatPrice(
|
||||
(cartState.total + cartState.total * option.commission) /
|
||||
option.installment,
|
||||
|
|
@ -344,8 +344,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
<div className="w-full lg:w-1/3 flex flex-col gap-6">
|
||||
{/* Kart Bilgileri */}
|
||||
{selectedPaymentMethod === defaultPaymentMethod && (
|
||||
<div className="bg-white rounded-xl shadow border p-6 space-y-3">
|
||||
<h3 className="text-md font-medium text-gray-800 mb-3">
|
||||
<div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40 space-y-3">
|
||||
<h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-3">
|
||||
{translate('::Public.payment.card.title')}
|
||||
</h3>
|
||||
<input
|
||||
|
|
@ -353,7 +353,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
required
|
||||
value={paymentData.cardName}
|
||||
onChange={(e) => handleInputChange('cardName', e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
|
||||
placeholder={translate('::Public.payment.card.name')}
|
||||
/>
|
||||
<input
|
||||
|
|
@ -361,7 +361,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
required
|
||||
value={paymentData.cardNumber}
|
||||
onChange={(e) => handleInputChange('cardNumber', e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
|
||||
placeholder={translate('::Public.payment.card.number')}
|
||||
maxLength={19}
|
||||
/>
|
||||
|
|
@ -371,7 +371,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
required
|
||||
value={paymentData.expiryDate}
|
||||
onChange={(e) => handleInputChange('expiryDate', e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
|
||||
placeholder="MM/YY"
|
||||
maxLength={5}
|
||||
/>
|
||||
|
|
@ -380,7 +380,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
required
|
||||
value={paymentData.cvv}
|
||||
onChange={(e) => handleInputChange('cvv', e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
|
||||
placeholder="CVV"
|
||||
maxLength={4}
|
||||
/>
|
||||
|
|
@ -389,8 +389,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
)}
|
||||
|
||||
{/* Sipariş Özeti ve Butonlar */}
|
||||
<div className="bg-white rounded-xl shadow border p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
<div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||
{translate('::Public.payment.summary.title')}
|
||||
</h3>
|
||||
|
||||
|
|
@ -415,7 +415,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 text-sm border-t border-gray-200 pt-4 text-gray-600">
|
||||
<div className="space-y-1 text-sm border-t border-gray-200 dark:border-gray-700 pt-4 text-gray-600 dark:text-gray-300">
|
||||
<div className="flex justify-between">
|
||||
<span>{translate('::Public.payment.summary.subtotal')}</span>
|
||||
<span>{formatPrice(cartState.total)}</span>
|
||||
|
|
@ -435,7 +435,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between text-base font-bold pt-2 text-gray-900">
|
||||
<div className="flex justify-between text-base font-bold pt-2 text-gray-900 dark:text-gray-100">
|
||||
<span>{translate('::App.Listform.ListformField.Total')}</span>
|
||||
<span className="text-blue-600">{formatPrice(finalTotal)}</span>
|
||||
</div>
|
||||
|
|
@ -446,7 +446,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg"
|
||||
className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 dark:text-gray-300 rounded-lg"
|
||||
>
|
||||
<FaArrowLeft className="w-4 h-4 mr-2" />
|
||||
{translate('::Back')}
|
||||
|
|
@ -468,3 +468,4 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 group flex flex-col h-full">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 group flex flex-col h-full dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
{product.imageUrl && (
|
||||
<div className="aspect-video overflow-hidden">
|
||||
<img
|
||||
|
|
@ -107,28 +107,28 @@ export const ProductCard: React.FC<ProductCardProps> = ({
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">{translate('::' + product.name)}</h3>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 dark:text-gray-100">{translate('::' + product.name)}</h3>
|
||||
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-3">{translate('::' + product.description)}</p>
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-3 dark:text-gray-300">{translate('::' + product.description)}</p>
|
||||
|
||||
{/* Quantity and Yearly Savings above price */}
|
||||
<div className="mb-4 space-y-3">
|
||||
{product.isQuantityBased && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Public.products.quantity')}
|
||||
</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
||||
className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
<FaMinus className="w-4 h-4" />
|
||||
</button>
|
||||
<span className="w-12 text-center font-medium">{quantity}</span>
|
||||
<span className="w-12 text-center font-medium dark:text-gray-100">{quantity}</span>
|
||||
<button
|
||||
onClick={() => setQuantity(quantity + 1)}
|
||||
className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
</button>
|
||||
|
|
@ -148,14 +148,14 @@ export const ProductCard: React.FC<ProductCardProps> = ({
|
|||
{/* Bottom section with consistent height */}
|
||||
<div className="mt-auto">
|
||||
<div className="mb-4">
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{formatPrice(getCurrentPrice())}
|
||||
<span className="text-sm font-normal text-gray-500 ml-1">{getUnitText()}</span>
|
||||
<span className="text-sm font-normal text-gray-500 ml-1 dark:text-gray-400">{getUnitText()}</span>
|
||||
</div>
|
||||
{globalPeriod > 1 && (
|
||||
<div className="text-lg font-semibold text-blue-600 mt-1">
|
||||
{translate('::App.Listform.ListformField.Total')} {formatPrice(getTotalPrice())}
|
||||
<span className="text-sm font-normal text-gray-500 ml-1">{getPeriodText()}</span>
|
||||
<span className="text-sm font-normal text-gray-500 ml-1 dark:text-gray-400">{getPeriodText()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -170,7 +170,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
|
|||
disabled={isDisabled}
|
||||
className={`w-full font-medium py-3 px-4 rounded-lg transition-colors duration-200 transform ${
|
||||
isDisabled
|
||||
? 'bg-gray-400 text-gray-700 cursor-not-allowed'
|
||||
? 'bg-gray-400 text-gray-700 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400'
|
||||
: 'bg-blue-600 hover:bg-blue-700 text-white hover:scale-[1.02] active:scale-[0.98]'
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -88,10 +88,10 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
|
|||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
<aside className="lg:w-64 flex-shrink-0">
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-40">
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-40 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<FaFilter className="w-5 h-5 text-gray-600" />
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
<FaFilter className="w-5 h-5 text-gray-600 dark:text-gray-300" />
|
||||
<h3 className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{translate('::Public.products.categories')}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
@ -103,7 +103,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
|
|||
className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-between ${
|
||||
selectedCategory === category
|
||||
? 'bg-blue-100 text-blue-800 border border-blue-200'
|
||||
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
|
||||
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100'
|
||||
}`}
|
||||
>
|
||||
<span>
|
||||
|
|
@ -115,7 +115,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
|
|||
className={`text-xs px-2 py-1 rounded-full ${
|
||||
selectedCategory === category
|
||||
? 'bg-blue-200 text-blue-800'
|
||||
: 'bg-gray-200 text-gray-600'
|
||||
: 'bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{getCategoryCount(category)}
|
||||
|
|
@ -127,8 +127,8 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
|
|||
{/* Search input moved here */}
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center space-x-2 mb-3">
|
||||
<FaSearch className="w-5 h-5 text-gray-600" />
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
<FaSearch className="w-5 h-5 text-gray-600 dark:text-gray-300" />
|
||||
<h3 className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{translate('::ListForms.ListFormEdit.TabSearch')}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
@ -139,7 +139,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
|
|||
placeholder={translate('::Public.products.search.placeholder')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -148,7 +148,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
|
|||
|
||||
<main className="flex-1">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="text-center">
|
||||
<Loading loading={loading} />
|
||||
</div>
|
||||
|
|
@ -172,10 +172,10 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
|
|||
<div className="text-gray-400 mb-2">
|
||||
<FaFilter className="w-12 h-12 mx-auto" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2 dark:text-gray-100">
|
||||
{translate('::App.NoResults')}
|
||||
</h2>
|
||||
<p className="text-gray-600">{translate('::Public.products.empty.description')}</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">{translate('::Public.products.empty.description')}</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-6 mb-6">
|
||||
<div className="w-full lg:w-1/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6">
|
||||
<div className="w-full lg:w-1/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center">
|
||||
<FaUser className="w-5 h-5 text-green-600 mr-2" />{' '}
|
||||
|
|
@ -88,14 +88,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
onClick={() => setIsExisting(true)}
|
||||
className={`p-4 border-2 rounded-xl transition-all text-left select-none ${
|
||||
isExisting === true
|
||||
? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02]'
|
||||
: 'border-gray-200 hover:border-blue-300'
|
||||
? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02] dark:bg-blue-950/30'
|
||||
: 'border-gray-200 hover:border-blue-300 dark:border-gray-700 dark:hover:border-blue-500'
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold text-gray-900 mb-2">
|
||||
<div className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
{translate('::Public.products.tenantForm.existing.title')}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{translate('::Public.products.tenantForm.existing.desc')}
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -104,14 +104,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
onClick={() => setIsExisting(false)}
|
||||
className={`p-4 border-2 rounded-xl transition-all text-left select-none ${
|
||||
isExisting === false
|
||||
? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02]'
|
||||
: 'border-gray-200 hover:border-blue-300'
|
||||
? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02] dark:bg-blue-950/30'
|
||||
: 'border-gray-200 hover:border-blue-300 dark:border-gray-700 dark:hover:border-blue-500'
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold text-gray-900 mb-2">
|
||||
<div className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
{translate('::Public.products.tenantForm.new.title')}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{translate('::Public.products.tenantForm.new.desc')}
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -119,12 +119,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full lg:w-2/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6">
|
||||
<div className="w-full lg:w-2/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
{isExisting !== null && (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{isExisting ? (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{translate('::Public.payment.customer.code')}
|
||||
</label>
|
||||
<div className="relative flex flex-col sm:flex-row sm:items-stretch">
|
||||
|
|
@ -143,7 +143,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
await getTenantInfo()
|
||||
}
|
||||
}}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg sm:rounded-l-lg sm:rounded-r-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 sm:rounded-l-lg sm:rounded-r-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -157,7 +157,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
</div>
|
||||
|
||||
{formData.organizationName && (
|
||||
<div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700 p-3">
|
||||
<div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700 dark:text-gray-300 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaUser className="w-4 h-4 text-gray-500" />
|
||||
<span className="font-medium">
|
||||
|
|
@ -264,7 +264,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{translate('::Public.products.tenantForm.orgName')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -276,12 +276,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="Enter your organization name"
|
||||
value={formData.organizationName || ''}
|
||||
onChange={(e) => handleInputChange('organizationName', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::LoginPanel.Profil')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -292,7 +292,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="Enter founder's name"
|
||||
value={formData.founder || ''}
|
||||
onChange={(e) => handleInputChange('founder', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -300,7 +300,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Abp.Identity.User.UserInformation.PhoneNumber')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -311,12 +311,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="+90 (___) ___-____"
|
||||
value={formData.phoneNumber || ''}
|
||||
onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Abp.Account.EmailAddress')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -327,14 +327,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="sample@email.com"
|
||||
value={formData.email || ''}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::App.Address')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -345,14 +345,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
value={formData.address1 || ''}
|
||||
onChange={(e) => handleInputChange('address1', e.target.value)}
|
||||
rows={3}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Public.payment.customer.country')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -362,12 +362,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="Türkiye"
|
||||
value={formData.country || ''}
|
||||
onChange={(e) => handleInputChange('country', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Public.common.city')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -378,7 +378,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="İstanbul"
|
||||
value={formData.city || ''}
|
||||
onChange={(e) => handleInputChange('city', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -386,7 +386,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Public.payment.customer.district')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -397,12 +397,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="Çekmeköy"
|
||||
value={formData.district || ''}
|
||||
onChange={(e) => handleInputChange('district', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Public.payment.customer.postalCode')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -413,7 +413,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="34782"
|
||||
value={formData.postalCode || ''}
|
||||
onChange={(e) => handleInputChange('postalCode', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -421,7 +421,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Public.contact.taxOffice')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -432,12 +432,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="Kozyatağı"
|
||||
value={formData.taxOffice}
|
||||
onChange={(e) => handleInputChange('taxOffice', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Public.contact.taxNumber')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -448,14 +448,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder="1234567890"
|
||||
value={formData.vknTckn}
|
||||
onChange={(e) => handleInputChange('vknTckn', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::Public.payment.customer.reference')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -465,7 +465,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
placeholder={translate('::Public.payment.customer.reference')}
|
||||
value={formData.reference || ''}
|
||||
onChange={(e) => handleInputChange('reference', e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -476,7 +476,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(ROUTES_ENUM.public.products)}
|
||||
className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg"
|
||||
className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 dark:text-gray-300 rounded-lg"
|
||||
>
|
||||
<FaArrowLeft className="w-4 h-4 mr-2" />
|
||||
{translate('::Back')}
|
||||
|
|
@ -495,3 +495,4 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -218,7 +218,7 @@ function buildAboutContent(
|
|||
descriptionsContainerStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
ABOUT_DESCRIPTIONS_CONTAINER_STYLE_KEY,
|
||||
'p-5 mx-auto text-gray-800 text-lg leading-relaxed shadow-md bg-white border-l-4 border-blue-600',
|
||||
'p-5 mx-auto text-gray-800 dark:text-gray-200 text-lg leading-relaxed shadow-md bg-white dark:bg-gray-900 border-l-4 border-blue-600',
|
||||
),
|
||||
stats:
|
||||
about?.statsDto.map((stat, index) => ({
|
||||
|
|
@ -232,13 +232,13 @@ function buildAboutContent(
|
|||
valueStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.about.dynamic.stat.${index + 1}.valueStyleClass`,
|
||||
'text-4xl font-bold text-gray-900 mb-2',
|
||||
'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2',
|
||||
),
|
||||
labelStyleClassKey: `Public.about.dynamic.stat.${index + 1}.labelStyleClass`,
|
||||
labelStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.about.dynamic.stat.${index + 1}.labelStyleClass`,
|
||||
'text-gray-600',
|
||||
'text-gray-600 dark:text-gray-300',
|
||||
),
|
||||
icon: stat.icon || '',
|
||||
value: stat.value,
|
||||
|
|
@ -278,19 +278,19 @@ function buildAboutContent(
|
|||
cardStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.about.dynamic.section.${section.key}.cardStyleClass`,
|
||||
'bg-white p-8 rounded-xl shadow-lg',
|
||||
'bg-white dark:bg-gray-900 p-8 rounded-xl shadow-lg dark:shadow-gray-950/40',
|
||||
),
|
||||
titleStyleClassKey: `Public.about.dynamic.section.${section.key}.titleStyleClass`,
|
||||
titleStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.about.dynamic.section.${section.key}.titleStyleClass`,
|
||||
'text-2xl font-bold text-gray-900 mb-4',
|
||||
'text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4',
|
||||
),
|
||||
descriptionStyleClassKey: `Public.about.dynamic.section.${section.key}.descriptionStyleClass`,
|
||||
descriptionStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.about.dynamic.section.${section.key}.descriptionStyleClass`,
|
||||
'text-gray-700',
|
||||
'text-gray-700 dark:text-gray-300',
|
||||
),
|
||||
})) ?? [],
|
||||
}
|
||||
|
|
@ -764,7 +764,7 @@ const About: FC = () => {
|
|||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="text-center">
|
||||
<Loading loading={loading} />
|
||||
</div>
|
||||
|
|
@ -780,7 +780,7 @@ const About: FC = () => {
|
|||
defaultTitle={APP_NAME}
|
||||
></Helmet>
|
||||
|
||||
<div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
|
||||
<div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
|
||||
{isDesignMode && !isPanelVisible && (
|
||||
<Button
|
||||
type="button"
|
||||
|
|
@ -798,15 +798,16 @@ const About: FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={content?.heroSectionStyleClass || 'relative bg-blue-900 text-white py-12'}>
|
||||
<div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
|
||||
<div
|
||||
className="absolute inset-0 opacity-20"
|
||||
className="absolute inset-0 opacity-20 dark:opacity-35"
|
||||
style={{
|
||||
backgroundImage: `url("${content?.heroImage ?? ABOUT_HERO_IMAGE}")`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
></div>
|
||||
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
|
||||
<div className="container mx-auto pt-20 relative">
|
||||
<h1 className={content?.heroTitleStyleClass || 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'}>
|
||||
{content?.heroTitle}
|
||||
|
|
@ -817,7 +818,7 @@ const About: FC = () => {
|
|||
</SelectableBlock>
|
||||
|
||||
{/* Stats Section */}
|
||||
<div className="py-10 bg-white">
|
||||
<div className="py-10 bg-white dark:bg-gray-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
{content?.stats.map((stat, index) => {
|
||||
|
|
@ -837,10 +838,10 @@ const About: FC = () => {
|
|||
className={`w-12 h-12 mx-auto mb-4 ${getIconColor(index)}`}
|
||||
/>
|
||||
)}
|
||||
<div className={stat.valueStyleClass || 'text-4xl font-bold text-gray-900 mb-2'}>
|
||||
<div className={`${stat.valueStyleClass || 'text-4xl font-bold text-gray-900 mb-2'} dark:text-gray-100`}>
|
||||
<AnimatedStatValue stat={stat} />
|
||||
</div>
|
||||
<div className={stat.labelStyleClass || 'text-gray-600'}>{stat.label}</div>
|
||||
<div className={`${stat.labelStyleClass || 'text-gray-600'} dark:text-gray-300`}>{stat.label}</div>
|
||||
</div>
|
||||
</SelectableBlock>
|
||||
)
|
||||
|
|
@ -859,7 +860,7 @@ const About: FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={content?.descriptionsContainerStyleClass || 'p-5 mx-auto text-gray-800 text-lg leading-relaxed shadow-md bg-white border-l-4 border-blue-600'}>
|
||||
<div className={`${content?.descriptionsContainerStyleClass || 'p-5 mx-auto text-gray-800 text-lg leading-relaxed shadow-md bg-white border-l-4 border-blue-600'} dark:bg-gray-900 dark:text-gray-200`}>
|
||||
{content?.descriptions.map((item, index) => (
|
||||
<p key={item.key || `description-${index}`} className={item.styleClass || ''}>
|
||||
{item.text}
|
||||
|
|
@ -878,9 +879,9 @@ const About: FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={section.cardStyleClass || 'bg-white p-8 rounded-xl shadow-lg'}>
|
||||
<h3 className={section.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'}>{section.title}</h3>
|
||||
<p className={section.descriptionStyleClass || 'text-gray-700'}>{section.description}</p>
|
||||
<div className={`${section.cardStyleClass || 'bg-white p-8 rounded-xl shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
|
||||
<h3 className={`${section.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'} dark:text-gray-100`}>{section.title}</h3>
|
||||
<p className={`${section.descriptionStyleClass || 'text-gray-700'} dark:text-gray-300`}>{section.description}</p>
|
||||
</div>
|
||||
</SelectableBlock>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const Blog = () => {
|
|||
|
||||
if (loading && posts.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="text-center">
|
||||
<Loading loading={loading} />
|
||||
</div>
|
||||
|
|
@ -76,16 +76,16 @@ const Blog = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::' + 'App.BlogManagement')}
|
||||
defaultTitle={APP_NAME}
|
||||
></Helmet>
|
||||
{/* Hero Section */}
|
||||
<div className="relative bg-blue-900 text-white py-12">
|
||||
<div className="relative bg-blue-900 text-white py-12 dark:bg-gray-950">
|
||||
<div
|
||||
className="absolute inset-0 opacity-20"
|
||||
className="absolute inset-0 opacity-20 dark:opacity-35"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'url("https://images.pexels.com/photos/3183164/pexels-photo-3183164.jpeg?auto=compress&cs=tinysrgb&w=1920")',
|
||||
|
|
@ -93,6 +93,7 @@ const Blog = () => {
|
|||
backgroundPosition: 'center',
|
||||
}}
|
||||
></div>
|
||||
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
|
||||
<div className="container mx-auto pt-20 relative">
|
||||
<h1 className="text-5xl font-bold ml-4 mt-3 mb-2 text-white">
|
||||
{translate('::App.BlogManagement')}
|
||||
|
|
@ -101,9 +102,14 @@ const Blog = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and Filter Section */}
|
||||
<div className="bg-white shadow-sm border-b">
|
||||
|
||||
|
||||
{/* Blog Posts Grid */}
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
|
||||
{/* Search and Filter Section */}
|
||||
<div className="shadow-sm border-b border-gray-200 dark:border-gray-800">
|
||||
<div className="container mx-auto pb-4">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
{/* Search */}
|
||||
<form onSubmit={handleSearch} className="flex-1">
|
||||
|
|
@ -113,7 +119,7 @@ const Blog = () => {
|
|||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Blog yazılarında ara..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
|
||||
/>
|
||||
<FaSearch className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
|
|
@ -126,7 +132,7 @@ const Blog = () => {
|
|||
className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
|
||||
selectedCategory === ''
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{translate('::App.Reports.Search')}
|
||||
|
|
@ -138,7 +144,7 @@ const Blog = () => {
|
|||
className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
|
||||
selectedCategory === category.id
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{translate('::Public.' + category.name)} ({category.postCount})
|
||||
|
|
@ -149,17 +155,15 @@ const Blog = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Blog Posts Grid */}
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
{!Array.isArray(posts) || posts.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-600 text-lg">Henüz blog yazısı bulunmuyor.</p>
|
||||
<p className="text-gray-600 text-lg dark:text-gray-300">Henüz blog yazısı bulunmuyor.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{posts.map((post) => (
|
||||
<Link to={`/blog/${post.slug || post.id}`} key={post.id} className="block">
|
||||
<article className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow h-full flex flex-col">
|
||||
<article className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow h-full flex flex-col dark:bg-gray-900 dark:shadow-gray-950/40">
|
||||
<div className="aspect-w-16 aspect-h-9 relative">
|
||||
<img
|
||||
src={post.coverImage}
|
||||
|
|
@ -171,10 +175,10 @@ const Blog = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="p-6 flex-1 flex flex-col">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 transition-colors">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 transition-colors dark:text-gray-100 dark:hover:text-blue-400">
|
||||
{translate('::Public.' + post.title)}
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-4 flex-1">
|
||||
<p className="text-gray-600 mb-4 flex-1 dark:text-gray-300">
|
||||
{translate('::Public.' + post.summary)}
|
||||
</p>
|
||||
|
||||
|
|
@ -184,7 +188,7 @@ const Blog = () => {
|
|||
{post.tags.slice(0, 3).map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded"
|
||||
className="inline-flex items-center text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded dark:bg-gray-800 dark:text-gray-300"
|
||||
>
|
||||
<FaTag className="w-3 h-3 mr-1" />
|
||||
{tag}
|
||||
|
|
@ -193,7 +197,7 @@ const Blog = () => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center text-sm text-gray-500 space-x-4">
|
||||
<div className="flex items-center text-sm text-gray-500 space-x-4 dark:text-gray-400">
|
||||
<div className="flex items-center">
|
||||
<FaUser size={16} className="mr-1" />
|
||||
{post.author}
|
||||
|
|
@ -217,7 +221,7 @@ const Blog = () => {
|
|||
<Button
|
||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
Önceki
|
||||
</Button>
|
||||
|
|
@ -229,7 +233,7 @@ const Blog = () => {
|
|||
className={`px-4 py-2 rounded-lg ${
|
||||
currentPage === i + 1
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'border border-gray-300 hover:bg-gray-50'
|
||||
: 'border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{i + 1}
|
||||
|
|
@ -239,7 +243,7 @@ const Blog = () => {
|
|||
<Button
|
||||
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
Sonraki
|
||||
</Button>
|
||||
|
|
@ -249,19 +253,19 @@ const Blog = () => {
|
|||
</div>
|
||||
|
||||
{/* Newsletter Section */}
|
||||
<div className="bg-white py-16">
|
||||
<div className="bg-white py-16 dark:bg-gray-900">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4 dark:text-gray-100">
|
||||
{translate('::Public.blog.subscribe')}
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
<p className="text-gray-600 mb-8 max-w-2xl mx-auto dark:text-gray-300">
|
||||
{translate('::Public.blog.subscribe.desc')}
|
||||
</p>
|
||||
<div className="max-w-md mx-auto flex gap-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder={translate('::Abp.Account.EmailAddress')}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
|
||||
/>
|
||||
<Button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
{translate('::Public.common.subscribe')}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const BlogDetail: React.FC = () => {
|
|||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="text-center">
|
||||
<Loading loading={loading} />
|
||||
</div>
|
||||
|
|
@ -62,22 +62,22 @@ const BlogDetail: React.FC = () => {
|
|||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Error: {error}</h1>
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Error: {error}</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!blogPost || !postData) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900">{translate('::Public.blog.notFound')}</h1>
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{translate('::Public.blog.notFound')}</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::' + 'App.BlogManagement')}
|
||||
|
|
@ -87,7 +87,7 @@ const BlogDetail: React.FC = () => {
|
|||
<div className="container mx-auto px-4">
|
||||
<Link
|
||||
to={ROUTES_ENUM.public.blog}
|
||||
className="text-blue-600 hover:underline mt-4 mb-4 inline-block"
|
||||
className="text-blue-600 hover:underline mt-4 mb-4 inline-block dark:text-blue-400"
|
||||
>
|
||||
← {translate('::App.BlogManagement')}
|
||||
</Link>
|
||||
|
|
@ -98,10 +98,10 @@ const BlogDetail: React.FC = () => {
|
|||
className="w-full h-96 object-cover rounded-lg mb-8"
|
||||
/>
|
||||
)}
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-6 dark:text-gray-100">
|
||||
{translate('::Public.' + blogPost.title)}
|
||||
</h1>
|
||||
<div className="flex items-center text-sm text-gray-500 space-x-4 mb-8">
|
||||
<div className="flex items-center text-sm text-gray-500 space-x-4 mb-8 dark:text-gray-400">
|
||||
<div className="flex items-center">
|
||||
<span>{postData.author}</span>
|
||||
</div>
|
||||
|
|
@ -110,7 +110,7 @@ const BlogDetail: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="prose max-w-none text-gray-800"
|
||||
className="prose max-w-none text-gray-800 dark:prose-invert dark:text-gray-200"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
currentLang == 'tr'
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const Checkout: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::' + 'Public.nav.checkout')}
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ function buildContactContent(
|
|||
heroSectionStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
CONTACT_HERO_SECTION_STYLE_KEY,
|
||||
'relative bg-blue-900 py-12 text-white',
|
||||
'relative bg-blue-900 py-12 text-white dark:bg-gray-950',
|
||||
),
|
||||
heroSectionStyleClassKey: CONTACT_HERO_SECTION_STYLE_KEY,
|
||||
heroTitleStyleClass: resolveLocalizedValue(
|
||||
|
|
@ -144,13 +144,13 @@ function buildContactContent(
|
|||
contactInfoCardStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
CONTACT_INFO_CARD_STYLE_KEY,
|
||||
'rounded-xl bg-white p-8 shadow-lg',
|
||||
'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
|
||||
),
|
||||
contactInfoCardStyleClassKey: CONTACT_INFO_CARD_STYLE_KEY,
|
||||
contactInfoTitleStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
CONTACT_INFO_TITLE_STYLE_KEY,
|
||||
'mb-6 text-2xl font-bold text-gray-900',
|
||||
'mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100',
|
||||
),
|
||||
contactInfoTitleStyleClassKey: CONTACT_INFO_TITLE_STYLE_KEY,
|
||||
address: resolveLocalizedValue(translate, contact?.address, ''),
|
||||
|
|
@ -165,7 +165,9 @@ function buildContactContent(
|
|||
bankBranch: contact?.bankDto?.branch || '',
|
||||
bankAccountNumber: contact?.bankDto?.accountNumber || '',
|
||||
bankIban: contact?.bankDto?.iban || '',
|
||||
bankStyleClass: contact?.bankDto?.styleClass || 'rounded-xl bg-white p-8 shadow-lg',
|
||||
bankStyleClass:
|
||||
contact?.bankDto?.styleClass ||
|
||||
'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
|
||||
workHoursTitle: resolveLocalizedValue(translate, CONTACT_WORK_HOURS_TITLE_KEY),
|
||||
workHoursTitleKey: CONTACT_WORK_HOURS_TITLE_KEY,
|
||||
workWeekday: resolveLocalizedValue(translate, contact?.workHoursDto?.weekday, ''),
|
||||
|
|
@ -174,7 +176,9 @@ function buildContactContent(
|
|||
workWeekendKey: contact?.workHoursDto?.weekend || '',
|
||||
workWhatsapp: resolveLocalizedValue(translate, contact?.workHoursDto?.whatsapp, ''),
|
||||
workWhatsappKey: contact?.workHoursDto?.whatsapp || '',
|
||||
workHoursStyleClass: contact?.workHoursDto?.styleClass || 'rounded-xl bg-white p-8 shadow-lg',
|
||||
workHoursStyleClass:
|
||||
contact?.workHoursDto?.styleClass ||
|
||||
'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
|
||||
mapTitle: resolveLocalizedValue(translate, contact?.mapDto?.title, ''),
|
||||
mapTitleKey: contact?.mapDto?.title || '',
|
||||
mapSrc: contact?.mapDto?.src || '',
|
||||
|
|
@ -183,9 +187,12 @@ function buildContactContent(
|
|||
mapAllowFullScreen: String(contact?.mapDto?.allowFullScreen ?? true),
|
||||
mapLoading: contact?.mapDto?.loading || 'lazy',
|
||||
mapReferrerPolicy: contact?.mapDto?.referrerPolicy || 'no-referrer-when-downgrade',
|
||||
mapContainerStyleClass: contact?.mapDto?.containerStyleClass || 'rounded-xl bg-white p-8 shadow-lg',
|
||||
mapContainerStyleClass:
|
||||
contact?.mapDto?.containerStyleClass ||
|
||||
'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
|
||||
mapFrameStyleClass:
|
||||
contact?.mapDto?.frameStyleClass || 'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200',
|
||||
contact?.mapDto?.frameStyleClass ||
|
||||
'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800',
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -636,7 +643,7 @@ const Contact: React.FC = () => {
|
|||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="text-center">
|
||||
<Loading loading={loading} />
|
||||
</div>
|
||||
|
|
@ -645,7 +652,7 @@ const Contact: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
|
||||
<div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::App.Contact')}
|
||||
|
|
@ -674,15 +681,16 @@ const Contact: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'}>
|
||||
<div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
|
||||
<div
|
||||
className="absolute inset-0 opacity-20"
|
||||
className="absolute inset-0 opacity-20 dark:opacity-35"
|
||||
style={{
|
||||
backgroundImage: `url("${content?.heroImage || CONTACT_HERO_IMAGE_DEFAULT}")`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
></div>
|
||||
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
|
||||
<div className="container relative mx-auto pt-20">
|
||||
<h1 className={content?.heroTitleStyleClass || 'ml-4 mb-2 mt-3 text-5xl font-bold text-white'}>{content?.heroTitle}</h1>
|
||||
<p className={content?.heroSubtitleStyleClass || 'ml-4 max-w-3xl text-xl'}>{content?.heroSubtitle}</p>
|
||||
|
|
@ -690,7 +698,7 @@ const Contact: React.FC = () => {
|
|||
</div>
|
||||
</SelectableBlock>
|
||||
|
||||
<div className="py-16">
|
||||
<div className="py-6">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
|
||||
<div className="space-y-4">
|
||||
|
|
@ -700,41 +708,41 @@ const Contact: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={content?.contactInfoCardStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}>
|
||||
<h2 className={content?.contactInfoTitleStyleClass || 'mb-6 text-2xl font-bold text-gray-900'}>{content?.contactInfoTitle}</h2>
|
||||
<div className={`${content?.contactInfoCardStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
|
||||
<h2 className={`${content?.contactInfoTitleStyleClass || 'mb-6 text-2xl font-bold text-gray-900'} dark:text-gray-100`}>{content?.contactInfoTitle}</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-2">
|
||||
<FaMapMarkerAlt className="mt-1 h-5 w-5 flex-shrink-0 text-blue-600" />
|
||||
<FaMapMarkerAlt className="mt-1 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
|
||||
<div>
|
||||
<p className="text-gray-600">{content?.address}</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">{content?.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start space-x-2">
|
||||
<FaPhone className="h-5 w-5 flex-shrink-0 text-blue-600" />
|
||||
<FaPhone className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
|
||||
<div>
|
||||
<p className="text-gray-600">{content?.phoneNumber}</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">{content?.phoneNumber}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start space-x-2">
|
||||
<FaEnvelope className="h-5 w-5 flex-shrink-0 text-blue-600" />
|
||||
<FaEnvelope className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
|
||||
<div>
|
||||
<p className="text-gray-600">
|
||||
<a href={`mailto:${content?.email}`} className="text-blue-600 hover:underline">
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
<a href={`mailto:${content?.email}`} className="text-blue-600 hover:underline dark:text-blue-400">
|
||||
{content?.email}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start space-x-2">
|
||||
<FaBuilding className="h-5 w-5 flex-shrink-0 text-blue-600" />
|
||||
<FaBuilding className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
|
||||
<div>
|
||||
<p className="text-gray-600">{content?.location}</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">{content?.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start space-x-2">
|
||||
<FaIdCard className="h-5 w-5 flex-shrink-0 text-blue-600" />
|
||||
<FaIdCard className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
|
||||
<div>
|
||||
<p className="text-gray-600">{content?.taxNumber}</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">{content?.taxNumber}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -747,8 +755,8 @@ const Contact: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={content?.bankStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}>
|
||||
<h2 className="mb-6 text-2xl font-bold text-gray-900">{content?.bankTitle}</h2>
|
||||
<div className={`${content?.bankStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
|
||||
<h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">{content?.bankTitle}</h2>
|
||||
<div className="mb-2">
|
||||
<img
|
||||
src="/img/enpara.svg"
|
||||
|
|
@ -756,10 +764,10 @@ const Contact: React.FC = () => {
|
|||
className="mt-1 w-24 flex-shrink-0 object-contain"
|
||||
/>
|
||||
<div>
|
||||
<h3 className="mb-1 font-semibold text-gray-900">{content?.bankAccountHolder}</h3>
|
||||
<p className="mb-1 ml-1 text-gray-600">{content?.bankBranch}</p>
|
||||
<p className="mb-1 ml-1 text-gray-600">{content?.bankAccountNumber}</p>
|
||||
<p className="mb-1 ml-1 text-gray-600">{content?.bankIban}</p>
|
||||
<h3 className="mb-1 font-semibold text-gray-900 dark:text-gray-100">{content?.bankAccountHolder}</h3>
|
||||
<p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankBranch}</p>
|
||||
<p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankAccountNumber}</p>
|
||||
<p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankIban}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -771,20 +779,20 @@ const Contact: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={content?.workHoursStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}>
|
||||
<h2 className="mb-6 text-2xl font-bold text-gray-900">{content?.workHoursTitle}</h2>
|
||||
<div className={`${content?.workHoursStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
|
||||
<h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">{content?.workHoursTitle}</h2>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<FaCalendarAlt className="h-5 w-5 text-blue-500" />
|
||||
<p className="text-gray-600">{content?.workWeekday}</p>
|
||||
<FaCalendarAlt className="h-5 w-5 text-blue-500 dark:text-blue-400" />
|
||||
<p className="text-gray-600 dark:text-gray-300">{content?.workWeekday}</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<FaCalendarCheck className="h-5 w-5 text-blue-500" />
|
||||
<p className="text-gray-600">{content?.workWeekend}</p>
|
||||
<FaCalendarCheck className="h-5 w-5 text-blue-500 dark:text-blue-400" />
|
||||
<p className="text-gray-600 dark:text-gray-300">{content?.workWeekend}</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<FaRegComment className="h-5 w-5 text-green-500" />
|
||||
<p className="text-gray-600">{content?.workWhatsapp}</p>
|
||||
<FaRegComment className="h-5 w-5 text-green-500 dark:text-green-400" />
|
||||
<p className="text-gray-600 dark:text-gray-300">{content?.workWhatsapp}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -797,9 +805,9 @@ const Contact: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={content?.mapContainerStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}>
|
||||
<h2 className="mb-2 text-center text-2xl font-bold text-gray-900">{content?.mapTitle}</h2>
|
||||
<div className={content?.mapFrameStyleClass || 'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200'}>
|
||||
<div className={`${content?.mapContainerStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
|
||||
<h2 className="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">{content?.mapTitle}</h2>
|
||||
<div className={`${content?.mapFrameStyleClass || 'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200'} dark:bg-gray-800`}>
|
||||
<iframe
|
||||
src={content?.mapSrc}
|
||||
width={content?.mapWidth}
|
||||
|
|
|
|||
|
|
@ -108,13 +108,13 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
// 🎉 Gönderim sonrası teşekkür ekranı
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50">
|
||||
<div className="mx-auto bg-white rounded-xl shadow-lg max-w-md w-full relative">
|
||||
<div className="max-w-md w-full bg-gradient-to-br from-blue-50 to-indigo-100 rounded-3xl p-8 text-center border border-blue-200 shadow-xl">
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50 dark:bg-gray-950/70">
|
||||
<div className="mx-auto bg-white rounded-xl shadow-lg max-w-md w-full relative dark:bg-gray-900">
|
||||
<div className="max-w-md w-full bg-gradient-to-br from-blue-50 to-indigo-100 rounded-3xl p-8 text-center border border-blue-200 shadow-xl dark:from-gray-900 dark:to-gray-800 dark:border-gray-700">
|
||||
{/* Kapat Butonu */}
|
||||
<button
|
||||
onClick={() => setIsSubmitted(false)}
|
||||
className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl"
|
||||
className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl dark:text-gray-400 dark:hover:text-gray-100"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
|
@ -122,10 +122,10 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
<div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<FaCheckCircle className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4 dark:text-gray-100">
|
||||
Teşekkürler!
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
<p className="text-gray-600 mb-6 dark:text-gray-300">
|
||||
Demo talebiniz başarıyla gönderildi. 24 saat içinde size geri
|
||||
dönüş yapacağız.
|
||||
</p>
|
||||
|
|
@ -159,23 +159,23 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
|
||||
// 🎯 Normal form ekranı
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50">
|
||||
<div className="mx-auto bg-white rounded-xl shadow-lg max-w-2xl w-full relative">
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50 dark:bg-gray-950/70">
|
||||
<div className="mx-auto bg-white rounded-xl shadow-lg max-w-2xl w-full relative dark:bg-gray-900">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl"
|
||||
className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl dark:text-gray-400 dark:hover:text-gray-100"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-white rounded-3xl p-6 lg:p-8 shadow-xl border border-gray-100"
|
||||
className="bg-white rounded-3xl p-6 lg:p-8 shadow-xl border border-gray-100 dark:border-gray-700 dark:bg-gray-900"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{/* Organization Name */}
|
||||
<div>
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2">
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
|
||||
{translate('::Public.common.company')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -189,8 +189,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
|
||||
errors.organizationName
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
|
||||
placeholder={translate('::Public.demo.organizationName')}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -198,7 +198,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
|
||||
{/* Full Name */}
|
||||
<div>
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2">
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
|
||||
{translate('::Public.common.fullName')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -211,8 +211,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
|
||||
errors.name
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
|
||||
placeholder={translate('::Public.demo.fullName')}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -220,7 +220,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2">
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
|
||||
{translate('::Abp.Account.EmailAddress')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -233,15 +233,15 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
|
||||
errors.email
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
|
||||
placeholder={translate('::Public.demo.email')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2">
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
|
||||
{translate('::Abp.Identity.User.UserInformation.PhoneNumber')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -254,8 +254,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
|
||||
errors.phoneNumber
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
|
||||
placeholder={translate('::Public.demo.phoneNumber')}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -264,7 +264,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
|
||||
{/* Address */}
|
||||
<div>
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2">
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
|
||||
{translate('::App.Address')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -277,8 +277,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
|
||||
errors.address
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
|
||||
placeholder={translate('::Public.demo.address')}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -287,7 +287,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
{/* Branches & Users Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2">
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
|
||||
{translate('::Public.common.branchCount')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -300,8 +300,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
|
||||
errors.numberOfBranches
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
|
||||
placeholder={translate('::Public.demo.branches')}
|
||||
min="1"
|
||||
/>
|
||||
|
|
@ -309,7 +309,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2">
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
|
||||
{translate('::Public.common.userCount')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -322,8 +322,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
|
||||
errors.numberOfUsers
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
|
||||
placeholder={translate('::Public.demo.users')}
|
||||
min="1"
|
||||
/>
|
||||
|
|
@ -333,7 +333,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
|
||||
{/* Message */}
|
||||
<div>
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2">
|
||||
<label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
|
||||
{translate('::Public.common.message')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
|
|
@ -346,8 +346,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
|
|||
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
|
||||
errors.message
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 resize-none`}
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
|
||||
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 resize-none dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
|
||||
placeholder={translate('::Public.demo.message')}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -116,10 +116,10 @@ const HOME_HERO_PRIMARY_CTA_STYLE_DEFAULT =
|
|||
'inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-semibold transition-all transform hover:scale-105'
|
||||
const HOME_HERO_SECONDARY_CTA_STYLE_DEFAULT =
|
||||
'inline-flex items-center justify-center px-8 py-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-semibold backdrop-blur-sm transition-all transform hover:scale-105'
|
||||
const HOME_FEATURES_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 mb-4'
|
||||
const HOME_FEATURES_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 max-w-2xl mx-auto'
|
||||
const HOME_SOLUTIONS_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 mb-4'
|
||||
const HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 max-w-2xl mx-auto'
|
||||
const HOME_FEATURES_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
|
||||
const HOME_FEATURES_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
|
||||
const HOME_SOLUTIONS_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
|
||||
const HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
|
||||
const HOME_CTA_TITLE_STYLE_DEFAULT = 'text-3xl font-bold text-white mb-4'
|
||||
const HOME_CTA_SUBTITLE_STYLE_DEFAULT = 'text-white text-lg mb-8'
|
||||
const HOME_CTA_BUTTON_STYLE_DEFAULT =
|
||||
|
|
@ -128,7 +128,7 @@ const HOME_SLIDE_STYLE_DEFAULT = 'max-w-4xl mx-auto text-center'
|
|||
const HOME_SLIDE_SERVICE_STYLE_DEFAULT =
|
||||
'bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all'
|
||||
const HOME_FEATURE_CARD_STYLE_DEFAULT =
|
||||
'p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow'
|
||||
'p-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-shadow dark:shadow-gray-950/40'
|
||||
const HOME_SOLUTION_CARD_STYLE_DEFAULT = 'p-8 h-full rounded-2xl'
|
||||
|
||||
function isLikelyLocalizationKey(value?: string) {
|
||||
|
|
@ -903,7 +903,7 @@ const Home: React.FC = () => {
|
|||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="text-center">
|
||||
<Loading loading={loading} />
|
||||
</div>
|
||||
|
|
@ -912,7 +912,7 @@ const Home: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
|
||||
<div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::' + 'App.Home')}
|
||||
|
|
@ -942,16 +942,17 @@ const Home: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className="relative min-h-screen p-20 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900"></div>
|
||||
<div className="relative min-h-screen overflow-hidden bg-blue-900 p-20 text-white dark:bg-gray-950">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-950 dark:via-gray-950 dark:to-gray-950"></div>
|
||||
<div
|
||||
className="absolute inset-0 opacity-20"
|
||||
className="absolute inset-0 opacity-20 dark:opacity-35"
|
||||
style={{
|
||||
backgroundImage: `url("${content?.heroBackgroundImage || HOME_HERO_DEFAULT_IMAGE}")`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
></div>
|
||||
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
|
||||
|
||||
{/* Carousel Content */}
|
||||
<div className="relative container mx-auto px-4 pt-32 pb-16 h-screen flex items-center">
|
||||
|
|
@ -1081,7 +1082,7 @@ const Home: React.FC = () => {
|
|||
</SelectableBlock>
|
||||
|
||||
{/* Features */}
|
||||
<section className="py-20 bg-white">
|
||||
<section className="py-20 bg-white dark:bg-gray-950">
|
||||
<div className="container mx-auto px-4">
|
||||
<SelectableBlock
|
||||
id="features-heading"
|
||||
|
|
@ -1090,10 +1091,10 @@ const Home: React.FC = () => {
|
|||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className={content?.featuresTitleStyle}>
|
||||
<h2 className={`${content?.featuresTitleStyle || HOME_FEATURES_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
|
||||
{content?.featuresTitle}
|
||||
</h2>
|
||||
<p className={content?.featuresSubtitleStyle}>
|
||||
<p className={`${content?.featuresSubtitleStyle || HOME_FEATURES_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
|
||||
{content?.featuresSubtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1109,10 +1110,7 @@ const Home: React.FC = () => {
|
|||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
feature.styleClass ||
|
||||
'p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow'
|
||||
}
|
||||
className={`${feature.styleClass || HOME_FEATURE_CARD_STYLE_DEFAULT} dark:bg-gray-900 dark:shadow-gray-950/40`}
|
||||
>
|
||||
<div className="mb-6">
|
||||
{(() => {
|
||||
|
|
@ -1120,8 +1118,8 @@ const Home: React.FC = () => {
|
|||
return IconComponent ? <IconComponent className="w-12 h-12 text-blue-500" /> : null
|
||||
})()}
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">{feature.title}</h2>
|
||||
<p className="text-gray-600">{feature.description}</p>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{feature.title}</h2>
|
||||
<p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
|
||||
</div>
|
||||
</SelectableBlock>
|
||||
))}
|
||||
|
|
@ -1130,7 +1128,7 @@ const Home: React.FC = () => {
|
|||
</section>
|
||||
|
||||
{/* Solutions */}
|
||||
<section className="py-20 bg-gray-50">
|
||||
<section className="py-20 bg-gray-50 dark:bg-gray-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<SelectableBlock
|
||||
id="solutions-heading"
|
||||
|
|
@ -1139,10 +1137,10 @@ const Home: React.FC = () => {
|
|||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className={content?.solutionsTitleStyle}>
|
||||
<h2 className={`${content?.solutionsTitleStyle || HOME_SOLUTIONS_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
|
||||
{content?.solutionsTitle}
|
||||
</h2>
|
||||
<p className={content?.solutionsSubtitleStyle}>
|
||||
<p className={`${content?.solutionsSubtitleStyle || HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
|
||||
{content?.solutionsSubtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ const NotFound: React.FC = () => {
|
|||
const { translate } = useLocalization()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-white text-gray-700 p-4"> {/* Arka plan ve metin rengi güncellendi, padding eklendi */}
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-white text-gray-700 p-4 dark:bg-gray-950 dark:text-gray-300"> {/* Arka plan ve metin rengi güncellendi, padding eklendi */}
|
||||
<FaFrown size={128} className="text-blue-600 mb-6" /> {/* İkon boyutu ve rengi güncellendi */}
|
||||
<h1 className="text-7xl font-bold text-gray-900 mb-4">404</h1> {/* Başlık boyutu ve rengi güncellendi */}
|
||||
<p className="text-xl text-gray-600 mb-8 text-center max-w-md"> {/* Metin rengi, margin ve max-width güncellendi */}
|
||||
<h1 className="text-7xl font-bold text-gray-900 mb-4 dark:text-gray-100">404</h1> {/* Başlık boyutu ve rengi güncellendi */}
|
||||
<p className="text-xl text-gray-600 mb-8 text-center max-w-md dark:text-gray-300"> {/* Metin rengi, margin ve max-width güncellendi */}
|
||||
{translate('::Public.notFound.message')}
|
||||
</p>
|
||||
<a href={ROUTES_ENUM.public.home} className="bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300 text-lg font-semibold"> {/* Buton stili güncellendi */}
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ const Payment: React.FC = () => {
|
|||
|
||||
if (!tenant) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="text-center">
|
||||
<Loading loading={!tenant} />
|
||||
</div>
|
||||
|
|
@ -116,7 +116,7 @@ const Payment: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::' + 'Public.nav.payment')}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ const Products: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::App.Orders')}
|
||||
|
|
@ -83,15 +83,7 @@ const Products: React.FC = () => {
|
|||
></Helmet>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="relative bg-blue-900 text-white py-12">
|
||||
<div
|
||||
className="absolute inset-0 opacity-20"
|
||||
style={{
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className="relative bg-blue-900 py-12 text-white dark:bg-gray-950"></div>
|
||||
|
||||
<div className="container mx-auto px-4 pt-4">
|
||||
<BillingControls
|
||||
|
|
|
|||
|
|
@ -176,25 +176,25 @@ function buildServicesContent(
|
|||
cardStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.services.dynamic.service.${index + 1}.cardStyleClass`,
|
||||
'bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow',
|
||||
'bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow dark:shadow-gray-950/40',
|
||||
),
|
||||
titleStyleClassKey: `Public.services.dynamic.service.${index + 1}.titleStyleClass`,
|
||||
titleStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.services.dynamic.service.${index + 1}.titleStyleClass`,
|
||||
'text-2xl font-bold text-gray-900 mb-4',
|
||||
'text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4',
|
||||
),
|
||||
descriptionStyleClassKey: `Public.services.dynamic.service.${index + 1}.descriptionStyleClass`,
|
||||
descriptionStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.services.dynamic.service.${index + 1}.descriptionStyleClass`,
|
||||
'text-gray-600 mb-6',
|
||||
'text-gray-600 dark:text-gray-300 mb-6',
|
||||
),
|
||||
featureStyleClassKey: `Public.services.dynamic.service.${index + 1}.featureStyleClass`,
|
||||
featureStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.services.dynamic.service.${index + 1}.featureStyleClass`,
|
||||
'flex items-center text-gray-700',
|
||||
'flex items-center text-gray-700 dark:text-gray-300',
|
||||
),
|
||||
features: (item.features ?? []).map((feature, featureIndex) => ({
|
||||
key:
|
||||
|
|
@ -229,7 +229,7 @@ function buildServicesContent(
|
|||
cardStyleClass: resolveLocalizedValue(
|
||||
translate,
|
||||
`Public.services.dynamic.support.${index + 1}.cardStyleClass`,
|
||||
'bg-white rounded-xl shadow-lg p-8 border border-gray-200',
|
||||
'bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border border-gray-200 dark:border-gray-700 dark:shadow-gray-950/40',
|
||||
),
|
||||
titleStyleClassKey: `Public.services.dynamic.support.${index + 1}.titleStyleClass`,
|
||||
titleStyleClass: resolveLocalizedValue(
|
||||
|
|
@ -888,7 +888,7 @@ const Services: React.FC = () => {
|
|||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="text-center">
|
||||
<Loading loading={loading} />
|
||||
</div>
|
||||
|
|
@ -897,7 +897,7 @@ const Services: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
|
||||
<div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::App.Services')}
|
||||
|
|
@ -921,15 +921,16 @@ const Services: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={content?.heroSectionStyleClass || 'relative bg-blue-900 text-white py-12'}>
|
||||
<div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
|
||||
<div
|
||||
className="absolute inset-0 opacity-20"
|
||||
className="absolute inset-0 opacity-20 dark:opacity-35"
|
||||
style={{
|
||||
backgroundImage: `url("${content?.heroImage ?? SERVICES_HERO_IMAGE}")`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
></div>
|
||||
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
|
||||
<div className="container mx-auto pt-20 relative">
|
||||
<h1 className={content?.heroTitleStyleClass || 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'}>{content?.heroTitle}</h1>
|
||||
<p className={content?.heroSubtitleStyleClass || 'text-xl max-w-3xl ml-4'}>{content?.heroSubtitle}</p>
|
||||
|
|
@ -938,7 +939,7 @@ const Services: React.FC = () => {
|
|||
</SelectableBlock>
|
||||
|
||||
{/* Services Grid */}
|
||||
<div className="py-16">
|
||||
<div className="py-6">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{content?.serviceItems.map((service, index) => {
|
||||
|
|
@ -951,17 +952,17 @@ const Services: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={service.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow'}>
|
||||
<div className={`${service.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
|
||||
<div className="mb-6">
|
||||
{IconComponent && (
|
||||
<IconComponent className={`w-12 h-12 ${getIconColor(index)}`} />
|
||||
)}
|
||||
</div>
|
||||
<h3 className={service.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'}>{service.title}</h3>
|
||||
<p className={service.descriptionStyleClass || 'text-gray-600 mb-6'}>{service.description}</p>
|
||||
<h3 className={`${service.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'} dark:text-gray-100`}>{service.title}</h3>
|
||||
<p className={`${service.descriptionStyleClass || 'text-gray-600 mb-6'} dark:text-gray-300`}>{service.description}</p>
|
||||
<ul className="space-y-2">
|
||||
{(service.features ?? []).map((feature, fIndex) => (
|
||||
<li key={fIndex} className={service.featureStyleClass || 'flex items-center text-gray-700'}>
|
||||
<li key={fIndex} className={`${service.featureStyleClass || 'flex items-center text-gray-700'} dark:text-gray-300`}>
|
||||
<span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
|
||||
{feature.value}
|
||||
</li>
|
||||
|
|
@ -976,7 +977,7 @@ const Services: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Support Plans */}
|
||||
<div className="bg-white py-10">
|
||||
<div className="bg-white py-10 dark:bg-gray-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<SelectableBlock
|
||||
id="support-heading"
|
||||
|
|
@ -984,7 +985,7 @@ const Services: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<h2 className={content?.supportTitleStyleClass || 'text-3xl font-bold text-center mb-10'}>{content?.supportTitle}</h2>
|
||||
<h2 className={`${content?.supportTitleStyleClass || 'text-3xl font-bold text-center mb-10'} dark:text-gray-100`}>{content?.supportTitle}</h2>
|
||||
</SelectableBlock>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{content?.supportItems.map((plan, index) => {
|
||||
|
|
@ -998,16 +999,16 @@ const Services: React.FC = () => {
|
|||
isDesignMode={isDesignMode}
|
||||
onSelect={handleSelectBlock}
|
||||
>
|
||||
<div className={plan.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 border border-gray-200'}>
|
||||
<div className={`${plan.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 border border-gray-200'} dark:border-gray-700 dark:bg-gray-950 dark:shadow-gray-950/40`}>
|
||||
<div className="mb-6">
|
||||
{IconComponent && (
|
||||
<IconComponent className={`w-12 h-12 ${getIconColor(index)}`} />
|
||||
)}
|
||||
</div>
|
||||
<h3 className={plan.titleStyleClass || 'text-xl font-bold mb-4'}>{plan.title}</h3>
|
||||
<h3 className={`${plan.titleStyleClass || 'text-xl font-bold mb-4'} dark:text-gray-100`}>{plan.title}</h3>
|
||||
<ul className="space-y-3 mb-8">
|
||||
{(plan.features ?? []).map((feature, fIndex) => (
|
||||
<li key={fIndex} className="flex items-center space-x-2 text-gray-700">
|
||||
<li key={fIndex} className="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
|
||||
<FaCheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" />
|
||||
<span>{feature.value}</span>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const Success: React.FC = () => {
|
|||
|
||||
if (!orderId) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="text-center">
|
||||
<Loading loading={!orderId} />
|
||||
</div>
|
||||
|
|
@ -39,7 +39,7 @@ const Success: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::' + 'App.Platform.Success')}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ const SelectableBlock: React.FC<SelectableBlockProps> = ({
|
|||
className={classNames(
|
||||
'relative rounded-xl transition-all cursor-pointer',
|
||||
isActive
|
||||
? 'ring-2 ring-sky-500 ring-offset-4 ring-offset-white'
|
||||
: 'ring-1 ring-sky-200/80 hover:ring-sky-400',
|
||||
? 'ring-2 ring-sky-500 ring-offset-4 ring-offset-white dark:ring-offset-gray-950'
|
||||
: 'ring-1 ring-sky-200/80 hover:ring-sky-400 dark:ring-sky-700/80 dark:hover:ring-sky-500',
|
||||
className,
|
||||
)}
|
||||
onClick={(e) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue