chore: ui enhance #11

app-generator · Dec 5, 2023 · 68fb163 · 68fb163
1 parent fd12927
commit 68fb163
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 158 deletions.
diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
@@ -2,7 +2,7 @@
 export default async function Home() {
   return (
     <main className="mx-auto mt-4 max-w-6xl px-6 pb-10">
-      <section id="about" className="bg-white dark:bg-gray-900 mt-10 mb-36 pt-32">
+      <section id="about" className="bg-white dark:bg-gray-900 mt-10 mb-20 pt-24">
         <div className="grid py-8 px-4 mx-auto max-w-screen-xl lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
           <div className="place-self-center mr-auto lg:col-span-7">
             <h1 className="mb-4 max-w-2xl text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">
@@ -11,8 +11,8 @@ export default async function Home() {
             <p className="mb-6 max-w-2xl font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">
               Open-Source starter built with <strong>NextJs &amp; Tailwind/Flowbite</strong>.
             </p>
-            <a href="https://docs.appseed.us/" target="_blank" className="inline-flex justify-center items-center py-3 px-5 mr-3 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
-              Docs
+            <a href="https://github.com/app-generator/rocket-nextjs/" target="_blank" className="inline-flex justify-center items-center py-3 px-5 mr-3 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
+              Download
               <svg className="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"></path>
               </svg>
@@ -28,10 +28,10 @@ export default async function Home() {
       </section>
 
       <section>
-        <img src="/images/home/dashboard.png" alt="" />
+        <img src="/images/home/dashboard.png" className="rounded-lg" alt="" />
       </section>
 
-      <section id="tech_stack" className="flex justify-between w-full h-[calc(100vh-300px)] items-center pt-32">
+      {/* <section id="tech_stack" className="flex justify-between w-full h-[calc(100vh-300px)] items-center pt-32">
         <div className="lg:w-1/2 w-full">
           <div className="flex items-center gap-4 w-full justify-center">
             <img className="sm:w-20 w-12" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStsymfon7-t1D7kzm9xJTrPp1xuRH8Hk5Bsw&usqp=CAU" />
@@ -47,7 +47,7 @@ export default async function Home() {
           />
         </div>
         <div className="w-1/2 text-5xl font-bold hidden lg:block text-center">Technology Stack</div>
-      </section>
+      </section> */}
 
       <section id="features" className="sm:my-20 my-8 pt-32">
         <p className="text-5xl font-bold text-center mb-12">Features</p>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,157 +1,97 @@
 import Link from "next/link";
 
 const Footer = () => {
-    return (
-        <footer
-            className="bg-neutral-100 text-center text-neutral-600 dark:bg-neutral-600 dark:text-neutral-200 lg:text-left">
-            <div
-                className="flex items-center justify-center border-b-2 border-neutral-200 p-6 dark:border-neutral-500 lg:justify-between">
-                <div className="mr-12 hidden lg:block">
-                    <span>Supercharge your app instantly, launch faster, make $</span>
-                </div>
+  return (
+    <footer
+      className="bg-neutral-100 text-center text-neutral-600 dark:bg-neutral-600 dark:text-neutral-200 lg:text-left" id="footer">
 
-                <div className="flex justify-center">
-                    <Link href="#!" className="mr-6 text-neutral-600 dark:text-neutral-200">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 24 24">
-                            <path
-                                d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
-                        </svg>
-                    </Link>
-                    <Link href="#!" className="mr-6 text-neutral-600 dark:text-neutral-200">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="h-5 w-5"
-                            fill="currentColor"
-                            viewBox="0 0 24 24">
-                            <path
-                                d="M7 11v2.4h3.97c-.16 1.029-1.2 3.02-3.97 3.02-2.39 0-4.34-1.979-4.34-4.42 0-2.44 1.95-4.42 4.34-4.42 1.36 0 2.27.58 2.79 1.08l1.9-1.83c-1.22-1.14-2.8-1.83-4.69-1.83-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.721-2.84 6.721-6.84 0-.46-.051-.81-.111-1.16h-6.61zm0 0 17 2h-3v3h-2v-3h-3v-2h3v-3h2v3h3v2z"
-                                fillRule="evenodd"
-                                clipRule="evenodd" />
-                        </svg>
-                    </Link>
-                    <Link href="#!" className="mr-6 text-neutral-600 dark:text-neutral-200">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 24 24">
-                            <path
-                                d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
-                        </svg>
-                    </Link>
-                    <Link href="https://github.com/app-generator/rocket-nextjs" target={'_blank'} className="text-neutral-600 dark:text-neutral-200">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 24 24">
-                            <path
-                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-                        </svg>
-                    </Link>
-                </div>
-            </div>
+      <div className="mx-6 py-10 text-center md:text-left border-t">
+        <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+          <div className="">
+            <h6
+              className="mb-4 flex items-center justify-center font-semibold uppercase md:justify-start">
+              <img
+                alt="Logo"
+                className="mr-3 h-4"
+                src="/Logo.png"
+              />
+              Rocket Nextjs
+            </h6>
+            <p>
+              Open-Source NextJS Starter built styled with Tailwind/Flowbite.
+            </p>
+          </div>
+          <div className="">
+            <h6
+              className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
+              Products
+            </h6>
+            <p className="mb-4">
+              <Link href="https://github.com/app-generator/rocket-nextjs/archive/refs/heads/main.zip" className="text-neutral-600 dark:text-neutral-200"
+              >Free</Link>
+            </p>
+            <p className="mb-4">
+              <a href='https://rocket-nextjs-pro.vercel.app/' target="_blank" className="text-neutral-600 dark:text-neutral-200"
+              >Pro</a>
+            </p>
+          </div>
+          <div className="">
+            <h6
+              className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
+              Useful links
+            </h6>
+            <p className="mb-4">
+              <Link href="#" className="text-neutral-600 dark:text-neutral-200"
+              >Home</Link>
+            </p>
+            <p>
+              <Link href="/#features" className="text-neutral-600 dark:text-neutral-200"
+              >Features</Link>
+            </p>
+          </div>
+          <div>
+            <h6
+              className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
+              Contact
+            </h6>
+            <p className="mb-4 flex items-center justify-center md:justify-start">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                className="mr-3 h-5 w-5">
+                <path
+                  d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
+                <path
+                  d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
+              </svg>
+              <a href="https://appseed.us/support/" target="_blank">support@appseed.us </a>
+            </p>
+            <p className="flex items-center justify-center md:justify-start">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="mr-3 h-5 w-5"
+                fill="currentColor"
+                viewBox="0 0 24 24">
+                <path
+                  d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
+              </svg>
+              <a href="https://twitter.com/@webappseed" target="_blank">@webappseed</a>
+            </p>
+          </div>
+        </div>
+      </div>
 
-            <div className="mx-6 py-10 text-center md:text-left">
-                <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-                    <div className="">
-                        <h6
-                            className="mb-4 flex items-center justify-center font-semibold uppercase md:justify-start">
-                            <img
-                                alt="Logo"
-                                className="mr-3 h-4"
-                                src="/Logo.png"
-                            />
-                            Rocket Nextjs
-                        </h6>
-                        <p>
-                            Here you can use rows and columns to organize your footer
-                            content. Lorem ipsum dolor sit amet, consectetur adipisicing
-                            elit.
-                        </p>
-                    </div>
-                    <div className="">
-                        <h6
-                            className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
-                            Products
-                        </h6>
-                        <p className="mb-4">
-                            <Link href="#!" className="text-neutral-600 dark:text-neutral-200"
-                            >Free</Link>
-                        </p>
-                        <p className="mb-4">
-                            <a href={process.env.PRO_V_LINK || ""} className="text-neutral-600 dark:text-neutral-200"
-                            >Pro</a>
-                        </p>
-                    </div>
-                    <div className="">
-                        <h6
-                            className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
-                            Useful links
-                        </h6>
-                        <p className="mb-4">
-                            <Link href="/" className="text-neutral-600 dark:text-neutral-200"
-                            >Home</Link>
-                        </p>
-                        <p className="mb-4">
-                            <Link href="/#about" className="text-neutral-600 dark:text-neutral-200"
-                            >About</Link>
-                        </p>
-                        <p className="mb-4">
-                            <Link href="/#tech_stack" className="text-neutral-600 dark:text-neutral-200"
-                            >Technology Stack</Link>
-                        </p>
-                        <p>
-                            <Link href="/#features" className="text-neutral-600 dark:text-neutral-200"
-                            >Features</Link>
-                        </p>
-                    </div>
-                    <div>
-                        <h6
-                            className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
-                            Contact
-                        </h6>
-                        <p className="mb-4 flex items-center justify-center md:justify-start">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 24 24"
-                                fill="currentColor"
-                                className="mr-3 h-5 w-5">
-                                <path
-                                    d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
-                                <path
-                                    d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
-                            </svg>
-                            rocket@mg.appseed.us
-                        </p>
-                        <p className="flex items-center justify-center md:justify-start">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                className="mr-3 h-5 w-5"
-                                fill="currentColor"
-                                viewBox="0 0 24 24">
-                                <path
-                                    d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
-                            </svg>
-                            @webappseed
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <div className="bg-neutral-200 p-6 text-center dark:bg-neutral-700">
-                <span>© 2023 Copyright:</span>
-                <Link
-                    className="font-semibold text-neutral-600 dark:text-neutral-400"
-                    href="https://tw-elements.com/"
-                > Rocket Nextjs</Link>
-            </div>
-        </footer>
-    )
+      <div className="bg-neutral-200 p-6 text-center dark:bg-neutral-700">
+        MIT License ©
+        <Link
+          className="font-semibold text-neutral-600 dark:text-neutral-400"
+          href="https://appseed.us/"
+          target="_blank"
+        > AppSeed.us</Link>
+      </div>
+    </footer>
+  )
 }
 
 export default Footer;
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -58,9 +58,8 @@ const Header: FC<Record<string, never>> = function () {
                     }
                 </div>
                 <Navbar.Collapse>
-                    <Navbar.Link href="/" active>Home</Navbar.Link>
+                    <Navbar.Link href="#" active>Home</Navbar.Link>
                     <Navbar.Link href="/#about">About</Navbar.Link>
-                    <Navbar.Link href="/#tech_stack">Technology Stack</Navbar.Link>
                     <Navbar.Link href="/#features">Features</Navbar.Link>
                 </Navbar.Collapse>
             </Navbar>

diff --git a/components/Topbanner.tsx b/components/Topbanner.tsx
@@ -1,14 +1,18 @@
 "use client";
 
+import { useState } from "react";
+
 const Topbanner = () => {
+    const [show, setShow] = useState(true)
     return (
-        <div className="px-4 sm:text-base text-sm left-0 top-0 bg-[#d8e6fd] h-12 z-10 w-full text-black text-center font-[500] flex items-center justify-center">
+        <div className={`${show ? 'flex' : 'hidden'} text-center relative pl-4 pr-7 sm:text-base text-sm left-0 top-0 bg-[#d8e6fd] h-12 z-10 w-full text-black text-center font-[500] items-center justify-center`}>
             <img
                 alt="Logo"
                 className="mr-3 h-4"
                 src="/Logo.png"
             />
             Rocket provides you with the boilerplate code you need to launch, FAST.
+            <button className="absolute right-2 text-2xl top-1" onClick={() => setShow(false)}>&times;</button>
         </div>
     )
 }

diff --git a/public/images/home/dashboard.png b/public/images/home/dashboard.png