Skip to content

Commit

Permalink
1
Browse files Browse the repository at this point in the history
  • Loading branch information
@narr07
narr07 committed Mar 13, 2023
1 parent 65bda46 commit 4217000
Show file tree
Hide file tree
Showing 22 changed files with 8,076 additions and 24 deletions.
37 changes: 35 additions & 2 deletions app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,38 @@
<template>
<div>
<NuxtLayout>
<NuxtPage />
</div>
</NuxtLayout>
</template>

<style>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(0.5rem);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(0.5rem);
}
}
.page-enter-active {
animation: fadeInUp 0.6s forwards;
}
.page-leave-active {
animation: fadeOutDown 0.6s backwards;
}
</style>
38 changes: 37 additions & 1 deletion assets/css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,39 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;


@layer base {
body {
@apply font-coffe-text bg-cTerang selection:text-cTerang selection:bg-cGelap;
}
h1,
h2,
h3,
h4,
h5 {
@apply font-coffe-heading font-black tracking-wider text-cWhite ;

}
}
@font-face {
font-family: "coffe-text";
src: url("@/assets/fonts/Alumatica.woff2") format("woff2"),
url("@/assets/fonts/Alumatica.otf") format("opentype"); /* Safari, Android, iOS */
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}

@font-face {
font-family: "coffe-heading";
src: url("@/assets/fonts/QuentinPro.eot");
src: url("@/assets/fonts/QuentinPro.eot?#iefix") format("embedded-opentype"),
url("@/assets/fonts/QuentinPro.woff2") format("woff2"),
url("@/assets/fonts/QuentinPro.woff") format("woff"),
url("@/assets/fonts/QuentinPro.otf") format("opentype"),
url("@/assets/fonts/QuentinPro.svg#QuentinPro") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
Binary file added assets/fonts/Alumatica-SVG.otf
View file
Binary file not shown.
Binary file added assets/fonts/Alumatica.otf
View file
Binary file not shown.
Binary file added assets/fonts/Alumatica.woff2
View file
Binary file not shown.
Binary file added assets/fonts/QuentinPro.eot
View file
Binary file not shown.
Binary file added assets/fonts/QuentinPro.otf
View file
Binary file not shown.
7,668 changes: 7,668 additions & 0 deletions assets/fonts/QuentinPro.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/fonts/QuentinPro.ttf
View file
Binary file not shown.
Binary file added assets/fonts/QuentinPro.woff
View file
Binary file not shown.
Binary file added assets/fonts/QuentinPro.woff2
View file
Binary file not shown.
40 changes: 40 additions & 0 deletions components/Feature.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<template>
<section class="dark:bg-gray-800 dark:text-gray-100">
<div class="container flex flex-col-reverse mx-auto lg:flex-row">
<div class="flex flex-col px-6 py-8 space-y-6 rounded-sm sm:p-8 lg:p-12 lg:w-1/2 xl:w-2/5 dark:bg-emerald-400 dark:text-gray-900">
<div class="flex space-x-2 sm:space-x-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
<div class="space-y-2">
<p class="text-lg font-medium leading-snug">Lorem ipsum dolor sit amet</p>
<p class="leading-snug">Praesentium ea et neque distinctio quas eius repudiandae quaerat obcaecati voluptatem similique!</p>
</div>
</div>
<div class="flex space-x-2 sm:space-x-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
<div class="space-y-2">
<p class="text-lg font-medium leading-snug">Lorem ipsum dolor sit amet</p>
<p class="leading-snug">Praesentium ea et neque distinctio quas eius repudiandae quaerat obcaecati voluptatem similique!</p>
</div>
</div>
<div class="flex space-x-2 sm:space-x-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
<div class="space-y-2">
<p class="text-lg font-medium leading-snug">Lorem ipsum dolor sit amet</p>
<p class="leading-snug">Praesentium ea et neque distinctio quas eius repudiandae quaerat obcaecati voluptatem similique!</p>
</div>
</div>
</div>
<div class="lg:w-1/2 xl:w-3/5 dark:bg-gray-800">
<div class="flex items-center justify-center p-4 md:p-8 lg:p-12">
<img src="https://source.unsplash.com/640x480/" alt="" class="rounded-lg shadow-lg dark:bg-gray-500 aspect-video sm:min-h-96">
</div>
</div>
</div>
</section>
</template>
42 changes: 42 additions & 0 deletions components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<footer class="dark:bg-gray-800 dark:text-gray-50">
<div class="container flex flex-col p-4 mx-auto divide-gray-400 md:p-8 lg:flex-row">
<ul class="self-center py-6 space-y-4 text-center sm:flex sm:space-y-0 sm:justify-around sm:space-x-4 lg:flex-1 lg:justify-start">
<li>Shop</li>
<li>About</li>
<li>Blog</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
<div class="flex flex-col justify-center pt-6 lg:pt-0">
<div class="flex justify-center space-x-4">
<a rel="noopener noreferrer" href="#" title="Instagram" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-emerald-400 dark:text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="w-4 h-4">
<path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z"></path>
</svg>
</a>
<a rel="noopener noreferrer" href="#" title="Pinterest" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-emerald-400 dark:text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
<path d="M16.021 0c-8.828 0-15.984 7.156-15.984 15.984 0 6.771 4.214 12.552 10.161 14.88-0.141-1.266-0.266-3.203 0.052-4.583 0.292-1.25 1.875-7.943 1.875-7.943s-0.479-0.964-0.479-2.375c0-2.219 1.292-3.88 2.891-3.88 1.365 0 2.026 1.021 2.026 2.25 0 1.37-0.87 3.422-1.323 5.323-0.38 1.589 0.797 2.885 2.365 2.885 2.839 0 5.026-2.995 5.026-7.318 0-3.813-2.75-6.49-6.677-6.49-4.547 0-7.214 3.417-7.214 6.932 0 1.375 0.526 2.854 1.188 3.651 0.13 0.161 0.146 0.302 0.109 0.464-0.12 0.5-0.391 1.599-0.443 1.818-0.073 0.297-0.229 0.359-0.536 0.219-1.99-0.922-3.245-3.839-3.245-6.193 0-5.036 3.667-9.672 10.563-9.672 5.542 0 9.854 3.958 9.854 9.229 0 5.516-3.474 9.953-8.307 9.953-1.62 0-3.141-0.839-3.677-1.839l-1 3.797c-0.359 1.391-1.339 3.135-2 4.193 1.5 0.458 3.078 0.714 4.734 0.714 8.813 0 15.979-7.151 15.979-15.984 0-8.828-7.167-15.979-15.979-15.979z"></path>
</svg>
</a>
<a rel="noopener noreferrer" href="#" title="Twitter" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-emerald-400 dark:text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
<path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
</svg>
</a>
<a rel="noopener noreferrer" href="#" title="Facebook" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-emerald-400 dark:text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
<path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z"></path>
</svg>
</a>
<a rel="noopener noreferrer" href="#" title="Gmail" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-emerald-400 dark:text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
<path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
</svg>
</a>
</div>
</div>
</div>
</footer>
</template>
43 changes: 43 additions & 0 deletions components/Hero.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<template>
<section class="text-gray-600 body-font">
<div
class="container flex flex-col items-center px-5 py-24 mx-auto md:flex-row"
>
<div
class="flex flex-col items-center mb-16 text-center lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 md:items-start md:text-left md:mb-0"
>
<h1
class="mb-4 text-3xl font-medium text-gray-900 title-font sm:text-4xl"
>
Before they sold out <br class="hidden lg:inline-block" />readymade
gluten
</h1>
<p class="mb-8 leading-relaxed">
Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
plant cold-pressed tacos poke beard tote bag. Heirloom echo park
mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon
try-hard chambray.
</p>
<div class="flex justify-center">
<button
class="inline-flex px-6 py-2 text-lg text-white bg-indigo-500 border-0 rounded focus:outline-none hover:bg-indigo-600"
>
Button
</button>
<button
class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-100 border-0 rounded focus:outline-none hover:bg-gray-200"
>
Button
</button>
</div>
</div>
<div class="w-5/6 lg:max-w-lg lg:w-full md:w-1/2">
<img
class="object-cover object-center rounded"
alt="hero"
src="https://dummyimage.com/720x600"
/>
</div>
</div>
</section>
</template>
141 changes: 141 additions & 0 deletions components/NavBar.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<template>
<header class="fixed top-0 z-50 w-full p-4 bg-cPrimary">
<div class="container flex justify-between mx-auto">
<a
rel="noopener noreferrer"
href="#"
aria-label="Back to homepage"
class="flex items-center p-2 font-bold tracking-widest text-white uppercase"
>
Coffe
</a>
<ul class="items-stretch hidden space-x-3 md:flex">
<li class="flex">
<NuxtLink
rel="noopener noreferrer"
to="/"
class="flex items-center px-4"
>
Home
</NuxtLink>
</li>
<li class="flex">
<NuxtLink
rel="noopener noreferrer"
to="/about"
class="flex items-center px-4"
>
About
</NuxtLink>
</li>
<li class="flex">
<NuxtLink
rel="noopener noreferrer"
to="/blog"
class="flex items-center px-4"
>
Blog
</NuxtLink>
</li>
<li class="flex">
<NuxtLink
rel="noopener noreferrer"
to="/"
class="flex items-center px-4"
>
Home
</NuxtLink>
</li>
</ul>
<div class="flex justify-end md:hidden">
<div class="">
<Menu as="div" class="relative inline-block text-left">
<div>
<MenuButton
class="inline-flex justify-center w-full px-4 py-2 font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>
<ChevronDownIcon
class="w-5 h-5 text-violet-200 hover:text-violet-100"
aria-hidden="true"
/>
</MenuButton>
</div>

<transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<MenuItems
class="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div class="px-1 py-1">
<MenuItem v-slot="{ active, close }">
<NuxtLink
@mouseup="close"
to="/"
:class="[
active
? 'bg-emerald-200 dark:bg-emerald-900 '
: 'text-gray-900 dark:text-gray-100 ',
'group flex w-full items-center rounded-md px-2 py-2 ',
]"
><div class="flex flex-row items-center justify-center">
Home
</div>
</NuxtLink>
</MenuItem>
<MenuItem v-slot="{ active, close }">
<NuxtLink
@mouseup="close"
to="/about"
:class="[
active
? 'bg-emerald-200 dark:bg-emerald-900 '
: 'text-gray-900 dark:text-gray-100 ',
'group flex w-full items-center rounded-md px-2 py-2 ',
]"
><div class="flex flex-row items-center justify-center">
About
</div>
</NuxtLink>
</MenuItem>
<MenuItem v-slot="{ active, close }">
<NuxtLink
@mouseup="close"
to="/blog"
:class="[
active
? 'bg-emerald-200 dark:bg-emerald-900 '
: 'text-gray-900 dark:text-gray-100 ',
'group flex w-full items-center rounded-md px-2 py-2 ',
]"
><div class="flex flex-row items-center justify-center">
Blog
</div>
</NuxtLink>
</MenuItem>

</div>

</MenuItems>
</transition>
</Menu>
</div>
</div>
</div>
</header>
</template>
<script setup>
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
import { ChevronDownIcon } from "@heroicons/vue/20/solid";
</script>

<style>
.router-link-active {
@apply font-bold text-cPink;
}
</style>
9 changes: 9 additions & 0 deletions layouts/default.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<template>
<NavBar />
<div class="">
<slot />
</div>
<Footer />
</template>


13 changes: 11 additions & 2 deletions nuxt.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default defineNuxtConfig({
'@nuxtjs/tailwindcss',
'@nuxt/image-edge',
'nuxt-headlessui',
'@twicpics/components/nuxt3',
// '@nuxtjs/fontaine',
],
extends: [
Expand All @@ -15,6 +16,14 @@ export default defineNuxtConfig({
// },
tailwindcss: {
cssPath: '~/assets/css/main.css',
}

},
twicpics: {
domain: 'https://permazix.twic.pics',
anticipation: 0.5,
step: 50
},

app: {
pageTransition: { name: 'page', mode: 'out-in' }
},
})
Loading

0 comments on commit 4217000

Please sign in to comment.