feat: update pages

novuhq · Jan 20, 2023 · ae7060b · ae7060b
1 parent 7151be3
commit ae7060b
Show file tree

Hide file tree

Showing 22 changed files with 514 additions and 377 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   poweredByHeader: false,
-  trailingSlash: true,
   experimental: {
     appDir: true,
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "clsx": "^1.2.1",
     "file-loader": "^6.2.0",
-    "framer-motion": "^8.4.2",
+    "framer-motion": "^8.5.0",
     "markdownlint-cli": "^0.33.0",
     "next": "^13.1.1",
     "prop-types": "^15.8.1",

diff --git a/public/images/hero.jpeg b/public/images/hero.jpeg
diff --git a/public/images/mobile.svg b/public/images/mobile.svg
diff --git a/public/images/noise-2.png b/public/images/noise-2.png
diff --git a/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/head.jsx b/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/head.jsx
@@ -22,7 +22,6 @@ const Head = async ({
   const matchingSubCategory = findSubCategoryBySlug(subCategories, subCategorySlug);
 
   const title = `${MAIN_TITLE}${SEPARATOR}${matchingCategory.category}${SEPARATOR}${matchingSubCategory.subCategory}`;
-
   return <HeadMetaTags title={title} description={matchingSubCategory.description} />;
 };
 

diff --git a/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/page.jsx b/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/page.jsx
@@ -1,8 +1,5 @@
-import slugify from 'slugify';
-
-import Button from 'components/shared/button';
+import TemplateInfo from 'components/pages/sub-category/template-info';
 import Link from 'components/shared/link';
-import LINKS from 'constants/links';
 import {
   addSlugToCategories,
   addSlugToSubCategories,
@@ -11,18 +8,6 @@ import {
 } from 'utils';
 import { getCategories, getSubCategories, getNotifications } from 'utils/api/queries';
 
-const colors = ['rgba(255, 179, 204, 1)', 'rgba(255, 230, 179, 1)'];
-const variables = [
-  {
-    name: '{{play_name}}',
-    description: 'The name of the play',
-  },
-  {
-    name: '{{theater_name}}',
-    description: 'The name of the theater',
-  },
-];
-
 const SubCategorySlug = async ({
   params: { 'category-slug': categorySlug, 'sub-category-slug': subCategorySlug },
 }) => {
@@ -45,61 +30,15 @@ const SubCategorySlug = async ({
   );
 
   return (
-    <div className="container safe-paddings mt-20">
-      <div className="mb-56 grid grid-cols-2 gap-x-[30px]">
-        <div className="">
-          <div className="mb-6">
-            <Link to="/" theme="purple">
-              List of all categories
-            </Link>
-            <span className="mx-2 text-gray-5">/</span>
-            <Link to={`/${matchingCategory.slug}`} theme="purple">
-              {matchingCategory.category}
-            </Link>
-          </div>
-          <div className="mb-14">
-            <h1 className="mb-4 text-4xl">{matchingSubCategory.subCategory}</h1>
-            <p>{matchingSubCategory.description}</p>
-          </div>
-          <div className="mb-10">Code Snippet</div>
-          <div className="mb-14">
-            <h3 className="mb-3 text-xl">Variables</h3>
-            <ul className="border-b border-dashed border-purple-1/20">
-              {variables.map(({ name, description }, index) => (
-                <li
-                  key={index}
-                  className="flex border-t border-dashed border-purple-1/20 py-3 text-sm"
-                >
-                  <span style={{ color: colors[index] }} className="w-40">
-                    {name}
-                  </span>
-                  <p className="pl-3">{description}</p>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="flex space-x-5">
-            <Button size="sm" theme="purple-filled">
-              Send a test notification
-            </Button>
-            <Button to={LINKS.novu.to} size="sm" theme="gray-filled">
-              Try it on Novu
-            </Button>
-          </div>
-        </div>
-        <div>
-          <div className=" relative bg-mobile-gradient pb-[100%]">
-            <img
-              src="/images/mobile.svg"
-              loading="eager"
-              className="translate absolute bottom-0 left-1/2 -translate-x-1/2"
-            />
-          </div>
-        </div>
-      </div>
+    <div className="container safe-paddings relative pt-20">
+      <div className="absolute -left-[600px] top-[-100px] h-[692px] w-[814px] bg-light-gradient opacity-20 blur-[97px]" />
+      <div className="absolute -right-[200px] top-[300px] h-[383px] w-[404px] bg-warm-gradient opacity-30 blur-[97px]" />
+      <TemplateInfo matchingCategory={matchingCategory} matchingSubCategory={matchingSubCategory} />
       <div className="mb-40">
-        <h2 className="mb-14 text-center text-4xl">Other notification types for Social Media</h2>
-        <div className="grid grid-cols-4 gap-x-16 gap-y-5">
+        <h2 className="mb-14 text-center text-4xl md:text-3xl">
+          Other notification types for Social Media
+        </h2>
+        <div className="grid grid-cols-4 gap-x-16 gap-y-5 md:grid-cols-2 sm:grid-cols-1">
           {otherSubCategories.map((subCategory, index) => (
             <Link theme="purple" key={index} to={`/${matchingCategory.slug}/${subCategory.slug}`}>
               {subCategory.subCategory}

diff --git a/src/app/(category)/[category-slug]/page.jsx b/src/app/(category)/[category-slug]/page.jsx
@@ -33,7 +33,7 @@ const CategoryPage = async ({ params: { 'category-slug': categorySlug } }) => {
 
   return (
     <div className="container safe-paddings mt-20">
-      <div className="mb-6">
+      <div className="mb-6 lg:mb-2">
         <Link to="/" theme="purple">
           List of all categories
         </Link>
@@ -47,13 +47,13 @@ const CategoryPage = async ({ params: { 'category-slug': categorySlug } }) => {
         </p>
       </div>
       <div className="mb-40">
-        <div className="grid grid-cols-4 gap-x-16 gap-y-5">
-          {/* {subCategories.lenght > 0 &&
+        <div className="grid grid-cols-4 gap-x-16 gap-y-5 md:grid-cols-2 sm:grid-cols-1">
+          {subCategories.length > 0 &&
             subCategories.map((subCategory, index) => (
               <Link theme="purple" key={index} to={`/${matchingCategory.slug}/${subCategory.slug}`}>
                 {subCategory.subCategory}
               </Link>
-            ))} */}
+            ))}
         </div>
       </div>
     </div>

diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -8,7 +8,7 @@ const RootLayout = ({ children }) => (
     <body className=" bg-black bg-noise text-white">
       <div className="flex min-h-screen flex-col overflow-hidden">
         <Header />
-        <main>{children}</main>
+        <div>{children}</div>
         <Footer />
       </div>
     </body>

diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -1,44 +1,56 @@
-import slugify from 'slugify';
+import NextImage from 'next/image';
 
 import Button from 'components/shared/button';
 import CategoryCard from 'components/shared/category-card';
-import Link from 'components/shared/link';
 import ButtonLogo from 'images/chatgpt.inline.svg';
 import { getCategoriesWithAllSubCategories } from 'utils';
 
 const Home = async () => {
   const categories = await getCategoriesWithAllSubCategories();
   return (
-    <div className="container safe-paddings">
-      <section className="safe-paddings relative pt-28 pb-[328px]">
-        <div className="container-lg">
-          <h1 className="mt-2 max-w-[800px] text-[64px] font-medium leading-denser text-white">
-            Notification <span className="text-purple">inspirations</span> for your App made <br />
-            with ChatGPT
-          </h1>
-          <p className="text-gray-11 mt-5 max-w-[488px] text-lg leading-normal">
-            Lorem ipsum dolor sit amet consectetur. Lectus tortor proin tristique et. Sem tincidunt
-            libero sed neque.
-          </p>
-          <div className="mt-11 flex">
-            <Button className="mr-6" to="/" theme="purple-filled" size="lg">
-              <ButtonLogo className="mr-2.5 h-5 w-5" />
-              Show me
-            </Button>
-            <Button theme="gray-filled" to="https://novu.co/" size="lg">
-              Discover Novu
-            </Button>
+    <>
+      <section className="safe-paddings pt-28 pb-[328px] sm:pb-16">
+        <div className="container relative">
+          <div className="relative z-10">
+            <h1 className="mt-2 max-w-[800px] text-[64px] font-medium leading-denser text-white lg:max-w-[500px] lg:text-5xl sm:max-w-none sm:text-center sm:text-4xl">
+              Notification <span className="text-purple">inspirations</span> for your App made{' '}
+              <br />
+              with ChatGPT
+            </h1>
+            <p className="text-gray-11 mt-5 max-w-[488px] text-lg leading-normal sm:max-w-none sm:text-center">
+              Lorem ipsum dolor sit amet consectetur. Lectus tortor proin tristique et. Sem
+              tincidunt libero sed neque.
+            </p>
+            <div className="mt-11 flex sm:mt-6 sm:items-center sm:justify-center">
+              <Button
+                className="mr-6"
+                to="/cooking-and-recipe/new-recipe-added"
+                theme="purple-filled"
+                size="lg"
+              >
+                <ButtonLogo className="mr-2.5 h-5 w-5" />
+                Show me
+              </Button>
+              <Button theme="gray-filled" to="https://novu.co/" size="lg">
+                Discover Novu
+              </Button>
+            </div>
+          </div>
+          <div className="absolute top-[-400px] right-[-590px] z-0 md:right-[-800px] sm:hidden">
+            <NextImage src="/images/hero.jpeg" width="1371" height="1292" alt="Hero image" />
           </div>
         </div>
       </section>
-      <section className="safe-paddings pt-30 relative  pb-40">
-        <div className="container-lg text-center">
-          <h2 className="text-4xl leading-tight text-white">Lorem ipsum dolor</h2>
-          <p className="font-book text-gray-11 mx-auto mt-4 max-w-[592px] text-lg leading-normal">
-            Lorem ipsum dolor sit amet consectetur. Lectus tortor proin tristique et. Sem tincidunt
-            libero sed neque.
-          </p>
-          <ul className="relative z-10 mt-14 grid grid-cols-3 gap-x-8 gap-y-8">
+      <section className="safe-paddings pt-30 relative  pb-40 ">
+        <div className="container">
+          <div className=" text-center">
+            <h2 className="text-4xl leading-tight text-white sm:text-3xl">Lorem ipsum dolor</h2>
+            <p className="font-book text-gray-11 mx-auto mt-4 max-w-[592px] text-lg leading-normal">
+              Lorem ipsum dolor sit amet consectetur. Lectus tortor proin tristique et. Sem
+              tincidunt libero sed neque.
+            </p>
+          </div>
+          <ul className="relative z-10 mt-14 grid grid-cols-3 gap-x-8 gap-y-8 md:grid-cols-2 sm:grid-cols-1">
             {categories.map((category, index) => (
               <CategoryCard
                 title={category.category}
@@ -57,7 +69,7 @@ const Home = async () => {
           <div className="absolute left-[73%] top-[7500px] h-[692px] w-[814px] bg-light-gradient opacity-20 blur-[97px]" />
         </div>
       </section>
-    </div>
+    </>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,7 +22,6 @@ const Head = async ({ @@
       const matchingSubCategory = findSubCategoryBySlug(subCategories, subCategorySlug);
       const title = `${MAIN_TITLE}${SEPARATOR}${matchingCategory.category}${SEPARATOR}${matchingSubCategory.subCategory}`;
       return <HeadMetaTags title={title} description={matchingSubCategory.description} />;
     };
@@ Expand Down @@