Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@taricov
taricov committed Aug 13, 2023
0 parents commit 67f43be
Show file tree
Hide file tree
Showing 22 changed files with 6,417 additions and 0 deletions.
8 changes: 8 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
node_modules
*.log*
.nuxt
.nitro
.cache
.output
.env
dist
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# D-Profile

This is a business tool for creating a buiness profile for telling your story and sharing your social links with ur customers without having to do a lot of work and worry about developing a complete website.

![]()
73 changes: 73 additions & 0 deletions components/AppForm/Hero.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<script setup>
</script>
<template>
<section class="bg-white dark:bg-gray-900">
<nav x-data="{ isOpen: false }" class="container p-6 mx-auto lg:flex lg:justify-between lg:items-center">
<div class="flex items-center justify-between">
<a href="/">
<svg width="60" class="ml-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.65 139.81"><defs></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M94.85,5.15,0,139.81,52.44,0H64.19Q83.17,0,94.85,5.15Z"/><polygon class="cls-2" points="52.44 0 0 139.81 0 0 52.44 0"/><path class="cls-3" d="M128.65,69.43q0,22.41-5.1,34.76a57.54,57.54,0,0,1-14.16,20.7A46.32,46.32,0,0,1,89.93,136a100.26,100.26,0,0,1-25.74,3.81H0L126.83,49.42A106.53,106.53,0,0,1,128.65,69.43Z"/><path class="cls-4" d="M126.83,49.42,0,139.81,94.85,5.15a50,50,0,0,1,19.31,14.78,61.41,61.41,0,0,1,11.06,22.42C125.85,44.67,126.38,47,126.83,49.42Z"/></g></g></svg>
</a>

<!-- Mobile menu button -->
<div class="flex lg:hidden">
<button x-cloak @click="isOpen = !isOpen" type="button" class="text-[#723456] hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg x-show="!isOpen" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
</svg>

<svg x-show="isOpen" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>

