1155 lines
39 KiB
TypeScript
1155 lines
39 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import {
|
|
FaArrowRight,
|
|
FaChevronLeft,
|
|
FaChevronRight,
|
|
} from 'react-icons/fa'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
|
import { Helmet } from 'react-helmet'
|
|
import { APP_NAME } from '@/constants/app.constant'
|
|
import { useStoreActions, useStoreState } from '@/store'
|
|
import Loading from '@/components/shared/Loading'
|
|
import navigationIcon from '@/proxy/menus/navigation-icon.config'
|
|
import DesignerDrawer from './designer/DesignerDrawer'
|
|
import SelectableBlock from './designer/SelectableBlock'
|
|
import { DesignerSelection } from './designer/types'
|
|
import { useDesignerState } from './designer/useDesignerState'
|
|
import { getHome, HomeDto, saveHomePage } from '@/services/home.service'
|
|
import { Notification, toast } from '@/components/ui'
|
|
|
|
interface HomeSlideServiceContent {
|
|
icon: string
|
|
title: string
|
|
titleKey: string
|
|
description: string
|
|
descriptionKey: string
|
|
}
|
|
|
|
interface HomeSlideContent {
|
|
title: string
|
|
titleKey: string
|
|
subtitle: string
|
|
subtitleKey: string
|
|
services: HomeSlideServiceContent[]
|
|
}
|
|
|
|
interface HomeFeatureContent {
|
|
icon: string
|
|
title: string
|
|
titleKey: string
|
|
description: string
|
|
descriptionKey: string
|
|
}
|
|
|
|
interface HomeSolutionContent {
|
|
icon: string
|
|
colorClass: string
|
|
title: string
|
|
titleKey: string
|
|
description: string
|
|
descriptionKey: string
|
|
}
|
|
|
|
interface HomeContent {
|
|
heroBackgroundImage: string
|
|
heroBackgroundImageKey: string
|
|
heroPrimaryCtaLabel: string
|
|
heroPrimaryCtaKey: string
|
|
heroSecondaryCtaLabel: string
|
|
heroSecondaryCtaKey: string
|
|
featuresTitle: string
|
|
featuresTitleKey: string
|
|
featuresSubtitle: string
|
|
featuresSubtitleKey: string
|
|
solutionsTitle: string
|
|
solutionsTitleKey: string
|
|
solutionsSubtitle: string
|
|
solutionsSubtitleKey: string
|
|
ctaTitle: string
|
|
ctaTitleKey: string
|
|
ctaSubtitle: string
|
|
ctaSubtitleKey: string
|
|
ctaButtonLabel: string
|
|
ctaButtonLabelKey: string
|
|
slides: HomeSlideContent[]
|
|
features: HomeFeatureContent[]
|
|
solutions: HomeSolutionContent[]
|
|
}
|
|
|
|
const HOME_HERO_BACKGROUND_KEY = 'Public.home.hero.backgroundImage'
|
|
const HOME_HERO_DEFAULT_IMAGE =
|
|
'https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1920'
|
|
|
|
const HOME_HERO_PRIMARY_CTA_KEY = 'Public.hero.cta.consultation'
|
|
const HOME_HERO_SECONDARY_CTA_KEY = 'Public.hero.cta.discover'
|
|
const HOME_FEATURES_TITLE_KEY = 'Public.features.title'
|
|
const HOME_FEATURES_SUBTITLE_KEY = 'Public.features.subtitle'
|
|
const HOME_SOLUTIONS_TITLE_KEY = 'Public.solutions.title'
|
|
const HOME_SOLUTIONS_SUBTITLE_KEY = 'Public.solutions.subtitle'
|
|
const HOME_CTA_TITLE_KEY = 'Public.common.getStarted'
|
|
const HOME_CTA_SUBTITLE_KEY = 'Public.common.contact'
|
|
const HOME_CTA_BUTTON_KEY = 'Public.common.learnMore'
|
|
|
|
function isLikelyLocalizationKey(value?: string) {
|
|
return Boolean(value && /^[A-Za-z0-9_.-]+$/.test(value) && value.includes('.'))
|
|
}
|
|
|
|
function resolveLocalizedValue(
|
|
translate: (key: string) => string,
|
|
keyOrValue: string | undefined,
|
|
fallback = '',
|
|
) {
|
|
if (!keyOrValue) {
|
|
return fallback
|
|
}
|
|
|
|
if (!isLikelyLocalizationKey(keyOrValue)) {
|
|
return keyOrValue
|
|
}
|
|
|
|
const translatedValue = translate('::' + keyOrValue)
|
|
return translatedValue === keyOrValue ? fallback || keyOrValue : translatedValue
|
|
}
|
|
|
|
function defaultSlides() {
|
|
return [
|
|
{
|
|
titleKey: 'Public.hero.slide1.title',
|
|
subtitleKey: 'Public.hero.slide1.subtitle',
|
|
services: [
|
|
{
|
|
icon: 'FaCalendarAlt',
|
|
titleKey: 'Public.hero.slide1.service1.title',
|
|
descriptionKey: 'Public.hero.slide1.service1.desc',
|
|
},
|
|
{
|
|
icon: 'FaUsers',
|
|
titleKey: 'Public.hero.slide1.service2.title',
|
|
descriptionKey: 'Public.hero.slide1.service2.desc',
|
|
},
|
|
{
|
|
icon: 'FaShieldAlt',
|
|
titleKey: 'Public.hero.slide1.service3.title',
|
|
descriptionKey: 'Public.hero.slide1.service3.desc',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
titleKey: 'Public.hero.slide2.title',
|
|
subtitleKey: 'Public.hero.slide2.subtitle',
|
|
services: [
|
|
{
|
|
icon: 'FaChartBar',
|
|
titleKey: 'Public.hero.slide2.service1.title',
|
|
descriptionKey: 'Public.hero.slide2.service1.desc',
|
|
},
|
|
{
|
|
icon: 'FaCreditCard',
|
|
titleKey: 'Public.hero.slide2.service2.title',
|
|
descriptionKey: 'Public.hero.slide2.service2.desc',
|
|
},
|
|
{
|
|
icon: 'FaDatabase',
|
|
titleKey: 'Public.hero.slide2.service3.title',
|
|
descriptionKey: 'Public.hero.slide2.service3.desc',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
titleKey: 'Public.hero.slide3.title',
|
|
subtitleKey: 'Public.hero.slide3.subtitle',
|
|
services: [
|
|
{
|
|
icon: 'FaDesktop',
|
|
titleKey: 'Public.hero.slide3.service1.title',
|
|
descriptionKey: 'Public.hero.slide3.service1.desc',
|
|
},
|
|
{
|
|
icon: 'FaServer',
|
|
titleKey: 'Public.hero.slide3.service2.title',
|
|
descriptionKey: 'Public.hero.slide3.service2.desc',
|
|
},
|
|
{
|
|
icon: 'FaMobileAlt',
|
|
titleKey: 'Public.hero.slide3.service3.title',
|
|
descriptionKey: 'Public.hero.slide3.service3.desc',
|
|
},
|
|
],
|
|
},
|
|
]
|
|
}
|
|
|
|
function defaultFeatures() {
|
|
return [
|
|
{ icon: 'FaUsers', titleKey: 'Public.features.reliable', descriptionKey: 'Public.features.reliable.desc' },
|
|
{
|
|
icon: 'FaCalendarAlt',
|
|
titleKey: 'App.Coordinator.Classroom.Planning',
|
|
descriptionKey: 'Public.features.rapid.desc',
|
|
},
|
|
{ icon: 'FaBookOpen', titleKey: 'Public.features.expert', descriptionKey: 'Public.features.expert.desc' },
|
|
{
|
|
icon: 'FaCreditCard',
|
|
titleKey: 'Public.features.muhasebe',
|
|
descriptionKey: 'Public.features.muhasebe.desc',
|
|
},
|
|
{
|
|
icon: 'FaRegComment',
|
|
titleKey: 'Public.features.iletisim',
|
|
descriptionKey: 'Public.features.iletisim.desc',
|
|
},
|
|
{ icon: 'FaPhone', titleKey: 'Public.features.mobil', descriptionKey: 'Public.features.mobil.desc' },
|
|
{ icon: 'FaChartBar', titleKey: 'Public.features.scalable', descriptionKey: 'Public.features.scalable.desc' },
|
|
{
|
|
icon: 'FaShieldAlt',
|
|
titleKey: 'Public.features.guvenlik',
|
|
descriptionKey: 'Public.features.guvenlik.desc',
|
|
},
|
|
]
|
|
}
|
|
|
|
function defaultSolutions() {
|
|
return [
|
|
{
|
|
icon: 'FaDesktop',
|
|
colorClass: 'bg-blue-600',
|
|
titleKey: 'Public.services.web.title',
|
|
descriptionKey: 'Public.solutions.web.desc',
|
|
},
|
|
{
|
|
icon: 'FaMobileAlt',
|
|
colorClass: 'bg-purple-600',
|
|
titleKey: 'Public.services.mobile.title',
|
|
descriptionKey: 'Public.solutions.mobile.desc',
|
|
},
|
|
{
|
|
icon: 'FaServer',
|
|
colorClass: 'bg-green-600',
|
|
titleKey: 'Public.solutions.custom.title',
|
|
descriptionKey: 'Public.solutions.custom.desc',
|
|
},
|
|
{
|
|
icon: 'FaDatabase',
|
|
colorClass: 'bg-red-600',
|
|
titleKey: 'Public.solutions.database.title',
|
|
descriptionKey: 'Public.solutions.database.desc',
|
|
},
|
|
]
|
|
}
|
|
|
|
function buildHomeContent(home: HomeDto | undefined, translate: (key: string) => string): HomeContent {
|
|
const slideItems = home?.slidesDto?.length ? home.slidesDto : defaultSlides()
|
|
const featureItems = home?.featuresDto?.length ? home.featuresDto : defaultFeatures()
|
|
const solutionItems = home?.solutionsDto?.length ? home.solutionsDto : defaultSolutions()
|
|
|
|
return {
|
|
heroBackgroundImage: resolveLocalizedValue(
|
|
translate,
|
|
home?.heroBackgroundImageKey || HOME_HERO_BACKGROUND_KEY,
|
|
HOME_HERO_DEFAULT_IMAGE,
|
|
),
|
|
heroBackgroundImageKey: home?.heroBackgroundImageKey || HOME_HERO_BACKGROUND_KEY,
|
|
heroPrimaryCtaLabel: resolveLocalizedValue(
|
|
translate,
|
|
home?.heroPrimaryCtaKey || HOME_HERO_PRIMARY_CTA_KEY,
|
|
),
|
|
heroPrimaryCtaKey: home?.heroPrimaryCtaKey || HOME_HERO_PRIMARY_CTA_KEY,
|
|
heroSecondaryCtaLabel: resolveLocalizedValue(
|
|
translate,
|
|
home?.heroSecondaryCtaKey || HOME_HERO_SECONDARY_CTA_KEY,
|
|
),
|
|
heroSecondaryCtaKey: home?.heroSecondaryCtaKey || HOME_HERO_SECONDARY_CTA_KEY,
|
|
featuresTitle: resolveLocalizedValue(translate, home?.featuresTitleKey || HOME_FEATURES_TITLE_KEY),
|
|
featuresTitleKey: home?.featuresTitleKey || HOME_FEATURES_TITLE_KEY,
|
|
featuresSubtitle: resolveLocalizedValue(
|
|
translate,
|
|
home?.featuresSubtitleKey || HOME_FEATURES_SUBTITLE_KEY,
|
|
),
|
|
featuresSubtitleKey: home?.featuresSubtitleKey || HOME_FEATURES_SUBTITLE_KEY,
|
|
solutionsTitle: resolveLocalizedValue(translate, home?.solutionsTitleKey || HOME_SOLUTIONS_TITLE_KEY),
|
|
solutionsTitleKey: home?.solutionsTitleKey || HOME_SOLUTIONS_TITLE_KEY,
|
|
solutionsSubtitle: resolveLocalizedValue(
|
|
translate,
|
|
home?.solutionsSubtitleKey || HOME_SOLUTIONS_SUBTITLE_KEY,
|
|
),
|
|
solutionsSubtitleKey: home?.solutionsSubtitleKey || HOME_SOLUTIONS_SUBTITLE_KEY,
|
|
ctaTitle: resolveLocalizedValue(translate, home?.ctaTitleKey || HOME_CTA_TITLE_KEY),
|
|
ctaTitleKey: home?.ctaTitleKey || HOME_CTA_TITLE_KEY,
|
|
ctaSubtitle: resolveLocalizedValue(translate, home?.ctaSubtitleKey || HOME_CTA_SUBTITLE_KEY),
|
|
ctaSubtitleKey: home?.ctaSubtitleKey || HOME_CTA_SUBTITLE_KEY,
|
|
ctaButtonLabel: resolveLocalizedValue(translate, home?.ctaButtonLabelKey || HOME_CTA_BUTTON_KEY),
|
|
ctaButtonLabelKey: home?.ctaButtonLabelKey || HOME_CTA_BUTTON_KEY,
|
|
slides: slideItems.map((slide, slideIndex) => ({
|
|
title: resolveLocalizedValue(translate, slide.titleKey, slide.titleKey),
|
|
titleKey: slide.titleKey || `Public.home.dynamic.slide.${slideIndex + 1}.title`,
|
|
subtitle: resolveLocalizedValue(translate, slide.subtitleKey, slide.subtitleKey),
|
|
subtitleKey: slide.subtitleKey || `Public.home.dynamic.slide.${slideIndex + 1}.subtitle`,
|
|
services: (slide.services || []).map((service, serviceIndex) => ({
|
|
icon: service.icon || 'FaCircle',
|
|
title: resolveLocalizedValue(translate, service.titleKey, service.titleKey),
|
|
titleKey:
|
|
service.titleKey ||
|
|
`Public.home.dynamic.slide.${slideIndex + 1}.service.${serviceIndex + 1}.title`,
|
|
description: resolveLocalizedValue(translate, service.descriptionKey, service.descriptionKey),
|
|
descriptionKey:
|
|
service.descriptionKey ||
|
|
`Public.home.dynamic.slide.${slideIndex + 1}.service.${serviceIndex + 1}.description`,
|
|
})),
|
|
})),
|
|
features: featureItems.map((feature, index) => ({
|
|
icon: feature.icon || 'FaCircle',
|
|
title: resolveLocalizedValue(translate, feature.titleKey, feature.titleKey),
|
|
titleKey: feature.titleKey || `Public.home.dynamic.feature.${index + 1}.title`,
|
|
description: resolveLocalizedValue(translate, feature.descriptionKey, feature.descriptionKey),
|
|
descriptionKey: feature.descriptionKey || `Public.home.dynamic.feature.${index + 1}.description`,
|
|
})),
|
|
solutions: solutionItems.map((solution, index) => ({
|
|
icon: solution.icon || 'FaCircle',
|
|
colorClass: solution.colorClass || 'bg-blue-600',
|
|
title: resolveLocalizedValue(translate, solution.titleKey, solution.titleKey),
|
|
titleKey: solution.titleKey || `Public.home.dynamic.solution.${index + 1}.title`,
|
|
description: resolveLocalizedValue(translate, solution.descriptionKey, solution.descriptionKey),
|
|
descriptionKey:
|
|
solution.descriptionKey || `Public.home.dynamic.solution.${index + 1}.description`,
|
|
})),
|
|
}
|
|
}
|
|
|
|
const Home: React.FC = () => {
|
|
const { translate } = useLocalization()
|
|
const { setLang } = useStoreActions((actions) => actions.locale)
|
|
const { getConfig } = useStoreActions((actions) => actions.abpConfig)
|
|
const configCultureName = useStoreState(
|
|
(state) => state.abpConfig.config?.localization.currentCulture.cultureName,
|
|
)
|
|
const localeCurrentLang = useStoreState((state) => state.locale?.currentLang)
|
|
const currentLanguage = configCultureName || localeCurrentLang || 'tr'
|
|
const abpLanguages = useStoreState((state) => state.abpConfig.config?.localization.languages) || []
|
|
const languageOptions = abpLanguages
|
|
.filter((language) => Boolean(language.cultureName))
|
|
.map((language) => {
|
|
const cultureName = language.cultureName || 'tr'
|
|
return {
|
|
key: cultureName.toLowerCase().split('-')[0],
|
|
cultureName,
|
|
displayName: language.displayName || cultureName,
|
|
}
|
|
})
|
|
const languagesFromConfig = languageOptions.map((language) => language.key)
|
|
const editorLanguages = Array.from(
|
|
new Set((languagesFromConfig.length > 0 ? languagesFromConfig : [currentLanguage]).filter(Boolean)),
|
|
)
|
|
|
|
const [home, setHome] = useState<HomeDto>()
|
|
const [loading, setLoading] = useState(true)
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
const [isPanelVisible, setIsPanelVisible] = useState(true)
|
|
const [currentSlide, setCurrentSlide] = useState(0)
|
|
|
|
const initialContent = !loading ? buildHomeContent(home, translate) : null
|
|
const {
|
|
content,
|
|
isDesignMode,
|
|
selectedBlockId,
|
|
selectedLanguage,
|
|
supportedLanguages,
|
|
setContent,
|
|
setSelectedBlockId,
|
|
resetContent,
|
|
} = useDesignerState<HomeContent>('home', initialContent, {
|
|
currentLanguage,
|
|
supportedLanguages: editorLanguages,
|
|
})
|
|
|
|
useEffect(() => {
|
|
setLoading(true)
|
|
const fetchHome = async () => {
|
|
try {
|
|
const result = await getHome()
|
|
setHome(result.data)
|
|
} catch (error) {
|
|
console.error('Home alinirken hata olustu:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchHome()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!content?.slides?.length) {
|
|
return
|
|
}
|
|
|
|
if (currentSlide >= content.slides.length) {
|
|
setCurrentSlide(0)
|
|
}
|
|
}, [content?.slides.length, currentSlide])
|
|
|
|
useEffect(() => {
|
|
if (!content?.slides?.length) {
|
|
return
|
|
}
|
|
|
|
const timer = setInterval(() => {
|
|
setCurrentSlide((prev) => (prev + 1) % content.slides.length)
|
|
}, 10000)
|
|
|
|
return () => clearInterval(timer)
|
|
}, [content?.slides.length])
|
|
|
|
const nextSlide = () => {
|
|
const size = content?.slides.length || 1
|
|
setCurrentSlide((prev) => (prev + 1) % size)
|
|
}
|
|
|
|
const prevSlide = () => {
|
|
const size = content?.slides.length || 1
|
|
setCurrentSlide((prev) => (prev - 1 + size) % size)
|
|
}
|
|
|
|
const updateContent = (updater: (current: HomeContent) => HomeContent) => {
|
|
setContent((current) => {
|
|
if (!current) {
|
|
return current
|
|
}
|
|
|
|
return updater(current)
|
|
})
|
|
}
|
|
|
|
const handleFieldChange = (fieldKey: string, value: string | string[]) => {
|
|
const nextValue = value as string
|
|
|
|
updateContent((current) => {
|
|
if (
|
|
fieldKey === 'heroBackgroundImage' ||
|
|
fieldKey === 'heroPrimaryCtaLabel' ||
|
|
fieldKey === 'heroSecondaryCtaLabel' ||
|
|
fieldKey === 'featuresTitle' ||
|
|
fieldKey === 'featuresSubtitle' ||
|
|
fieldKey === 'solutionsTitle' ||
|
|
fieldKey === 'solutionsSubtitle' ||
|
|
fieldKey === 'ctaTitle' ||
|
|
fieldKey === 'ctaSubtitle' ||
|
|
fieldKey === 'ctaButtonLabel'
|
|
) {
|
|
return {
|
|
...current,
|
|
[fieldKey]: nextValue,
|
|
}
|
|
}
|
|
|
|
if (selectedBlockId?.startsWith('slide-')) {
|
|
const index = Number(selectedBlockId.replace('slide-', ''))
|
|
if (Number.isNaN(index)) {
|
|
return current
|
|
}
|
|
|
|
const slides = [...current.slides]
|
|
const target = { ...slides[index] }
|
|
|
|
if (fieldKey === 'title' || fieldKey === 'subtitle') {
|
|
target[fieldKey] = nextValue
|
|
} else if (fieldKey.startsWith('service-')) {
|
|
const parts = fieldKey.split('-')
|
|
const serviceIndex = Number(parts[1])
|
|
const serviceField = parts[2] as 'icon' | 'title' | 'description'
|
|
const services = [...target.services]
|
|
const service = { ...services[serviceIndex] }
|
|
service[serviceField] = nextValue
|
|
services[serviceIndex] = service
|
|
target.services = services
|
|
}
|
|
|
|
slides[index] = target
|
|
return {
|
|
...current,
|
|
slides,
|
|
}
|
|
}
|
|
|
|
if (selectedBlockId?.startsWith('feature-')) {
|
|
const index = Number(selectedBlockId.replace('feature-', ''))
|
|
if (Number.isNaN(index)) {
|
|
return current
|
|
}
|
|
|
|
const features = [...current.features]
|
|
const feature = { ...features[index] }
|
|
const key = fieldKey as 'icon' | 'title' | 'description'
|
|
feature[key] = nextValue
|
|
features[index] = feature
|
|
|
|
return {
|
|
...current,
|
|
features,
|
|
}
|
|
}
|
|
|
|
if (selectedBlockId?.startsWith('solution-')) {
|
|
const index = Number(selectedBlockId.replace('solution-', ''))
|
|
if (Number.isNaN(index)) {
|
|
return current
|
|
}
|
|
|
|
const solutions = [...current.solutions]
|
|
const solution = { ...solutions[index] }
|
|
const key = fieldKey as 'icon' | 'title' | 'description' | 'colorClass'
|
|
solution[key] = nextValue
|
|
solutions[index] = solution
|
|
|
|
return {
|
|
...current,
|
|
solutions,
|
|
}
|
|
}
|
|
|
|
return current
|
|
})
|
|
}
|
|
|
|
const selectedSelection: DesignerSelection | null = React.useMemo(() => {
|
|
if (!content || !selectedBlockId) {
|
|
return null
|
|
}
|
|
|
|
if (selectedBlockId === 'hero') {
|
|
return {
|
|
id: 'hero',
|
|
title: 'Public.home.hero.*',
|
|
description: 'Hero arka planini ve CTA metinlerini duzenleyin.',
|
|
fields: [
|
|
{
|
|
key: 'heroBackgroundImage',
|
|
label: content.heroBackgroundImageKey,
|
|
type: 'image',
|
|
value: content.heroBackgroundImage,
|
|
},
|
|
{
|
|
key: 'heroPrimaryCtaLabel',
|
|
label: content.heroPrimaryCtaKey,
|
|
type: 'text',
|
|
value: content.heroPrimaryCtaLabel,
|
|
},
|
|
{
|
|
key: 'heroSecondaryCtaLabel',
|
|
label: content.heroSecondaryCtaKey,
|
|
type: 'text',
|
|
value: content.heroSecondaryCtaLabel,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
if (selectedBlockId.startsWith('slide-')) {
|
|
const index = Number(selectedBlockId.replace('slide-', ''))
|
|
const slide = content.slides[index]
|
|
|
|
if (!slide) {
|
|
return null
|
|
}
|
|
|
|
return {
|
|
id: selectedBlockId,
|
|
title: slide.titleKey,
|
|
description: 'Slayt baslik, alt baslik ve servis kartlarini duzenleyin.',
|
|
fields: [
|
|
{
|
|
key: 'title',
|
|
label: slide.titleKey,
|
|
type: 'text',
|
|
value: slide.title,
|
|
},
|
|
{
|
|
key: 'subtitle',
|
|
label: slide.subtitleKey,
|
|
type: 'textarea',
|
|
value: slide.subtitle,
|
|
},
|
|
...slide.services.flatMap((service, serviceIndex) => [
|
|
{
|
|
key: `service-${serviceIndex}-icon`,
|
|
label: `Slide${index + 1}.Service${serviceIndex + 1}.Icon`,
|
|
type: 'icon' as const,
|
|
value: service.icon,
|
|
placeholder: 'Ornek: FaUsers',
|
|
},
|
|
{
|
|
key: `service-${serviceIndex}-title`,
|
|
label: service.titleKey,
|
|
type: 'text' as const,
|
|
value: service.title,
|
|
},
|
|
{
|
|
key: `service-${serviceIndex}-description`,
|
|
label: service.descriptionKey,
|
|
type: 'textarea' as const,
|
|
value: service.description,
|
|
},
|
|
]),
|
|
],
|
|
}
|
|
}
|
|
|
|
if (selectedBlockId === 'features-heading') {
|
|
return {
|
|
id: selectedBlockId,
|
|
title: content.featuresTitleKey,
|
|
description: 'Features bolum basliklarini duzenleyin.',
|
|
fields: [
|
|
{
|
|
key: 'featuresTitle',
|
|
label: content.featuresTitleKey,
|
|
type: 'text',
|
|
value: content.featuresTitle,
|
|
},
|
|
{
|
|
key: 'featuresSubtitle',
|
|
label: content.featuresSubtitleKey,
|
|
type: 'textarea',
|
|
value: content.featuresSubtitle,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
if (selectedBlockId.startsWith('feature-')) {
|
|
const index = Number(selectedBlockId.replace('feature-', ''))
|
|
const item = content.features[index]
|
|
|
|
if (!item) {
|
|
return null
|
|
}
|
|
|
|
return {
|
|
id: selectedBlockId,
|
|
title: item.titleKey,
|
|
description: 'Feature ikon ve metinlerini duzenleyin.',
|
|
fields: [
|
|
{
|
|
key: 'icon',
|
|
label: `Feature${index + 1}.Icon`,
|
|
type: 'icon',
|
|
value: item.icon,
|
|
placeholder: 'Ornek: FaChartBar',
|
|
},
|
|
{
|
|
key: 'title',
|
|
label: item.titleKey,
|
|
type: 'text',
|
|
value: item.title,
|
|
},
|
|
{
|
|
key: 'description',
|
|
label: item.descriptionKey,
|
|
type: 'textarea',
|
|
value: item.description,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
if (selectedBlockId === 'solutions-heading') {
|
|
return {
|
|
id: selectedBlockId,
|
|
title: content.solutionsTitleKey,
|
|
description: 'Solutions bolum basliklarini duzenleyin.',
|
|
fields: [
|
|
{
|
|
key: 'solutionsTitle',
|
|
label: content.solutionsTitleKey,
|
|
type: 'text',
|
|
value: content.solutionsTitle,
|
|
},
|
|
{
|
|
key: 'solutionsSubtitle',
|
|
label: content.solutionsSubtitleKey,
|
|
type: 'textarea',
|
|
value: content.solutionsSubtitle,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
if (selectedBlockId.startsWith('solution-')) {
|
|
const index = Number(selectedBlockId.replace('solution-', ''))
|
|
const item = content.solutions[index]
|
|
|
|
if (!item) {
|
|
return null
|
|
}
|
|
|
|
return {
|
|
id: selectedBlockId,
|
|
title: item.titleKey,
|
|
description: 'Solution kartini tamamen duzenleyin.',
|
|
fields: [
|
|
{
|
|
key: 'colorClass',
|
|
label: `Solution${index + 1}.ColorClass`,
|
|
type: 'text',
|
|
value: item.colorClass,
|
|
},
|
|
{
|
|
key: 'icon',
|
|
label: `Solution${index + 1}.Icon`,
|
|
type: 'icon',
|
|
value: item.icon,
|
|
placeholder: 'Ornek: FaDesktop',
|
|
},
|
|
{
|
|
key: 'title',
|
|
label: item.titleKey,
|
|
type: 'text',
|
|
value: item.title,
|
|
},
|
|
{
|
|
key: 'description',
|
|
label: item.descriptionKey,
|
|
type: 'textarea',
|
|
value: item.description,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
if (selectedBlockId === 'cta') {
|
|
return {
|
|
id: selectedBlockId,
|
|
title: content.ctaTitleKey,
|
|
description: 'Sayfa alti cta metinlerini duzenleyin.',
|
|
fields: [
|
|
{
|
|
key: 'ctaTitle',
|
|
label: content.ctaTitleKey,
|
|
type: 'text',
|
|
value: content.ctaTitle,
|
|
},
|
|
{
|
|
key: 'ctaSubtitle',
|
|
label: content.ctaSubtitleKey,
|
|
type: 'textarea',
|
|
value: content.ctaSubtitle,
|
|
},
|
|
{
|
|
key: 'ctaButtonLabel',
|
|
label: content.ctaButtonLabelKey,
|
|
type: 'text',
|
|
value: content.ctaButtonLabel,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
return null
|
|
}, [content, selectedBlockId])
|
|
|
|
const handleSaveAndExit = async () => {
|
|
if (!content || isSaving) {
|
|
return
|
|
}
|
|
|
|
setIsSaving(true)
|
|
|
|
try {
|
|
await saveHomePage({
|
|
cultureName: selectedLanguage,
|
|
heroBackgroundImageKey: content.heroBackgroundImageKey,
|
|
heroBackgroundImageValue: content.heroBackgroundImage,
|
|
heroPrimaryCtaKey: content.heroPrimaryCtaKey,
|
|
heroPrimaryCtaValue: content.heroPrimaryCtaLabel,
|
|
heroSecondaryCtaKey: content.heroSecondaryCtaKey,
|
|
heroSecondaryCtaValue: content.heroSecondaryCtaLabel,
|
|
featuresTitleKey: content.featuresTitleKey,
|
|
featuresTitleValue: content.featuresTitle,
|
|
featuresSubtitleKey: content.featuresSubtitleKey,
|
|
featuresSubtitleValue: content.featuresSubtitle,
|
|
solutionsTitleKey: content.solutionsTitleKey,
|
|
solutionsTitleValue: content.solutionsTitle,
|
|
solutionsSubtitleKey: content.solutionsSubtitleKey,
|
|
solutionsSubtitleValue: content.solutionsSubtitle,
|
|
ctaTitleKey: content.ctaTitleKey,
|
|
ctaTitleValue: content.ctaTitle,
|
|
ctaSubtitleKey: content.ctaSubtitleKey,
|
|
ctaSubtitleValue: content.ctaSubtitle,
|
|
ctaButtonLabelKey: content.ctaButtonLabelKey,
|
|
ctaButtonLabelValue: content.ctaButtonLabel,
|
|
slides: content.slides.map((slide, slideIndex) => ({
|
|
titleKey: slide.titleKey || `Public.home.dynamic.slide.${slideIndex + 1}.title`,
|
|
titleValue: slide.title,
|
|
subtitleKey: slide.subtitleKey || `Public.home.dynamic.slide.${slideIndex + 1}.subtitle`,
|
|
subtitleValue: slide.subtitle,
|
|
services: slide.services.map((service, serviceIndex) => ({
|
|
icon: service.icon,
|
|
titleKey:
|
|
service.titleKey ||
|
|
`Public.home.dynamic.slide.${slideIndex + 1}.service.${serviceIndex + 1}.title`,
|
|
titleValue: service.title,
|
|
descriptionKey:
|
|
service.descriptionKey ||
|
|
`Public.home.dynamic.slide.${slideIndex + 1}.service.${serviceIndex + 1}.description`,
|
|
descriptionValue: service.description,
|
|
})),
|
|
})),
|
|
features: content.features.map((feature, index) => ({
|
|
icon: feature.icon,
|
|
titleKey: feature.titleKey || `Public.home.dynamic.feature.${index + 1}.title`,
|
|
titleValue: feature.title,
|
|
descriptionKey: feature.descriptionKey || `Public.home.dynamic.feature.${index + 1}.description`,
|
|
descriptionValue: feature.description,
|
|
})),
|
|
solutions: content.solutions.map((solution, index) => ({
|
|
icon: solution.icon,
|
|
colorClass: solution.colorClass,
|
|
titleKey: solution.titleKey || `Public.home.dynamic.solution.${index + 1}.title`,
|
|
titleValue: solution.title,
|
|
descriptionKey:
|
|
solution.descriptionKey || `Public.home.dynamic.solution.${index + 1}.description`,
|
|
descriptionValue: solution.description,
|
|
})),
|
|
})
|
|
|
|
await getConfig(false)
|
|
setSelectedBlockId(null)
|
|
|
|
toast.push(
|
|
<Notification type="success" duration={2000}>
|
|
{translate('::ListForms.FormBilgileriKaydedildi')}
|
|
</Notification>,
|
|
{
|
|
placement: 'top-end',
|
|
},
|
|
)
|
|
|
|
} catch (error) {
|
|
console.error('Home tasarimi kaydedilemedi:', error)
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}
|
|
|
|
const handleLanguageChange = (language: string) => {
|
|
setLang(language)
|
|
}
|
|
|
|
const handleSelectBlock = (blockId: string) => {
|
|
setSelectedBlockId(blockId)
|
|
if (!isPanelVisible) {
|
|
setIsPanelVisible(true)
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
|
<div className="text-center">
|
|
<Loading loading={loading} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={`min-h-screen ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
|
|
<Helmet
|
|
titleTemplate={`%s | ${APP_NAME}`}
|
|
title={translate('::' + 'App.Home')}
|
|
defaultTitle={APP_NAME}
|
|
></Helmet>
|
|
|
|
{isDesignMode && (
|
|
<div className="fixed bottom-6 left-6 z-40 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-xl">
|
|
Home designer aktif
|
|
</div>
|
|
)}
|
|
|
|
{isDesignMode && !isPanelVisible && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsPanelVisible(true)}
|
|
className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl"
|
|
>
|
|
{translate('::Public.designer.showPanel')}
|
|
</button>
|
|
)}
|
|
|
|
{/* Hero Carousel */}
|
|
<SelectableBlock
|
|
id="hero"
|
|
isActive={selectedBlockId === 'hero'}
|
|
isDesignMode={isDesignMode}
|
|
onSelect={handleSelectBlock}
|
|
>
|
|
<div className="relative min-h-screen overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900"></div>
|
|
<div
|
|
className="absolute inset-0 opacity-20"
|
|
style={{
|
|
backgroundImage: `url("${content?.heroBackgroundImage || HOME_HERO_DEFAULT_IMAGE}")`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
></div>
|
|
|
|
{/* Carousel Content */}
|
|
<div className="relative container mx-auto px-4 pt-32 pb-16 h-screen flex items-center">
|
|
{(content?.slides || []).map((slide, index) => (
|
|
<div
|
|
key={index}
|
|
className={`absolute inset-0 transition-all duration-700 ease-in-out ${
|
|
index === currentSlide
|
|
? 'opacity-100 translate-x-0'
|
|
: index < currentSlide
|
|
? 'opacity-0 -translate-x-full'
|
|
: 'opacity-0 translate-x-full'
|
|
}`}
|
|
>
|
|
<SelectableBlock
|
|
id={`slide-${index}`}
|
|
isActive={selectedBlockId === `slide-${index}`}
|
|
isDesignMode={isDesignMode}
|
|
onSelect={(id) => {
|
|
setCurrentSlide(index)
|
|
handleSelectBlock(id)
|
|
}}
|
|
className="h-full"
|
|
>
|
|
<div className="container mx-auto px-4 pt-32">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h1 className="text-3xl md:text-6xl font-bold mb-6 text-white animate-fade-in">
|
|
{slide.title}
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-gray-300 mb-12 animate-fade-in-delay">
|
|
{slide.subtitle}
|
|
</p>
|
|
|
|
<div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
|
|
<Link
|
|
to={ROUTES_ENUM.public.contact}
|
|
className="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"
|
|
>
|
|
{content?.heroPrimaryCtaLabel}{' '}
|
|
<FaArrowRight className="ml-2" size={20} />
|
|
</Link>
|
|
<Link
|
|
to={ROUTES_ENUM.public.products}
|
|
className="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"
|
|
>
|
|
{content?.heroSecondaryCtaLabel}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
|
{slide.services.map((service, i) => (
|
|
<div
|
|
key={i}
|
|
className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all"
|
|
>
|
|
{(() => {
|
|
const IconComponent = navigationIcon[service.icon || '']
|
|
return IconComponent ? (
|
|
<IconComponent className="mx-auto mb-4 text-blue-300" size={40} />
|
|
) : null
|
|
})()}
|
|
<h3 className="text-xl font-semibold mb-3 text-white">{service.title}</h3>
|
|
<p className="text-gray-300">{service.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SelectableBlock>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Navigation Buttons */}
|
|
<button
|
|
onClick={prevSlide}
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white p-4 rounded-full transition-all z-10"
|
|
aria-label="Previous slide"
|
|
>
|
|
<FaChevronLeft size={24} />
|
|
</button>
|
|
<button
|
|
onClick={nextSlide}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white p-4 rounded-full transition-all z-10"
|
|
aria-label="Next slide"
|
|
>
|
|
<FaChevronRight size={24} />
|
|
</button>
|
|
|
|
{/* Slide Indicators */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3 z-10">
|
|
{(content?.slides || []).map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setCurrentSlide(index)}
|
|
className={`w-3 h-3 rounded-full transition-all ${
|
|
index === currentSlide ? 'bg-white w-8' : 'bg-white/50 hover:bg-white/70'
|
|
}`}
|
|
aria-label={`Go to slide ${index + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{isDesignMode && (
|
|
<div className="absolute bottom-24 left-1/2 z-20 -translate-x-1/2 flex gap-2 rounded-full bg-black/30 px-3 py-2 backdrop-blur">
|
|
{(content?.slides || []).map((_, index) => (
|
|
<button
|
|
key={`editor-slide-${index}`}
|
|
type="button"
|
|
onClick={() => {
|
|
setCurrentSlide(index)
|
|
handleSelectBlock(`slide-${index}`)
|
|
}}
|
|
className={`rounded-full px-3 py-1 text-xs font-semibold text-white transition ${
|
|
selectedBlockId === `slide-${index}` ? 'bg-sky-500' : 'bg-white/20 hover:bg-white/30'
|
|
}`}
|
|
>
|
|
Slide {index + 1}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SelectableBlock>
|
|
|
|
{/* Features */}
|
|
<section className="py-20 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
<SelectableBlock
|
|
id="features-heading"
|
|
isActive={selectedBlockId === 'features-heading'}
|
|
isDesignMode={isDesignMode}
|
|
onSelect={handleSelectBlock}
|
|
>
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
{content?.featuresTitle}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
{content?.featuresSubtitle}
|
|
</p>
|
|
</div>
|
|
</SelectableBlock>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{(content?.features || []).map((feature, i) => (
|
|
<SelectableBlock
|
|
key={i}
|
|
id={`feature-${i}`}
|
|
isActive={selectedBlockId === `feature-${i}`}
|
|
isDesignMode={isDesignMode}
|
|
onSelect={handleSelectBlock}
|
|
>
|
|
<div className="p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow">
|
|
<div className="mb-6">
|
|
{(() => {
|
|
const IconComponent = navigationIcon[feature.icon || '']
|
|
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>
|
|
</div>
|
|
</SelectableBlock>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Solutions */}
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="container mx-auto px-4">
|
|
<SelectableBlock
|
|
id="solutions-heading"
|
|
isActive={selectedBlockId === 'solutions-heading'}
|
|
isDesignMode={isDesignMode}
|
|
onSelect={handleSelectBlock}
|
|
>
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
{content?.solutionsTitle}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
{content?.solutionsSubtitle}
|
|
</p>
|
|
</div>
|
|
</SelectableBlock>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{(content?.solutions || []).map((s, i) => (
|
|
<SelectableBlock
|
|
key={i}
|
|
id={`solution-${i}`}
|
|
isActive={selectedBlockId === `solution-${i}`}
|
|
isDesignMode={isDesignMode}
|
|
onSelect={handleSelectBlock}
|
|
>
|
|
<div className={`${s.colorClass} p-8 h-full rounded-2xl`}>
|
|
<div className="mb-6">
|
|
{(() => {
|
|
const IconComponent = navigationIcon[s.icon || '']
|
|
return IconComponent ? <IconComponent className="w-16 h-16 text-white" /> : null
|
|
})()}
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-white mb-4">{s.title}</h3>
|
|
<p className="text-white/90">{s.description}</p>
|
|
</div>
|
|
</SelectableBlock>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Call to Action */}
|
|
<SelectableBlock
|
|
id="cta"
|
|
isActive={selectedBlockId === 'cta'}
|
|
isDesignMode={isDesignMode}
|
|
onSelect={handleSelectBlock}
|
|
>
|
|
<section className="bg-blue-600 py-16">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<h2 className="text-3xl font-bold text-white mb-4">{content?.ctaTitle}</h2>
|
|
<p className="text-white text-lg mb-8">{content?.ctaSubtitle}</p>
|
|
<Link
|
|
to={ROUTES_ENUM.public.contact}
|
|
className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors"
|
|
>
|
|
{content?.ctaButtonLabel}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</SelectableBlock>
|
|
|
|
<DesignerDrawer
|
|
isOpen={isDesignMode && isPanelVisible}
|
|
selection={selectedSelection}
|
|
pageTitle="Home"
|
|
selectedLanguage={selectedLanguage}
|
|
languages={
|
|
languageOptions.length > 0
|
|
? languageOptions
|
|
: supportedLanguages.map((language) => ({
|
|
key: language,
|
|
cultureName: language,
|
|
displayName: language.toUpperCase(),
|
|
}))
|
|
}
|
|
onClose={() => setIsPanelVisible(false)}
|
|
onSave={handleSaveAndExit}
|
|
onLanguageChange={handleLanguageChange}
|
|
onReset={resetContent}
|
|
onFieldChange={handleFieldChange}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|