section 1&2

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,7 @@
+<template>
+   <div>
+      <NuxtPage/>
+   </div>
+
+</template>
+

assets/css/main.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

components/Car/Cards.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="w-full">
+        <CarCard/>
+    </div>
+</template>

components/Car/Detail/Attributes.vue

@@ -0,0 +1,8 @@
+<template>
+            <div class="mr-10 mt-5 border-b pb-5">
+          <div class="flex text-lg mt-2">
+            <p class="rounded text-lime-800 mr-3">X</p>
+            <p>leather Interior</p>
+          </div>
+        </div>
+</template>

components/Car/Detail/Contact.vue

@@ -0,0 +1,15 @@
+<template>
+            <div class="mt-10">  
+          <div class="flex w-[600px] justify-between">
+            <input type="text" class="border p-1" placeholder="Name"/>
+            <input type="text" class="border p-1" placeholder="Email"/>
+            <input type="text" class="border p-1" placeholder="Phone"/>
+          </div>
+          <div class="flex mt-4 w-[600px]">
+            <textarea class="border p-1 w-full" placeholder="message">
+            </textarea>
+          </div>
+          <button class="bg-blue-400 text-white px-10 py-3 roundex mt-4 rounded">Submit</button>
+        </div>
+
+</template>

components/Car/Detail/Description.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="mt-5">
+          <p class="mb-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, quaerat. Dignissimos, esse!</p>
+        </div>
+</template>

components/Car/Hero.vue

@@ -0,0 +1,18 @@
+<template>
+
+<!-- HOME HERO -->
+<div class="relative h-screen w-100 bg-no-repeat bg-cover bg-bottom bg-[url('@/assets/bg.jpg')]">
+      <div class="z-10 absolute w-full h-full flex justify-center items-center">
+        <div class="text-center w-1/2">
+          <h1 class="text-8xl font-serif mb-10 text-white">Find your drive</h1>
+          <CarSearchBar/>
+        </div>
+      </div>
+      <div class="z-1 absolute w-full h-full bg-black opacity-50">
+      </div>
+         
+
+    </div>
+    <!-- HOME HERO -->
+
+</template>

components/Car/SearchBar.vue

@@ -0,0 +1,45 @@
+<script setup>
+  const city = ref("");
+  const cityError = ref(false);
+
+  const handleSearch = () => {
+    if (!city.value) {
+      cityError.value = true;
+      return;
+    }
+    navigateTo(`city/${city.value}/car`);    
+  };
+</script>
+
+<template>
+
+
+  <div 
+    class="
+      font-serif 
+      w-[1000px]
+      text-2xl
+      rounded-full 
+      bg-white 
+      flex 
+      justify-between 
+      overflow-hidden 
+      drop-shadow-2xl 
+      mx-auto"
+      :class="cityError ? 'border-red-500 border' : '' ">
+
+      <input 
+        class="
+            py-3 px-5 
+            w-full 
+            text-2xl 
+            rounded-full 
+            focus:outline-none" 
+        type="text"
+        placeholder="Search by city..." v-model="city"/>
+      <button class="bg-sky-500 px-10text-white" @click="handleSearch">Search</button>
+    </div>
+   
+        
+        
+</template>

components/Car/SideBar.vue

@@ -0,0 +1,30 @@
+<template>
+
+<div class="shadow border w-64 mr-10 z-30 h-[190px]">
+            <div class="p-5 flex justify-between relative cursor-pointer border-b">
+              <h3>Location</h3>
+              <h3 class="text-blue-400 capitalize">Toronto</h3>
+              <!-- <div class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
+                <input type="text" name="" id="" class="border p-1 rounded"/>
+                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
+              </div> -->
+            </div>
+            <div class="p-5 flex justify-between relative cursor-pointer border-b">
+              <h3>Make</h3>
+              <h3 class="text-blue-400 capitalize">Toyota</h3>
+              <!-- <div class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
+                <input type="text" name="" id="" class="border p-1 rounded"/>
+                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
+              </div> -->
+            </div>
+            <div class="p-5 flex justify-between relative cursor-pointer border-b">
+              <h3>Price</h3>
+              <h3 class="text-blue-400 capitalize">Toyota</h3>
+              <!-- <div class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
+                <input type="text" name="" id="" class="border p-1 rounded"/>
+                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
+              </div> -->
+            </div>
+          </div>
+
+</template>

components/NavBar.vue

@@ -0,0 +1,19 @@
+<template>
+    <!-- NAVBAR -->
+    <header 
+        class="sticky 
+            top-0 z-50 
+            flex 
+            justify-between 
+            items-center 
+            space-x-1 
+            order-b 
+            bg-white 
+            p-4 
+            shadow-md">
+        <NuxtLink class="text-3xl font-mono" to="/">cartrader</NuxtLink>
+        
+    </header>
+    <!-- NAVBAR -->
+
+</template>

