feat: update file structure

README.md

@@ -5,7 +5,7 @@
   <strong>A community-driven platform for bloggers to improve their skills and connect with like-minded individuals</strong>
 </div>
 
-## :construction: Status :construction:
+## :construction: Status
 
 BlogHive is currently _early_ in the development cycle. This app is
 not yet functional but is being actively developed. Please "watch" the project and leave a star and help us build this platform.
@@ -39,8 +39,12 @@ not yet functional but is being actively developed. Please "watch" the project a
 │   │   ├── README.md
 │   │   ├── src
 │   │   │   ├── components
-│   │   │   │   ├── Footer.tsx
-│   │   │   │   └── Header.tsx
+│   │   │   │   ├── atoms
+│   │   │   │   │   └─── ...
+│   │   │   │   ├── molecules
+│   │   │   │   │   └─── ...
+│   │   │   │   └── organisms
+│   │   │   │       └─── ...
 │   │   │   ├── pages
 │   │   │   │   ├── _app.tsx
 │   │   │   │   └── index.tsx
@@ -69,11 +73,6 @@ not yet functional but is being actively developed. Please "watch" the project a
 ├── LICENSE
 ├── package.json
 ├── packages
-│   ├── atoms
-│   │   ├── Button.tsx
-│   │   ├── index.tsx
-│   │   ├── package.json
-│   │   └── tsconfig.json
 │   ├── eslint-config-custom
 │   │   ├── eslint-next.js
 │   │   ├── eslint-server.js

apps/client/next.config.js

@@ -1,5 +1,3 @@
-const withTM = require("next-transpile-modules")(["atoms"]);
-
-module.exports = withTM({
+module.exports = {
   reactStrictMode: true,
-});
+};

apps/client/package.json

