feat: redesign pages

Author: hyochan

.claude/settings.local.json

@@ -47,4 +47,6 @@ next-env.d.ts
 
 # pwa
 public/sw*
-public/workbox*
+public/workbox*
+
+.claude/settings.local.json

.gitignore

@@ -47,7 +47,7 @@ const ButtonGroup = ({
   return (
     <div
       style={style}
-      className={`rounded-[4px] h-12 w-full bg-basic flex items-center ${className}`}
+      className={`rounded-[12px] h-12 w-full flex items-center bg-black/10 dark:bg-white/10 backdrop-blur-md border border-black/20 dark:border-white/10 ${className}`}
     >
       {buttons.map((button, index) => {
         const selected = index === selectedIndex;

app/[lang]/(common)/ButtonGroup.tsx

@@ -32,7 +32,7 @@ export function DataTable<T>(props: DataTableProps<T>): ReactElement {
 
   return (
     <table className={clsx(['flex-1 self-stretch', props.className])}>
-      <thead className={clsx('', props.classNames?.tHead)}>
+      <thead className={clsx('sticky top-0 z-10', props.classNames?.tHead)}>
         <tr
           className={clsx(
             'flex-1 px-1 flex items-center',

app/[lang]/(common)/DataTable.tsx

@@ -1,4 +1,4 @@
-'use-client';
+'use client';
 
 import type {MouseEventHandler, ReactElement} from 'react';
 import {useRef, useState} from 'react';
@@ -37,23 +37,22 @@ function Dropdown<T extends {domain: string; icon: ReactElement}>({
     <div
       ref={dropdownRef}
       className={clsx(
-        'rounded-[4px] relative font-inter h-10 outline-none',
+        'rounded-[12px] relative font-inter h-10 outline-none',
         'flex justify-center items-center',
+        'bg-white/70 dark:bg-black/70',
+        'backdrop-blur-xl',
+        'border border-black/20 dark:border-white/30',
+        'hover:bg-white/80 dark:hover:bg-black/80',
+        'transition-all duration-300',
       )}
-      style={{
-        backgroundColor: 'rgb(84,84,84)',
-        boxSizing: 'border-box',
-      }}
     >
       <button
         onClick={onClick}
         className={clsx(
-          'rounded-[4px] text-white cursor-pointer p-[8px] ml-auto border-none align-middle transition-shadow',
+          'rounded-[12px] text-gray7 dark:text-white cursor-pointer p-[8px] ml-auto border-none align-middle',
           'flex flex-row items-center justify-center',
+          'transition-all duration-200',
         )}
-        style={{
-          boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
-        }}
       >
         {selected?.icon}
         <span
@@ -71,12 +70,9 @@ function Dropdown<T extends {domain: string; icon: ReactElement}>({
           isOpened
             ? 'opacity-100 visible translate-y-0'
             : 'opacity-0 invisible translate-y-2'
-        } bg-gray6 absolute top-12 left-0 rounded-md transition-all duration-400`}
-        style={{
-          boxShadow: '0 1px 8px rgba(0, 0, 0, 0.3)',
-        }}
+        } absolute top-12 left-0 rounded-[12px] transition-all duration-400 bg-white/90 dark:bg-black/90 backdrop-blur-xl border border-black/20 dark:border-white/30 shadow-[0_8px_32px_0_rgba(31,38,135,0.3)]`}
       >
-        <ul className="list-none p-0 bg-gray9">
+        <ul className="list-none p-0 rounded-[12px] overflow-hidden">
           {data.map((item) => (
             <li
               key={item.domain}
@@ -85,8 +81,9 @@ function Dropdown<T extends {domain: string; icon: ReactElement}>({
                 setSelected(item);
               }}
               className={clsx(
-                'py-2 px-4 hover:bg-gray-200 cursor-pointer text-white',
+                'py-2 px-4 hover:bg-black/10 dark:hover:bg-white/10 cursor-pointer text-gray7 dark:text-white',
                 'flex items-center',
+                'transition-all duration-200',
               )}
             >
               {item.icon}

app/[lang]/(common)/Dropdown.tsx

@@ -28,7 +28,7 @@ const TextInput = forwardRef<HTMLInputElement, Props>(
       <input
         ref={ref}
         name={name}
-        className={`flex-1 self-stretch rounded-[4px] min-h-12 font-inter px-2 bg-transparent border-none outline-none ${
+        className={`flex-1 self-stretch rounded-[4px] min-h-12 font-inter px-2 bg-transparent border-none outline-none focus:outline-none focus:ring-0 focus:border-none ${
           errorMessage ? 'border border-red-500' : ''
         } ${className}`}
         style={style}

app/[lang]/(common)/TextInput.tsx

@@ -54,7 +54,7 @@ const PluginStatsInfo = ({
   return (
     <div
       className={clsx(
-        'ml-[8px] py-[24px] px-[8x] max-w-[600px] w-full',
+        'ml-[8px] py-[24px] max-w-[600px] w-full',
         'flex-1 flex flex-col relative',
       )}
     >

app/[lang]/(home)/Hero/StatsSymbol.tsx

@@ -95,7 +95,7 @@ function Hero({t, statsInfo}: Props): ReactElement {
   return (
     <div
       className={clsx(
-        'self-stretch bg-paper',
+        'self-stretch bg-paper relative',
         'flex flex-col justify-center items-center',
         'max-[425px]:p-0',
       )}
@@ -108,10 +108,10 @@ function Hero({t, statsInfo}: Props): ReactElement {
           'min-[1200px]:self-center min-[1200px]:w-[1200px]',
         )}
       >
-        <p className="h1 text-[44px] text-left font-bold mt-[80px] mb-8">
+        <p className="h1 text-[44px] text-left font-bold mt-[80px] mb-8 text-contrast-light dark:text-contrast-dark">
           {t.developerPowerMeter}
         </p>
-        <p className="body1 text-[20px] text-left mb-[36px] opacity-50">
+        <p className="body1 text-[20px] text-left mb-[36px] text-gray5 dark:text-gray3">
           {t.developerPowerMeterDesc}
         </p>
         {/* Begin: GreatFrontEnd Banner */}
@@ -128,8 +128,14 @@ function Hero({t, statsInfo}: Props): ReactElement {
         >
           <div
             className={clsx(
-              'rounded-[4px] bg-gray7 px-3 h-[64px] relative body2 max-w-[800px]',
+              'rounded-[16px] px-3 h-[64px] relative body2 max-w-[800px]',
               'flex flex-row-reverse items-center',
+              'bg-white/50 dark:bg-black/40',
+              'backdrop-blur-2xl',
+              'border border-black/10 dark:border-white/20',
+              'shadow-[0_20px_60px_-15px_rgba(0,0,0,0.2)]',
+              'hover:bg-white/60 dark:hover:bg-black/50',
+              'transition-all duration-300',
               'max-[425px]:p-3 max-[425px]:self-stretch max-[425px]:h-auto max-[425px]:flex-wrap',
               'max-[320px]:py-3 max-[320px]:items-start',
             )}
@@ -141,7 +147,7 @@ function Hero({t, statsInfo}: Props): ReactElement {
                 'bg-transparent border-0 text-center max-w-[100px] p-2',
                 'absolute',
               )}
-              text={<SearchIcon size={22} fill="#FFF" />}
+              text={<SearchIcon size={22} className="text-gray8 dark:text-white" />}
             />
             <div
               className={clsx(
@@ -158,15 +164,15 @@ function Hero({t, statsInfo}: Props): ReactElement {
               />
               <span
                 className={clsx(
-                  'text-white',
+                  'text-gray5 dark:text-gray3',
                   'mx-3 body3 text-[22px]',
                   'max-[425px]:invisible max-[425px]:hidden',
                 )}
               >
                 /
               </span>
               <TextInput
-                className="text-white"
+                className="text-gray7 dark:text-white placeholder:text-gray5 dark:placeholder:text-gray4"
                 {...register('githubID')}
                 placeholder={t.githubUsername}
                 onChange={(e) => {
@@ -183,10 +189,15 @@ function Hero({t, statsInfo}: Props): ReactElement {
             className={clsx(
               'max-w-[800px] flex-1 self-stretch',
               'flex flex-col',
+              'rounded-[20px] p-6 mt-6',
+              'bg-white/50 dark:bg-black/40',
+              'backdrop-blur-2xl',
+              'border border-black/10 dark:border-white/20',
+              'shadow-[0_20px_60px_-15px_rgba(0,0,0,0.2)]',
             )}
           >
             <ButtonGroup
-              className="py-[4px] w-[98%] mt-[18px] mb-[10px]"
+              className="py-[4px] w-full mb-4"
               selectedIndex={isBasic ? 0 : 1}
               buttons={[{label: t.basic}, {label: t.advanced}]}
               onClick={(index) => {

app/[lang]/(home)/Hero/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type {ReactElement} from 'react';
 import clsx from 'clsx';
 import {Inter} from 'next/font/google';
@@ -7,7 +9,6 @@ import type {Translates} from '../../../src/localization';
 import imgBgSection1 from '@/public/assets/bg_section1.png';
 import SvgScouter from '@/public/assets/scouter.svg';
 import {useMediaQuery} from 'usehooks-ts';
-import GreatFrontEnd from '../(common)/GreatFrontEnd';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -39,17 +40,28 @@ export default function SectionFooter({t}: Props): ReactElement {
       >
         <p
           className={clsx(
-            'text-white max-w-[800px] leading-8 text-[24px] text-center mt-32 mb-20 mx-10',
+            'text-white leading-8 text-[24px] text-center mt-12 mb-20',
             inter.className,
           )}
         >
           {t.enjoyStats}
         </p>
-        <SvgScouter className="w-screen px-12 max-w-6xl" />
+        <a
+          href="https://github.com/hyochan"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="cursor-pointer"
+        >
+          <SvgScouter className="w-screen px-12 max-w-3xl" />
+        </a>
         <div
           className={clsx(
-            'h-[22px] mb-12 mt-12',
+            'h-[22px] mb-12 mt-12 px-6 py-4',
             'flex flex-row items-center',
+            'rounded-[12px]',
+            'bg-white/5 dark:bg-white/5',
+            'backdrop-blur-md',
+            'border border-white/10',
             inter.className,
           )}
         >
@@ -73,13 +85,6 @@ export default function SectionFooter({t}: Props): ReactElement {
           </p>
         </div>
       </div>
-      {/* Begin: GreatFrontEnd Banner */}
-      <GreatFrontEnd
-        className="mb-20"
-        href="https://www.greatfrontend.com/prepare/coding?fpr=hyo73"
-        title="Coding interview questions"
-      />
-      {/* End: GreatFrontEnd Banner */}
     </div>
   );
 }