Skip to content

Commit

Permalink
Merge pull request #88 from Mr-Ben-Merch-Store/animations/color-rewor…
Browse files Browse the repository at this point in the history
…ks/gallery

animations, gallery, and colors
  • Loading branch information
Blue-Robin-Taken authored Aug 31, 2024
2 parents 30795e2 + 1c487ba commit 222ed07
Show file tree
Hide file tree
Showing 8 changed files with 190 additions and 119 deletions.
Binary file added public/gallery/bettereagle_chip.png
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/gallery/mrbenword.png
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/gallery/spacecsdesign.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 1 addition & 9 deletions src/app/components/BottomBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,7 @@ export default function BottomBar() {
return (
<footer className="static bottom-0 bg-zinc-950 p-4 z-5 w-full justify-end">
Developed by the Mr. Ben Merch Store club at Allen High School. To contribute,
see
<a
className="text-textDim"
href="https://github.com/Mr-Ben-Merch-Store/Website"
>
{' '}
our repository
</a>
!
see <a className="text-blue-500" href="https://discord.gg/E8NzVDaAS9"> our discord server!</a>
</footer>
);
}
23 changes: 12 additions & 11 deletions src/app/components/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ export default function Navbar() {
const toggleMenu = () => setIsOpen(!isOpen);

return (
<nav className="bg-zinc-950 p-4 relative">
<nav className="bg-zinc-950 p-4 relative min-h-[65px]">
<div className="flex items-center justify-between mx-10">
{/* Hamburger Menu */}
<button
onClick={toggleMenu}
className="lg:hidden absolute left-0 top-1/2 transform -translate-y-1/2 p-2 z-20"
className="lg:hidden absolute left-0 top-1/2 transform -translate-y-1/2 p-2 z-30"
>
{isOpen ? (
<XMarkIcon className="w-10 h-10 text-textLight" />
Expand All @@ -26,19 +26,20 @@ export default function Navbar() {

{/* Desktop Links */}
<div className="flex items-center space-x-12 text-2xl text-textLight">
<li className="list-none">
<Link href=".">Home</Link>
<li className="nav-link list-none">
<Link href="/">Home</Link>
</li>
<li className="lg:flex hidden">
<li className="nav-link hidden lg:block">
<Link href="/about">About</Link>
</li>
<li className="lg:flex hidden">
<Link href="/store">Store</Link>
</li>
</li>
<li className="nav-link hidden lg:block">
<Link href="/store">Store</Link>
</li>

</div>

{/* Mobile Cart Icon */}
<div className="flex items-center lg:hidden absolute right-0 top-1/2 transform -translate-y-1/2 pr-4">
<div className="flex items-center lg:hidden absolute right-0 top-1/2 transform -translate-y-1/2 pr-4 z-30">
<Link href="/cart">
<ShoppingCartIcon className="w-10 h-10 text-textLight" />
</Link>
Expand All @@ -56,7 +57,7 @@ export default function Navbar() {
<ul
className={`absolute top-16 left-0 bg-zinc-950 ${
isOpen ? 'animate-slide-in-left' : 'hidden'
} text-textLight transition-all duration-300 ease-in-out z-10 w-auto max-w-xs p-4`}
} text-textLight transition-all duration-300 ease-in-out z-20 w-auto max-w-xs p-4`}
>
<li className="py-4 border-b border-gray-700">
<Link href="/">Home</Link>
Expand Down
60 changes: 58 additions & 2 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,45 @@
@tailwind components;
@tailwind utilities;

/* Keyframe animation for the line growing from the middle to the sides */
@keyframes hover-line {
0% {
width: 0;
left: 50%;
}
100% {
width: 100%;
left: 0;
}
}

.nav-link {
position: relative;
cursor: pointer;
}

.nav-link::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background-color: #63d297;
transition: all 0.3s ease;
}

.nav-link:hover::after {
animation: hover-line 0.3s forwards;
}


h1 {
@apply font-semibold text-7xl text-white animate-bounce-in my-10;
}

hr {
@apply bg-textMid h-1 border-none;
@apply bg-textMid h-3 border-none;
}

h2 {
Expand All @@ -27,5 +60,28 @@ footer {
}

p a {
color: #B4FFDC;
color: #3392d1;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

.scrollable-gallery::-webkit-scrollbar {
width: 8px;
}

.scrollable-gallery::-webkit-scrollbar-track {
background: transparent;
}

.scrollable-gallery::-webkit-scrollbar-thumb {
background: #63d297;
border-radius: 10px;
}

.scrollable-gallery::-webkit-scrollbar-thumb:hover {
background: #5ec28d;
}
22 changes: 20 additions & 2 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,30 @@ import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Home',
};

export default function Home() {
return (
<>
<h1>Welcome to the Mr. Ben Merch Store</h1>
<h1>Welcome to Mr.Ben&apos;s Merch Store</h1>
<hr />
<h2 className="my-80 text-textLight">Coming Soon!!</h2>
<h2 className="my-20 text-textLight text-center">Concept designs:</h2>

<div className="w-1/2 mx-auto overflow-x-auto scrollable-gallery">
<div className="whitespace-nowrap scroll-smooth snap-x snap-mandatory flex py-10">
<div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
<img src="gallery/bettereagle_chip.png" alt="Concept 1" className="w-full h-full object-cover rounded-lg" />
</div>
<div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
<img src="gallery/spacecsdesign.jpg" alt="Concept 2" className="w-full h-full object-cover rounded-lg" />
</div>
<div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
<img src="gallery/mrbenword.png" alt="Concept 3" className="w-full h-full object-cover rounded-lg" />
</div>
<div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
<img src="product images/shirt1.png" alt="Concept 4" className="w-full h-full object-cover rounded-lg" />
</div>
</div>
</div>
</>
);
}
194 changes: 99 additions & 95 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,101 +1,105 @@
import type { Config } from 'tailwindcss';

const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
colors: {
theme: '#63d297',
bgBase: '#000000',
bgDim: '#083331',
bgMid: '#0F4948',
bgLight: '#196660',
textDark: '#2F9987',
textDim: '#51CCA6',
textMid: '#6BE3B1',
textLight: '#7EFFC3'

},
fontFamily: {
sans: [
'Lucida Sans',
'Lucida Sans Regular',
'Lucida Grande',
'Lucida Sans Unicode',
'Geneva',
'Verdana',
'sans-serif',
],
},
animation: {
'bounce-in': 'bounce-in-top 1.1s both',
'slide-in-left': 'slide-in-left 0.5s ease-out forwards',
},
keyframes: {
'bounce-in-top': {
'0%': {
transform: 'translateY(-500px)',
'animation-timing-function': 'ease-in',
opacity: '0',
},
'38%': {
transform: 'translateY(0)',
'animation-timing-function': 'ease-out',
opacity: '0',
},

'55%': {
transform: 'translateY(-65px)',
'animation-timing-function': 'ease-in',
},

'72%': {
transform: 'translateY(0)',
'animation-timing-function': 'ease-out',
},

'81%': {
transform: 'translateY(-28px)',
'animation-timing-function': 'ease-in',
},

'90%': {
transform: 'translateY(0)',
'animation-timing-function': 'ease-out',
},

'95%': {
transform: 'translateY(-8px)',
'animation-timing-function': 'ease-in',
},

'100%': {
transform: 'translateY(0)',
'animation-timing-function': 'ease-out',
},
},
'slide-in-left': {
'0%': {
transform: 'translateX(-100%)',
opacity: '0',
},
'100%': {
transform: 'translateX(0)',
opacity: '1',
},
},
},
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
colors: {
theme: '#63d297',
bgBase: '#000000',
bgDim: '#083331',
bgMid: '#0F4948',
bgLight: '#196660',
textDark: '#2F9987',
textDim: '#51CCA6',
textMid: '#6BE3B1',
textLight: '#7EFFC3'
},
fontFamily: {
sans: [
'Lucida Sans',
'Lucida Sans Regular',
'Lucida Grande',
'Lucida Sans Unicode',
'Geneva',
'Verdana',
'sans-serif',
],
},
animation: {
'bounce-in': 'bounce-in-top 1.1s both',
'slide-in-left': 'slide-in-left 0.5s ease-out forwards',
'hover-line': 'hover-line 0.3s ease-out forwards', // New animation for hover line
},
keyframes: {
'bounce-in-top': {
'0%': {
transform: 'translateY(-500px)',
'animation-timing-function': 'ease-in',
opacity: '0',
},
'38%': {
transform: 'translateY(0)',
'animation-timing-function': 'ease-out',
opacity: '0',
},
'55%': {
transform: 'translateY(-65px)',
'animation-timing-function': 'ease-in',
},
'72%': {
transform: 'translateY(0)',
'animation-timing-function': 'ease-out',
},
'81%': {
transform: 'translateY(-28px)',
'animation-timing-function': 'ease-in',
},
'90%': {
transform: 'translateY(0)',
'animation-timing-function': 'ease-out',
},
'95%': {
transform: 'translateY(-8px)',
'animation-timing-function': 'ease-in',
},
'100%': {
transform: 'translateY(0)',
'animation-timing-function': 'ease-out',
},
},
'slide-in-left': {
'0%': {
transform: 'translateX(-100%)',
opacity: '0',
},
'100%': {
transform: 'translateX(0)',
opacity: '1',
},
},
'hover-line': {
'0%': {
width: '0',
left: '50%',
},
'100%': {
width: '100%',
left: '0',
},
},
},
},
plugins: [],
},
plugins: [],
};
export default config;

export default config;

0 comments on commit 222ed07

Please sign in to comment.