Landing Page Hide section Show section

<SectionTitle>Actions</SectionTitle>
      <TextField
        label="Label"
        placeholder="Write your label here"
        className="mt-3 mb-5"
        bind:value={$landingPageSettings.header.action.label}
      />
      <div class="gap-2 mb-5">
        <TextField
          label="Link"
          placeholder="Write your link here"
          bind:value={$landingPageSettings.header.action.link}
        />
        <Toggle bind:toggled={$landingPageSettings.header.action.redirect} size="sm">
          <span slot="labelA" style="color: gray">No redirect</span>
          <span slot="labelB" style="color: gray">Redirect</span>
        </Toggle>
      </div>
      <SectionTitle>Video</SectionTitle>
      <div class="gap-2 mt-3 mb-5">
        <TextField
          label="Link"
          placeholder="Write your video link here"
          bind:value={$landingPageSettings.header.video.link}
        />
        <Toggle bind:toggled={$landingPageSettings.header.video.show} size="sm">
          <span slot="labelA" style="color: gray">Hide Video</span>
          <span slot="labelB" style="color: gray">Show Video</span>
        </Toggle>
      </div>
    </Column>
  </Row>

<Row class="py-7 border-bottom-c">
    <Column sm={2} md={2} lg={4}
      ><SectionTitle>About</SectionTitle>
      <Toggle bind:toggled={$landingPageSettings.aboutUs.show} size="sm">
        <span slot="labelA" style="color: gray">Hide section</span>
        <span slot="labelB" style="color: gray">Show section</span>
      </Toggle></Column
    >
    <Column sm={2} md={6} lg={8}>
      <TextField
        label="Title"
        placeholder="Write your title here"
        bind:value={$landingPageSettings.aboutUs.title}
        className="mb-5"
      />

