Skip to content

Commit

Permalink
added new style and simplified the home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@taricov
taricov committed Feb 12, 2024
1 parent 62c0cb1 commit 139bb33
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 34 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
106 changes: 75 additions & 31 deletions components/AppForm/Hero.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<script setup>
</script>
<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">
<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 -->
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">
Expand All @@ -22,7 +21,7 @@
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
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">
Expand All @@ -39,30 +38,66 @@
</div>
</div>
</nav>
</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] pt-6">D-Profile</h1>
<div class="container px-6 py-24 mx-auto text-center">
<div class="max-w-lg mx-auto">
<svg
width="200"
class="mx-auto"
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>
<h1
class="font-bold text-center text-[70px] pt-6 text-transparent bg-clip-text bg-gradient-to-tr from-[#682d4c] to-[#3d2130]/60"
>
D-Profile
</h1>

<p class="mb-10 text-[#723456] text-xl font-semibold bg-[#723456]/20 rounded-md py-3">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-xl font-semibold 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="transform rotate-180 h-4 w-4" /> -->

</a>
<p class="mt-3 text-sm text-gray-800/70 ">It's Free and <a class="mt-3 text-sm text-gray-800 hover:text-gray-800/50 transition duration-300" href="/buildergi">
Open-source</a>
</p>
<div className="rounded-full overflow-hidden mb-10 bg-gradient-to-tr from-[#361829]/80 to-[#723456]/90">
<p
class="text-transparent bg-clip-text bg-gradient-to-tr from-[#a8658b] to-[#fff]/80 text-md font-semibold rounded-full py-1 px-5 shadow"
>
Auto-build your company's profile and share it with others.
</p>
</div>
<a
href="/builder"
class="px-5 py-2 mt-6 text-lg font-semibold text-center capitalize text-transparent bg-gradient-to-tr from-[#723456] to-[#542240] 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="transform rotate-180 h-4 w-4" /> -->
</a>
<!-- <p class="mt-3 text-sm text-gray-800/70 ">It's Free and <a class="mt-3 text-sm text-gray-800 hover:text-gray-800/50 transition duration-300" href="/buildergi">
Open-source</a>
</p> -->
</div>

<div class="flex justify-center mt-10">
<!-- <div class="flex justify-center mt-10">
<img class="object-cover w-full h-96 rounded-xl lg:w-4/5" src="https://i.ibb.co/sqb4QhH/SCR-20230820-211-2.png" />
</div>
</div> -->
</div>
</section>
<a
</section>
<!-- <a
href="https://linkedin.com/in/taricov"
target="_blank"
class="fixed w-full h-24 flex justify-center items-center !border-0 bottom-0 right-0 bg-slate-800 shadow py-1 mx-auto hover:bg-slate-900 hover:text-slate-50 font-medium text-md text-center text-slate-100 app-grad hover:opacity-90 transition duration-300"
Expand All @@ -79,13 +114,22 @@ with love &nbsp;
</span>
</a>
</a> -->
</template>
<style scoped>
.app-grad{
@apply bg-gradient-to-bl from-[#723456] to-[#8a516e]/90
.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;
}
.cls-1{fill:#a37389;}
.cls-2{fill:#c198ab;}
.cls-3{fill:#723456;}.cls-4{fill:#8a516e;}
</style>
</style>
4 changes: 2 additions & 2 deletions pages/builder.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
</div>
</nav> -->
<div class="h-screen grid lg:grid-cols-3 grid-cols-1 divide-x">
<div class="h-screen grid lg:grid-cols-1 grid-cols-1 divide-x">
<div class="col-span-2 h-screen flex flex-col bg-[#c198ab]/50">
<div class="flex-1 overflow-y-auto p-8">
<app-form-profile
Expand Down Expand Up @@ -85,7 +85,7 @@
</a> -->
</div>
</div>
<app-form-preview :data="data" />
<!-- <app-form-preview :data="data" /> -->
<a
href="https://linkedin.com/in/taricov"
target="_blank"
Expand Down
Binary file modified public/.DS_Store
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion utils/transformer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const encodeData = (obj) => {
export const decodeData = (base64) => JSON.parse(decode(base64));

export const urlShortener = async (url) => {

console.log(`url: ${url}`);
let request = await fetch(`https://api.shrtco.de/v2/shorten?url=${encodeURIComponent(url)}`);
let response = await request.json();
console.log(response)
Expand Down

0 comments on commit 139bb33

Please sign in to comment.