html/homepage.html

@@ -0,0 +1,55 @@
+<div>
+    <!-- NAVBAR -->
+    <header class="sticky 
+                  top-0 z-50 
+                  flex 
+                  justify-between 
+                  items-center 
+                  space-x-1 
+                  order-b 
+                  bg-white 
+                  p-4 
+                  shadow-md">
+      <a class="text-3xl font-mono" href="">cartrader</a>
+    </header>
+    <!-- NAVBAR -->
+
+    <!-- HOME HERO -->
+    <div class="relative h-screen w-100 bg-no-repeat bg-cover bg-bottom bg-[url('@/assets/bg.jpg')]">
+      <div class="z-10 absolute w-full h-full flex justify-center items-center">
+        <div class="text-center w-1/2">
+          <h1 class="text-8xl font-serif mb-10 text-white">Find your drive</h1>
+          <!-- HOME SEARCH BAR -->
+          <div 
+            class="
+              font-serif 
+              w-[1000px]
+              text-2xl
+              rounded-full 
+              bg-white 
+              flex 
+              justify-between 
+              overflow-hidden 
+              drop-shadow-2xl 
+              mx-auto">
+            <input 
+              class="
+                  py-3 px-5 
+                  w-full 
+                  text-2xl 
+                  rounded-full 
+                  focus:outline-none" 
+              type="text"
+              placeholder="Search by city..."/>
+              <button class="bg-sky-500 px-10text-white">Search</button>
+          </div>
+        <!-- HOME SEARCH BAR -->
+        </div>
+      </div>
+      <div class="z-1 absolute w-full h-full bg-black opacity-50">
+      </div>
+         
+
+    </div>
+    <!-- HOME HERO -->
+  </div>

html/navbar.html

@@ -0,0 +1,14 @@
+ <!-- NAVBAR -->
+ <header class="sticky 
+ top-0 z-50 
+ flex 
+ justify-between 
+ items-center 
+ space-x-1 
+ order-b 
+ bg-white 
+ p-4 
+ shadow-md">
+<a class="text-3xl font-mono" href="">cartrader</a>
+</header>
+<!-- NAVBAR -->

nuxt.config.ts

@@ -0,0 +1,15 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  css: ['~/assets/css/main.scss'],
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+  alias: {
+    //  "@":resolve(__dirname,"/"),
+      assets:"/<rootDir>/assets"
+    },
+})

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.16",
+    "nuxt": "^3.9.0",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0",
+    "vue": "^3.4.3",
+    "vue-router": "^4.2.5"
+  },
+  "dependencies": {
+    "sass": "^1.69.6"
+  }
+}

pages/car/[name]-[id].vue

@@ -0,0 +1,23 @@
+<script setup>
+    const route = useRoute();
+
+    useHead({
+        title :route.params.name 
+    })
+</script>
+
+<template>
+    <div>
+        <NavBar/>
+
+
+        <div class="mx-auto mt-4 max-w-7xl space-y-4 px-4 xs:px-8 sm:px-10 lg:px-16 pb-16 w-3/5">
+        
+            <CarDetailHero/>        
+            <CarDetailAttributes/>
+            <CarDetailDescription/>
+            <CarDetailContact/>
+            
+      </div>
+    </div>
+</template>

pages/city/[city]/car.vue

@@ -0,0 +1,30 @@
+<script setup>
+    const route = useRoute();
+
+    useHead({
+        title : `${route.params.make ? toTitleCase(route.params.make) : 'Cars'} in ${toTitleCase(route.params.city)}`,
+    });
+
+    function toTitleCase(str) {
+        return str.replace(
+            /\w\S*/g,
+            function(txt) {
+                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+            }    
+        );
+    }
+</script>
+
+<template>
+    <div>
+        <NavBar/>
+    </div>
+    
+    <div class="mx-auto mt-4 max-w-7xl space-y-4 px-4 xs:px-8 sm:px-10 lg:px-16 pb-16 w-3/5">
+        <div class="mt-32 flex">
+            <CarSideBar/>            
+            <NuxtPage /> 
+        </div>
+    </div>
+
+</template>

pages/city/[city]/car/[[make]].vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+
+            <CarCards/>
+        </div>
+
+
+
+
+</template>

pages/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+    useHead({
+        title:"Cartrader"
+    });
+</script>
+<template>
+    <div>   
+        <NavBar/>
+        <CarHero/>        
+    </div>
+</template>

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}