Design a pixel-perfect, beautifully polished Notion-style homepage UI exactly like the second image provided. Focus on recreating the elegant structure, spacing, typography, and minimalistic layout precisely. Here are the detailed design instructions:

---

🔲 Canvas & Layout

• Background color: #FAFAFA (pure white with slightly soft tone).
• Total page padding: 24px from left/right on large desktop.
• Fixed max content width: 1280px.
• Layout type: 2-column layout (Sidebar fixed on left, content area scrollable).

---

📁 Sidebar (Left Column)

• Width: 248px.
• Background: #F7F6F3 or #FBFBFA (soft off-white).
• Padding: 16px on all sides.
• Border-right: subtle 1px solid #EAEAEA.

🔸 Sidebar Typography

• Font: Inter, system font fallback.
• Font size:
  • Top workspace name: 15px, medium weight.
  • Menu Items: 14px, normal weight.
• Color: #37352F (dark neutral).
• Active item (like "Home"): background #EBEBE9, border-radius 6px, padding 8px.

🔸 Sidebar Icons

• Size: 18px x 18px.
• Left-aligned with 8px spacing from text.
• Use Lucide or Feather icon style (outline, modern).

🔸 Section Headers

• Font size: 11px, uppercase, #9B9A97, letter-spacing 0.08em.
• Margin-bottom: 6px.

🔸 Hover & Active States

• Hover background: #F2F1EF.
• Active background: #EAE9E5.

---

💻 Top Bar

• Height: 48px.
• Background: #FBFBFA with subtle drop shadow 0 1px 2px rgba(0,0,0,0.05).
• Text: “Good evening, [username]”
• Font: Inter SemiBold, size: 20px, color: #37352F.

---

🔍 Search Bar / Query Input

• Width: 100%, max 720px.
• Height: 48px.
• Border-radius: 8px.
• Padding: 12px 16px.
• Border: 1px solid #DADADA.
• Font: Inter, size: 14px, color: #6E6D7A.
• Placeholder: slightly lighter #A8A7AF.
• Inner box shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04).

---

📦 Button Tabs (Ask | Research | Build)

• Tab size: 36px height, auto-width, min 64px.
• Padding: 6px 12px.
• Font: 13px, medium, rounded corners 6px.
• Active tab background: #EAEAEA, bold text.
• Inactive: transparent background with hover #F3F2EF.

---

🗂️ Recently Visited Section

• Section title font: 13px, weight medium, color: #888884.
• Margin-bottom between title and items: 12px.

🧱 Cards (New Page, Second Brain, etc.)

• Card Size: 136px width, auto-height, border-radius: 12px.
• Padding: 16px.
• Background: #FFFFFF.
• Box-shadow: 0 1px 4px rgba(0,0,0,0.04).
• Gap between cards: 12px.
• Font: 13px, semi-bold title, subtitle in #9B9A97, font-weight normal.

---

📆 Upcoming Events

• Font: 13px normal.
• Date block: 48px x 48px, centered number, #EBEBE9 background, border-radius: 10px.
• Text: muted #888884.
• New Event link: underline, blue color #0056D2.

---

⚙️ Settings Section

• Font: 13px, icon: 16px, spacing: 10px between icon and label.
• Hover: background #F3F2EF, cursor pointer.

---

🌐 Font System

• Primary Font: Inter
• Font Weights:
  • Headers: 600
  • Body: 400–500
• Sizes:
  • Page Title: 20px
  • Secondary text: 13px
  • Captions or helper text: 11px

---

🖼️ Shadows & Depth

• Cards: 0px 1px 3px rgba(0, 0, 0, 0.08)
• Inputs: inset 0px 1px 2px rgba(0, 0, 0, 0.04)
• Hover Elevation: slight lift using transform: scale(1.01) and stronger shadow

---

🧩 Micro Details

• Rounded corners for all elements: 8px standard, 12px for cards.
• Use motion.div or framer-motion for subtle UI animations (hover-in).
• Icon spacing: always 8px from text.
• Sections separated with 24px spacing.
• Divider line color: #E3E3E3, margin: 20px 0.

---

🧠 Extra Notes:

• Ensure smooth transitions between hover states using transition: all 0.2s ease-in-out.
• Make everything consistent: font spacing, corner radius, and icon alignment.

---

🎯 Output Goal: Create a pixel-perfect, ultra-smooth, minimalistic and elegant UI just like the second screenshot. Match every spacing, icon size, corner rounding, typography, and hierarchy from the inspiration. No visual noise. Everything should feel handcrafted and premium.