Merge remote-tracking branch 'upstream/main'

CHANGELOG.md

@@ -1,16 +1,17 @@
-# [1.1.0](https://github.com/bradduy/edtech/compare/v1.0.0...v1.1.0) (2025-02-12)
+# [1.1.0](https://github.com/thanhhoang021095/x-app/compare/v1.0.0...v1.1.0) (2025-02-15)
 
 
 ### Features
 
-* **login:** init form signin + signup ([a9ff6a3](https://github.com/bradduy/edtech/commit/a9ff6a3b06ce5f3417617cb5805287b0839ecfc9))
+* **dashoard:** implement page dashboard ([#4](https://github.com/thanhhoang021095/x-app/issues/4)) ([e0eaa09](https://github.com/thanhhoang021095/x-app/commit/e0eaa09b7c0327827c39fc939ec9496cae6cbda0))
 
-# 1.0.0 (2025-01-31)
+# 1.0.0 (2025-02-12)
 
 
 ### Features
 
-* **homepage:** implement banner section ([d04e372](https://github.com/bradduy/edtech/commit/d04e372a875355ae2b794b26318788cec1c065f3))
+* **homepage:** implement banner section ([#3](https://github.com/thanhhoang021095/x-app/issues/3)) ([bc70bde](https://github.com/thanhhoang021095/x-app/commit/bc70bdec7f7aa04fc5c0ce35aabc668b285ab41f))
+* **login:** init form signin + signup ([#2](https://github.com/thanhhoang021095/x-app/issues/2)) ([a0eae6d](https://github.com/thanhhoang021095/x-app/commit/a0eae6d6c0eb3b02fa81e61f4586669bdfb4b3a3))
 
 ## [3.60.5](https://github.com/ixartz/Next-js-Boilerplate/compare/v3.60.4...v3.60.5) (2024-12-20)
 

package-lock.json

@@ -30,6 +30,7 @@
         "react-dom": "19.0.0",
         "react-hook-form": "^7.54.0",
         "tailwind-merge": "^2.6.0",
+        "usehooks-ts": "^3.1.1",
         "zod": "^3.24.0"
       },
       "devDependencies": {
@@ -24392,7 +24393,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.escaperegexp": {
@@ -37429,6 +37429,20 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.1.tgz",
+      "integrity": "sha512-I4diPp9Cq6ieSUH2wu+fDAVQO43xwtulo+fKEidHUwZPnYImbtkTjzIJYcDcJqxgmX31GVqNFURodvcgHcW0pA==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",

package.json

@@ -49,6 +49,7 @@
     "react-dom": "19.0.0",
     "react-hook-form": "^7.54.0",
     "tailwind-merge": "^2.6.0",
+    "usehooks-ts": "^3.1.1",
     "zod": "^3.24.0"
   },
   "devDependencies": {

src/app/dashboard/page.tsx

@@ -0,0 +1,76 @@
+import JobCard from '@/components/dashboard/JobCard';
+import JobFilters from '@/components/dashboard/JobFilters';
+import SubscribeJob from '@/components/dashboard/SubscribeJob';
+import { Suspense } from 'react';
+
+const jobCategories = [
+  'Design',
+  'Full-stack',
+  'Back-end',
+  'Front-end',
+  'QA Engineer',
+  'Data Engineer',
+  'Mobile',
+  'AI Training & Labeling',
+  'DevOps',
+];
+
+const jobs = [
+  {
+    id: 1,
+    title: 'Software Engineer - Confidential Computing',
+    company: 'Nethermind',
+    logo: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-02-15%20at%2021.58.09-ZsGA1DKAeyYCxqdocTlWoRuaKkhrH1.png',
+    location: 'Anywhere',
+    type: 'Freelancer',
+    postedAt: '2 days ago',
+  },
+  {
+    id: 2,
+    title: 'Marketing Manager - Payments Industry',
+    company: 'HitPay',
+    logo: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-02-15%20at%2021.58.09-ZsGA1DKAeyYCxqdocTlWoRuaKkhrH1.png',
+    location: 'Anywhere',
+    type: 'Full-time',
+    postedAt: '2 days ago',
+  },
+  // Add more jobs as needed
+];
+
+export default function Page() {
+  return (
+    <main className="min-h-screen bg-background pt-20">
+      <div className="container mx-auto px-4 py-8">
+        {/* Categories */}
+        <div className="mb-8 flex flex-wrap gap-2">
+          {jobCategories.map(category => (
+            <button type="button" key={category} className="rounded-full bg-muted px-4 py-2 transition-colors hover:bg-muted/80">
+              {category}
+            </button>
+          ))}
+        </div>
+
+        {/* Filters and Search */}
+        <Suspense fallback={<div>Loading filters...</div>}>
+          <JobFilters />
+        </Suspense>
+
+        {/* Job Listings */}
+        <div className="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-3">
+          <div className="space-y-4 lg:col-span-2">
+            {jobs.map(job => (
+              <JobCard key={job.id} job={job} />
+            ))}
+          </div>
+
+          {/* Newsletter Signup */}
+          <div className="lg:col-span-1">
+            <div className="sticky top-4">
+              <SubscribeJob />
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next';
+import AuthLayout from '@/components/AuthLayout';
 import { Navbar } from '@/components/Navbar';
+import { routing } from '@/libs/i18nNavigation';
 import { isDevMode } from '@/utils/Helpers';
 import { Inter, Outfit } from 'next/font/google';
 import '../styles/global.css';
@@ -26,10 +28,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={routing.defaultLocale} suppressHydrationWarning>
       <body className={`${inter.variable} ${outfit.variable} font-sans antialiased`} suppressHydrationWarning={isDevMode}>
-        <Navbar />
-        {children}
+        <AuthLayout params={{
+          locale: routing.defaultLocale,
+        }}
+        >
+          <Navbar />
+          {children}
+        </AuthLayout>
       </body>
     </html>
   );

src/components/AuthLayout/index.tsx

@@ -0,0 +1,45 @@
+import { ClerkProvider } from '@clerk/nextjs';
+import { setRequestLocale } from 'next-intl/server';
+
+export default async function AuthLayout(props: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  const { locale } = await props.params;
+  setRequestLocale(locale);
+  let signInUrl = '/sign-in';
+  let signUpUrl = '/sign-up';
+  let dashboardUrl = '/dashboard';
+  let afterSignOutUrl = '/';
+
+  signInUrl = `/${signInUrl}`;
+  signUpUrl = `/${signUpUrl}`;
+  dashboardUrl = `/`;
+  afterSignOutUrl = `/${afterSignOutUrl}`;
+
+  return (
+    <ClerkProvider
+      localization={{
+        signIn: {
+          start: {
+            title: 'Sign In',
+          },
+        },
+        signUp: {
+          start: {
+            title: 'Sign Up',
+          },
+        },
+      }}
+      signInUrl={signInUrl}
+      signUpUrl={signUpUrl}
+      signInFallbackRedirectUrl={dashboardUrl}
+      signUpFallbackRedirectUrl={dashboardUrl}
+      afterSignOutUrl={afterSignOutUrl}
+    >
+      <div className="mx-auto flex w-full items-center justify-center pt-32">
+        {props.children}
+      </div>
+    </ClerkProvider>
+  );
+}

src/components/HeroSection.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/atoms';
+import { Button } from '@/components/base';
 import { Download } from 'lucide-react';
 import Image from 'next/image';
 

src/components/Navbar.tsx

@@ -1,9 +1,44 @@
 'use client';
-import { Button, Input } from '@/components/atoms';
-import { Search, Settings } from 'lucide-react';
+
+import { Button, Input } from '@/components/base';
+import { SignOutButton, useUser } from '@clerk/nextjs';
+import { Search } from 'lucide-react';
 import Link from 'next/link';
+import { useMemo } from 'react';
 
 export function Navbar() {
+  const { user, isSignedIn } = useUser();
+
+  const authContent = useMemo(() => {
+    if (isSignedIn) {
+      return (
+        <>
+          <p className="font-heading">
+            Hello,
+            {' '}
+            {user?.firstName}
+          </p>
+          <SignOutButton>
+            <Button variant="destructive" size="default">
+              Sign Out
+            </Button>
+          </SignOutButton>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <Button variant="default" size="default">
+          <Link href="/sign-in">Sign In</Link>
+        </Button>
+        <Button variant="secondary" size="default">
+          <Link href="/sign-up">Sign Up</Link>
+        </Button>
+      </>
+    );
+  }, [isSignedIn, user]);
+
   return (
     <nav className="fixed top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container flex h-14 items-center">
@@ -15,11 +50,8 @@ export function Navbar() {
         </div>
 
         <div className="flex items-center gap-6 text-sm">
-          <Link href="/documentation" className="hover:text-foreground/80">
-            Documentation
-          </Link>
-          <Link href="/changelog" className="hover:text-foreground/80">
-            Changelog
+          <Link href="/dashboard" className="hover:text-foreground/80">
+            Dashboard
           </Link>
           <Link href="/about" className="hover:text-foreground/80">
             About
@@ -31,12 +63,11 @@ export function Navbar() {
             <Search className="absolute left-2 top-2.5 size-4 text-muted-foreground" />
             <Input placeholder="Search documentation..." className="pl-8" />
           </div>
-          <Link href="/blog" className="hover:text-foreground/80">
-            Blog
-          </Link>
-          <Button variant="ghost" size="icon">
-            <Settings className="size-5" />
-          </Button>
+
+          <div className="flex items-center gap-4">
+            {authContent}
+          </div>
+
         </div>
       </div>
     </nav>

src/components/{atoms → base}/Badge/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type * as React from 'react';
 import { cn } from '@/utils/Helpers';
 import { cva, type VariantProps } from 'class-variance-authority';

src/components/{atoms → base}/Button/index.tsx

@@ -1,4 +1,5 @@
-/* eslint-disable react-refresh/only-export-components */
+'use client';
+
 import { cn } from '@/utils/Helpers';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { type ButtonHTMLAttributes, type FC, memo, type PropsWithChildren, type Ref } from 'react';
@@ -49,4 +50,5 @@ const Button: FC<ButtonProps> = memo(({
 
 Button.displayName = 'Button';
 
+// eslint-disable-next-line react-refresh/only-export-components
 export { Button, buttonVariants };

src/components/{atoms → base}/Card/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { cn } from '@/utils/Helpers';
 import * as React from 'react';
 

src/components/{atoms → base}/Input/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { cn } from '@/utils/Helpers';
 import { type FC, type InputHTMLAttributes, memo, type Ref } from 'react';
 

src/components/base/Label/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+
+export type LabelProps = {} & React.LabelHTMLAttributes<HTMLLabelElement>;
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, ...props }, ref) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <label
+      ref={ref}
+      className={cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Label.displayName = 'Label';
+
+export { Label };

src/components/base/Select/Select.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import * as React from 'react';
+import { useOnClickOutside } from 'usehooks-ts';
+import { SelectContext } from './SelectContext';
+
+export default function Select({
+  children,
+  value: controlledValue,
+  onChange,
+  defaultValue,
+}: {
+  children: React.ReactNode;
+  value?: string;
+  onChange?: (value: string) => void;
+  defaultValue?: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState(defaultValue || '');
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = () => {
+    setOpen(false);
+  };
+
+  useOnClickOutside<HTMLDivElement>(ref as React.RefObject<HTMLDivElement>, handleClickOutside);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const handleChange = onChange || setInternalValue;
+
+  return (
+    // eslint-disable-next-line react/no-unstable-context-value
+    <SelectContext.Provider value={{ open, setOpen, value, onChange: handleChange }}>
+      <div className="relative" ref={ref}>{children}</div>
+    </SelectContext.Provider>
+  );
+}

src/components/base/Select/SelectContent.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+import { SelectContext } from './SelectContext';
+
+export default function SelectContent({ children, className }: { children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('SelectContent must be used within Select');
+  }
+
+  if (!context.open) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'absolute top-full z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover text-popover-foreground shadow-md',
+        className,
+      )}
+    >
+      <div className="p-1">{children}</div>
+    </div>
+  );
+}

src/components/base/Select/SelectContext.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+
+export const SelectContext = React.createContext<SelectContextType | undefined>(undefined);
+
+type SelectContextType = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  value: string;
+  onChange: (value: string) => void;
+};

src/components/base/Select/SelectItem.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+import { SelectContext } from './SelectContext';
+
+export default function SelectItem({
+  children,
+  value,
+  className,
+}: {
+  children: React.ReactNode;
+  value: string;
+  className?: string;
+}) {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('SelectItem must be used within Select');
+  }
+
+  const isSelected = context.value === value;
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        context.onChange(value);
+        context.setOpen(false);
+      }}
+      className={cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground',
+        isSelected && 'bg-accent text-accent-foreground',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}

src/components/base/Select/SelectTrigger.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+import { SelectContext } from './SelectContext';
+
+export default function SelectTrigger({ children, className }: { children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('SelectTrigger must be used within Select');
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => context.setOpen(!context.open)}
+      className={cn(
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+    >
+      {children}
+      <ChevronDown className="size-4 opacity-50" />
+    </button>
+  );
+}

src/components/base/Select/SelectValue.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+import { SelectContext } from './SelectContext';
+
+export default function SelectValue({ placeholder }: { placeholder?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('SelectValue must be used within Select');
+  }
+
+  return <span>{context.value || placeholder}</span>;
+}

src/components/base/Select/index.tsx

@@ -0,0 +1,5 @@
+export { default as Select } from './Select';
+export { default as SelectContent } from './SelectContent';
+export { default as SelectItem } from './SelectItem';
+export { default as SelectTrigger } from './SelectTrigger';
+export { default as SelectValue } from './SelectValue';

src/components/base/Switch/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+
+type SwitchProps = {
+  onCheckedChange?: (checked: boolean) => void;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(({ className, onCheckedChange, ...props }, ref) => {
+  return (
+    <label className="relative inline-flex cursor-pointer items-center">
+      <input
+        type="checkbox"
+        className="peer sr-only"
+        ref={ref}
+        onChange={e => onCheckedChange?.(e.target.checked)}
+        {...props}
+      />
+      <div
+        className={cn(
+          'relative h-6 w-11 rounded-full bg-muted transition-colors peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-checked:bg-primary',
+          className,
+        )}
+      >
+        <div className="absolute left-[2px] top-[2px] size-5 rounded-full bg-white transition-transform peer-checked:translate-x-5" />
+      </div>
+    </label>
+  );
+});
+Switch.displayName = 'Switch';
+
+export { Switch };

src/components/{atoms → base}/index.ts

@@ -2,3 +2,6 @@ export { Badge } from './Badge';
 export { Button } from './Button';
 export * from './Card';
 export { Input } from './Input';
+export { Label } from './Label';
+export * from './Select';
+export { Switch } from './Switch';

src/components/dashboard/JobCard.tsx

@@ -0,0 +1,45 @@
+import { Button, Card } from '@/components/base';
+import { Clock, Globe } from 'lucide-react';
+import Image from 'next/image';
+
+type JobCardProps = {
+  job: {
+    id: number;
+    title: string;
+    company: string;
+    logo: string;
+    location: string;
+    type: string;
+    postedAt: string;
+  };
+};
+
+export default function JobCard({ job }: JobCardProps) {
+  return (
+    <Card className="rounded-lg border bg-card p-6">
+      <div className="flex items-start gap-4">
+        <div className="relative size-12 overflow-hidden rounded-full border">
+          <Image src={job.logo || '/placeholder.svg'} alt={`${job.company} logo`} fill className="object-cover" />
+        </div>
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold">{job.title}</h3>
+          <p className="text-muted-foreground">{job.company}</p>
+          <div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
+            <div className="flex items-center gap-1">
+              <Globe className="size-4" />
+              {job.location}
+            </div>
+            <div className="flex items-center gap-1">
+              <Clock className="size-4" />
+              {job.type}
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Button variant="outline">View</Button>
+          <Button>Apply</Button>
+        </div>
+      </div>
+    </Card>
+  );
+}

src/components/dashboard/JobFilters.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch } from '@/components/base';
+import { Search } from 'lucide-react';
+
+export default function JobFilters() {
+  return (
+    <div className="rounded-lg bg-card p-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Location" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="anywhere">Anywhere</SelectItem>
+            <SelectItem value="vietnam">Vietnam</SelectItem>
+            <SelectItem value="usa">USA</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Job type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="fulltime">Full-time</SelectItem>
+            <SelectItem value="freelancer">Freelancer</SelectItem>
+            <SelectItem value="contract">Contract</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Experience" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="entry">Entry Level</SelectItem>
+            <SelectItem value="mid">Mid Level</SelectItem>
+            <SelectItem value="senior">Senior Level</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input className="pl-9" placeholder="E.g. Front-end developer" type="search" />
+        </div>
+      </div>
+
+      <div className="mt-4 flex items-center justify-end space-x-2">
+        <Switch id="closed-jobs" />
+        <Label htmlFor="closed-jobs">Hide closed jobs</Label>
+      </div>
+    </div>
+  );
+}

src/components/dashboard/SubscribeJob.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { Button, Input } from '@/components/base';
+import { Send } from 'lucide-react';
+
+export default function SubscribeJob() {
+  return (
+    <div className="rounded-lg border bg-card p-6">
+      <div className="mb-6">
+        <div className="mb-4 flex size-10 items-center justify-center rounded-full bg-primary/10">
+          <Send className="size-5 text-primary" />
+        </div>
+        <h2 className="mb-2 text-xl font-semibold">New remote jobs in your inbox, every Monday!</h2>
+        <p className="text-muted-foreground">Subscribe to get your 5-minute brief on tech remote jobs every Monday</p>
+      </div>
+      <form className="space-y-4">
+        <Input type="email" placeholder="Enter your email" />
+        <Button className="w-full">Subscribe</Button>
+      </form>
+    </div>
+  );
+}

src/components/homepage/AnnouncementBanner.tsx

@@ -1,4 +1,4 @@
-import { Badge, Button } from '@/components/atoms';
+import { Badge, Button } from '@/components/base';
 import { ChevronDown, Download } from 'lucide-react';
 import Image from 'next/image';
 

src/components/homepage/CustomizationSection.tsx

@@ -1,4 +1,4 @@
-import { Badge, Card } from '@/components/atoms';
+import { Badge, Card } from '@/components/base';
 import Image from 'next/image';
 
 export function CustomizationSection() {

src/components/homepage/FeatureSection.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@/components/atoms';
+import { Badge } from '@/components/base';
 import { Cloud, FileText, Grid, MessageCircle, Server } from 'lucide-react';
 import Image from 'next/image';