1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "react";
3import { createRoot } from "react-dom/client";
4import App from "./components/App";
5
13 // Render the App component
14 root.render(
15 <React.StrictMode>
16 <App />
17 </React.StrictMode>
18 );
19} else {
44 <div id="root"></div>
45
46 <!-- React and ReactDOM -->
47 <script type="importmap">
48 {
49 "imports": {
50 "react": "https://esm.sh/react@18.2.0",
51 "react-dom": "https://esm.sh/react-dom@18.2.0",
52 "react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
53 }
54 }
20โโโ frontend/
21โ โโโ index.html # Main HTML template
22โ โโโ app.tsx # Frontend React application
23โ โโโ components/ # UI components
24โ โโโ ResumeUpload.tsx # Resume upload component
43- SQLite for data storage
44- Hono for backend API
45- React for frontend UI
46- TailwindCSS for styling
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1# DriveLuxe - Modern Car Rental Website
2
3A responsive and modern car rental website built with React and TailwindCSS. This project showcases a luxury car rental service with smooth animations, responsive design, and a clean user interface.
4
5## Features
8- **Modern UI**: Clean and elegant design with attention to detail
9- **Animations**: Subtle animations and transitions for enhanced user experience
10- **Multi-page Layout**: Complete website with multiple pages using React Router
11- **Car Listings**: Browse, filter, and search for available cars
12- **Booking System**: Multi-step booking process with form validation
23## Technologies Used
24
25- **React**: Frontend library for building the user interface
26- **TailwindCSS**: Utility-first CSS framework for styling
27- **React Router**: For navigation between pages
28- **Hono**: Lightweight web framework for the backend
29
41โ โโโ pages/ # Page components
42โ โโโ index.html # Main HTML template
43โ โโโ index.jsx # React entry point
44โโโ README.md
45```
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import Button from '../components/ui/Button.jsx';
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import { useParams, useNavigate } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';
4import Button from '../components/ui/Button.jsx';
5import { getCarById, cars } from '../data/cars.js';
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import { useParams, useNavigate } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';
4import Button from '../components/ui/Button.jsx';
5import { getCarById, cars } from '../data/cars.js';
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import { useSearchParams } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';
4import CarCard from '../components/ui/CarCard.jsx';
5import Button from '../components/ui/Button.jsx';
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import { Link } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';
4import Button from '../components/ui/Button.jsx';
5import CarCard from '../components/ui/CarCard.jsx';
