muayjtp/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated about page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-29 01:08:54 -05:00
parent a78a989083
commit e8501f8446
4 changed files with 81 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
donutshop_ecommerce/public/about-founder1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
donutshop_ecommerce/public/about-founder2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 MiB

34
donutshop_ecommerce/src/app/about/page.js
View file

@ -1,4 +1,3 @@
"use client"
import Image from 'next/image'
import React from 'react'
@ -9,7 +8,7 @@ const AboutPage = () => {
<>
<div className='w-full h-full lg:h-screen flex flex-col relative'>
<p className='text-center mt-20 uppercase text-6xl md:text-[90px] lg:text-[125px] xl:text-[150px] leading-none text-black font-extrabold tracking-tighter drop-shadow-[0_3px_3px_rgba(45,45,45,0.5)] px-5'>our story</p>
<Image src='/donut-story.jpg' width={1600} height={1600} alt='home-hero' className='w-full h-[400px] sm:h-full object-cover -mt-5 sm:-mt-10 -z-10'/>
<Image src='/donut-story.jpg' width={1600} height={1600} alt='about-story' className='w-full h-[400px] sm:h-full object-cover -mt-5 sm:-mt-10 -z-10'/>
</div>
<div className='bg-[#FAF3E8] -mt-10 w-full h-full rounded-t-3xl'>
<div className='max-w-4xl mx-auto'>
@ -22,7 +21,7 @@ const AboutPage = () => {
<svg width="159" height="406" viewBox="0 0 159 406" fill="none" xmlns="http://www.w3.org/2000/svg" className='absolute -mt-20'><path d="M147.909 405.212C148.569 405.713 149.51 405.584 150.01 404.924L158.174 394.172C158.674 393.512 158.546 392.571 157.886 392.07C157.226 391.569 156.285 391.698 155.784 392.358L148.528 401.915L138.97 394.659C138.311 394.159 137.37 394.287 136.869 394.947C136.368 395.607 136.496 396.548 137.156 397.049L147.909 405.212ZM38.4791 0.233987C23.3568 28.9106 5.51875 76.4686 1.12258 126.046C-3.27307 175.618 5.75683 227.476 44.7273 264.351L46.7892 262.171C8.75375 226.182 -0.243382 175.416 4.11086 126.311C8.46457 77.2124 26.1533 30.039 41.1327 1.63335L38.4791 0.233987ZM44.7273 264.351C83.1605 300.717 108.28 331.68 124.062 355.58C139.879 379.532 146.242 396.278 147.33 404.221L150.302 403.814C149.122 395.198 142.46 377.997 126.566 353.927C110.638 329.806 85.3619 298.67 46.7892 262.171L44.7273 264.351Z" fill="#DB001C"/></svg>
</div>
<div className='flex justify-center items-center pb-10 sm:pb-20 px-5 sm:px-10'>
<Image src='/story.jpg' width={1000} height={1000} className='w-[800px] h-[500px] rounded-3xl object-cover'/>
<Image src='/story.jpg' width={1000} height={1000} alt='about-story-arrow' className='w-[800px] h-[500px] rounded-3xl object-cover'/>
</div>
<div className='flex flex-col gap-4 pt-0 pb-20 px-5 sm:px-10 text-center text-xl sm:text-2xl lg:text-3xl'>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sed do eiusmod tempor incididunt.</p>
@ -30,6 +29,35 @@ const AboutPage = () => {
</div>
</div>
</div>
<div className='bg-[#E1AFD1] -mt-10 w-full h-full rounded-t-3xl pb-20'>
<div className='max-w-4xl mx-auto'>
<div className='flex flex-col gap-4 pt-20 lg:pt-40 pb-10 sm:pb-20 px-5 sm:px-10 text-center text-lg sm:text-2xl lg:text-3xl'>
<p className='uppercase font-extrabold text-4xl sm:text-5xl md:text-6xl text-[#FFE6E6] drop-shadow-[0_3px_3px_rgba(45,45,45,1)]'>Meet the founders</p>
</div>
<div className='flex flex-col gap-4 md:gap-0 md:flex-row px-5 sm:px-10 justify-center items-center'>
<div className="flip-card w-[350px] lg:w-[400px] h-[400px] lg:h-[600px] px-2">
<div className="flip-card-inner rounded-3xl">
<div className="flip-card-front1 rounded-3xl">
<Image src='/about-founder1.jpg' width={1600} height={1600} alt='about-story' className='h-full rounded-3xl object-cover'/>
</div>
<div className="flip-card-back rounded-3xl">
<h3>Hello</h3>
</div>
</div>
</div>
<div className="flip-card w-[350px] lg:w-[400px] h-[400px] lg:h-[600px] px-2">
<div className="flip-card-inner rounded-3xl">
<div className="flip-card-front2 rounded-3xl">
<Image src='/about-founder2.jpg' width={1600} height={1600} alt='about-story' className='h-full rounded-3xl object-cover'/>
</div>
<div className="flip-card-back rounded-3xl">
<h3>Hello</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}

52
donutshop_ecommerce/src/app/globals.css
View file

@ -39,10 +39,58 @@ div.tabs > *{
div.tabs > *.active{
@apply bg-pink-500 text-white font-semibold
}
/*=====about card flip=====*/
.flip-card{
background-color: transparent;
perspective: 1000px;
}
.flip-card-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.flip-card:focus{
outline: 0;
}
.flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner{
transform: rotateY(180deg);
}
.flip-card-front1, .flip-card-back, .flip-card-front2, .flip-card-back{
position: absolute;
width: 100%;
height: 100%;
}
.flip-card-front1{
z-index: 2;
}
.flip-card-front2{
z-index: 2;
}
.flip-card-back{
background: white;
color: black;
transform: rotateY(180deg);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
h3{
font-size: 20px;
font-family: Verdana, sans-serif;
font-weight: bold;
color: black;
}
/*=====Responsive=====*/
@media (min-width: 765px){
.letter {
transform-origin: 0 70px;
}
}
}