feat: adds minor UI improvements

packages/builder/components/editor/sections/features/panels/layouts.tsx

@@ -35,6 +35,10 @@ const FeaturesSectionEditorLayoutsPanel: FC<IProps> = ({
         key: "two",
         label: "Second layout",
       },
+      {
+        key: "three",
+        label: "Third layout",
+      },
     ];
 
     return layouts.map((layout: any, index: number) => {

packages/builder/components/editor/sections/text/index.tsx

@@ -0,0 +1,59 @@
+import {
+  HStack,
+  Icon,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
+import TextSectionEditorColorsPanel from "components/editor/sections/text/panels/colors";
+import TextSectionEditorTextPanel from "components/editor/sections/text/panels/text";
+import DeleteSectionButton from "components/pages/index/right-sidebar/delete-section-button";
+import React, { FC } from "react";
+import { MdColorLens, MdSettings, MdTextFields } from "react-icons/md";
+
+interface IProps {
+  positionOfSection: number;
+}
+
+const TextSectionEditor: FC<IProps> = ({ positionOfSection }) => {
+  return (
+    <Tabs isLazy>
+      <TabList>
+        <Tab>
+          <HStack spacing={1}>
+            <Icon as={MdTextFields} />
+            <Text>Text</Text>
+          </HStack>
+        </Tab>
+        <Tab>
+          <HStack spacing={1}>
+            <Icon as={MdColorLens} />
+            <Text>Colors</Text>
+          </HStack>
+        </Tab>
+        <Tab>
+          <HStack spacing={1}>
+            <Icon as={MdSettings} />
+            <Text>Settings</Text>
+          </HStack>
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <TextSectionEditorTextPanel positionOfSection={positionOfSection} />
+        </TabPanel>
+        <TabPanel>
+          <TextSectionEditorColorsPanel positionOfSection={positionOfSection} />
+        </TabPanel>
+        <TabPanel>
+          <DeleteSectionButton positionOfSection={positionOfSection} />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default TextSectionEditor;

packages/builder/components/editor/sections/text/panels/colors.tsx

@@ -0,0 +1,50 @@
+import { FormControl, FormLabel, VStack } from "@chakra-ui/react";
+import ColorPicker from "components/color-picker";
+import React, { FC } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getCurrentPageData, getSectionData } from "selectors/site";
+import { updateTemplateSectionTheme } from "slices/site";
+
+interface IProps {
+  positionOfSection: number;
+}
+
+const TextSectionEditorColorsPanel: FC<IProps> = ({ positionOfSection }) => {
+  const dispatch = useDispatch();
+  const currentPageId = useSelector(getCurrentPageData());
+  const { theme } = useSelector(
+    getSectionData(currentPageId, positionOfSection)
+  );
+
+  const handleChange = (itemType: string, value: string) => {
+    dispatch(
+      updateTemplateSectionTheme({
+        currentPageId,
+        positionOfSection,
+        key: itemType,
+        value,
+      })
+    );
+  };
+
+  return (
+    <VStack spacing={4} align="stretch">
+      <FormControl>
+        <FormLabel>Background</FormLabel>
+        <ColorPicker
+          color={theme.backgroundColor}
+          onChange={(color: string) => handleChange("backgroundColor", color)}
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel>Link</FormLabel>
+        <ColorPicker
+          color={theme.linkColor}
+          onChange={(color: string) => handleChange("linkColor", color)}
+        />
+      </FormControl>
+    </VStack>
+  );
+};
+
+export default TextSectionEditorColorsPanel;

packages/builder/components/editor/sections/text/panels/text.tsx

@@ -0,0 +1,77 @@
+import { FormControl, FormLabel, Input, VStack } from "@chakra-ui/react";
+import React, { ChangeEvent, FC } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getCurrentPageData, getSectionData } from "selectors/site";
+import {
+  updateTemplateSectionData,
+  updateTemplateSectionMeta,
+} from "slices/site";
+
+interface IProps {
+  positionOfSection: number;
+}
+
+const TextSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
+  const dispatch = useDispatch();
+  const currentPageId = useSelector(getCurrentPageData());
+  const { meta } = useSelector(
+    getSectionData(currentPageId, positionOfSection)
+  );
+
+  const handleMetaChange = (itemType: string, value: string) => {
+    dispatch(
+      updateTemplateSectionMeta({
+        currentPageId,
+        positionOfSection,
+        itemType,
+        value,
+      })
+    );
+  };
+
+  const handleDataChange = (
+    itemPosition: number,
+    itemType: string,
+    value: string
+  ) => {
+    dispatch(
+      updateTemplateSectionData({
+        currentPageId,
+        positionOfSection,
+        itemType: "buttons",
+        itemPosition,
+        key: itemType,
+        value,
+      })
+    );
+  };
+
+  return (
+    <VStack spacing={4} align="stretch">
+      <FormControl>
+        <FormLabel>Heading</FormLabel>
+        <Input
+          size="sm"
+          rounded="lg"
+          value={meta.heading}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            handleMetaChange("heading", e.currentTarget.value)
+          }
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel>Sub heading</FormLabel>
+        <Input
+          size="sm"
+          rounded="lg"
+          value={meta.subHeading}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            handleMetaChange("subHeading", e.currentTarget.value)
+          }
+        />
+      </FormControl>
+    </VStack>
+  );
+};
+
+export default TextSectionEditorTextPanel;