<div>
        <FileUploader
          status={uploadingImage ? 'uploading' : 'complete'}
          buttonLabel="Select file"
          labelTitle="Upload an image"
          class="flex-col items-start gap-2 w-full"
          accept={['.jpg', '.jpeg', '.png']}
          bind:files
          on:change={(file) => onFileSelected(file?.detail?.[0])}
        />
        {#if $landingPageSettings.aboutUs.imageUrl}
          <img
            alt="About us"
            src={$landingPageSettings.aboutUs.imageUrl}
            class="mt-2 rounded-md w-full"
          />
        {/if}
      </div>
    </Column>
  </Row>

<Row class="py-7 border-bottom-c">
    <Column sm={2} md={2} lg={4}
      ><SectionTitle>Courses</SectionTitle>
      <Toggle bind:toggled={$landingPageSettings.courses.show} size="sm">
        <span slot="labelA" style="color: gray">Hide section</span>
        <span slot="labelB" style="color: gray">Show section</span>
      </Toggle>
    </Column>
    <Column sm={2} md={6} lg={8}>
      <TextField
        label="Title"
        placeholder="Write your title here"
        bind:value={$landingPageSettings.courses.title}
      />
      <TextField
        label="Title-Highlight"
        placeholder="Write your title highlight here"
        bind:value={$landingPageSettings.courses.titleHighlight}
      />
      <TextArea
        label="Subtitle"
        labelClassName="font-light"
        placeholder="Write your subtitle here"
        bind:value={$landingPageSettings.courses.subtitle}
      />
    </Column>
  </Row>

<Row class="py-7 border-bottom-c">
    <Column sm={2} md={2} lg={4}
      ><SectionTitle>Frequently Asked Questions</SectionTitle>
      <Toggle bind:toggled={$landingPageSettings.faq.show} size="sm">
        <span slot="labelA" style="color: gray">Hide section</span>
        <span slot="labelB" style="color: gray">Show section</span>
      </Toggle>
    </Column>
    <Column sm={2} md={6} lg={8}>
      <TextField
        label="Title"
        placeholder="Write your title here"
        bind:value={$landingPageSettings.faq.title}
        className="mb-5"
      />
      {#each $landingPageSettings.faq.questions as item (item.id)}
        <div class="mb-3">
          <TextField
            label="Question"
            placeholder="Write your question here"
            bind:value={item.title}
            className="mb-5"
          />
          <TextArea
            label="Answer"
            labelClassName="font-light"
            placeholder="Write your answer here"
            bind:value={item.content}
            className="mb-5"
          />
          <IconButton onClick={() => deleteFaq(item.id)}>
            <TrashCan size={24} class="fill-red-700" />
          </IconButton>
        </div>
      {/each}
      {#if creatingNewQuestion}
        <TextField
          label="Question"
          placeholder="Write your question here"
          bind:value={newQuestion.title}
          className="mb-5"
        />
        <TextArea
          label="Answer"
          labelClassName="font-light"
          placeholder="Write your answer here"
          bind:value={newQuestion.content}
          className="mb-5"
        />
        <div class="flex items-center gap-2">
          <PrimaryButton variant={VARIANTS.OUTLINED} label="Save" onClick={saveNewFAQ} />
          <PrimaryButton variant={VARIANTS.OUTLINED} label="Cancel" onClick={cancelNewFAQ} />
        </div>
      {:else}
        <PrimaryButton variant={VARIANTS.OUTLINED} label="Add New Faq" onClick={createNewFaq} />
      {/if}
    </Column>
  </Row>

<Row class="py-7 border-bottom-c">
    <Column sm={2} md={2} lg={4}
      ><SectionTitle>Contact us</SectionTitle>
      <Toggle bind:toggled={$landingPageSettings.contact.show} size="sm">
        <span slot="labelA" style="color: gray">Hide section</span>
        <span slot="labelB" style="color: gray">Show section</span>
      </Toggle>
    </Column>
    <Column sm={2} md={6} lg={8}>
      <TextField
        label="Title"
        placeholder="Write your title here"
        bind:value={$landingPageSettings.contact.title}
        className="mb-5"
      />
      <TextField
        label="Title-highlight"
        labelClassName="font-light"
        placeholder="Write your title highlight here"
        className="mb-5"
        bind:value={$landingPageSettings.contact.titleHighlight}
      />
      <TextArea
        label="Subtitle"
        labelClassName="font-light"
        placeholder="Write your subtitle here"
        className="mt-3 mb-5"
        bind:value={$landingPageSettings.contact.subtitle}
      />
      <TextField
        label="Phone number"
        placeholder="Write your phone number here"
        className="mt-3 mb-5"
        bind:value={$landingPageSettings.contact.phone}
      />
      <TextField
        label="Email"
        placeholder="Write your email here"
        className="mt-3 mb-5"
        bind:value={$landingPageSettings.contact.email}
      />
    </Column>
  </Row>

<Row class="py-7 border-bottom-c">
    <Column sm={2} md={2} lg={4}
      ><SectionTitle>Mailing List</SectionTitle>
      <Toggle bind:toggled={$landingPageSettings.mailinglist.show} size="sm">
        <span slot="labelA" style="color: gray">Hide section</span>
        <span slot="labelB" style="color: gray">Show section</span>
      </Toggle>
    </Column>
    <Column sm={2} md={6} lg={8}>
      <TextField
        label="Title"
        placeholder="Write your title here"
        bind:value={$landingPageSettings.mailinglist.title}
        className="mb-5"
      />
      <TextArea
        label="Subtitle"
        labelClassName="font-light"
        placeholder="Write your subtitle here"
        className="mb-5"
        bind:value={$landingPageSettings.mailinglist.subtitle}
      />

<Row class="py-7 border-bottom-c">
    <Column sm={2} md={2} lg={4}
      ><SectionTitle>Footer</SectionTitle>
      <Toggle bind:toggled={$landingPageSettings.footer.show} size="sm">
        <span slot="labelA" style="color: gray">Hide section</span>
        <span slot="labelB" style="color: gray">Show section</span>
      </Toggle>
    </Column>
    <Column sm={2} md={6} lg={8}>
      <TextField
        label="Facebook"
        placeholder="Write your Facebook link here"
        bind:value={$landingPageSettings.footer.facebook}
        className="mb-5"
      />
      
      <TextField
        label="Twitter"
        placeholder="Write your Twitter link here"
        className="mb-5"
        bind:value={$landingPageSettings.footer.twitter}
      />
      <TextField
        label="Linkedin"
        placeholder="Write your Linkedin link here"
        className="mb-5"
        bind:value={$landingPageSettings.footer.linkedin}
      />
    </Column>
  </Row>
  <Row class="p-5 w-full flex items-center justify-center">
    <PrimaryButton
      label="Save Changes"
      isLoading={isSaving}
      isDisabled={isSaving}
      onClick={handleSave}
    />
  </Row>
</Grid>