# Feature Overview (https://21notion.com/en/docs)

import { Download, FileText, Star, BookOpen, Layout, PenTool, CheckSquare, Folder, Map, Globe, Film, Target, Package, Gamepad2, CreditCard, Brain, MousePointer, Zap, Settings, Calculator, Compass, HelpCircle, LifeBuoy, Wrench } from 'lucide-react';

## Basics

Before starting with FLO.W, please understand these basics:

<Cards>
  <Card icon={<Download className="text-purple-500" />} title="Notion Download" href="/docs/notion-download">
    Download and install Notion app
  </Card>

  <Card icon={<FileText className="text-blue-500" />} title="Template Import Guide" href="/docs/template-import-guide">
    Learn how to import and use the Template
  </Card>
</Cards>

## Quick Start

Master FLO.W's core features and get started quickly:

<Cards>
  <Card icon={<BookOpen className="text-blue-500" />} title="Template Overview" href="/docs/basic-feature/template-overview">
    Understand the Template's core design philosophy
  </Card>

  <Card icon={<Layout className="text-green-500" />} title="Homepage Navigation" href="/docs/basic-feature/homepage">
    Learn to use the Template's Homepage and navigation module
  </Card>

  <Card icon={<PenTool className="text-purple-500" />} title="Note System" href="/docs/basic-feature/note-taking">
    Use note-taking functionality
  </Card>

  <Card icon={<CheckSquare className="text-orange-500" />} title="Task Management" href="/docs/basic-feature/task-management">
    Master the task management system
  </Card>

  <Card icon={<Folder className="text-red-500" />} title="Project Management" href="/docs/basic-feature/project-management">
    Manage your projects
  </Card>

  <Card icon={<Map className="text-indigo-500" />} title="Area Management" href="/docs/basic-feature/area">
    Organize different life Areas
  </Card>

  <Card icon={<Globe className="text-cyan-500" />} title="Web Clipper" href="/docs/basic-feature/web-clipper">
    Save web content
  </Card>
</Cards>

***

## Lifestyle Tracking

Use FLO.W to record and manage your life:

<Cards>
  <Card icon={<Film className="text-red-500" />} title="Movie Tracker" href="/docs/lifestyle/movie-tracker">
    Record movie viewing experience and ratings
  </Card>

  <Card icon={<Target className="text-green-500" />} title="Habits Tracker" href="/docs/lifestyle/habits-tracker">
    Build good lifestyle habits
  </Card>

  <Card icon={<Package className="text-orange-500" />} title="Assets Inventory" href="/docs/lifestyle/assets-inventory">
    Manage personal assets and items
  </Card>

  <Card icon={<Gamepad2 className="text-purple-500" />} title="Gaming Tracker" href="/docs/lifestyle/gaming-tracker">
    Record game progress and ratings
  </Card>

  <Card icon={<CreditCard className="text-indigo-500" />} title="Subscription Tracker" href="/docs/lifestyle/subscription-tracker">
    Manage various subscription services
  </Card>
</Cards>

## Advanced Usage

Explore FLO.W's advanced features:

<Cards>
  <Card icon={<Brain className="text-purple-500" />} title="Notion AI" href="/docs/advance-feature/notion-ai">
    Use AI features to boost efficiency
  </Card>

  <Card icon={<MousePointer className="text-blue-500" />} title="Quick Buttons" href="/docs/advance-feature/notion-button">
    Create interactive buttons
  </Card>

  <Card icon={<Zap className="text-yellow-500" />} title="Database Automation" href="/docs/advance-feature/automation">
    Configure automated workflows
  </Card>

  <Card icon={<Calculator className="text-orange-500" />} title="Formula Application" href="/docs/advance-feature/formula">
    Master Notion formula usage
  </Card>
</Cards>

## Property Reference

Learn about the configuration and usage of various Database Properties:

<Cards>
  <Card icon={<FileText className="text-blue-500" />} title="Note Properties" href="/docs/properties/note">
    Configure various Properties for Notes
  </Card>

  <Card icon={<CheckSquare className="text-green-500" />} title="Task Properties" href="/docs/properties/task">
    Set Property fields for Tasks
  </Card>

  <Card icon={<Folder className="text-orange-500" />} title="Project Properties" href="/docs/properties/project">
    Configure Property fields for Projects
  </Card>

  <Card icon={<Compass className="text-purple-500" />} title="Clipper Properties" href="/docs/properties/explore">
    Learn more Property configurations
  </Card>
</Cards>

## FAQ

Encountering problems? Check these common questions:

<Cards>
  <Card icon={<HelpCircle className="text-yellow-500" />} title="Before Purchase" href="/docs/faq/before-purchase">
    Version selection and purchase questions
  </Card>

  <Card icon={<BookOpen className="text-blue-500" />} title="Getting Started" href="/docs/faq/getting-started">
    Onboarding and template import
  </Card>

  <Card icon={<Settings className="text-green-500" />} title="Customization" href="/docs/faq/customization">
    Template modification and personalization
  </Card>

  <Card icon={<Map className="text-purple-500" />} title="System Design" href="/docs/faq/system-design">
    Understanding template design philosophy
  </Card>

  <Card icon={<Wrench className="text-orange-500" />} title="Troubleshooting" href="/docs/faq/troubleshooting">
    Common issues and error fixes
  </Card>

  <Card icon={<LifeBuoy className="text-red-500" />} title="Upgrade & Support" href="/docs/faq/support">
    Version upgrade and technical support
  </Card>
</Cards>

## Technical Support

If you need technical support, join our [Lark community](/docs/faq/support#join-feishu-group)