javaistic · uiuxarghya · May 17, 2022 · May 17, 2022 · May 17, 2022 · May 17, 2022
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "> 1%"
   ],
   "dependencies": {
-    "@badrap/bar-of-progress": "^0.1.2",
+    "@badrap/bar-of-progress": "^0.2.1",
     "@docsearch/react": "^1.0.0-alpha.28",
     "@formspree/react": "^2.2.5",
     "@headlessui/react": "^1.6.1",
@@ -30,32 +30,32 @@
     "@mdx-js/react": "^1.6.22",
     "@next/bundle-analyzer": "^12.1.6",
     "@next/mdx": "^12.1.6",
-    "@reach/rect": "^0.16.0",
+    "@reach/rect": "^0.17.0",
     "@silvenon/remark-smartypants": "^1.0.0",
-    "@sindresorhus/slugify": "^1.1.0",
+    "@sindresorhus/slugify": "^1.1.2",
     "@svgr/webpack": "^5.5.0",
     "@tailwindcss/jit": "^0.1.18",
     "@tailwindcss/typography": "^0.4.1",
     "autoprefixer": "^10.4.7",
     "babel-plugin-preval": "^5.1.0",
     "clsx": "^1.1.1",
     "dlv": "^1.1.3",
-    "file-loader": "^6.0.0",
-    "focus-visible": "^5.1.0",
+    "file-loader": "^6.2.0",
+    "focus-visible": "^5.2.0",
     "framer-motion": "^4.1.17",
     "front-matter": "^4.0.2",
-    "glob": "^7.2.0",
+    "glob": "^7.2.3",
     "intersection-observer": "^0.12.0",
     "minimatch": "^3.1.2",
     "next": "^12.1.6",
-    "next-themes": "^0.1.1",
+    "next-themes": "^0.2.0",
     "postcss": "^8.4.13",
     "postcss-focus-visible": "^5.0.0",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
     "prismjs": "^1.28.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-intersection-observer": "^8.34.0",
     "redent": "^3.0.0",
     "sharp": "^0.30.4",
@@ -65,20 +65,20 @@
     "unist-util-visit": "^2.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/plugin-transform-react-jsx": "^7.17.3",
-    "@types/react": "^17.0.44",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
-    "babel-eslint": "10.1.0",
-    "eslint": "8.11.0",
+    "@babel/core": "^7.17.12",
+    "@babel/plugin-transform-react-jsx": "^7.17.12",
+    "@types/react": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.25.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^8.15.0",
     "eslint-config-next": "^12.1.6",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-import": "2.26.0",
     "prettier": "^2.6.2",
-    "prettier-plugin-tailwindcss": "^0.1.10",
+    "prettier-plugin-tailwindcss": "^0.1.11",
     "typescript": "^4.6.4",
     "webpack": "^5.72.1"
   }

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -31,7 +31,7 @@ export function Header({ navIsOpen, onNavToggle }) {
             <MenuButton />
             <a
               href="https://github.com/javaistic/javaistic"
-              className="text-gray-400 transition-colors duration-200 hover:text-gray-600 dark:hover:text-gray-200"
+              className="hidden text-gray-400 transition-colors duration-200 hover:text-gray-600 dark:hover:text-gray-200 sm:flex"
             >
               <span className="sr-only">Javaistic on GitHub</span>
               <svg className="h-6 w-6" viewBox="0 0 16 16" fill="currentColor">

diff --git a/src/components/Heading.js b/src/components/Heading.js
@@ -1,7 +1,7 @@
-import { useEffect, useContext, useRef } from 'react'
-import { ContentsContext } from '@/layouts/ContentsLayout'
 import { useTop } from '@/hooks/useTop'
+import { ContentsContext } from '@/layouts/ContentsLayout'
 import clsx from 'clsx'
+import { useContext, useEffect, useRef } from 'react'
 
 export function Heading({
   level,
@@ -40,12 +40,23 @@ export function Heading({
     >
       {!hidden && (
         // eslint-disable-next-line
+
         <a
           href={`#${id}`}
-          className="after:hash absolute opacity-0 group-hover:opacity-100"
-          style={{ marginLeft: '-1em', paddingRight: '0.5em', boxShadow: 'none', color: '#a1a1aa' }}
+          className="absolute -ml-7 mt-1 flex items-center border-0 opacity-0 group-hover:opacity-100"
           aria-label="Anchor"
-        />
+        >
+          <div className="flex h-6 w-6 items-center justify-center rounded-md text-gray-400 shadow-sm ring-1 ring-gray-500 hover:text-gray-700 hover:shadow hover:ring-blue-500 dark:bg-gray-700 dark:text-gray-300 dark:shadow-none dark:ring-0">
+            <svg width="12" height="12" fill="none" aria-hidden="true">
+              <path
+                d="M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              ></path>
+            </svg>
+          </div>
+        </a>
       )}
       {number && (
         <span className="mr-3 inline-flex h-8 w-8 flex-none items-center justify-center rounded-full bg-cyan-100 text-xl text-blue-700">
@@ -54,7 +65,7 @@ export function Heading({
       )}
       <span className={hidden ? 'sr-only' : undefined}>{children}</span>
       {badge && (
-        <span className="bg-green-150 ml-3 inline-flex items-center rounded-full px-3 py-1 text-sm font-medium leading-4 text-green-900">
+        <span className="ml-3 inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium leading-4 text-green-900">
           {badge}
         </span>
       )}

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -1,9 +1,10 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
-import { createPortal } from 'react-dom'
-import Link from 'next/link'
+import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
+import { SearchIcon } from '@heroicons/react/outline'
 import Head from 'next/head'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 
 const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control']
 const ACTION_KEY_APPLE = ['⌘', 'Command']
@@ -70,20 +71,7 @@ export function Search() {
         onClick={onOpen}
         className="group flex w-full items-center space-x-3 rounded-md border-2 border-gray-200 bg-gray-100 py-1.5 px-1.5 font-medium leading-6 text-gray-500 hover:text-gray-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 sm:space-x-4 sm:px-4 lg:px-4"
       >
-        <svg
-          width="24"
-          height="24"
-          fill="none"
-          className="text-blue-400 transition-colors duration-200 group-hover:text-blue-500"
-        >
-          <path
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
+        <SearchIcon className="h-6 w-6 text-blue-400 transition-colors duration-200 group-hover:text-blue-500" />
         <span>
           <span className="md:hidden lg:hidden">Search</span>
           <span className="hidden sm:inline">Quick search for anything</span>

diff --git a/src/components/Testimonials.js b/src/components/Testimonials.js
@@ -108,12 +108,12 @@ function Testimonial({ testimonial, base, index, total }) {
         initial={false}
         animate={straight ? { rotate: 0 } : { rotate: rotation[index % rotation.length] }}
       >
-        <blockquote className="rounded-t-xl bg-white px-6 py-8 text-lg font-semibold leading-8 text-gray-900 md:p-10 md:text-xl md:leading-8">
+        <blockquote className="rounded-t-xl bg-white px-6 py-8 text-lg font-semibold leading-8 text-gray-900 dark:bg-gray-800 md:p-10 md:text-xl md:leading-8">
           <svg width="45" height="36" className={`mb-5 fill-current ${color[1]}`}>
             <path d="M13.415.001C6.07 5.185.887 13.681.887 23.041c0 7.632 4.608 12.096 9.936 12.096 5.04 0 8.784-4.032 8.784-8.784 0-4.752-3.312-8.208-7.632-8.208-.864 0-2.016.144-2.304.288.72-4.896 5.328-10.656 9.936-13.536L13.415.001zm24.768 0c-7.2 5.184-12.384 13.68-12.384 23.04 0 7.632 4.608 12.096 9.936 12.096 4.896 0 8.784-4.032 8.784-8.784 0-4.752-3.456-8.208-7.776-8.208-.864 0-1.872.144-2.16.288.72-4.896 5.184-10.656 9.792-13.536L38.183.001z" />
           </svg>
           {typeof testimonial.content === 'string' ? (
-            <p className="text-gray-900 dark:text-gray-900">{testimonial.content}</p>
+            <p className="text-gray-900 dark:text-gray-300">{testimonial.content}</p>
           ) : (
             testimonial.content
           )}
@@ -189,7 +189,7 @@ export function Testimonials() {
       onMouseLeave={() => setDuration(150)}
     >
       <div
-        className="pointer-events-none absolute right-0 bottom-1/2 left-0 bg-gradient-to-t from-gray-100 dark:from-gray-800"
+        className="pointer-events-none absolute right-0 bottom-1/2 left-0 bg-gradient-to-t from-gray-100 dark:from-gray-900"
         style={{ height: 607, maxHeight: '50vh' }}
       />
       <div className="-my-8 flex overflow-hidden">

diff --git a/src/components/home/Features.js b/src/components/home/Features.js
@@ -54,7 +54,17 @@ const OpenSourceImage = () => {
 export function Features() {
   return (
     <section className="font-sans">
-      <div className="container mx-auto py-24 sm:px-10 md:flex-row">
+      <div className="px-10 sm:px-10 md:px-12">
+        <h1 className="mt-5 mb-4 text-center text-5xl font-extrabold text-gray-900 sm:text-7xl">
+          Why Javaistic?
+        </h1>
+        <div className="mb-2 items-center justify-center space-y-5 text-center">
+          <p className="mx-auto text-lg font-medium dark:text-gray-400 sm:w-1/2">
+            Our docs are designed to make learning Java easy and fun.
+          </p>
+        </div>
+      </div>
+      <div className="container mx-auto py-14 sm:px-10 md:flex-row">
         <div className="mx-auto mb-10 flex flex-col items-center py-10 sm:flex-row">
           <div className="mb-10 w-5/6 md:mb-0 md:w-1/2 lg:w-full lg:max-w-lg">
             <DocsImage />

diff --git a/src/components/home/Footer.js b/src/components/home/Footer.js
@@ -59,7 +59,7 @@ export function Footer() {
               </h2>
               <ul className="space-y-4">
                 {footerNav[section].items.map((item) => (
-                  <li key={item.href}>
+                  <li key={item.title}>
                     <Link href={item.href}>
                       <a className="text-base text-gray-500 transition duration-200 ease-in-out hover:font-semibold hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
                         {item.title}
@@ -120,33 +120,34 @@ export function Footer() {
             </a>
           </span>
         </div>
-        <div className="container mx-auto mb-0 flex flex-col items-center px-5 py-2 sm:flex-row">
+        <div className="container mx-auto mb-0 flex flex-col items-center py-2 sm:flex-row">
           <div className="title-font flex items-center justify-center font-medium text-gray-900 md:justify-start">
             <p className="mt-2 text-sm text-gray-500">
               &copy; {new Date().getFullYear()} Javaistic. All rights reserved.
             </p>
           </div>
-          <div className="flex items-center"></div>
-          <a
-            href="#"
-            className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
-          >
-            <p className="mt-2 text-sm text-gray-500">Privacy Policy</p>
-          </a>
-          <a
-            href="#"
-            className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
-          >
-            <p className="mt-2 text-sm text-gray-500">Terms &amp; Conditions</p>
-          </a>
-          <a
-            href="https://javaistic.betteruptime.com"
-            className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
-          >
-            <p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
-              Status
-            </p>
-          </a>
+          <div className="flex items-center">
+            <a
+              href="#"
+              className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
+            >
+              <p className="mt-2 text-sm text-gray-500">Privacy Policy</p>
+            </a>
+            <Link href="/terms-and-conditions">
+              <a className="title-font flex items-center justify-center pl-6 font-medium md:justify-start">
+                <p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
+                  Terms &amp; Conditions
+                </p>
+              </a>
+            </Link>
+            <Link href="/status">
+              <a className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start">
+                <p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
+                  Status
+                </p>
+              </a>
+            </Link>
+          </div>
           <div className="mt-4 inline-flex justify-center sm:ml-auto sm:mt-0 sm:justify-start">
             <MadeInBadge />
           </div>