@@ -12,18 +12,19 @@
     "format": "prettier --write **/*.{js,ts,tsx,css,md,json,yml,yaml}"
   },
   "dependencies": {
+    "class-variance-authority": "^0.4.0",
+    "clsx": "^1.2.1",
     "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "atoms": "workspace:*"
+    "tailwind-merge": "^1.9.1"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
     "@types/react": "18.0.26",
     "autoprefixer": "^10.4.13",
     "eslint": "8.30.0",
     "eslint-config-custom": "workspace:*",
-    "next-transpile-modules": "10.0.0",
     "postcss": "^8.4.20",
     "prettier": "^2.7.1",
     "prettier-config-custom": "workspace:*",

apps/client/src/components/header.tsx

@@ -0,0 +1,20 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+
+import { Button } from '@/components/ui/button';
+
+import logoTextBlack from '@/public/logo-text-black.png';
+
+const Header = () => (
+  <header className="z-10 sticky top-0 bg-white bg-opacity-70 py-2 shadow-md backdrop-blur-md">
+    <div className='container flex items-center justify-between mx-auto'>
+    <Link href="/">
+      <Image src={logoTextBlack} className="w-1/2" alt="Logo" />
+    </Link>
+    <Button variant="primary" className='border border-red-500'>Join now</Button>
+    </div>
+  </header>
+);
+
+export default Header;

apps/client/src/components/ui/button.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { VariantProps, cva } from "class-variance-authority"
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900",
+          primary:
+          "bg-blue-500 text-white hover:bg-blue-600 dark:bg-slate-50 dark:text-slate-900",
+        destructive:
+          "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
+        outline:
+          "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100",
+        subtle:
+          "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100",
+        ghost:
+          "bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
+        link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent",
+      },
+      size: {
+        default: "h-10 py-2 px-4",
+        sm: "h-9 px-2 rounded-md",
+        lg: "h-11 px-8 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

apps/client/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { VariantProps, cva } from "class-variance-authority"
+import { cn } from '@/lib/utils'
+
+const labelVariants = cva()
+
+export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof labelVariants> {
+  name: string
+}
+
+const Label = React.forwardRef<HTMLSpanElement, LabelProps>(({className, name}, ref) => {
+  return (
+    <span className={cn("rounded-lg border border-blue-600 px-2 py-1 text-blue-600", className)} ref={ref}>
+              {name}
+            </span>
+  )
+})
+
+export {Label}

apps/client/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/client/src/pages/index.tsx

@@ -3,8 +3,8 @@ import Image from 'next/image';
 
 import { feedback, collaboration, learning, community } from '@/assets/index';
 
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
+import Header from '@/components/header';
+import Footer from '@/components/footer';
 import communityImg from '@/public/community.png';
 
 // advanced features section icons
@@ -13,47 +13,46 @@ import computerChatIcon from '@/public/icon-computerChat.png';
 import goalIcon from '@/public/icon-goal.png';
 import handWithPenIcon from '@/public/icon-handWithPen.png';
 import photoCameraFrontIcon from '@/public/icon-photoCameraFront.png';
+import { Label } from '@/components/ui/label';
 
 export default function IndexPage() {
   return (
     <>
       <Header />
-      <main className="min-h-[calc(100vh-(70px))] px-5 py-8 lg:px-16">
-        <div className="hero-section flex w-full flex-col items-center justify-center py-8 text-center">
-          <h1 className="max-w-3xl text-3xl font-bold text-slate-900 md:text-5xl _2md:text-5xl lg:text-5xl ">
+      <main className="container mx-auto min-h-[calc(100vh-(70px))] py-8">
+        <div className="flex w-full flex-col items-center justify-center py-8 text-center">
+          <h1 className="max-w-3xl text-3xl font-bold text-slate-900 md:text-5xl">
             The <span className="text-blue-600">Open Source</span> Blogging
             Platform
           </h1>
-          <p className="text-md mt-8 max-w-2xl text-slate-500">
+          <p className="text-lg mt-8 max-w-2xl text-slate-700">
             BlogHive is a platform designed specifically for writers and
             bloggers to share their work, receive feedback, and collaborate with
             others on their blogging journey.
           </p>
         </div>
-        <section className="community-section mt-8">
+        <section className="mt-8">
           <div className="flex flex-col items-center">
-            <span className="rounded-lg border border-blue-600 px-2 py-1 text-blue-600">
-              Community
-            </span>
-            <p className="mt-4 max-w-lg text-center text-xl font-semibold text-slate-700">
+            <Label name='Community' />
+            <p className="mt-4 max-w-lg text-center text-xl font-semibold text-slate-800">
               BlogHive is more than just a platform for writers and bloggers -
               it's a <span className="text-blue-600">community</span>
             </p>
           </div>
-          <div className="mt-8 grid grid-cols-1 justify-items-center gap-12 lg:grid-cols-2 lg:justify-items-start">
-            <div className="flex max-w-xl flex-col justify-center gap-8 text-slate-600">
-              <p>
+          <div className="grid grid-cols-1 justify-items-center gap-12 lg:grid-cols-2">
+            <div className="flex max-w-xl flex-col justify-center gap-8">
+              <p className='text-lg text-slate-900'>
                 With BlogHive, you can share your work, get feedback, and
                 collaborate with others on your blogging journey.{' '}
               </p>
-              <p>
+              <p className='text-lg text-slate-900'>
                 And as an open source platform, BlogHive is built and maintained
                 by a community of developers and users who are passionate about
                 helping writers and bloggers succeed.
               </p>
             </div>
             <div>
-              <Image src={communityImg} alt="Community Image" />
+              <Image src={communityImg} alt="Community Image" width={400} height={400} />
             </div>
           </div>
         </section>

apps/client/tailwind.config.js

@@ -2,14 +2,6 @@
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    screens: {
-      sm: '320px',
-      md: '640px',
-      _2md: '840px',
-      lg: '1024px',
-      xl: '1280px',
-      _2k: '2000px',
-    },
     extend: {
       colors: {
         slate: {

apps/client/tsconfig.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "@/public/*": ["public/*"]
+      "@/*": ["./src/*"],
+      "@/public/*": ["./public/*"],
     }
   },
   "include": ["src", "next-env.d.ts"],

packages/eslint-config-custom/eslint-next.js

@@ -81,6 +81,11 @@ module.exports = {
       "prefer-spread": "error",
       "prefer-template": "error",
       "quotes": ["error", "single"],
+      "react/button-has-type": [true, {
+        "button": true,
+        "submit": true,
+        "reset": false
+      }],
       "react/function-component-definition": "off",
       "react/prop-types": "off",
       "react/jsx-props-no-spreading": "off",