Improve landing page #14
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. WalkthroughAdds a centralized design token file and font links, replaces global CSS with token-driven styles and animations, extends UI overrides, introduces new hero/demo and illustrations, removes many landing pages/components and newsletter/auth flows, and updates header/footer links and README/docs. No API or exported function signature changes. Changes
Sequence Diagram(s)sequenceDiagram
participant Design as design.json
participant CSS as main.css
participant Nuxt as nuxt.config.ts
participant AppCfg as app.config.ts
participant Index as index.vue
participant Hero as HeroCodeDemo.vue
participant Browser as Browser
Note over Design,CSS: design tokens supply colors, spacing, typography
Design->>CSS: tokens imported / referenced
Nuxt->>Browser: inject font preconnect & Inter stylesheet
AppCfg->>CSS: component overrides applied (button/card/container)
CSS->>Index: utilities, animations, and tokens available
Index->>Hero: render HeroCodeDemo in hero slot
Hero->>Browser: display tabbed code demo + copy action
Index->>Browser: render sections/cards with new illustrations and staggered animations
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (28)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
landing/design.json (1)
1-117: Consider automating design token consumption to prevent drift.The design.json file provides excellent centralized design tokens, but currently values are manually copied into CSS and configuration files. This creates maintenance overhead and risk of inconsistencies.
Consider either:
- Using a design token build tool (e.g., Style Dictionary, Theo) to generate CSS variables and config from this JSON
- Importing and consuming this JSON programmatically in your build process
- If this is intentionally just documentation, consider renaming to something like
design-system-reference.jsonto make the purpose clearerlanding/app/assets/css/main.css (1)
155-159: Consider separating body and paragraph styles.The selector
p, bodyapplies identical typography rules to both the<body>container and<p>elements. Typically, these would be styled separately—body for base font settings and p for paragraph-specific styles.If this is intentional, it's fine, but consider whether body needs separate treatment for base font size that other elements can inherit.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
landing/app/app.config.ts(1 hunks)landing/app/assets/css/main.css(1 hunks)landing/app/pages/blog.vue(0 hunks)landing/app/pages/blog/[slug].vue(0 hunks)landing/app/pages/blog/index.vue(0 hunks)landing/app/pages/changelog/index.vue(0 hunks)landing/app/pages/login.vue(0 hunks)landing/app/pages/pricing.vue(0 hunks)landing/app/pages/signup.vue(0 hunks)landing/design.json(1 hunks)landing/nuxt.config.ts(1 hunks)
💤 Files with no reviewable changes (7)
- landing/app/pages/blog.vue
- landing/app/pages/blog/[slug].vue
- landing/app/pages/login.vue
- landing/app/pages/changelog/index.vue
- landing/app/pages/blog/index.vue
- landing/app/pages/signup.vue
- landing/app/pages/pricing.vue
🔇 Additional comments (4)
landing/app/app.config.ts (1)
6-23: Well-structured UI configuration!The component overrides are cleanly mapped from design.json tokens to Tailwind utilities. The inline comments make the token relationships clear and maintainable.
landing/app/assets/css/main.css (3)
7-119: Comprehensive design token implementation.The CSS custom properties are well-organized and provide a solid foundation for the design system. The color scales and typography tokens are consistently structured.
162-192: Clean component and utility styling.The button hover effects, section constraints, and utility classes are well-implemented and properly reference the design tokens defined above.
127-132: This review comment is based on a misunderstanding of how @nuxt/ui works.@nuxt/ui exposes semantic neutral tokens as CSS variables named --ui-color-neutral-50 … --ui-color-neutral-950 as part of its standard theme system. These variables do not need to be defined in the local
@themeblock—they are provided by the library itself. The code correctly references these variables throughvar()in the.darkmode override, which is the intended usage pattern. The configuration inapp.config.ts(which mapsneutral: 'gray') properly integrates with @nuxt/ui's theming system, so these variables are reliably available and will not cause issues.Likely an incorrect or invalid review comment.
| link: [ | ||
| // Inter font from design.json typography | ||
| { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, | ||
| { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }, | ||
| { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap' } | ||
| ] |
There was a problem hiding this comment.
Set crossorigin to 'anonymous' for fonts.gstatic.com preconnect.
Line 21 should use crossorigin: 'anonymous' instead of an empty string for proper CORS handling when loading font resources from Google Fonts.
Apply this diff:
link: [
// Inter font from design.json typography
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
- { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
+ { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap' }
]📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| link: [ | |
| // Inter font from design.json typography | |
| { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, | |
| { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }, | |
| { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap' } | |
| ] | |
| link: [ | |
| // Inter font from design.json typography | |
| { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, | |
| { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' }, | |
| { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap' } | |
| ] |
🤖 Prompt for AI Agents
In landing/nuxt.config.ts around lines 18 to 23, the preconnect link for
fonts.gstatic.com currently sets crossorigin to an empty string; update it to
crossorigin: 'anonymous' so the preflight/CORS for Google Fonts is handled
correctly. Modify the link entry to set the crossorigin attribute to the string
'anonymous' (not empty) to ensure proper cross-origin requests for font loading.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
landing/app/components/PromotionalVideo.vue(0 hunks)landing/app/pages/index.vue(1 hunks)
💤 Files with no reviewable changes (1)
- landing/app/components/PromotionalVideo.vue
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
landing/app/components/HeroCodeDemo.vue (2)
41-67: Consider clarifying code language in the "send" example.The bash code block includes TypeScript-style
await client.messages.send()starting at line 48, which may confuse users about the actual language being demonstrated. Consider either:
- Separating bash and TypeScript examples into distinct tabs
- Using consistent bash/shell syntax throughout
- Changing the language identifier to reflect the mixed content
- code: `\`\`\`bash + code: `\`\`\`typescript # Send from any email client To: support-abc123@yourdomain.sendook.app Subject: New support request
133-141: Add error handling for clipboard API.The clipboard write operation on line 139 lacks error handling. If the clipboard API is unavailable or permission is denied, the operation will fail silently.
<div class="absolute top-4 right-4 z-10"> <UButton icon="i-lucide-copy" size="xs" color="neutral" variant="subtle" - @click="() => navigator.clipboard.writeText(currentExample.rawCode)" + @click="async () => { + try { + await navigator.clipboard.writeText(currentExample.rawCode) + } catch (err) { + console.error('Failed to copy code:', err) + } + }" /> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
landing/app/assets/css/main.css(1 hunks)landing/app/components/AppFooter.vue(2 hunks)landing/app/components/AppHeader.vue(0 hunks)landing/app/components/HeroCodeDemo.vue(1 hunks)landing/app/pages/index.vue(3 hunks)landing/content/0.index.yml(1 hunks)
💤 Files with no reviewable changes (1)
- landing/app/components/AppHeader.vue
🔇 Additional comments (10)
landing/content/0.index.yml (1)
84-91: LGTM! CTA links updated appropriately.The changes redirect users to documentation and GitHub instead of a signup flow, which aligns with a developer-focused landing page strategy. The addition of
target: _blankfor the external GitHub link follows best practices.landing/app/components/AppFooter.vue (2)
2-20: LGTM! Footer simplification improves clarity.The removal of newsletter subscription logic and the addition of a clean attribution link creates a more focused footer. The external link includes proper
rel="noopener noreferrer"attributes for security.
33-33: GitHub URL correctly updated to match organization.The repository link now points to the correct organization URL (
getrupt/sendook), consistent with the PR's source repository.landing/app/components/HeroCodeDemo.vue (2)
106-165: LGTM! Well-structured component template.The template provides a clean three-tab interface with responsive design considerations (mobile/desktop label handling) and proper use of Vue directives. The MDC integration for code rendering is appropriate.
167-201: Component styles are acceptable for framework overrides.The extensive use of
!importantin the code block styling (lines 169-191) is likely necessary to override default UI framework styles. While generally discouraged, this is a common pattern when customizing third-party component libraries.landing/app/assets/css/main.css (3)
122-159: LGTM! Typography system is well-implemented.The typography rules properly utilize the design tokens with appropriate font sizes, weights, line heights, and letter spacing for each heading level. Dark mode overrides are cleanly separated.
162-192: Component styles provide good UX polish.The button and card hover effects (transform and shadow) add nice visual feedback. The section container with 1440px max-width is a standard responsive pattern. Utility classes properly reference the design tokens.
195-243: LGTM! Animation implementation is performant and polished.The entrance animations use transform and opacity properties, which are GPU-accelerated and performant. The staggered delays create a nice sequential reveal effect, and the cubic-bezier easing provides smooth motion. Well done!
landing/app/pages/index.vue (2)
51-51: HeroCodeDemo component usage is correct.The previous review concern about this component not existing has been resolved—
HeroCodeDemo.vueis included in this PR. The component requires no props, so the usage is correct as-is.
62-80: LGTM! Animation classes correctly integrated.The
animate-sectionandanimate-cardclasses align with the animation definitions inmain.css. The dynamic animation delay calculation (index * 100ms) provides the same staggered entrance effect defined in the CSS, while allowing it to work with any number of items.
| /* Font Family - Inter as primary from design.json */ | ||
| --font-sans: 'Inter', 'SF Pro Display', 'Helvetica Neue', sans-serif; | ||
|
|
||
| /* Primary - Green (accent.green from design.json) */ | ||
| --color-primary-50: #e6f9f3; | ||
| --color-primary-100: #ccf3e7; | ||
| --color-primary-200: #99e7cf; | ||
| --color-primary-300: #66dbb7; | ||
| --color-primary-400: #33cf9f; | ||
| --color-primary-500: #00A36C; | ||
| --color-primary-600: #008256; | ||
| --color-primary-700: #006241; | ||
| --color-primary-800: #00412b; | ||
| --color-primary-900: #002116; | ||
| --color-primary-950: #00100b; | ||
|
|
||
| /* Secondary - Text colors from design.json */ | ||
| --color-secondary-50: #f7f7f7; | ||
| --color-secondary-100: #efefef; | ||
| --color-secondary-200: #dfdfdf; | ||
| --color-secondary-300: #cfcfcf; | ||
| --color-secondary-400: #9A9A9A; | ||
| --color-secondary-500: #4A4A4A; | ||
| --color-secondary-600: #3a3a3a; | ||
| --color-secondary-700: #2a2a2a; | ||
| --color-secondary-800: #1E1E1E; | ||
| --color-secondary-900: #141414; | ||
| --color-secondary-950: #0a0a0a; | ||
|
|
||
| /* Blue - Accent from design.json */ | ||
| --color-blue-50: #e8f5fb; | ||
| --color-blue-100: #d1ebf7; | ||
| --color-blue-200: #a3d7ef; | ||
| --color-blue-300: #75c3e7; | ||
| --color-blue-400: #47afdf; | ||
| --color-blue-500: #5BA5D9; | ||
| --color-blue-600: #4984ad; | ||
| --color-blue-700: #376382; | ||
| --color-blue-800: #254257; | ||
| --color-blue-900: #12212b; | ||
| --color-blue-950: #091016; | ||
|
|
||
| /* Yellow - Accent from design.json */ | ||
| --color-yellow-50: #fffaeb; | ||
| --color-yellow-100: #fff5d6; | ||
| --color-yellow-200: #ffebad; | ||
| --color-yellow-300: #ffe085; | ||
| --color-yellow-400: #ffd65c; | ||
| --color-yellow-500: #FFCC33; | ||
| --color-yellow-600: #cca329; | ||
| --color-yellow-700: #997a1f; | ||
| --color-yellow-800: #665214; | ||
| --color-yellow-900: #33290a; | ||
| --color-yellow-950: #1a1405; | ||
|
|
||
| /* Orange - Accent from design.json */ | ||
| --color-orange-50: #fef7eb; | ||
| --color-orange-100: #fdefd7; | ||
| --color-orange-200: #fbdfaf; | ||
| --color-orange-300: #f9cf87; | ||
| --color-orange-400: #f7bf5f; | ||
| --color-orange-500: #F6B23E; | ||
| --color-orange-600: #c58e32; | ||
| --color-orange-700: #946b25; | ||
| --color-orange-800: #624719; | ||
| --color-orange-900: #31240c; | ||
| --color-orange-950: #181206; | ||
|
|
||
| /* Gray - Neutral with design.json background */ | ||
| --color-gray-50: #F7F8F6; | ||
| --color-gray-100: #f0f1ef; | ||
| --color-gray-200: #e1e3df; | ||
| --color-gray-300: #d2d5cf; | ||
| --color-gray-400: #9A9A9A; | ||
| --color-gray-500: #737373; | ||
| --color-gray-600: #525252; | ||
| --color-gray-700: #404040; | ||
| --color-gray-800: #262626; | ||
| --color-gray-900: #171717; | ||
| --color-gray-900: #1E1E1E; | ||
| --color-gray-950: #0a0a0a; | ||
|
|
||
| /* Illustration Colors from design.json */ | ||
| --color-sky-blue: #C9E7F5; | ||
| --color-sand: #F2C986; | ||
| --color-forest: #4B8C5A; | ||
| --color-cliff: #D1692D; | ||
|
|
||
| /* Custom Design Tokens from design.json */ | ||
| --spacing-xs: 8px; | ||
| --spacing-sm: 16px; | ||
| --spacing-md: 24px; | ||
| --spacing-lg: 40px; | ||
| --spacing-xl: 64px; | ||
| --spacing-xxl: 96px; | ||
|
|
||
| --border-radius-card: 16px; | ||
| --border-radius-button: 9999px; | ||
|
|
||
| --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05); | ||
|
|
||
| /* Typography from design.json */ | ||
| --font-size-h1: 48px; | ||
| --font-size-h2: 32px; | ||
| --font-size-h3: 24px; | ||
| --font-size-body: 18px; | ||
| --font-size-caption: 14px; | ||
|
|
||
| --line-height-h1: 1.2; | ||
| --line-height-h2: 1.3; | ||
| --line-height-h3: 1.4; | ||
| --line-height-body: 1.6; | ||
| --line-height-caption: 1.5; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
Verify design tokens match design.json source.
The CSS tokens reference design.json as their source throughout the comments. Please ensure the color ramps, spacing values, typography scales, and other tokens accurately reflect the values defined in landing/design.json.
🏁 Script executed:
#!/bin/bash
# Description: Verify design.json exists and compare key token values
echo "=== Checking if design.json exists ==="
fd -t f "design.json" landing/
echo -e "\n=== Extracting sample token values from design.json if it exists ==="
if [ -f "landing/design.json" ]; then
echo "Primary color (should match --color-primary-500: #00A36C):"
jq -r '.colors.accent.green // "not found"' landing/design.json
echo -e "\nSpacing values (should match --spacing-* tokens):"
jq -r '.spacing // "not found"' landing/design.json
echo -e "\nTypography font family (should match Inter):"
jq -r '.typography.fontFamily // "not found"' landing/design.json
else
echo "design.json not found in landing directory"
fiLength of output: 447
🏁 Script executed:
#!/bin/bash
# Description: Comprehensive verification of all design tokens
echo "=== Verifying Border Radius Tokens ==="
echo "CSS has: --border-radius-card: 16px; --border-radius-button: 9999px;"
jq -r '.borderRadius // "not found"' landing/design.json
echo -e "\n=== Verifying Shadow Token ==="
echo "CSS has: --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05);"
jq -r '.shadow // "not found"' landing/design.json
echo -e "\n=== Verifying Typography Scales ==="
echo "Font sizes in CSS:"
echo " h1: 48px, h2: 32px, h3: 24px, body: 18px, caption: 14px"
jq -r '.typography.fontSize // "not found"' landing/design.json
echo -e "\n=== Verifying Line Heights ==="
echo "Line heights in CSS:"
echo " h1: 1.2, h2: 1.3, h3: 1.4, body: 1.6, caption: 1.5"
jq -r '.typography.lineHeight // "not found"' landing/design.json
echo -e "\n=== Verifying Secondary Color Ramp (sample) ==="
echo "CSS --color-secondary-500: #4A4A4A"
jq -r '.colors.secondary["500"] // "not found"' landing/design.json
echo -e "\n=== Verifying Blue Color Ramp (sample) ==="
echo "CSS --color-blue-500: #5BA5D9"
jq -r '.colors.blue["500"] // "not found"' landing/design.json
echo -e "\n=== Verifying Illustration Colors ==="
echo "CSS has: sky-blue: #C9E7F5, sand: #F2C986, forest: #4B8C5A, cliff: #D1692D"
jq -r '.colors.illustration // "not found"' landing/design.json
echo -e "\n=== Full colors structure for detailed comparison ==="
jq -r '.colors // "not found"' landing/design.jsonLength of output: 1198
CSS token comments incorrectly claim design.json as source for most tokens—design.json only contains base accent colors and text colors, not the extensive color ramps, border-radius, shadow, or typography tokens.
Verification shows design.json contains only:
- Base accent colors (green, yellow, orange, blue)
- Text color variants (primary, secondary, muted)
- Illustration colors
The CSS file defines comprehensive color ramps (50–950 variants), border-radius, shadow, and typography scales—none of which exist in design.json. Comments throughout lines 7-119 incorrectly attribute these to design.json. Either update design.json with the complete token definitions or correct the CSS comments to remove the from design.json attribution for unsourced tokens.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
landing/app/pages/index.vue (1)
51-51: Verify HeroCodeDemo component is now present.The past review flagged this component as missing. According to the AI summary, HeroCodeDemo.vue should have been introduced in this PR at
landing/app/components/HeroCodeDemo.vue. Please confirm the component file exists and is properly implemented.#!/bin/bash # Verify HeroCodeDemo component exists and check its basic structure echo "=== Checking if HeroCodeDemo component exists ===" fd -t f "HeroCodeDemo.vue" landing/app/components/ echo -e "\n=== Verifying component has valid Vue template ===" rg -n "template|script|defineComponent" landing/app/components/HeroCodeDemo.vue 2>/dev/null || echo "Component not found or empty"
🧹 Nitpick comments (1)
landing/app/pages/index.vue (1)
81-82: Staggered animation implementation looks good.The inline animation delay creates a nice staggered reveal effect. This approach is straightforward and works well.
If you prefer to avoid inline styles, you could use CSS custom properties:
- :style="{ animationDelay: `${index * 100}ms` }" + :style="{ '--animation-delay': `${index * 100}ms` }"Then in your CSS:
.animate-card { animation-delay: var(--animation-delay, 0ms); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
landing/app/pages/index.vue(2 hunks)
🔇 Additional comments (1)
landing/app/pages/index.vue (1)
62-62: CSS classes are properly defined.The
animate-sectionclass is defined inlanding/app/assets/css/main.css(line 217), along with the accompanyinganimate-cardclass (line 222) and its animation delay variants. Both classes referenced in the Vue component are correctly present in the expanded global styles.
| <CoreFeaturesIllustration v-if="section.title === 'Core Features'" /> | ||
| <SpeedIllustration v-else-if="section.title === 'Built for Speed'" /> | ||
| <ImagePlaceholder v-else /> |
There was a problem hiding this comment.
String-based conditional rendering is fragile.
The conditional rendering relies on exact string matches of section.title, which couples component logic to user-facing content. If a content editor changes "Core Features" to "Key Features" in the YAML, the illustration will silently break and fall back to ImagePlaceholder.
Consider adding a dedicated identifier field (e.g., section.type or section.illustration) to the YAML schema instead of matching on display titles:
- <CoreFeaturesIllustration v-if="section.title === 'Core Features'" />
- <SpeedIllustration v-else-if="section.title === 'Built for Speed'" />
+ <CoreFeaturesIllustration v-if="section.illustration === 'core-features'" />
+ <SpeedIllustration v-else-if="section.illustration === 'speed'" />
<ImagePlaceholder v-else />Then update your YAML content to include:
sections:
- title: "Core Features"
illustration: "core-features"
# ... other fields🤖 Prompt for AI Agents
In landing/app/pages/index.vue around lines 64-66, the template currently uses
fragile string-based checks on section.title to choose illustrations; add and
use a dedicated field in the section data (e.g., section.illustration or
section.type) instead of matching display titles, update the YAML to include
that identifier for each section, and change the template conditionals to switch
on that new field (e.g., v-if="section.illustration === 'core-features'") so
presentation logic no longer depends on editable copy; ensure backward
compatibility by falling back to title-based checks only if the new field is
absent.
🧩 Analysis chain
Verify illustration components exist.
Please confirm that the newly referenced illustration components are present in the codebase:
- CoreFeaturesIllustration.vue
- SpeedIllustration.vue
- ImagePlaceholder.vue
🏁 Script executed:
#!/bin/bash
# Verify all illustration components exist
echo "=== Checking for illustration components ==="
fd -t f "CoreFeaturesIllustration.vue|SpeedIllustration.vue|ImagePlaceholder.vue" landing/app/components/
echo -e "\n=== Listing all Vue components in landing/app/components/ ==="
fd -t f ".vue$" landing/app/components/ | head -20Length of output: 602
Missing illustration components will cause runtime errors.
The code references CoreFeaturesIllustration and SpeedIllustration components that do not exist in landing/app/components/. Only ImagePlaceholder.vue exists. These missing components must be created or the conditional logic updated to handle all code paths with existing components.
Missing files:
landing/app/components/CoreFeaturesIllustration.vuelanding/app/components/SpeedIllustration.vue
🤖 Prompt for AI Agents
In landing/app/pages/index.vue lines 64-66, the template references
CoreFeaturesIllustration and SpeedIllustration which don't exist and will cause
runtime errors; either create
landing/app/components/CoreFeaturesIllustration.vue and
landing/app/components/SpeedIllustration.vue as simple SFCs (can delegate to the
existing ImagePlaceholder or include the intended SVG/markup) and export default
a component, or change the conditional to use only existing components (e.g.,
render ImagePlaceholder for those branches); also ensure the new components are
imported or registered where index.vue expects them so the template resolves
without errors.
Summary by CodeRabbit
New Features
Refactor
Chores