Merge pull request #12 from psykat1116/main

Update Slider
Darkrider0007 · Feb 8, 2024 · 9836130 · 9836130
2 parents 8f339a0 + 15ae1e1
commit 9836130
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 103 deletions.
diff --git a/app/GlobalRedux/provider.tsx b/app/GlobalRedux/provider.tsx
@@ -4,8 +4,10 @@ import store from "./store";
 import Navbar from "@/components/Navbar";
 
 export default function GlobalReduxProvider({ children }: any) {
-  return <Provider store={store}>
-    <Navbar />
-    {children}
-  </Provider>;
+  return (
+    <Provider store={store}>
+      <Navbar />
+      {children}
+    </Provider>
+  );
 }
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import Image from "next/image";
 import { Carousel, OfferCard } from "@/components";
 import Navbar from "@/components/Navbar";
+import Slider from "@/components/Slider";
 
 const About = () => {
   const carouselItems = [
@@ -38,8 +39,10 @@ const About = () => {
       <div className="flex flex-col min-h-screen w-full justify-start items-center">
         <div className="min-h-screen w-full flex flex-col justify-start items-center gap-3 text-white">
           <div className="my-10 justify-center items-center flex flex-col w-full">
-            <h1 className="text-6xl mb-3">SHARKTANK</h1>
-            <p className="w-3/4 text-lg leading-relaxed text-l">
+            <h1 className="text-3xl sm:text-4xl md:text-6xl mb-3 uppercase">
+              Sharktank
+            </h1>
+            <p className="w-3/4 sm:text-lg leading-relaxed text-center text-base">
               Welcome to Shark-Tank, a cutting-edge platform where aspiring
               entrepreneurs converge with seasoned investors. Our sleek
               interface transforms ideas into compelling pitches, fostering live
@@ -48,7 +51,7 @@ const About = () => {
               future shaped by groundbreaking innovations.
             </p>
           </div>
-          <Carousel items={carouselItems} />
+          <Slider items={carouselItems} />
           <div className="w-full min-h-full p-1 flex flex-col justify-start items-start text-white gap-2 mt-10">
             <p className="text-4xl">Some Offers</p>
             <div className="w-full min-h-full grid grid-cols-3 gap-5 max-md:grid-cols-2 max-sm:grid-cols-1">

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,19 +1,26 @@
 import "./globals.css";
 import type { Metadata } from "next";
-import { Poppins, Oswald, Roboto } from "next/font/google";
+import { Poppins, Oswald, Kanit } from "next/font/google";
 import GlobalReduxProvider from "./GlobalRedux/provider";
 
-export const poppins = Poppins({
+const poppins = Poppins({
   subsets: ["latin"],
   weight: ["400", "500", "300", "600", "700"],
+  variable: "--font-poppins",
 });
 
-export const oswald = Oswald({
+const oswald = Oswald({
   subsets: ["latin"],
   weight: ["400", "500", "600", "700"],
   variable: "--font-oswald",
 });
 
+const kanit = Kanit({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-kanit",
+});
+
 export const metadata: Metadata = {
   title: "Shark Tank",
   description:
@@ -28,7 +35,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${poppins.className} ${oswald.variable} overflow-x-hidden`}
+        className={`${poppins.className} ${oswald.variable} ${kanit.variable} overflow-x-hidden`}
       >
         <GlobalReduxProvider>{children}</GlobalReduxProvider>
       </body>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,27 @@
+"use client";
 import Navbar from "@/components/Navbar";
 import Image from "next/image";
 import Link from "next/link";
+import { motion } from "framer-motion";
+
+const item = {
+  initial: {
+    y: 100,
+    opacity: 0,
+    transition: {
+      duration: 0.5,
+      ease: [0.37, 0, 0.63, 0],
+    },
+  },
+  animate: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.7,
+      ease: [0, 0.55, 0.45, 1],
+    },
+  },
+};
 
 export default function Home() {
   return (
@@ -15,25 +36,38 @@ export default function Home() {
         /> */}
         <div className="flex justify-start items-center flex-col w-full min-h-screen">
           <div className="z-[5] flex items-center flex-col mt-20 gap-4">
-            <h1 className="text-6xl">SHARKTANK</h1>
+            <motion.div
+              className="w-full flex justify-center items-center text-8xl font-kanit overflow-hidden"
+              initial="initial"
+              animate="animate"
+              transition={{ staggerChildren: 0.09, delayChildren: 0.3 }}
+            >
+              {"SHARKTANK".split("").map((e, id) => {
+                return (
+                  <motion.span variants={item} key={id}>
+                    {e}
+                  </motion.span>
+                );
+              })}
+            </motion.div>
             <p className="w-3/4 leading-relaxed text-xl">
-              &quot;Shark Tank&quot; is a popular American television show that
-              features aspiring entrepreneurs and inventors pitching their
+              <strong>Shark Tank</strong> is a popular American television show
+              that features aspiring entrepreneurs and inventors pitching their
               business ideas or products to a panel of wealthy investors, known
-              as &quot;sharks&quot;. The entrepreneurs hope to secure investment
-              deals from the sharks in exchange for a percentage of their
-              company&apos;s equity. Each contestant has a limited time to make
-              their pitch, after which the sharks can ask questions and
+              as <strong>Sharks</strong>. The entrepreneurs hope to secure
+              investment deals from the sharks in exchange for a percentage of
+              their company&apos;s equity. Each contestant has a limited time to
+              make their pitch, after which the sharks can ask questions and
               negotiate terms. The show is known for its high-stakes drama,
               candid feedback from the sharks, and the potential for
-              life-changing investment offers. &quot;Shark Tank&quot; has not
-              only provided a platform for entrepreneurs to showcase their
+              life-changing investment offers. <strong>Shark Tank</strong> has
+              not only provided a platform for entrepreneurs to showcase their
               innovations but has also entertained and inspired millions of
               viewers around the world.
             </p>
             <Link
               href="/about"
-              className="mt-6 rounded-full border-white border-2 px-4 py-2 hover:underline hover:border-b-4"
+              className="relative overflow-hidden mt-6 rounded-full border-white border-2 px-4 py-2 before:absolute before:content-[''] before:w-full before:h-full before:top-0 before:-left-full before:bg-white hover:before:left-0 before:transition-all before:duration-300 before:ease-in-out hover:text-black before:-z-[1]"
             >
               See more →
             </Link>

diff --git a/app/user/[id]/page.tsx b/app/user/[id]/page.tsx
@@ -117,11 +117,10 @@ export default function Page({ params }: any) {
   }
 
   return (
-    <>
-      <Navbar/>
-      <div className="min-h-screen w-full bg-bg_dark_primary flex justify-center items-center text-[#fefefe]">
-        <div className="max-w-[410px] h-screen w-full bg-bg_dark_secondary shadow-lg shadow-gray-700 p-6">
-          <div className='flex justify-center flex-col items-center mt-10'>
+    <div className='flex flex-col justify-center items-start w-full min-h-screen bg-bg_dark_primary'>
+      <div className="min-h-screen w-full flex justify-center items-center text-[#fefefe] my-5">
+        <div className="max-w-[410px] min-h-[540px] w-full bg-bg_dark_secondary p-6 rounded-sm">
+          <div className='flex justify-center flex-col items-center mt-3'>
             <h1 className='flex justify-center items-center text-4xl font-bold mb-6'>User Information</h1>
             {(userDatabase as any).User_Avatar ?
               (
@@ -209,7 +208,7 @@ export default function Page({ params }: any) {
           </form>)}
         </div>
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/components/Logout.tsx b/components/Logout.tsx
@@ -11,7 +11,7 @@ function Logout() {
     });
   };
   return (
-    <button onClick={() => setLogout()} className="text-red-600 overflow-hidden">
+    <button onClick={() => setLogout()} className="text-red-600 overflow-hidden uppercase">
       Logout
     </button>
   );

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -9,6 +9,7 @@ import { useDispatch } from "react-redux";
 import authService from "@/app/appwrite/auth";
 import { authlogout, login } from "@/app/GlobalRedux/Features/authSlice";
 import { motion, AnimatePresence } from "framer-motion";
+import { FaRegCircleUser } from "react-icons/fa6";
 
 const NavbarAnim = {
   initial: {
@@ -36,15 +37,14 @@ const item = {
     y: "30vh",
     transition: {
       duration: 0.5,
-      ease: [0.12, 0, 0.39, 0],
+      ease: [0.37, 0, 0.63, 1],
     },
   },
-  animate: {
+  open: {
     y: 0,
     transition: {
-      delay: 0.5,
-      duration: 1,
-      ease: [0.22, 1, 0.36, 1],
+      duration: 0.7,
+      ease: [0, 0.55, 0.45, 1],
     },
   },
 };
@@ -58,7 +58,7 @@ const container = {
   },
   open: {
     transition: {
-      delayChildren: 0.4,
+      delayChildren: 0.2,
       staggerChildren: 0.09,
       staggerDirection: 1,
     },
@@ -137,7 +137,7 @@ const Navbar = () => {
         </Link>
         <div className="flex flex-row gap-4 items-center">
           {authStatus && (
-            <Link href={`/user/${userData.$id}`}>
+            <Link href={`/user/${userData.$id}`} className="text-[28px]">
               {(userDatabase as any).User_Avatar ? (
                 <div className="rounded-full bg-slate-600 h-100 w-100 object-cover">
                   {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -150,30 +150,7 @@ const Navbar = () => {
                   />
                 </div>
               ) : (
-                <svg
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 24 24"
-                  height="2.5em"
-                  width="2.5em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fill="none"
-                    d="M12,8c-1.178,0-2,0.822-2,2s0.822,2,2,2s2-0.822,2-2S13.178,8,12,8z"
-                  ></path>
-                  <path
-                    fill="none"
-                    d="M12,4c-4.337,0-8,3.663-8,8c0,2.176,0.923,4.182,2.39,5.641c0.757-1.8,2.538-3.068,4.61-3.068h2 c2.072,0,3.854,1.269,4.61,3.068C19.077,16.182,20,14.176,20,12C20,7.663,16.337,4,12,4z M12,14c-2.28,0-4-1.72-4-4s1.72-4,4-4 s4,1.72,4,4S14.28,14,12,14z"
-                  ></path>
-                  <path
-                    fill="none"
-                    d="M13,16.572h-2c-1.432,0-2.629,1.01-2.926,2.354C9.242,19.604,10.584,20,12,20s2.758-0.396,3.926-1.073 C15.629,17.582,14.432,16.572,13,16.572z"
-                  ></path>
-                  <path d="M12,2C6.579,2,2,6.579,2,12c0,3.189,1.592,6.078,4,7.924V20h0.102C7.77,21.245,9.813,22,12,22s4.23-0.755,5.898-2H18 v-0.076c2.408-1.846,4-4.734,4-7.924C22,6.579,17.421,2,12,2z M8.074,18.927c0.297-1.345,1.494-2.354,2.926-2.354h2 c1.432,0,2.629,1.01,2.926,2.354C14.758,19.604,13.416,20,12,20S9.242,19.604,8.074,18.927z M17.61,17.641 c-0.757-1.8-2.538-3.068-4.61-3.068h-2c-2.072,0-3.854,1.269-4.61,3.068C4.923,16.182,4,14.176,4,12c0-4.337,3.663-8,8-8 s8,3.663,8,8C20,14.176,19.077,16.182,17.61,17.641z"></path>
-                  <path d="M12,6c-2.28,0-4,1.72-4,4s1.72,4,4,4s4-1.72,4-4S14.28,6,12,6z M12,12c-1.178,0-2-0.822-2-2s0.822-2,2-2s2,0.822,2,2 S13.178,12,12,12z"></path>
-                </svg>
+                <FaRegCircleUser />
               )}
             </Link>
           )}
@@ -185,7 +162,7 @@ const Navbar = () => {
       <AnimatePresence>
         {isActive && (
           <motion.div
-            className={`w-full fixed top-0 min-h-screen bg-bg_dark_primary text-white z-10 left-0 flex justify-center items-center origin-right`}
+            className={`w-full fixed top-0 min-h-screen bg-bg_dark_primary text-white z-10 left-0 flex justify-center items-center origin-right bg-opacity-95 backdrop-blur-sm`}
             variants={NavbarAnim}
             initial="initial"
             animate="animate"
@@ -199,74 +176,37 @@ const Navbar = () => {
               exit="initial"
             >
               <div className="overflow-hidden">
-                <motion.div
-                  variants={item}
-                  initial="initial"
-                  animate="animate"
-                  exit="initial"
-                  className="overflow-hidden"
-                >
+                <motion.div variants={item}>
                   <Link href="/pitches">Pitches</Link>
                 </motion.div>
               </div>
               {authStatus ? (
                 <div className="overflow-hidden">
-                  <motion.div
-                    variants={item}
-                    initial="initial"
-                    animate="animate"
-                    exit="initial"
-                    className="overflow-hidden"
-                  >
+                  <motion.div variants={item}>
                     <Link href="/add-pitch">Add Pitch</Link>
                   </motion.div>
                 </div>
               ) : (
                 <div className="overflow-hidden">
-                  <motion.div
-                    variants={item}
-                    initial="initial"
-                    animate="animate"
-                    exit="initial"
-                    className="overflow-hidden"
-                  >
+                  <motion.div variants={item}>
                     <Link href="/about">About</Link>
                   </motion.div>
                 </div>
               )}
               <div className="overflow-hidden">
-                <motion.div
-                  variants={item}
-                  initial="initial"
-                  animate="animate"
-                  exit="initial"
-                  className="overflow-hidden"
-                >
+                <motion.div variants={item}>
                   <Link href="/contacts">Contact</Link>
                 </motion.div>
               </div>
               {authStatus ? (
                 <div className="overflow-hidden">
-                  <motion.div
-                    onClick={clear}
-                    variants={item}
-                    initial="initial"
-                    animate="animate"
-                    exit="initial"
-                    className="overflow-hidden"
-                  >
+                  <motion.div onClick={clear} variants={item}>
                     <Logout />
                   </motion.div>
                 </div>
               ) : (
                 <div className="overflow-hidden">
-                  <motion.div
-                    variants={item}
-                    initial="initial"
-                    animate="animate"
-                    exit="initial"
-                    className="overflow-hidden"
-                  >
+                  <motion.div variants={item}>
                     <Link href="/login">Login</Link>
                   </motion.div>
                 </div>