Ryczko · Ryczko · Jun 5, 2023 · Jun 5, 2023
diff --git a/locales/en/home.json b/locales/en/home.json
@@ -1,9 +1,16 @@
 {
   "title": "FormsLab",
   "content": "Homepage - FormsLab",
-  "firstPartHeading": "How are you",
-  "secondPartHeading": "feeling?",
-  "Description": "There is no better way to find out than FormsLab!",
+  "firstPartHeading": "What do you",
+  "secondPartHeading": "think?",
+  "Description": "There is no better way to find out than FormsLab - simply and fancy form builder",
   "buttonSignIn": "Sign In",
-  "buttonCreateSurvey": "Create Survey"
+  "star": "Star on GitHub",
+  "buttonCreateSurvey": "Create Survey",
+  "createTitle": "Create Survey",
+  "createDescription": "Using simple form builder with different type of questions.",
+  "answerTitle": "Share your survey",
+  "answerDescription": "To collect data from users. To answer users don't need to have an account.",
+  "resultTitle": "Check the results",
+  "resultDescription": "To see what users need and get to know their opinions."
 }
diff --git a/public/images/answering.webp b/public/images/answering.webp
diff --git a/public/images/creator.webp b/public/images/creator.webp
diff --git a/public/images/results.webp b/public/images/results.webp
diff --git a/src/features/application/components/MainSection.tsx b/src/features/application/components/MainSection.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+
+interface MainSectionProps {
+  title: string;
+  description: string;
+  image: string;
+  alt: string;
+  reversed?: boolean;
+}
+
+export default function MainSection({
+  title,
+  description,
+  image,
+  alt,
+  reversed,
+}: MainSectionProps) {
+  return (
+    <article
+      className={clsx(
+        'mt-12 flex w-full flex-col items-center gap-12 md:flex-row',
+        reversed && 'md:flex-row-reverse'
+      )}
+    >
+      <div
+        className={clsx(
+          'max-w-[400px] flex-grow text-center',
+          reversed ? 'md:text-right' : 'md:text-left'
+        )}
+      >
+        <h2 className="mb-2 text-lg font-semibold">{title}</h2>
+        <p>{description}</p>
+      </div>
+      <Image
+        alt={alt}
+        src={image}
+        width={400}
+        height={500}
+        className="rounded-md border shadow-sm"
+      />
+    </article>
+  );
+}
diff --git a/src/features/surveys/components/AddQuestionButton/AddQuestionButton.tsx b/src/features/surveys/components/AddQuestionButton/AddQuestionButton.tsx
@@ -14,7 +14,7 @@ interface AddQuestionButtonProps {
 export const AddQuestionButton = ({ onClick }: AddQuestionButtonProps) => {
   const { closeModal, isModalOpen, openModal } = useModal();
   return (
-    <>
+    <div className="mt-4">
       <Button
         onClick={openModal}
         variant={ButtonVariant.OUTLINE}
@@ -29,6 +29,6 @@ export const AddQuestionButton = ({ onClick }: AddQuestionButtonProps) => {
         closeModal={closeModal}
         isOpened={isModalOpen}
       />
-    </>
+    </div>
   );
 };
diff --git a/src/features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx b/src/features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx
@@ -50,13 +50,13 @@ export default function QuestionBlockWrapper({
   };
 
   return (
-    <div className="relative my-6 rounded-md border bg-white/30 p-4 shadow-sm">
+    <div className="relative mt-3 rounded-md border bg-white/30 p-4 shadow-sm">
       {isRemovingPossible && (
         <button
           onClick={removeQuestion}
-          className="absolute right-0 top-0 translate-x-[50%] translate-y-[-50%] cursor-pointer rounded-full bg-white p-2 shadow-md hover:scale-95"
+          className="absolute right-0 top-0 translate-x-[50%] translate-y-[-30%] cursor-pointer rounded-full bg-white p-[6px] shadow-md hover:scale-95"
         >
-          <TrashIcon className="w-[18px] text-red-700" />
+          <TrashIcon className="w-[16px] text-red-700" />
         </button>
       )}
 

diff --git a/src/features/surveys/components/SurveyRow/SurveyRow.tsx b/src/features/surveys/components/SurveyRow/SurveyRow.tsx
@@ -36,7 +36,7 @@ export default function SurveyRow({
   };
 
   const handleOnMoreButton = () => {
-    navigate.push(`/survey/answer/${id}`);
+    navigate.push(`/survey/answer/${id}`, undefined, { scroll: false });
   };
 
   return (

diff --git a/src/features/surveys/managers/createSurveyManager.ts b/src/features/surveys/managers/createSurveyManager.ts
@@ -176,7 +176,9 @@ export const useCreateSurveyManager = () => {
         window.location.hostname === 'localhost' ? 'http://' : 'https://';
       const link = `${domain}${window.location.host}/survey/${newSurvey.id}`;
       const copiedCorrectly = await copy(link, true);
-      await router.push(`/survey/answer/${newSurvey.id}`);
+      await router.push(`/survey/answer/${newSurvey.id}`, undefined, {
+        scroll: false,
+      });
       toast.success(
         `${t('surveyCreationSuccess')} ${
           copiedCorrectly ? t('surveyCreationSucessCopiedCorrectly') : ''

diff --git a/src/layout/Background/Background.tsx b/src/layout/Background/Background.tsx
@@ -28,17 +28,17 @@ export default function Background() {
           <circle cx="155" cy="443" r="64" />
         </g>
         <image
-          className="rotate-6 opacity-80"
+          className="rotate-6 opacity-70"
           y={180}
-          x={1100}
+          x={1200}
           width="200"
           height="200"
           xlinkHref={'/images/emote2.svg'}
         />
         <image
-          className="-rotate-6 opacity-80"
+          className="-rotate-6 opacity-70"
           y={100}
-          x={50}
+          x={0}
           width="200"
           height="200"
           xlinkHref={'/images/emote.svg'}

diff --git a/src/layout/Footer/Footer.tsx b/src/layout/Footer/Footer.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Footer() {
+  return (
+    <footer className="absolute bottom-0 w-full border-t  py-4 text-center">
+      FormsLab © 2023
+    </footer>
+  );
+}
diff --git a/src/layout/Logo/Logo.tsx b/src/layout/Logo/Logo.tsx
@@ -10,7 +10,7 @@ interface LogoProps {
 function Logo({ width = 115, height = 50 }: LogoProps) {
   return (
     <div className="flex cursor-pointer items-center">
-      <Link href={'/'}>
+      <Link href={'/'} scroll={false}>
         <Image src={logo} alt="logo" width={width} height={height} />
       </Link>
     </div>

diff --git a/src/layout/PageLayout.tsx b/src/layout/PageLayout.tsx
@@ -6,6 +6,7 @@ import GlobalLoader from 'layout/GlobalLoader/GlobalLoader';
 import Navigation from 'layout/Navigation/Navigation';
 import { useApplicationContext } from 'features/application/context';
 import { useGlobalProgressBar } from 'layout/hooks/useGlobalProgressBar';
+import Footer from 'layout/Footer/Footer';
 
 function PageLayout({ children }: PropsWithChildren) {
   useGlobalProgressBar();
@@ -16,11 +17,14 @@ function PageLayout({ children }: PropsWithChildren) {
     <>
       <AnimatePresence>{loading && <GlobalLoader />}</AnimatePresence>
       <Navigation />
-      <div className="m-auto mb-8 min-h-full max-w-3xl overflow-hidden px-6 pt-24 text-center sm:px-8">
-        <Background />
-        <AnimatePresence exitBeforeEnter initial={false}>
-          <Fragment key={router.asPath}>{children}</Fragment>
-        </AnimatePresence>
+      <div className="relative min-h-screen">
+        <div className="m-auto max-w-[54rem] overflow-hidden px-6 pb-[90px] pt-24 text-center">
+          <Background />
+          <AnimatePresence exitBeforeEnter initial={false}>
+            <Fragment key={router.asPath}>{children}</Fragment>
+          </AnimatePresence>
+        </div>
+        <Footer />
       </div>
     </>
   );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -4,8 +4,25 @@ import ButtonLink from 'shared/components/ButtonLink/ButtonLink';
 import { ButtonVariant } from 'shared/components/Button/Button';
 import { useApplicationContext } from 'features/application/context';
 import useTranslation from 'next-translate/useTranslation';
+import { StarIcon } from '@heroicons/react/solid';
+import { InferGetServerSidePropsType } from 'next';
+import MainSection from 'features/application/components/MainSection';
 
-function IndexPage() {
+export async function getServerSideProps() {
+  const repositoryData = await fetch(
+    'https://api.github.com/repos/Ryczko/Formslab'
+  ).then((res) => res.json());
+
+  return {
+    props: {
+      repositoryData,
+    },
+  };
+}
+
+function IndexPage({
+  repositoryData,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { user, loading } = useApplicationContext();
   const { t } = useTranslation('home');
 
@@ -15,34 +32,75 @@ function IndexPage() {
         <title>{t('title')}</title>
         <meta name="description" content={t('content')} />
       </Head>
-      <div className="mb-16 pt-28 md:pt-48">
+      <div className="pt-16">
         <h1 className="leading-tighter mb-4 text-4xl font-extrabold tracking-tighter md:text-6xl">
           {t('firstPartHeading')}&nbsp;
           <span className="bg-gradient-to-r from-indigo-600 to-indigo-100 bg-clip-text text-transparent">
             {t('secondPartHeading')}
           </span>
         </h1>
-        <p className="mb-8 text-xl text-zinc-600">{t('Description')}</p>
-        <div className="flex flex-col space-y-2 sm:flex-row sm:justify-center sm:space-x-4 sm:space-y-0">
+        <p className="mx-auto mb-6 mt-4 max-w-lg text-xl text-zinc-600">
+          {t('Description')}
+        </p>
+
+        <div className="mb-16 flex flex-col space-y-2 sm:flex-row sm:justify-center sm:space-x-4 sm:space-y-0">
+          <ButtonLink
+            href="https://github.com/Ryczko/FormsLab"
+            target="_blank"
+            className="flex w-full items-center justify-center sm:w-[230px]"
+            variant={ButtonVariant.PRIMARY}
+          >
+            {t('star')}{' '}
+            {repositoryData?.stargazers_count && (
+              <>
+                ({repositoryData.stargazers_count}{' '}
+                <StarIcon className="h-4 w-4" />)
+              </>
+            )}
+          </ButtonLink>
+
           {!loading && !user && (
             <ButtonLink
               href={'/login'}
-              variant={ButtonVariant.PRIMARY}
-              className="w-full sm:w-auto"
+              variant={ButtonVariant.OUTLINE_PRIMARY}
+              className="w-full sm:w-[230px]"
             >
               {t('buttonSignIn')}
             </ButtonLink>
           )}
-
-          <ButtonLink
-            href={'/survey/create'}
-            data-test-id="create-survey"
-            variant={ButtonVariant.OUTLINE_PRIMARY}
-            className="w-full sm:w-auto"
-          >
-            {t('buttonCreateSurvey')}
-          </ButtonLink>
+          {user && (
+            <ButtonLink
+              href={'/survey/create'}
+              data-test-id="create-survey"
+              variant={ButtonVariant.OUTLINE_PRIMARY}
+              className="w-full sm:w-[230px]"
+            >
+              {t('buttonCreateSurvey')}
+            </ButtonLink>
+          )}
         </div>
+
+        <hr />
+
+        <MainSection
+          image="/images/creator.webp"
+          alt="creating survey"
+          title={t('createTitle')}
+          description={t('createDescription')}
+        />
+        <MainSection
+          image="/images/answering.webp"
+          alt="creating survey"
+          title={t('answerTitle')}
+          description={t('answerDescription')}
+          reversed
+        />
+        <MainSection
+          image="/images/results.webp"
+          alt="creating survey"
+          title={t('resultTitle')}
+          description={t('resultDescription')}
+        />
       </div>
     </>
   );

diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
@@ -30,9 +30,9 @@ function LoginPage() {
   useEffect(() => {
     if (user) {
       if (redirect === 'settings') {
-        router.push('/settings');
+        router.push('/settings', undefined, { scroll: false });
       } else {
-        router.push('/');
+        router.push('/', undefined, { scroll: false });
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -100,7 +100,7 @@ function LoginPage() {
                   {t('login:signInButton')}
                 </LoginButton>
               </div>
-              <Link href={'/signup'} passHref>
+              <Link scroll={false} href={'/signup'} passHref>
                 <p
                   data-test-id="signup-link"
                   className="mt-2 max-w-sm text-center text-sm text-zinc-600 underline hover:cursor-pointer"

diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx
@@ -19,7 +19,7 @@ function SignupPage() {
 
   useEffect(() => {
     if (user) {
-      router.push('/');
+      router.push('/', undefined, { scroll: false });
     }
   }, [user]);
 
@@ -83,7 +83,7 @@ function SignupPage() {
                   {t('signUpButton')}
                 </LoginButton>
               </div>
-              <Link href={'/login'} passHref>
+              <Link scroll={false} href={'/login'} passHref>
                 <p className="mt-2 max-w-sm text-center text-sm text-zinc-600 underline hover:cursor-pointer">
                   {t('alreadyHaveAccount')}
                 </p>

diff --git a/src/pages/surveys/index.tsx b/src/pages/surveys/index.tsx
@@ -41,7 +41,7 @@ function SurveyListPage({
   surveys,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { items, canGoNext, canGoPrev, goNext, goPrev, pageIndex } =
-    usePagination<Survey>(surveys ?? [], { size: 8 });
+    usePagination<Survey>(surveys ?? [], { size: 7 });
   const { t } = useTranslation('surveys');
 
   return (

diff --git a/src/shared/HOC/withAnimation.tsx b/src/shared/HOC/withAnimation.tsx
@@ -11,6 +11,9 @@ const withAnimation = <T extends object>(
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -16 }}
       transition={{ duration: 0.15 }}
+      onAnimationComplete={() => {
+        window.scroll(0, 0);
+      }}
     >
       <WrappedComponent {...props} />
     </motion.div>

diff --git a/src/shared/HOC/withProtectedRoute.tsx b/src/shared/HOC/withProtectedRoute.tsx
@@ -11,7 +11,7 @@ const withProtectedRoute = <T extends object>(
     const location = useRouter();
 
     if (!loading && !isLoggedIn && location.pathname !== '/login') {
-      location.push('/login');
+      location.push('/login', undefined, { scroll: false });
     }
 
     if (isLoggedIn) {

diff --git a/src/shared/components/ButtonLink/ButtonLink.tsx b/src/shared/components/ButtonLink/ButtonLink.tsx
@@ -13,6 +13,7 @@ export const ButtonLinkSize = ButtonSize;
 interface ButtonLinkProps extends ButtonProps {
   onClick?: () => void;
   href: string;
+  target?: string;
 }
 
 const ButtonLink = ({
@@ -21,11 +22,14 @@ const ButtonLink = ({
   href,
   variant = ButtonLinkVariant.SECONDARY,
   sizeType = ButtonLinkSize.DEFAULT,
+  target,
   ...props
 }: PropsWithChildren<ButtonLinkProps>) => (
   <Link
     href={href}
+    target={target}
     {...props}
+    scroll={false}
     className={clsx('btn', variant, sizeType, 'hover:no-underline', className)}
   >
     {children}