fix footer css, add alert modal

components/Common/AlertModal.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+const AlertModal = () => {
+  return (
+    <section>
+        <div className="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+
+        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+
+            <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <svg className="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z" />
+                    </svg>
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">Screen Size Alert</h3>
+                    <div className="mt-2">
+                        <p className="text-sm text-gray-500">Please check this website on desktop for now. Responsive design is currently in progress. Thanks for your understanding.</p>
+                    </div>
+                    </div>
+                </div>
+                </div>
+                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                <button type="button" className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Confirm</button>
+                </div>
+            </div>
+            </div>
+        </div>
+        </div>
+
+    </section>
+  )
+}
+
+export default AlertModal

components/Layout/Footer.jsx

@@ -3,7 +3,7 @@ import Image from 'next/image'
 
 const Footer = () => {
   return (
-    <section className='bg-[#1E1E1E]'>
+    <section className='footer bg-[#1E1E1E]'>
       <div className='w-2/3 mx-auto'>
         <div className='flex h-[250px] mt-8 items-center'>
           <div className='w-1/3 mx-auto'>

pages/article/[id].jsx

@@ -156,11 +156,8 @@ export const getStaticProps = async(context) => {
 }
 
 export const getStaticPaths = async(context) => {
-  const id = context.param.id
   return {
-    paths: [
-      { params: { id: id}},
-    ],
-    fallback: true
+    paths: [], //indicates that no page needs be created at build time
+    fallback: 'blocking' //indicates the type of fallback
   }
-}
+}

pages/index.jsx

@@ -3,6 +3,7 @@ import Image from "next/image"
 import axios from 'axios'
 import Footer from '../components/Layout/Footer'
 import CreatedPost from "../components/Post/CreatedPost"
+import AlertModal from "../components/Common/AlertModal"
 
 export default function Home() {
 
@@ -12,6 +13,19 @@ export default function Home() {
     state: "latest",
     keyword: search
   })
+  const [isMobile, setIsMobile] = useState(false);
+
+  const handleResize = () => {
+    if (window.innerWidth < 640) {
+        setIsMobile(true)
+    } else {
+        setIsMobile(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize)
+  })
 
   useEffect(() => {
     getArticles(queryState.state, queryState.keyword)
@@ -61,12 +75,14 @@ export default function Home() {
   }
 
   return (
-    <main className='w-full h-auto mx-auto'>
-      Hello
-      {/* <section className='pt-32 h-[420px] bg-[#F1F1F1] text-center'>
+    <main className='flex flex-col w-[100vw] h-screen mx-auto justify-between'>
+      {
+        (isMobile) && <AlertModal />
+      }
+      <section className='pt-32 h-[45vh] bg-[#F1F1F1] text-center'>
         <div className='text-3xl text-[#393939]'>Get started with Up-road</div>
         <div className='text-5xl text-[#000] font-semibold'>What are you looking up-to?</div>
-        <div className="relative mt-12 w-[900px] mx-auto">
+        <div className="relative mt-12 w-[50vw] mx-auto">
           <div className="absolute top-0 transform translate-y-1/2 left-4">
             <Image 
               src="/assets/Search-icon.svg"
@@ -81,7 +97,7 @@ export default function Home() {
           <input type="text" value={search} placeholder='Looking for a curation content' className="w-full h-12 rounded-3xl text-left pl-16 py-4 outline-none shadow" onChange={searchKeywordHandler} onKeyDown={searchKeywordHandler} />
         </div>
       </section>
-      <section className="w-[900px] mt-12 mx-auto">
+      <section className="w-[50vw] mt-12 mx-auto">
         <div className="flex justify-start items-center">
           <div className={`flex justify-center items-center px-4 py-1 border-b-[3px] border-transparent hover:cursor-pointer hover:bg-[#eee] ${queryState.state === "latest" ? "border-[#000]": null}`} onClick={getLatest}>
             <Image 
@@ -103,7 +119,7 @@ export default function Home() {
           </div>
         </div>
       </section>
-      <section className="w-[900px] mt-12 mx-auto">
+      <section className="w-[50vw] mt-12 mx-auto">
         {
           articles.map((article, index) => {
             return (