Skip to content

Commit

Permalink
add video bg
Browse files Browse the repository at this point in the history
  • Loading branch information
@saboooor
saboooor committed Dec 4, 2024
1 parent a6195f7 commit e4b27fa
Show file tree
Hide file tree
Showing 8 changed files with 29 additions and 179 deletions.
Binary file added public/videos/hero.jpg
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 public/videos/shook.webm
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion src/components/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default component$(() => {
</button>
</div>
<div class={{
'lum-card': true,
'lum-card lum-bg-gray-900/50': true,
'flex overflow-y-auto max-h-[calc(100dvh-300px)] mx-2 sm:mx-0 backdrop-blur-xl': true,
'mt-2': menu.value,
'opacity-0 sm:opacity-100 pointer-events-none sm:pointer-events-auto': !menu.value,
Expand Down
153 changes: 0 additions & 153 deletions src/routes/colors/index.tsx
View file

This file was deleted.

4 changes: 0 additions & 4 deletions src/routes/halal/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import { Blobs } from '@luminescent/ui-qwik';
import Icon from '~/components/svg/Icon';

export default component$(() => {
return (
<section class="flex flex-col mx-auto max-w-6xl px-6 items-center justify-center text-center min-h-[100svh] pt-20">
<div class="relative fade-in mb-10 w-full sm:w-96 h-32 flex justify-center">
<Blobs color="yellow" class={{
'opacity-50': true,
}} />
<div class="z-10">
<Icon width={119} height={150} id="mobile"/>
</div>
Expand Down
21 changes: 7 additions & 14 deletions src/routes/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import { Link } from '@builder.io/qwik-city';
import { Blobs } from '@luminescent/ui-qwik';

import Logo from '~/components/svg/Logo';
import Icon from '~/components/svg/Icon';
Expand All @@ -12,18 +11,12 @@ export default component$(() => {
return (
<section class="flex mx-auto max-w-6xl px-6 items-center justify-center min-h-[100svh] pt-20">
<div class="hidden sm:flex relative justify-start align-center mr-auto max-w-[50%]">
<div class="absolute top-32 left-10 h-96 w-96">
<Blobs color="yellow" />
</div>
<div class="z-10 animate-in fade-in slide-in-from-top-8 anim-duration-1000" style="max-width: 60%" >
<Logo width={476} height={600} id="pc"/>
</div>
</div>
<div class="text-center justify-center">
<div class="flex sm:hidden relative justify-center align-center w-full mb-10">
<div class="absolute -top-10 w-64 h-64">
<Blobs color="yellow" />
</div>
<div class="z-10 animate-in fade-in slide-in-from-top-8 anim-duration-1000">
<Icon width={160} id="mobile"/>
</div>
Expand All @@ -43,14 +36,14 @@ export default component$(() => {
<Link href="/menu" class={{
'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
'text-gray-100 hover:!text-white border-gray-900': true,
'bg-burger-500 hover:lum-bg-burger-700 bg-gradient-to-b from-burger-500/50 to-burger-700': true,
'lum-bg-burger-700/5 hover:lum-bg-burger-700 bg-gradient-to-b from-burger-500/50 to-burger-700': true,
}}>
<BookOutline width="24" class="fill-current w-5 sm:w-auto sm:mr-1" /> View the menu
</Link>
<Link href="/halal" class={{
'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
'text-gray-100 hover:!text-white border-gray-900': true,
'bg-burger-500 hover:lum-bg-burger-700 bg-gradient-to-b from-burger-500/50 to-burger-700': true,
'lum-bg-burger-700/5 hover:lum-bg-burger-700 bg-gradient-to-b from-burger-500/50 to-burger-700': true,
}}>
<Halal width="24" class="fill-current w-5 sm:w-auto sm:mr-1" /> Halal
</Link>
Expand All @@ -59,14 +52,14 @@ export default component$(() => {
<a href="tel:+1 (905) 427 4377" class={{
'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
'text-gray-100 hover:!text-white border-gray-900': true,
'bg-burger-700 hover:lum-bg-burger-800 bg-gradient-to-b from-burger-700/50 to-burger-800': true,
'lum-bg-burger-800/5 hover:lum-bg-burger-800 bg-gradient-to-b from-burger-700/50 to-burger-800': true,
}}>
<CallOutline width="24" class="fill-current w-5 sm:w-auto sm:mr-1" /> +1 (905) 427 4377
</a>
<a href="https://maps.app.goo.gl/Unrrg3uda7AQQs4DA" class={{
'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
'text-gray-100 hover:!text-white border-gray-900': true,
'bg-burger-700 hover:lum-bg-burger-800 bg-gradient-to-b from-burger-700/50 to-burger-800': true,
'lum-bg-burger-800/5 hover:lum-bg-burger-800 bg-gradient-to-b from-burger-700/50 to-burger-800': true,
}}>
<MapOutline width="24" class="fill-current w-5 sm:w-auto sm:mr-1" /> Google Maps
</a>
Expand All @@ -75,23 +68,23 @@ export default component$(() => {
<a href="https://instagram.com/burgersonfleek.ca" class={{
'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
'text-gray-100 hover:!text-white border-gray-900': true,
'bg-burger-800 bg-gradient-to-b from-burger-800/50': true,
'bg-transparent border-[#dd2a7baa] bg-gradient-to-b from-burger-800/50': true,
'to-[#dd2a7baa] hover:lum-bg-[#dd2a7baa]': true,
}}>
<LogoInstagram width="24" class="fill-current w-5 sm:w-auto" />
</a>
<a href="https://facebook.com/burgersonfleek.ca" class={{
'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
'text-gray-100 hover:!text-white border-gray-900': true,
'bg-burger-800 bg-gradient-to-b from-burger-800/50': true,
'bg-transparent border-[#1877f2aa] bg-gradient-to-b from-burger-800/50': true,
'to-[#1877f2aa] hover:lum-bg-[#1877f2aa]': true,
}}>
<LogoFacebook width="24" class="fill-current w-5 sm:w-auto" />
</a>
<a href="https://tiktok.com/@burgersonfleek.ca" class={{
'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
'text-gray-100 hover:!text-white border-gray-900': true,
'bg-burger-800 bg-gradient-to-b from-burger-800/50': true,
'bg-transparent border-[#ee1d52aa] bg-gradient-to-b from-burger-800/50': true,
'to-[#ee1d52aa] hover:lum-bg-[#ee1d52aa]': true,
}}>
<LogoTiktok width="24" class="fill-current w-5 sm:w-auto" />
Expand Down
14 changes: 14 additions & 0 deletions src/routes/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@
import { component$, Slot } from '@builder.io/qwik';
import Nav from '~/components/Nav';
import Footer from '~/components/Footer';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
const loc = useLocation();
return (
<main>
<video
class={{
'transition-all duration-1000 fixed top-0 overflow-hidden -z-10 w-full h-full object-cover opacity-10': true,
'blur-xl scale-110': loc.url.pathname != '/',
}}
autoplay
muted
preload="auto"
poster="/videos/hero.jpg"
>
<source src="/videos/shook.webm" type="video/mp4"/>
</video>
<Nav />
<Slot />
<Footer />
Expand Down
14 changes: 7 additions & 7 deletions src/routes/menu/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default component$(() => {
<div class="flex flex-wrap gap-4 pt-5 pb-10">
{beefburgers.map((item, i) => {
return <div key={i} class={{
'lum-card': true,
'lum-card lum-bg-gray-900/50': true,
'flex-1 flex-row sm:flex-col min-w-[18rem] gap-6': true,
}}>
<div class="mb-4">
Expand Down Expand Up @@ -92,7 +92,7 @@ export default component$(() => {
<div class="flex flex-wrap gap-4 pt-5 pb-10">
{chickenburgers.map((item, i) => {
return <div key={i} class={{
'lum-card': true,
'lum-card lum-bg-gray-900/50': true,
'flex-1 sm:flex-col min-w-[18rem] gap-6': true,
}}>
<div class="mb-4">
Expand Down Expand Up @@ -120,7 +120,7 @@ export default component$(() => {
<div class="flex flex-wrap gap-4 pt-5 pb-10">
{veggieburgers.map((item, i) => {
return <div key={i} class={{
'lum-card': true,
'lum-card lum-bg-gray-900/50': true,
'flex-1 sm:flex-col min-w-[18rem] gap-6': true,
}}>
<div class="mb-4">
Expand Down Expand Up @@ -148,7 +148,7 @@ export default component$(() => {
<div class="grid sm:grid-cols-2 gap-4 pt-5 pb-10">
{steaksandwiches.map((item, i) => {
return <div key={i} class={{
'lum-card': true,
'lum-card lum-bg-gray-900/50': true,
'flex-1 sm:flex-col min-w-[18rem] gap-6': true,
}}>
<div class="mb-4">
Expand Down Expand Up @@ -176,7 +176,7 @@ export default component$(() => {
<div class="flex flex-wrap gap-4 pt-5 pb-10">
{extras.map((item, i) => {
return <div key={i} class={{
'lum-card': true,
'lum-card lum-bg-gray-900/50': true,
'flex-1 min-w-[18rem]': true,
}}>
<Header class={{
Expand Down Expand Up @@ -204,7 +204,7 @@ export default component$(() => {
<div class="flex flex-wrap gap-4 pt-5 pb-10">
{sides.map((item, i) => {
return <div key={i} class={{
'lum-card': true,
'lum-card lum-bg-gray-900/50': true,
'flex-1 min-w-[18rem]': true,
}}>
<Header class={{
Expand Down Expand Up @@ -232,7 +232,7 @@ export default component$(() => {
<div class="flex flex-wrap gap-4 pt-5 pb-10">
{drinks.map((drink, i) => {
return <div key={i} class={{
'lum-card': true,
'lum-card lum-bg-gray-900/50': true,
'flex-1 min-w-[18rem]': true,
}}>
<Header class={{
Expand Down

0 comments on commit e4b27fa

Please sign in to comment.