<template>
    <v-app style="background-color: #f4f4f4;">
        <DefaultLayout></DefaultLayout>

        <v-row>
            <v-col cols=6 align="center">
                <v-img class="login-picture" max-width="500" src=" ../../images/hutopyblack.png"
                    style="margin-top: 100px; margin-bottom: 50px"></v-img>
                <div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
                    <h1 class="mb-6 text-2xl font-bold">Sign up</h1>
                    <p class="mb-6 texte-gray-500">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                        unknown printer
                        took a galley of type and scrambled it to make a type specimen book. It has survived not
                        only
                        five centuries, but also the leap into electronic typesetting, remaining essentially
                        unchanged. It
                        was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
                        passages,
                        and more recently with desktop publishing software like Aldus PageMaker including versions
                        of Lorem
                        Ipsum.
                    </p>
                    <p class="font-bold">
                        Already have an account?
                        <RouterLink :to="{ 'name': 'login' }" class="underline">Click here</RouterLink> to log in!
                    </p>
                </div>
            </v-col>
            <v-col cols="6" sm="6" md="6" lg="6">
                <div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
                    <form class="space-y-6">
                        <div>
                            <label>Name</label> <br>
                            <input type="text" placeholder="Your full name"
                                class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
                        </div>
                        <div>
                            <label>E-mail</label> <br>
                            <input type="email" placeholder="Your e-mail adress"
                                class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
                        </div>
                        <div>
                            <label>Password</label> <br>
                            <input type="password" placeholder="Your password"
                                class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
                        </div>
                        <div>
                            <label>Repeat Password</label> <br>
                            <input type="password" placeholder="Repeat your password"
                                class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
                        </div>
                        <div>
                            <button class="py-4 px-6 bg-purple-600 text-white rounded-lg">Sign up</button>
                        </div>
                    </form>
                </div>
            </v-col>
        </v-row>


        <FooterLayout></FooterLayout>
    </v-app>
</template>

<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import { RouterLink } from "vue-router";
import FooterLayout from '@/layouts/FooterLayout.vue';
</script>

<style></style>