Merge pull request #18 from T1xx1/dev

Restaurant reservation challenge

astro.config.mjs

@@ -7,6 +7,7 @@ import vercel from "@astrojs/vercel/serverless";
 
 // https://astro.build/config
 export default defineConfig({
+   output: "hybrid",
    adapter: vercel({
       webAnalytics: {
          enabled: true
@@ -15,6 +16,5 @@ export default defineConfig({
    integrations: [react(), svelte(), tailwind({
       applyBaseStyles: false,
       nesting: true
-   })],
-   output: 'server',
+   })]
 });

package.json

@@ -16,17 +16,17 @@
       "@radix-ui/react-switch": "^1.1.0",
       "@types/react": "^18.3.3",
       "@types/react-dom": "^18.3.0",
-      "astro": "^4.13.3",
+      "astro": "^4.14.2",
       "class-variance-authority": "^0.7.0",
       "clsx": "^2.1.1",
-      "lucide-react": "^0.427.0",
+      "lucide-react": "^0.428.0",
       "react": "^18.3.1",
       "react-dom": "^18.3.1",
       "sass": "^1.77.8",
-      "sharp": "^0.33.4",
+      "sharp": "^0.33.5",
       "svelte": "^4.2.18",
       "tailwind-merge": "^2.5.2",
-      "tailwindcss": "^3.4.9",
+      "tailwindcss": "^3.4.10",
       "tailwindcss-animate": "^1.0.7",
       "tslib": "^2.6.3",
       "typescript": "^5.5.4"

src/content/components/restaurantreservation/index.astro

@@ -0,0 +1,40 @@
+---
+import { Image } from 'astro:assets';
+
+import cover from './cover.jpg';
+import hearth from './hearth.svg';
+import star from './star.svg';
+---
+
+<div
+   class="bg-yellow-700 bg-opacity-50 rounded-xl px-5 py-14 w-full flex justify-center"
+>
+   <div class="bg-white rounded-xl w-80 space-y-5">
+      <Image src={cover} alt="Cover" class="rounded-t-xl" />
+
+      <div class="px-5 space-y-3">
+         <div class="flex items-center justify-between">
+            <div>
+               <h2 class="text-lg font-medium">Harvest & Hearth</h2>
+               <div class="text-xs font-medium">1 Urban Avenue</div>
+            </div>
+
+            <Image src={hearth} alt="Hearth" class="w-5 h-5 cursor-pointer" />
+         </div>
+
+         <div class="flex gap-1 items-center">
+            <Image src={star} alt="Star" class="w-3 h-3" />
+            <Image src={star} alt="Star" class="w-3 h-3" />
+            <Image src={star} alt="Star" class="w-3 h-3" />
+            <Image src={star} alt="Star" class="w-3 h-3" />
+            <Image src={star} alt="Star" class="w-3 h-3" />
+
+            <div class="text-gray-500 text-xs font-medium">(231 reviews)</div>
+         </div>
+
+         <div class="text-sm">Harvest & Hearth is a modern restaurant featuring creative, locally sourced dishes in a sleek, minimalist setting. It offers artisanal pastas, selected meats, and seasonal vegetables, paired with craft cocktails and organic wines. Ideal for intimate dinners and social gatherings.</div>   
+      </div>
+
+      <button type="button" class="bg-black hover:bg-opacity-90 rounded-b-xl py-3 w-full text-white text-sm">Make a reservation</button>
+   </div>
+</div>

src/content/data/restaurantreservation.json

@@ -0,0 +1,5 @@
+{
+   "title": "Restaurant reservation",
+   "inspo": "https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz9sym4kzh0rsmsuhfvd3.png",
+   "article": "https://dev.to/t1xx1/100frontendchallenge-day-12-restaurant-reservation-akf-temp-slug-3629098"
+}