BookSync

Layout 12 — Calendar-Centric Scheduling

A production-grade scheduling platform layout with clean white theme, rose accents, and motion animations. Inspired by Cal.com meets Google Calendar.

Features

Week Calendar View

7-column week grid with hour rows (7 AM - 6 PM), clean grid lines, current time indicator, and day headers with date numbers.

White + Rose Theme

Clean white bg (#ffffff), rose-500 (#f43f5e) accent, subtle borders (#f0f0f0). CSS custom properties (--bs-*) for full theme control.

Geist Sans Typography

Clean, modern sans-serif for a professional scheduling feel. 13px body text with proper weight hierarchy.

Mini Calendar Sidebar

Focal point mini calendar widget using react-day-picker. Today highlighted with rose accent. Spring-animated nav indicator with motion.

Event Block System

Rounded event blocks positioned in time grid. Left border colored by type (meeting=blue, call=green, event=purple, maintenance=amber).

Scheduling Domain Pages

6 sub-pages: Bookings (upcoming/past), Availability (weekly grid), Event Types (card grid), Contacts (search table), Settings, About.

Motion Animations

Event Block Animate-In

Signature

Signature animation: Event blocks scale from 0.92 to 1 with opacity fade, staggered by 0.06s per event. Creates a natural populate effect.

Time Slot Highlight Sweep

Signature

Signature animation: Hovering over a time slot triggers a subtle rose-tinted background transition (rgba(244, 63, 94, 0.04)), sweeping across the slot.

Nav Active Indicator

Spring

Spring-animated left bar indicator (stiffness: 500, damping: 30) with layoutId for smooth position transitions between routes.

Sidebar Icon Hover

Interaction

Navigation icons scale to 1.1x on hover and 0.9x on tap using motion whileHover/whileTap for tactile feedback.

Upcoming Events Stagger

Entrance

Sidebar upcoming events slide in from x:-8 with 0.05s stagger delay per item. Creates a natural list populate feel.

Settings Section Transition

Transition

Settings content slides in from x:12 with opacity:0 on section change. Each section animates independently.

Pages

/12-calendarCalendarWeek view with animated event blocks and current time indicator

/12-calendar/bookingsBookingsUpcoming, past, and cancelled bookings with filter tabs

/12-calendar/availabilityAvailabilityWeekly availability grid with toggle slots and date overrides

/12-calendar/event-typesEvent TypesEvent type cards with duration, booking links, and toggle switches

/12-calendar/contactsContactsContact table with search, booking counts, and activity status

/12-calendar/settingsSettingsCalendar integrations, scheduling prefs, notifications, branding, privacy

Technical Details

Framework

Next.js 15 (App Router)

Animation

motion/react ^12.35

Font

Geist Sans

Accent

#f43f5e (rose-500)

Components

shadcn/ui + custom

Layout Pattern

Calendar Sidebar + Week Grid