Claro Website

A modern, responsive website for Claro, an AI-powered translation app.

🚀 Project Structure

/
├── public/
│   ├── favicon.svg
│   └── privacy-policy.html
├── src/
│   ├── components/
│   │   ├── DownloadApp.astro
│   │   ├── Features.astro
│   │   ├── Footer.astro
│   │   ├── Header.astro
│   │   ├── Hero.astro
│   │   └── Pricing.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   │   ├── features.astro (coming soon page)
│   │   ├── how-it-works.astro (coming soon page)
│   │   ├── help-center.astro (redirects to external site)
│   │   └── faq.astro (redirects to external site)
│   └── styles/
│       └── global.css
└── package.json

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

👀 Features

• Responsive design that works on all devices
• Modern, clean UI with smooth animations
• Integrated Tawk.to live chat widget
• External Help Center and FAQs hosted on tawk.to
• Privacy Policy page
• Pricing information
• Easy navigation with mobile support
• Download section for app store links

🛠️ Technologies Used

• Astro - Fast, modern static site generator
• TailwindCSS - Utility-first CSS framework
• Tawk.to - Live chat and Help Center integration

📝 Customization

• To update content, edit the relevant component files in src/components/
• To add new pages, create new .astro files in src/pages/
• To modify styles, edit src/styles/global.css
• To change images, replace the placeholder images with your own
• The privacy policy is in public/privacy-policy.html
• The Help Center and FAQs are hosted externally at Tawk.to: https://claro-ai.tawk.help/

📦 Deployment

This site can be deployed to any static hosting service:

1. Run npm run build to generate the production build
2. Upload the contents of the dist directory to your hosting service
3. Configure your domain and enjoy your new website!

npm create astro@latest -- --template basics

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

To learn more about the folder structure of an Astro project, refer to our guide on project structure.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.