<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div x-cloak :class="[isOpen ? 'translate-x-0 opacity-100 ' : 'opacity-0 -translate-x-full']" class="absolute inset-x-0 z-20 w-full px-6 py-4 transition-all duration-300 ease-in-out bg-white shadow-md lg:bg-transparent lg:dark:bg-transparent lg:shadow-none dark:bg-gray-900 lg:mt-0 lg:p-0 lg:top-0 lg:relative lg:w-auto lg:opacity-100 lg:translate-x-0 lg:flex lg:items-center">
<div class="flex flex-col space-y-4 lg:mt-0 lg:flex-row lg:-px-8 lg:space-y-0">
<a class="text-[#723456]
transition-colors duration-300 transform lg:mx-8 hover:text-[#723456]/70"
href="#">Home</a>
<a class="transition-colors duration-300 transform lg:mx-8 hover:text-[#723456]/70"
href="#">Components</a>
<a class="transition-colors duration-300 transform lg:mx-8 hover:text-[#723456]/70"
href="#">Pricing</a>
<a class="transition-colors duration-300 transform lg:mx-8 hover:text-[#723456]/70"
href="#">Contact</a>
</div>

<a class="block px-5 py-2 mt-4 text-sm text-center capitalize bg-blue-600 rounded-lg lg:mt-0 hover:text-[#723456]/70
lg:w-auto" href="#">
Get started
</a>
</div>
</nav>

<div class="container px-6 py-16 mx-auto text-center">
<div class="max-w-lg mx-auto">
<h1 class="app-grad bg-clip-text text-transparent font-bold text-center text-[120px] py-6">D-Profile</h1>

<p class="mt-6 text-[#723456]">D-Profile will help you build a profile page - About page - for your company in less than 2 minutes.</p>
<a href="/builder" class="px-5 py-2 mt-6 text-sm font-medium leading-5 text-center capitalize app-grad
rounded-lg lg:mx-0 lg:w-auto focus:outline-none shadow hover:opacity-90 transform hover:-translate-y-1 transition duration-300 !border-0 text-slate-200 ">
Start Now
<icon name="mdi:arrow" class="h-4 w-4" />

</a>
<p class="mt-3 text-sm text-gray-400 ">No credit card required</p>
</div>

<div class="flex justify-center mt-10">
<img class="object-cover w-full h-96 rounded-xl lg:w-4/5" src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80" />
</div>
</div>
</section>
</template>
<style scoped>
.app-grad{
@apply bg-gradient-to-bl from-[#723456] to-[#8a516e]/90
}
.cls-1{fill:#a37389;}
.cls-2{fill:#c198ab;}
.cls-3{fill:#723456;}.cls-4{fill:#8a516e;}
</style>
7 changes: 7 additions & 0 deletions components/AppForm/Hr.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<div class="hidden sm:block" aria-hidden="true">
<div class="py-5">
<div class="border-t border-[#723456]"></div>
</div>
</div>
</template>
140 changes: 140 additions & 0 deletions components/AppForm/Links.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<template>
<base-form-section title="Links" description="Add some links here">
<template #helpertext>
<!-- <p class="mt-1 text-xs text-slate-200">
Icon keys can be found in
<a class="underline" href="https://icones.js.org/"
>https://icones.js.org/</a
>.
</p> -->
</template>
<draggable
:list="modelValue"
item-key="link"
class="list-group"
ghost-class="ghost"
>
<template #item="{ element: link }">
<div class="relative mb-6 group">
<button class="absolute top-2 -left-8">
<icon
name="radix-icons:drag-handle-dots-2"
class="h-6 w-6 text-slate-200 drag-handle"
/>
</button>
<button
@click="removeLink(link)"
class="hidden group-hover:flex items-center justify-center h-6 w-6 rounded-full text-slate-200 absolute -right-3 -top-3"
>
<icon name="fluent:dismiss-24-regular" class="h-4 w-4" />
</button>
<div class="shadow sm:overflow-hidden sm:rounded-md">
<div class="space-y-6 px-4 py-5 sm:p-6">
<div class="grid grid-cols-2 gap-4">
<div>
<label
for="name"
class="block text-sm font-medium text-slate-200"
>Icon Key</label
>
<input
type="text"
name="iconKey"
id="iconKey"
v-model="link.i"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
<div>
<label
for="label"
class="block text-sm font-medium text-slate-200"
>Label (*)</label
>
<input
type="text"
name="label"
id="label"
v-model="link.l"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
<div class="col-span-2">
<label
for="url"
class="block text-sm font-medium text-slate-200"
>URL (*)</label
>
<input
type="url"
name="url"
id="url"
v-model="link.u"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
</div>
<!-- <p
class="mt-2 text-xs text-center text-slate-200"
v-if="!link.l || !link.u"
>
Link shown in preview once label and url are added
</p> -->
</div>
</div>
</div>
</template>
</draggable>
<p class="text-center text-slate-200 ">
Add a new link
</p>
<button
@click="appendLink"
class="mt-2 border-2 text-slate-200 border-slate-300 rounded-lg block w-full py-2"
>
<icon name="fluent:add-circle-24-regular" class="h-6 w-6" />
</button>
</base-form-section>
</template>
<script setup>
import draggable from "vuedraggable";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
modelValue: Array,
});
const appendLink = () => {
props.modelValue.push({
i: "",
l: "",
u: "",
});
emit("update:modelValue", props.modelValue);
};
const removeLink = (link) => {
const index = props.modelValue.indexOf(link);
props.modelValue.splice(index, 1);
emit("update:modelValue", props.modelValue);
};
</script>
<style scoped>
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group {
min-height: 20px;
}
.list-group-item {
cursor: move;
}
.list-group-item i {
cursor: pointer;
}
</style>
18 changes: 18 additions & 0 deletions components/AppForm/Preview.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<template>
<div class="h-screen hidden lg:grid place-items-center bg-[#c198ab]/50">
<div
class="h-[670px] mb-8 w-[340px] overflow-y-auto rounded-[3rem] ring-8 ring-[#723456] overflow-hidden"
>
<templates-simple :acc="data" />
</div>
</div>
</template>
<script setup>
const props = defineProps({
data: {
type: Object,
required: true,
},
});
</script>
<style scoped></style>
59 changes: 59 additions & 0 deletions components/AppForm/Profile.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<template>
<base-form-section
title="Profile"
description="Some public information about you"
>
<div class="shadow sm:overflow-hidden sm:rounded-md">
<div class="space-y-6 px-4 py-5 sm:p-6">
<div class="col-span-6 sm:col-span-3">
<label for="name" class="block text-sm font-medium text-slate-200"
>Company Name</label
>
<input
type="text"
name="name"
id="name"
autocomplete="given-name"
:value="name"
@input="$emit('update:name', $event.target.value)"
class="mt-1 block w-full rounded-md border-[#723456] shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
<div>
<label for="about" class="block text-sm font-medium text-slate-200"
>About The Company</label
>
<div class="mt-1">
<textarea
id="about"
name="about"
rows="3"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm placeholder-slate-400"
placeholder="I am an astronaut"
maxlength="100"
:value="desc"
@input="$emit('update:desc', $event.target.value)"
></textarea>
</div>
</div>

<div class="flex-grow col-span-6 sm:col-span-3">
<label for="photo-url" class="block text-sm font-medium text-slate-200"
>Logo - (url)</label
>
<input
type="text"
name="photo-url"
id="photo-url"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
:value="image"
@input="$emit('update:image', $event.target.value)"
/>
</div>
</div>
</div>
</base-form-section>
</template>
<script setup>
const props = defineProps(["name", "desc", "image"]);
</script>
Loading

0 comments on commit 67f43be

Please sign in to comment.