packages/builder/components/pages/index/content-area/preview-iframe/iframe.tsx

@@ -3,6 +3,7 @@ import FeaturesSectionView from "components/views/sections/features";
 import FooterSectionView from "components/views/sections/footer";
 import HeroSectionView from "components/views/sections/hero";
 import NavbarSectionView from "components/views/sections/navbar";
+import TextSectionView from "components/views/sections/text";
 import React, { FC, useState } from "react";
 import Frame, { FrameContextConsumer } from "react-frame-component";
 
@@ -40,6 +41,14 @@ const Iframe: FC<IProps> = ({ pageId, page }) => {
           />
         );
 
+      case "text":
+        return (
+          <TextSectionView
+            positionOfSection={positionOfSection}
+            pageId={pageId}
+          />
+        );
+
       case "footer":
         return (
           <FooterSectionView
@@ -79,9 +88,9 @@ const Iframe: FC<IProps> = ({ pageId, page }) => {
 
     return template?.sections.map((section: any, index: number) => {
       return (
-        <Box as="section" key={index} id={`section-${index}`}>
+        <section key={index} id={`section-${index}`}>
           {mapSectionToSectionType(section, index)}
-        </Box>
+        </section>
       );
     });
   };

packages/builder/components/pages/index/index.tsx

@@ -33,6 +33,25 @@ const LazyContentArea = dynamic(
   }
 );
 
+const LazyRightSidebar = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: 'lazyRightSidebar' */ "components/pages/index/right-sidebar"
+    ),
+  {
+    ssr: false,
+    loading: () => {
+      return (
+        <Flex h={100} alignItems="center" justifyContent="center">
+          <Text fontSize="20" fontWeight="bold">
+            Loading...
+          </Text>
+        </Flex>
+      );
+    },
+  }
+);
+
 const IndexPageComponent: FC = () => {
   const { pages } = useSelector(getSiteData());
 
@@ -44,7 +63,7 @@ const IndexPageComponent: FC = () => {
     <Flex overflow="hidden" flexDir="column">
       <Flex>
         <LazyContentArea />
-        <RightSidebar />
+        <LazyRightSidebar />
       </Flex>
     </Flex>
   );

packages/builder/components/pages/index/right-sidebar/tabs/sections/add-new-section.tsx

@@ -70,6 +70,19 @@ const AddNewSection: FC<IProps> = ({ positionOfSection }) => {
 
         break;
 
+      case "text":
+        const textSectionData = require("data/sections/text").default;
+
+        dispatch(
+          addTemplateSection({
+            currentPageId,
+            positionOfSection,
+            sectionContent: textSectionData(theme.mode),
+          })
+        );
+
+        break;
+
       default:
         break;
     }
@@ -84,6 +97,7 @@ const AddNewSection: FC<IProps> = ({ positionOfSection }) => {
       { key: "navbar", label: "Navbar" },
       { key: "hero", label: "Hero" },
       { key: "features", label: "Features" },
+      { key: "text", label: "Text" },
     ];
 
     return (

packages/builder/components/pages/index/right-sidebar/tabs/sections/index.tsx

@@ -13,6 +13,7 @@ import FeaturesSectionEditor from "components/editor/sections/features";
 import FooterSectionEditor from "components/editor/sections/footer";
 import HeroSectionEditor from "components/editor/sections/hero";
 import NavbarSectionEditor from "components/editor/sections/navbar";
+import TextSectionEditor from "components/editor/sections/text";
 import AddNewSection from "components/pages/index/right-sidebar/tabs/sections/add-new-section";
 import React, { FC } from "react";
 import { useSelector } from "react-redux";
@@ -34,6 +35,9 @@ const RightSidebarSectionsTab: FC = () => {
       case "features":
         return <FeaturesSectionEditor positionOfSection={positionOfSection} />;
 
+      case "text":
+        return <TextSectionEditor positionOfSection={positionOfSection} />;
+
       case "footer":
         return <FooterSectionEditor positionOfSection={positionOfSection} />;
 

packages/builder/components/pages/index/survey/get-started.tsx

@@ -74,6 +74,7 @@ const GetStarted: FC = () => {
           borderWidth={1}
           rounded="lg"
           p={8}
+          fontWeight="bold"
           _hover={{
             shadow: "lg",
           }}