WIP navbar component and new routes v2/

BacPacNet · Sep 5, 2024 · a350638 · a350638
1 parent c01d1bc
commit a350638
Show file tree

Hide file tree

Showing 19 changed files with 407 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "react-icons": "^4.11.0",
     "react-parallax": "^3.5.1",
     "react-share": "^5.1.0",
+    "react-slick": "^0.30.2",
     "react-type-animation": "^3.2.0",
     "sharp": "^0.33.4",
     "socket.io-client": "^4.7.5",
@@ -92,6 +93,7 @@
     "@types/cookie": "^0.6.0",
     "@types/crypto-js": "^4.2.2",
     "@types/jest": "^29.5.11",
+    "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
     "chromatic": "^7.2.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,15 +1,28 @@
 import './globals.css'
 
 import { Inter } from 'next/font/google'
+import { Poppins } from 'next/font/google'
 import type { Metadata } from 'next'
-import Navbar from '../components/Navbar/Navbar'
+
 import { ReactQueryClientProvider } from '@/utils/Provider'
 import ZustandSocketProvider from '@/utils/ZustandSocketProvider'
 
 import SecondaryNavbar from '@/components/Timeline/Navbar'
 type FontClassName = string
 
-const inter = Inter({ subsets: ['latin'] }) as { className: FontClassName }
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+}) as { className: FontClassName }
+
+const poppins = Poppins({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-poppins',
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+})
 
 export const metadata: Metadata = {
   title: 'UniBuzz',
@@ -34,11 +47,16 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
+    <html lang="en" className={`${poppins.variable} ${inter.className}`}>
+      <head>
+        <link rel="stylesheet" type="text/css" charSet="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
+        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
+      </head>
+
+      <body>
         <ReactQueryClientProvider>
           <ZustandSocketProvider>
-            <Navbar />
+            {/*<Navbar />*/}
             <SecondaryNavbar />
             {children}
           </ZustandSocketProvider>

diff --git a/src/app/v2/onboarding/page.tsx b/src/app/v2/onboarding/page.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import LogoNavbar from '@/components/atoms/LogoNavbar'
+import OnboardingSlider from '@/components/atoms/OnboardingSlider'
+import useDeviceType from '@/hooks/useDeviceType'
+
+const Onboarding = () => {
+  const { isDesktop, isTablet, isMobile } = useDeviceType()
+  console.log(isDesktop, isTablet, isMobile)
+  return (
+    <div className="h-screen">
+      <div className="flex flex-col h-screen">
+        <LogoNavbar />
+        <OnboardingSlider />
+      </div>
+    </div>
+  )
+}
+
+export default Onboarding
diff --git a/src/assets/image1.svg b/src/assets/image1.svg
diff --git a/src/assets/image2.svg b/src/assets/image2.svg
diff --git a/src/assets/image3.svg b/src/assets/image3.svg
diff --git a/src/assets/image4.svg b/src/assets/image4.svg
diff --git a/src/assets/sparkles.svg b/src/assets/sparkles.svg
diff --git a/src/assets/upgradeIcon.svg b/src/assets/upgradeIcon.svg
diff --git a/src/components/atoms/LoginButton/index.tsx b/src/components/atoms/LoginButton/index.tsx
@@ -0,0 +1,16 @@
+// components/LoginButton.tsx
+import React from 'react'
+
+interface LoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+}
+
+const LoginButton: React.FC<LoginButtonProps> = ({ className = '', children, ...props }) => {
+  return (
+    <button className={`bg-primary-500 text-white py-2 px-4 rounded-md active:scale-95 transition-transform duration-150 ${className}`} {...props}>
+      {children}
+    </button>
+  )
+}
+
+export default LoginButton
diff --git a/src/components/atoms/LogoNavbar/constant.ts b/src/components/atoms/LogoNavbar/constant.ts
@@ -0,0 +1,18 @@
+export const MENU_LIST = [
+  {
+    name: 'Discover',
+    path: '/discover',
+  },
+  {
+    name: 'Community',
+    path: '/community',
+  },
+  {
+    name: 'About Us',
+    path: '/about',
+  },
+  {
+    name: 'UPGRADE',
+    path: '/upgrade',
+  },
+]