Update MainSite and add data

Weminal-labs · Nov 5, 2024 · 63a950e · 63a950e
1 parent a65ca20
commit 63a950e
Show file tree

Hide file tree

Showing 15 changed files with 828 additions and 77 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,8 +8,8 @@ import localFont from 'next/font/local'
 import { ThemeProvider } from '@/components/theme-provider'
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Weminal',
+  description: 'Where Ideas begin with a Hackathon.',
 }
 
 const ppNeueMontreal = localFont({

diff --git a/src/app/members/[id]/page.tsx b/src/app/members/[id]/page.tsx
@@ -0,0 +1,115 @@
+import { FaGithub, FaLinkedin, FaTwitter, FaTelegram } from 'react-icons/fa'
+import {
+  SiNodedotjs,
+  SiDocker,
+  SiPython,
+  SiNextdotjs,
+  SiGraphql,
+  SiEvernote,
+} from 'react-icons/si'
+import { TbInfinity } from 'react-icons/tb'
+
+export default function Page() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-black relative">
+      {/* Divider Lines - Ẩn trên mobile */}
+      <div className="hidden md:block absolute top-10 left-0 w-full h-[1px] bg-gray-300 dark:bg-gray-700" />
+      <div className="hidden md:block absolute top-0 left-[48%] w-[1px] h-full bg-gray-300 dark:bg-gray-700" />
+      <div className="hidden md:block absolute bottom-10 left-0 w-full h-[1px] bg-gray-300 dark:bg-gray-700" />
+
+      <div className="container mx-auto px-10 md:px-8 py-8 md:py-16">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-24">
+          {/* Left Column */}
+          <div className="mx-4 md:mx-0 space-y-6 md:space-y-[80px] col-span-12 md:col-span-5">
+            {/* Profile Section */}
+            <div className="flex flex-col items-start">
+              <img
+                src="/avatar/avatar.png"
+                alt="Profile"
+                className="w-full md:w-[150px] dark:brightness-90"
+              />
+
+              <div className="text-start mt-10 mb-40 md:mt-4 md:mb-0">
+                <p className="text-gray-600 dark:text-gray-400 mb-4 font-medium text-[26px] md:text-base md:font-normal">
+                  [email protected]
+                </p>
+                <div className="flex justify-start gap-6 text-gray-600 dark:text-gray-400">
+                  <a
+                    href="#"
+                    className="hover:text-gray-900 dark:hover:text-gray-200"
+                  >
+                    <FaGithub size={24} />
+                  </a>
+                  <a
+                    href="#"
+                    className="hover:text-gray-900 dark:hover:text-gray-200"
+                  >
+                    <FaLinkedin size={24} />
+                  </a>
+                  <a
+                    href="#"
+                    className="hover:text-gray-900 dark:hover:text-gray-200"
+                  >
+                    <FaTwitter size={24} />
+                  </a>
+                  <a
+                    href="#"
+                    className="hover:text-gray-900 dark:hover:text-gray-200"
+                  >
+                    <FaTelegram size={24} />
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            {/* Title and Description */}
+            <div className="text-left space-y-12 md:space-y-10">
+              <h1 className="text-3xl md:text-5xl mt-4 font-bold leading-tight scale-y-150 md:tracking-[-2px] text-neutral-800 dark:text-white">
+                HI, I'M MEMBER'S NAME
+              </h1>
+
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed text-lg md:text-base text-justify md:text-left">
+                Lorem ipsum dolor sit amet consectetur. Hac viverra parturient
+                aliquet ut proin consectetur non nunc amet. Quis in in lacus ac
+                sapien massa tellus massa. Dictum tellus diam viverra leo. Porta
+                quis ultricies sed rhoncus.
+              </p>
+            </div>
+          </div>
+
+          {/* Right Column */}
+          <div className="flex flex-col justify-between md:justify-between col-span-12 md:col-span-7 mt-8 md:mt-0 mx-4 md:mx-0">
+            {/* Tech Stack Section */}
+            <div className="text-center md:text-right order-2 md:order-1">
+              <h3 className="text-2xl md:text-3xl font-bold leading-tight scale-y-150 tracking-[-2px] md:tracking-[-3px] text-black dark:text-white">
+                TECH STACK
+              </h3>
+              <div className="flex flex-row md:flex-col justify-center md:items-end flex-wrap my-6 gap-4 md:gap-6">
+                <TechIcon icon={<SiNodedotjs size={24} />} />
+                <TechIcon icon={<TbInfinity size={24} />} />
+                <TechIcon icon={<SiDocker size={24} />} />
+                <TechIcon icon={<SiPython size={24} />} />
+                <TechIcon icon={<SiNextdotjs size={24} />} />
+                <TechIcon icon={<SiEvernote size={24} />} />
+              </div>
+            </div>
+
+            {/* Developer Title */}
+            <h1 className="text-3xl md:text-5xl my-[120%] md:my-0 md:mt-4 font-bold leading-tight scale-y-150 tracking-[-2px] md:tracking-[-3px] text-neutral-800 dark:text-white text-right order-1 md:order-2">
+              I'M A FULL STACK <br />
+              DEVELOPER
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const TechIcon = ({ icon }: { icon: React.ReactNode }) => {
+  return (
+    <div className="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
+      {icon}
+    </div>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -20,7 +20,6 @@ export default function Home() {
       <Awards />
       <Projects />
       <Members />
-      {/* <MemberPortfolio /> */}
       <Footer />
     </div>
   )

diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -1,30 +1,39 @@
 import { SECTION_IDS } from '@/constants'
 
+// Import hooks
+import { useWeminal } from '@/hooks/useWeminal'
+
 const About = () => {
+  const weminal = useWeminal()
+
   return (
-    <div className="grid h-screen grid-cols-3" id={SECTION_IDS.WHO_WE_ARE}>
+    <div
+      className="grid h-screen grid-cols-3 border-b"
+      id={SECTION_IDS.WHO_WE_ARE}
+    >
       <div className="h-full hidden md:block col-span-1">
-        <div className="my-20 border-b"></div>
+        <div
+          style={{ height: 'calc(100% - calc(0.25rem * 40))' }}
+          className="my-20 border-y"
+        ></div>
       </div>
       <div className="flex h-full items-center justify-center border-x py-20 col-span-3 md:col-span-1">
         <div
-          className={`flex h-full w-full items-center justify-center px-10 md:px-20 text-center`}
+          className={`flex h-full w-full items-center justify-center px-10 md:px-20 text-center border-y`}
         >
           <div>
             <h2 className="font-bebas-neue text-8xl text-muted-foreground">
               <span className="text-foreground">WHO</span> WE ARE
             </h2>
-            <p className="font-pp-neue-montreal font-medium">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-              Accusantium sequi excepturi impedit cupiditate deserunt
-              consectetur mollitia nihil quasi, neque alias dicta, eveniet quae
-              aliquam ratione ab maiores. Animi, asperiores cumque.
-            </p>
+            <p className="font-pp-neue-montreal font-medium">{weminal.about}</p>
           </div>
         </div>
       </div>
       <div className="h-full hidden md:block col-span-1">
-        <div className="my-20 border-b"></div>
+        <div
+          style={{ height: 'calc(100% - calc(0.25rem * 40))' }}
+          className="my-20 border-y"
+        ></div>
       </div>
     </div>
   )

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -22,11 +22,6 @@ const footerItems = [
     path: SECTION_IDS.AWARDS,
     icon: <Award className="h-5 w-5" />,
   },
-  {
-    title: 'Prize',
-    path: SECTION_IDS.PRIZE,
-    icon: <Gift className="h-5 w-5" />,
-  },
   {
     title: 'Projects',
     path: SECTION_IDS.PROJECTS,
@@ -95,7 +90,7 @@ const Footer = () => {
         </div>
 
         {/* Navigation */}
-        <div className="mt-12 grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
+        <div className="mt-12 grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
           {footerItems.map((item) => (
             <div key={item.title} className="flex flex-col items-center">
               <button
@@ -134,10 +129,16 @@ const Footer = () => {
               © {new Date().getFullYear()} Weminal, Inc. All rights reserved.
             </p>
             <div className="flex gap-6">
-              <Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
+              <Link
+                href="#"
+                className="text-sm text-muted-foreground hover:text-foreground"
+              >
                 Privacy Policy
               </Link>
-              <Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
+              <Link
+                href="#"
+                className="text-sm text-muted-foreground hover:text-foreground"
+              >
                 Terms of Service
               </Link>
             </div>
@@ -148,4 +149,4 @@ const Footer = () => {
   )
 }
 
-export default Footer
+export default Footer
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,13 +1,22 @@
 'use client'
 import clsx from 'clsx'
-import { Menu, X, Users, Eye, Award, Gift, Folder, UserCircle } from 'lucide-react'
+import {
+  Menu,
+  X,
+  Users,
+  Eye,
+  Award,
+  Gift,
+  Folder,
+  UserCircle,
+} from 'lucide-react'
 import {
   FaGithub,
   FaLinkedin,
   FaTwitter,
   FaTelegram,
-  FaFacebook
-} from "react-icons/fa";
+  FaFacebook,
+} from 'react-icons/fa'
 import { useEffect, useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import Image from 'next/image'
@@ -31,11 +40,6 @@ const headerItems = [
     path: SECTION_IDS.AWARDS,
     icon: <Award className="h-5 w-5" />,
   },
-  {
-    title: 'Prize',
-    path: SECTION_IDS.PRIZE,
-    icon: <Gift className="h-5 w-5" />,
-  },
   {
     title: 'Projects',
     path: SECTION_IDS.PROJECTS,
@@ -91,18 +95,20 @@ const Header = () => {
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
-        const visibleEntries = entries.filter(entry => entry.isIntersecting)
+        const visibleEntries = entries.filter((entry) => entry.isIntersecting)
         if (visibleEntries.length > 0) {
           const mostVisible = visibleEntries.reduce((prev, current) => {
-            return prev.intersectionRatio > current.intersectionRatio ? prev : current
+            return prev.intersectionRatio > current.intersectionRatio ?
+                prev
+              : current
           })
           setActiveClass(mostVisible.target.id as SECTION_IDS)
         }
       },
       {
         threshold: [0.2, 0.4, 0.6, 0.8],
-        rootMargin: '-100px 0px -100px 0px'
-      }
+        rootMargin: '-100px 0px -100px 0px',
+      },
     )
 
     const elements = headerItems.map((item) => {
@@ -139,7 +145,7 @@ const Header = () => {
           bg-gradient-to-b from-background/20 via-background/5 to-transparent
           backdrop-blur-sm py-4 transition-all duration-300`,
           {
-            'bg-background/20 backdrop-blur-md shadow-lg': isActiveScroll
+            'bg-background/20 backdrop-blur-md shadow-lg': isActiveScroll,
           },
         )}
       >
@@ -149,11 +155,11 @@ const Header = () => {
               <button
                 key={item.title}
                 className={clsx(
-                  "uppercase relative py-2 transition-colors flex items-center gap-2",
+                  'uppercase relative py-2 transition-colors flex items-center gap-2',
                   {
                     'text-primary': activeClass === item.path,
-                    'hover:text-primary/70': activeClass !== item.path
-                  }
+                    'hover:text-primary/70': activeClass !== item.path,
+                  },
                 )}
                 onClick={() => handleScrollToSection(item.path)}
               >
@@ -166,7 +172,7 @@ const Header = () => {
                 )}>
                   {item.icon}
                 </span> */}
-                <span className='text-base font-bold'>{item.title}</span>
+                <span className="text-base font-bold">{item.title}</span>
                 {activeClass === item.path && (
                   <motion.div
                     layoutId="underline"
@@ -179,7 +185,6 @@ const Header = () => {
             <div className="hidden md:flex items-center gap-2">
               <ToggleTheme />
             </div>
-
           </div>
 
           <button
@@ -233,24 +238,25 @@ const Header = () => {
                     <button
                       key={item.title}
                       className={clsx(
-                        "text-left py-3 px-4 rounded-lg transition-all duration-200 flex items-center gap-3",
+                        'text-left py-3 px-4 rounded-lg transition-all duration-200 flex items-center gap-3',
                         {
-                          'bg-primary/10 text-primary font-medium': activeClass === item.path,
-                          'hover:bg-accent hover:translate-x-1': activeClass !== item.path
-                        }
+                          'bg-primary/10 text-primary font-medium':
+                            activeClass === item.path,
+                          'hover:bg-accent hover:translate-x-1':
+                            activeClass !== item.path,
+                        },
                       )}
                       onClick={() => {
                         handleScrollToSection(item.path)
                         setIsMobileMenuOpen(false)
                       }}
                     >
-                      <span className={clsx(
-                        "transition-colors",
-                        {
+                      <span
+                        className={clsx('transition-colors', {
                           'text-primary': activeClass === item.path,
-                          'text-muted-foreground': activeClass !== item.path
-                        }
-                      )}>
+                          'text-muted-foreground': activeClass !== item.path,
+                        })}
+                      >
                         {item.icon}
                       </span>
                       <span className="flex-1">{item.title}</span>