Add features page

dv297 · Sep 21, 2022 · 5d60fc6 · 5d60fc6 · vercel · Sep 21, 2022
1 parent b9e2d92
commit 5d60fc6
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 8 deletions.
diff --git a/public/images/adding-task.gif b/public/images/adding-task.gif
diff --git a/public/images/task-details.png b/public/images/task-details.png
diff --git a/src/components/LandingPageLayout.tsx b/src/components/LandingPageLayout.tsx
@@ -4,8 +4,6 @@
 import { Popover, Transition } from '@headlessui/react';
 import CloseIcon from '@mui/icons-material/Close';
 import MenuIcon from '@mui/icons-material/Menu';
-import classNames from 'clsx';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { getSession, signIn } from 'next-auth/react';
 import { Fragment, ReactNode } from 'react';
@@ -47,8 +45,9 @@ const LandingPageLayout = (props: LandingPageLayoutProps) => {
               </Popover.Button>
             </div>
             <div className="hidden space-x-10 md:flex">
-              {resources.map((resource) => (
+              {resources.map((resource, index) => (
                 <a
+                  key={index}
                   href={resource.href}
                   className="text-base font-medium text-gray-500 hover:text-gray-900"
                 >

diff --git a/src/components/ProjectMap/ProjectMapControls.tsx b/src/components/ProjectMap/ProjectMapControls.tsx
@@ -10,7 +10,7 @@ import { useProjectMapContext } from './ProjectMapContext';
 function downloadImage(dataUrl: string) {
   const a = document.createElement('a');
 
-  a.setAttribute('download', 'reactflow.png');
+  a.setAttribute('download', 'project-status.png');
   a.setAttribute('href', dataUrl);
   a.click();
 }

diff --git a/src/pages/product/index.tsx b/src/pages/product/index.tsx
@@ -1,13 +1,106 @@
+import Image from 'next/image';
 import { ReactNode } from 'react';
 
 import LandingPageLayout from '../../components/LandingPageLayout';
 
 export default function HomePage() {
   return (
-    <div className="text-center">
-      <h1 className="text-4xl tracking-tight font-bold text-gray-900 sm:text-5xl md:text-6xl">
-        <span className="block">Product</span>
-      </h1>
+    <div className="pb-24">
+      <div className="lg:relative">
+        <div className="mx-auto w-full max-w-7xl pt-16 pb-20 text-center lg:py-48 lg:text-left">
+          <div className="px-4 sm:px-8 lg:w-1/2 xl:pr-16">
+            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
+              <p className="block">Map your project</p>
+            </h1>
+            <p className="mx-auto mt-3 max-w-md text-lg text-gray-500 sm:text-xl md:mt-5 md:max-w-3xl">
+              Planner allows you to plan a project from end-to-end and see all
+              of the tasks and dependencies along the way.
+            </p>
+          </div>
+        </div>
+        <div className="relative h-64 w-full sm:h-72 md:h-96 lg:absolute lg:inset-y-0 lg:right-0 lg:h-full lg:w-1/2">
+          <Image
+            className="absolute inset-0 h-full w-full object-contain"
+            src="/images/map-demo.png"
+            alt="Screenshot of the application"
+            layout="fill"
+          />
+        </div>
+      </div>
+
+      <div className="lg:relative">
+        <div className="mx-auto w-full max-w-7xl pt-16 pb-20 text-center lg:py-48 lg:text-left">
+          <div className="px-4 sm:px-8 lg:w-1/2 xl:pr-16">
+            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
+              <p className="block">Manage discoveries</p>
+            </h1>
+            <p className="mx-auto mt-3 max-w-md text-lg text-gray-500 sm:text-xl md:mt-5 md:max-w-3xl">
+              Find something new? Easily add it to the project and make your new
+              plan.
+            </p>
+          </div>
+        </div>
+        <div className="relative h-64 w-full sm:h-72 md:h-96 lg:absolute lg:inset-y-0 lg:right-0 lg:h-full lg:w-1/2">
+          <Image
+            className="absolute inset-0 h-full w-full object-contain"
+            src="/images/adding-task.gif"
+            alt="Screenshot of the application"
+            layout="fill"
+          />
+        </div>
+      </div>
+
+      <div className="lg:relative">
+        <div className="mx-auto w-full max-w-7xl pt-16 pb-20 text-center lg:py-48 lg:text-left">
+          <div className="px-4 sm:px-8 lg:w-1/2 xl:pr-16">
+            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
+              <p className="block">Provide clarity</p>
+            </h1>
+            <p className="mx-auto mt-3 max-w-md text-lg text-gray-500 sm:text-xl md:mt-5 md:max-w-3xl">
+              Planner has all the typical fields you would expect to ensure your
+              team knows what a particular story entails, with formatting
+              enabled through Markdown.
+            </p>
+          </div>
+        </div>
+        <div className="relative h-64 w-full sm:h-72 md:h-96 lg:absolute lg:inset-y-0 lg:right-0 lg:h-full lg:w-1/2">
+          <Image
+            className="absolute inset-0 h-full w-full object-contain"
+            src="/images/task-details.png"
+            alt="Screenshot of the application"
+            layout="fill"
+          />
+        </div>
+      </div>
+      <div className="flex justify-center items-center">
+        <hr className="w-2/3" />
+      </div>
+      <div>
+        <div className="w-full text-center mt-12">
+          <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
+            <p className="block text-indigo-600">
+              With more planned for the future!
+            </p>
+          </h1>
+        </div>
+        <div>
+          <p className="mx-auto mt-6 max-w-md text-lg text-gray-500 sm:text-xl md:mt-5 md:max-w-3xl">
+            Planner is a passion project, built to help solve the problems I
+            faced when planning projects for the companies I have worked for.
+          </p>
+        </div>
+        <div className="px-16 mt-8">
+          <ul className="flex flex-col list-disc text-xl text-gray-700 space-y-4 xl:items-center xl:list-none xl:text-2xl">
+            <li>
+              Import from and export to other issue tracking systems like Jira
+              and Linear
+            </li>
+            <li>Integrations with version control systems like Github</li>
+            <li>Notification on completion of milestones</li>
+            <li>... and others features suggested by the community!</li>
+          </ul>
+        </div>
+      </div>
     </div>
   );
 }