Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Title: Smooth Tick Option and Explore Button Animation #397

Merged
merged 5 commits into from
Jul 10, 2024
Merged

Title: Smooth Tick Option and Explore Button Animation #397

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
efc3c3a
Update Home.tsx
Prabhatyadav60 Jul 9, 2024
29b8ea4
Update Home.tsx
Prabhatyadav60 Jul 9, 2024
6d2757b
speed up loading process
Prabhatyadav60 Jul 9, 2024
d19b3b8
removed comments
Prabhatyadav60 Jul 10, 2024
ef2d2c6
Merge branch 'VaibhavArora314:main' into main
Prabhatyadav60 Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 84 additions & 30 deletions frontend/src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Link } from "react-router-dom";
import hero from "../assets/hero.png";
import bgHero from "../assets/bgHero.png";
import '../styles/hero.css'
import '../styles/hero.css';
import About from "./About";
import HomePagePost from "./HomePagePosts";
import { TypewriterEffectSmoothDemo } from "../components/HeroText";
Expand All @@ -12,45 +12,99 @@ import FAQ from "../components/FAQ";
import Showcase from "../components/Showcase";
import Features from "../components/Features";
import Category from "./Category";
import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

function Home() {
console.log("Home page rerendered");
const { t } = useTranslation();

document.title='Style Share | Welcome 🙏'

document.title = 'Style Share | Welcome 🙏';

// Define the type for visibleItems as an array of strings
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we remove this comment ? Code is readable so this is unnecessary here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure sir ,Done!

const [visibleItems, setVisibleItems] = useState<string[]>([]);
const [showButton, setShowButton] = useState(false);
const listItems = [
t("hero.list.first"),
t("hero.list.second"),
t("hero.list.third"),
t("hero.list.fourth"),
];

useEffect(() => {
const interval = setInterval(() => {
setVisibleItems((prevItems) => {
if (prevItems.length < listItems.length) {
return [...prevItems, listItems[prevItems.length]];
}
clearInterval(interval);
setTimeout(() => setShowButton(true), 1000);
return prevItems;
});
}, 1600);
return () => clearInterval(interval);
}, [listItems]);

return (
<div className="-mt-7 min-h-screen text-[#000435] dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
<div className="w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
<div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
<div className="flex flex-col justify-center">
<h1>
<TypewriterEffectSmoothDemo />
</h1>
<h1 className='md:text-3xl sm:text-3xl font-medium py-2'>{t("hero.subheading")}</h1>
<p className="text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] font-semibold">
<span> ✅ {t("hero.list.first")}</span><br />
<span> ✅ {t("hero.list.second")}</span><br />
<span> ✅ {t("hero.list.third")}</span><br />
<span> ✅ {t("hero.list.fourth")}</span><br />
</p>
<Link
to="/app/posts"
className=' text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-9'>
<MagicButton title={t("hero.button")} />
</Link>
<div className="-mt-7 min-h-screen text-[#000435] dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
<style>
{`
.tick-container {
position: relative;
overflow: hidden;
height: 120px; /* Adjust height to fit all tick items */
}
.tick-item {
position: relative;
height: 24px; /* Adjust height of each tick item */
margin-bottom: 8px; /* Adjust spacing between tick items */
}
`}
</style>
<div className="w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
<div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
<div className="flex flex-col justify-center">
<h1>
<TypewriterEffectSmoothDemo />
</h1>
<h1 className='md:text-3xl sm:text-3xl font-medium py-2'>{t("hero.subheading")}</h1>
<div className="tick-container text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] font-semibold">
<AnimatePresence>
{visibleItems.map((item, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="tick-item"
>
✅ {item}
</motion.div>
))}
</AnimatePresence>
</div>
<img className="w-[600px] imgAnimate" src={hero} alt="About Us" />
{showButton && (
<Link to="/app/posts" className='text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-9'>
<motion.div
animate={{ opacity: 1, rotate: [1, 2, -2, 0] }}
transition={{ duration: 0.7, repeat: 3, repeatType: "loop" }}
>
<MagicButton title={t("hero.button")} />
</motion.div>
</Link>
)}
</div>
<img className="w-[600px] imgAnimate" src={hero} alt="About Us" />
</div>
<Features/>
<About />
<Showcase/>
<Category/>
<HomePagePost />
<TestimonialSlider/>
<FAQ/>
</div>
<Features />
<About />
<Showcase />
<Category />
<HomePagePost />
<TestimonialSlider />
<FAQ />
</div>
);
}

Expand Down
Loading