philip-cat/healthy_oil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

recipe page updated

Browse Source
This commit is contained in:
philipcheung
2025-11-02 20:36:37 +08:00
parent 736578dae3
commit 999ee7224f
9 changed files with 333 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/new_ui/truth.tsx
View File

@@ -118,7 +118,7 @@ function Truth() {
justifyItems={'center'}
initial={{ opacity: 0 }}
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
transition={{ duration: 0.5, ease: "easeOut" }}
>
<MotionText
@@ -129,7 +129,7 @@ function Truth() {
textAlign={'center'}
initial={{ opacity: 0, y: -30 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }}
transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
transition={{ duration: 0.5, delay: 0.1, ease: "easeOut" }}
>
想知道更多食用油健康真相？
</MotionText>
@@ -145,7 +145,7 @@ function Truth() {
alignItems={'flex-start'}
initial={{ opacity: 0, y: 50 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
>
{truthItems.map((item, index) => (
<MotionHStack
@@ -155,7 +155,7 @@ function Truth() {
alignItems={'flex-start'}
initial={{ opacity: 0, x: -30 }}
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
transition={{ duration: 0.5, delay: 0.6 + index * 0.1, ease: "easeOut" }}
transition={{ duration: 0.5, delay: 0.3 + index * 0.1, ease: "easeOut" }}
>
<MotionImage
src={item.image}
@@ -163,7 +163,7 @@ function Truth() {
w={{ base: '70px', sm: '70px', md: '70px', lg: '70px', xl: '70px' }}
initial={{ opacity: 0, scale: 0.8 }}
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 0.4, delay: 0.8 + index * 0.1, ease: "easeOut" }}
transition={{ duration: 0.4, delay: 0.4 + index * 0.1, ease: "easeOut" }}
/>
<MotionText
className="font-noto-sans font-regular"
@@ -171,7 +171,7 @@ function Truth() {
fontSize={{ base: 'lg', sm: 'lg', md: 'lg', lg: 'lg', xl: 'lg' }}
initial={{ opacity: 0, y: 20 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.5, delay: 1.0 + index * 0.1, ease: "easeOut" }}
transition={{ duration: 0.5, delay: 0.5 + index * 0.1, ease: "easeOut" }}
>
{renderDescription(item.desc)}
</MotionText>
@@ -192,7 +192,7 @@ function Truth() {
align={'center'}
initial={{ opacity: 0, scale: 0.9 }}
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
>
<MotionText
className='font-melle font-xbold'
@@ -200,7 +200,7 @@ function Truth() {
fontSize={{ base: '2xl', sm: '3xl', md: '5xl', lg: '5xl', xl: '5xl' }}
initial={{ opacity: 0 }}
animate={isTitleInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.6, delay: 0.6, ease: "easeOut" }}
transition={{ duration: 0.4, delay: 0.3, ease: "easeOut" }}
>
點擊以下銷售點連結
</MotionText>
@@ -215,28 +215,28 @@ function Truth() {
align={'flex-end'}
initial={{ opacity: 0, y: 30 }}
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
>
{shopImages.map((image, index) => (
<motion.div
key={index}
initial={{ opacity: 0, scale: 0.8 }}
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 0.5, delay: 0.8 + index * 0.2, ease: "easeOut" }}
transition={{ duration: 0.5, delay: 0.5 + index * 0.2, ease: "easeOut" }}
>
<MotionStack
w='250px'
justify={'flex-end'}
initial={{ opacity: 0, y: 20 }}
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.4, delay: 1.0 + index * 0.2, ease: "easeOut" }}
transition={{ duration: 0.4, delay: 0.6 + index * 0.2, ease: "easeOut" }}
>
<Link href={image.link}>
<MotionImage src={image.image} cursor="pointer" fit={'contain'}
loading="lazy"
initial={{ opacity: 0, scale: 0.9 }}
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
transition={{ duration: 0.3, delay: 1.2 + index * 0.2, ease: "easeOut" }}
transition={{ duration: 0.3, delay: 0.7 + index * 0.2, ease: "easeOut" }}
/>
</Link>
</MotionStack>
@@ -251,7 +251,7 @@ function Truth() {
mt={10}
initial={{ opacity: 0, scale: 0.9 }}
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
transition={{ duration: 0.6, delay: 1.6, ease: "easeOut" }}
transition={{ duration: 0.6, delay: 0.6, ease: "easeOut" }}
>
<Link href={"https://www.facebook.com/profile.php?id=100064320806613"}
_focus={{ outline: 'none', boxShadow: 'none' }}
@@ -263,7 +263,7 @@ function Truth() {
loading='lazy'
initial={{ opacity: 0, y: 20 }}
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.5, delay: 1.8, ease: "easeOut" }}
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
/>
</Link>
</MotionStack>