{$t('settings.landing_page.heading')} (hasUnsavedChanges = true)} /> {$landingPageSettings.header.show ? $t('settings.landing_page.show_section') : $t('settings.landing_page.hide_section')} {$t('settings.landing_page.title')} (hasUnsavedChanges = true)} class="w-full" /> {$t('settings.landing_page.title_highlight')} (hasUnsavedChanges = true)} /> {$t('settings.landing_page.subtitle')} (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.actions.heading')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.label')} class="w-full" bind:value={$landingPageSettings.header.action.label} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.actions.link')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.link')} bind:value={$landingPageSettings.header.action.link} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field orientation="horizontal"> <Switch bind:checked={$landingPageSettings.header.action.redirect} onCheckedChange={() => (hasUnsavedChanges = true)} /> <Field.Label class="text-gray-600"> {$landingPageSettings.header.action.redirect ? $t('settings.landing_page.actions.redirect') : $t('settings.landing_page.actions.no_redirect')} </Field.Label> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.actions.banner_type.heading')}</Field.Label> <RadioGroup.Root bind:value={$landingPageSettings.header.banner.type} onValueChange={() => { if (hasUnsavedChanges) return; hasUnsavedChanges = true; }} > {#each banner as item} <div class="flex items-center space-x-2"> <RadioGroup.Item value={item.value} id={item.value} /> <Label for={item.value} class="cursor-pointer">{item.label}</Label> </div> {/each} </RadioGroup.Root> </Field.Field> {#if $landingPageSettings.header.banner.type === 'video'} <Field.Field> <Field.Label>{$t('settings.landing_page.actions.link')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.video')} bind:value={$landingPageSettings.header.banner.video} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> {:else} <Field.Field> <Button variant="outline" onclick={() => widgetControl('header.banner.image')}> {$t('settings.landing_page.about.select_image')} </Button> </Field.Field> {/if} {#if $landingPageSettings.header.banner.image && $landingPageSettings.header.banner.type === 'image'} <img alt="bannerImage" src={$landingPageSettings.header.banner.image} class="mt-2 w-full rounded-md" /> {/if} <Field.Field orientation="horizontal"> <Switch bind:checked={$landingPageSettings.header.banner.show} onCheckedChange={() => (hasUnsavedChanges = true)} /> <Field.Label class="text-gray-600"> {$landingPageSettings.header.banner.show ? $t('settings.landing_page.actions.show_banner') : $t('settings.landing_page.actions.hide_banner')} </Field.Label> </Field.Field> {#if $handleOpenWidget.open && widgetKey === 'banner'} <UploadWidget bind:imageURL={$landingPageSettings.header.banner.image} onchange={() => (hasUnsavedChanges = true)} /> {/if} <Field.Field> <Field.Label>{$t('settings.landing_page.background.title')}</Field.Label> <Button variant="outline" onclick={() => widgetControl('background')}> {$t('settings.landing_page.about.select_image')} </Button> </Field.Field> {#if $landingPageSettings.header.background?.image} <img alt="backgroundImage" src={$landingPageSettings.header.background.image} class="mt-2 w-full rounded-md" /> {/if} <Field.Field orientation="horizontal"> <Switch checked={$landingPageSettings.header.background?.show} onCheckedChange={() => { hasUnsavedChanges = true; if (!$landingPageSettings.header.background) { $landingPageSettings.header.background = { image: '', show: true }; } else { $landingPageSettings.header.background.show = !$landingPageSettings.header.background.show; } }} /> <Field.Label class="text-gray-600"> {$landingPageSettings.header.background?.show ? $t('settings.landing_page.background.show_background') : $t('settings.landing_page.background.hide_background')} </Field.Label> </Field.Field> {#if $handleOpenWidget.open && widgetKey === 'background'} <UploadWidget imageURL={$landingPageSettings.header.background?.image} onchange={(imgUrl) => { hasUnsavedChanges = true; if (!$landingPageSettings.header.background) { $landingPageSettings.header.background = { image: imgUrl, show: true }; } else { $landingPageSettings.header.background.image = imgUrl; } }} /> {/if} </Field.Group> </Field.Set> <Field.Separator /> <Field.Set> <Field.Legend>{$t('settings.landing_page.about.heading')}</Field.Legend> <Field.Field orientation="horizontal"> <Switch bind:checked={$landingPageSettings.aboutUs.show} onCheckedChange={() => (hasUnsavedChanges = true)} /> <Field.Label class="text-gray-600"> {$landingPageSettings.aboutUs.show ? $t('settings.landing_page.show_section') : $t('settings.landing_page.hide_section')} </Field.Label> </Field.Field> <Field.Group> <Field.Field> <Field.Label>{$t('settings.landing_page.about.title')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')} bind:value={$landingPageSettings.aboutUs.title} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.about.content')}</Field.Label> <Textarea placeholder={$t('course.navItem.lessons.exercises.all_exercises.content')} bind:value={$landingPageSettings.aboutUs.content} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label class="font-bold">{$t('settings.landing_page.about.upload_an_image')}</Field.Label> <Button variant="outline" onclick={() => widgetControl('about-us')}> {$t('settings.landing_page.about.select_image')} </Button> {#if $landingPageSettings.aboutUs.imageUrl} <img alt="About us" src={$landingPageSettings.aboutUs.imageUrl} class="mt-2 w-full rounded-md" /> {/if} {#if $handleOpenWidget.open && widgetKey === 'about-us'} <UploadWidget bind:imageURL={$landingPageSettings.aboutUs.imageUrl} /> {/if} </Field.Field> </Field.Group> </Field.Set> <Field.Separator /> <Field.Set> <Field.Legend>{$t('settings.landing_page.courses.heading')}</Field.Legend> <Field.Field orientation="horizontal"> <Switch bind:checked={$landingPageSettings.courses.show} onCheckedChange={() => (hasUnsavedChanges = true)} /> <Field.Label class="text-gray-600"> {$landingPageSettings.courses.show ? $t('settings.landing_page.courses.show_section') : $t('settings.landing_page.courses.hide_section')} </Field.Label> </Field.Field> <Field.Group> <Field.Field> <Field.Label>{$t('settings.landing_page.courses.title')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')} bind:value={$landingPageSettings.courses.title} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.courses.title_highlight')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.highlight')} bind:value={$landingPageSettings.courses.titleHighlight} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.courses.subtitle')}</Field.Label> <Textarea placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_subtitle')} bind:value={$landingPageSettings.courses.subtitle} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> </Field.Group> </Field.Set> <Field.Separator /> <Field.Set> <Field.Legend>{$t('settings.landing_page.faq.heading')}</Field.Legend> <Field.Field orientation="horizontal"> <Switch bind:checked={$landingPageSettings.faq.show} onCheckedChange={() => (hasUnsavedChanges = true)} /> <Field.Label class="text-gray-600"> {$landingPageSettings.faq.show ? $t('settings.landing_page.faq.show_section') : $t('settings.landing_page.faq.hide_section')} </Field.Label> </Field.Field> <Field.Group> <Field.Field> <Field.Label>{$t('settings.landing_page.faq.title')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')} bind:value={$landingPageSettings.faq.title} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> {#each $landingPageSettings.faq.questions as item (item.id)} <Field.Field> <Field.Label>{$t('settings.landing_page.faq.question')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_question_here')} bind:value={item.title} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.faq.answer')}</Field.Label> <Textarea placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_answer_here')} bind:value={item.content} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Button variant="ghost" size="icon" onclick={() => deleteFaq(item.id)}> <TrashIcon size={16} /> </Button> {/each} {#if creatingNewQuestion} <Field.Field> <Field.Label>{$t('settings.landing_page.faq.question')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_question_here')} bind:value={newQuestion.title} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.faq.answer')}</Field.Label> <Textarea placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_answer_here')} bind:value={newQuestion.content} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field orientation="horizontal"> <Button variant="outline" onclick={saveNewFAQ}> {$t('settings.landing_page.faq.save')} </Button> <Button variant="outline" onclick={cancelNewFAQ}> {$t('settings.landing_page.faq.cancel')} </Button> </Field.Field> {:else} <Field.Field orientation="horizontal"> <Button variant="outline" onclick={createNewFaq}> {$t('settings.landing_page.faq.button')} </Button> </Field.Field> {/if} </Field.Group> </Field.Set> <Field.Separator /> <Field.Set> <Field.Legend>{$t('settings.landing_page.contact_us.heading')}</Field.Legend> <Field.Field orientation="horizontal"> <Switch bind:checked={$landingPageSettings.contact.show} onCheckedChange={() => (hasUnsavedChanges = true)} /> <Field.Label class="text-gray-600"> {$landingPageSettings.contact.show ? $t('settings.landing_page.contact_us.show_section') : $t('settings.landing_page.contact_us.hide_section')} </Field.Label> </Field.Field> <Field.Group> <Field.Field> <Field.Label>{$t('settings.landing_page.contact_us.title')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')} bind:value={$landingPageSettings.contact.title} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.contact_us.title_highlight')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.highlight')} bind:value={$landingPageSettings.contact.titleHighlight} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.contact_us.subtitle')}</Field.Label> <Textarea placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_subtitle')} bind:value={$landingPageSettings.contact.subtitle} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.contact_us.address')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.address')} bind:value={$landingPageSettings.contact.address} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.contact_us.phone_number')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.number')} bind:value={$landingPageSettings.contact.phone} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.contact_us.email')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.email')} bind:value={$landingPageSettings.contact.email} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> </Field.Group> </Field.Set> <Field.Separator /> <Field.Set> <Field.Legend>{$t('settings.landing_page.mailing_list.heading')}</Field.Legend> <Field.Field orientation="horizontal"> <Switch bind:checked={$landingPageSettings.mailinglist.show} onCheckedChange={() => (hasUnsavedChanges = true)} /> <Field.Label class="text-gray-600"> {$landingPageSettings.mailinglist.show ? $t('settings.landing_page.mailing_list.show_section') : $t('settings.landing_page.mailing_list.hide_section')} </Field.Label> </Field.Field> <Field.Group> <Field.Field> <Field.Label>{$t('settings.landing_page.mailing_list.title')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')} bind:value={$landingPageSettings.mailinglist.title} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.mailing_list.subtitle')}</Field.Label> <Textarea placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_subtitle')} bind:value={$landingPageSettings.mailinglist.subtitle} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.mailing_list.button_label')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.label')} bind:value={$landingPageSettings.mailinglist.buttonLabel} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> </Field.Group> </Field.Set> <Field.Separator /> <Field.Set> <Field.Legend>{$t('settings.landing_page.custom_links.heading')}</Field.Legend> <Field.Field orientation="horizontal"> <Switch bind:checked={$landingPageSettings.customLinks.show} /> <Field.Label class="text-gray-600"> {$landingPageSettings.customLinks.show ? $t('settings.landing_page.custom_links.show_links') : $t('settings.landing_page.custom_links.hide_links')} </Field.Label> </Field.Field> <Field.Description>{$t('settings.landing_page.custom_links.description')}</Field.Description> <Field.Group> {#each $landingPageSettings.customLinks.links as link (link.id)} <div class="flex flex-col gap-2"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2"> <Field.Field> <Field.Label>{$t('settings.landing_page.custom_links.label')}</Field.Label> <Input placeholder={$t('settings.landing_page.custom_links.label_placeholder')} bind:value={link.label} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.custom_links.url')}</Field.Label> <Input placeholder={$t('settings.landing_page.custom_links.url_placeholder')} bind:value={link.url} /> </Field.Field> </div> <div class="flex items-center justify-between"> <Field.Field orientation="horizontal"> <Checkbox id="new-tab-{link.id}" bind:checked={link.openInNewTab} /> <Field.Label class="text-sm">{$t('settings.landing_page.custom_links.new_tab')}</Field.Label> </Field.Field> <Button variant="ghost" size="icon" onclick={() => deleteCustomLink(link.id)}> <TrashIcon size={16} /> </Button> </div> <Field.Separator /> </div> {/each} {#if creatingNewCustomLink} <div class="mb-4 rounded-lg border border-gray-200 bg-gray-50 p-4"> <div class="mb-3 grid grid-cols-1 gap-4 md:grid-cols-2"> <Field.Field> <Field.Label>{$t('settings.landing_page.custom_links.label')}</Field.Label> <Input placeholder={$t('settings.landing_page.custom_links.label_placeholder')} bind:value={newCustomLink.label} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.custom_links.url')}</Field.Label> <Input placeholder={$t('settings.landing_page.custom_links.url_placeholder')} bind:value={newCustomLink.url} /> </Field.Field> </div> <div class="flex items-center justify-between"> <Field.Field orientation="horizontal"> <input type="checkbox" bind:checked={newCustomLink.openInNewTab} class="mr-2" /> <Field.Label class="text-sm">{$t('settings.landing_page.custom_links.new_tab')}</Field.Label> </Field.Field> <div class="flex gap-2"> <Button variant="outline" onclick={saveNewCustomLink} class="px-3 py-1 text-sm"> {$t('settings.landing_page.custom_links.save')} </Button> <Button variant="outline" onclick={cancelNewCustomLink} class="px-3 py-1 text-sm"> {$t('settings.landing_page.custom_links.cancel')} </Button> </div> </div> </div> {:else} <Field.Field orientation="horizontal"> <Button variant="outline" onclick={createNewCustomLink}> {$t('settings.landing_page.custom_links.add')} </Button> </Field.Field> {/if} </Field.Group> </Field.Set> <Field.Separator /> <Field.Set> <Field.Legend>{$t('settings.landing_page.footer.heading')}</Field.Legend> <Field.Field orientation="horizontal"> <Switch bind:checked={$landingPageSettings.footer.show} onCheckedChange={() => (hasUnsavedChanges = true)} /> <Field.Label class="text-gray-600"> {$landingPageSettings.footer.show ? $t('settings.landing_page.footer.show_section') : $t('settings.landing_page.footer.hide_section')} </Field.Label> </Field.Field> <Field.Group> <Field.Field> <Field.Label>{$t('settings.landing_page.footer.facebook')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.facebook')} bind:value={$landingPageSettings.footer.facebook} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <!-- <InputField label="Instagram" placeholder="Write your Instagram link here" className="mb-5" bind:value={$landingPageSettings.footer.instagram} /> --> <Field.Field> <Field.Label>{$t('settings.landing_page.footer.twitter')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.twitter')} bind:value={$landingPageSettings.footer.twitter} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> <Field.Field> <Field.Label>{$t('settings.landing_page.footer.linkedin')}</Field.Label> <Input placeholder={$t('course.navItem.lessons.exercises.all_exercises.linkedin')} bind:value={$landingPageSettings.footer.linkedin} oninput={() => (hasUnsavedChanges = true)} /> </Field.Field> </Field.Group> </Field.Set> </Field.Group> <style> :global(.dark) { --cp-text-color: #fff; --cp-border-color: white; --cp-text-color: white; --cp-input-color: #555; --cp-button-hover-color: #777; } :global(.dark .alpha) { background: #333 !important; } </style>