-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Landing Page Hero Section with TailwindCSS, React, TypeScript, and Re…
…dux Toolkit
- Loading branch information
1 parent
3111463
commit cc13a9e
Showing
16 changed files
with
10,131 additions
and
3,587 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"extends": [ | ||
"development" | ||
], | ||
"hints": { | ||
"no-inline-styles": "off" | ||
} | ||
} |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,6 @@ | ||
import AppRoutes from './routes/AppRoutes'; | ||
import AppRoutes from '@/routes/AppRoutes'; | ||
|
||
function App() { | ||
return <AppRoutes />; | ||
} | ||
|
||
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { render, screen, fireEvent } from '@testing-library/react'; | ||
import { describe, it, expect } from 'vitest'; | ||
import { HelloSection } from '@/components/HelloSection/HelloSection'; | ||
|
||
describe('HelloSection Component', () => { | ||
it('renders the first slide correctly', () => { | ||
render(<HelloSection />); | ||
expect( | ||
screen.getByText('Absolutely hot collections🔥') | ||
).toBeInTheDocument(); | ||
expect(screen.getByText('The Best Place To')).toBeInTheDocument(); | ||
expect(screen.getByText('Find And Buyer')).toBeInTheDocument(); | ||
expect(screen.getByText('Amazing Product')).toBeInTheDocument(); | ||
expect(screen.getByText('Shop now!')).toBeInTheDocument(); | ||
}); | ||
|
||
it('navigates to the next slide when the next button is clicked', () => { | ||
render(<HelloSection />); | ||
const nextButton = screen.getByTitle('Next Slide'); | ||
fireEvent.click(nextButton); | ||
expect(screen.getByText('Exclusive Summer Sale☀️')).toBeInTheDocument(); | ||
}); | ||
|
||
it('navigates to the previous slide when the prev button is clicked', () => { | ||
render(<HelloSection />); | ||
const prevButton = screen.getByTitle('Previous Slide'); | ||
fireEvent.click(prevButton); | ||
expect(screen.getByText('New Arrivals✨')).toBeInTheDocument(); | ||
}); | ||
|
||
it('displays the correct dot indicator for the current slide', () => { | ||
render(<HelloSection />); | ||
const dots = screen.getAllByRole('button'); | ||
expect(dots[0]).toHaveClass('bg-[#6D31ED]'); | ||
expect(dots[1]).not.toHaveClass('bg-[#6D31ED]'); | ||
expect(dots[2]).not.toHaveClass('bg-[#6D31ED]'); | ||
}); | ||
}); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
function FrontFooter() { | ||
return <div className="pl-20">Front Footer</div>; | ||
} | ||
|
||
export default FrontFooter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,134 @@ | ||
import React, { useState } from 'react'; | ||
import HSButton from '@/components/form/HSButton'; | ||
import HelloImage from '@/assets/welcome.jpg'; | ||
import HelloImage1 from '@/assets/welcome1.png'; | ||
import HelloImage2 from '@/assets/welcome2.png'; | ||
|
||
import { SlArrowLeft, SlArrowRight } from 'react-icons/sl'; | ||
|
||
interface SlideProps { | ||
title: string; | ||
mainText: string[]; | ||
buttonText: string; | ||
img: string; | ||
} | ||
|
||
const slides: SlideProps[] = [ | ||
{ | ||
title: 'Absolutely hot collections🔥', | ||
mainText: ['The Best Place To', 'Find And Buyer', 'Amazing Product'], | ||
buttonText: 'Shop now!', | ||
img: HelloImage, | ||
}, | ||
{ | ||
title: 'Exclusive Summer Sale☀️', | ||
mainText: ['Unbeatable Deals', 'On All Your', 'Favorite Items'], | ||
buttonText: 'Discover Now!', | ||
img: HelloImage1, | ||
}, | ||
{ | ||
title: 'New Arrivals✨', | ||
mainText: ['Fresh Styles', 'Just Landed', 'Shop Today'], | ||
buttonText: 'Explore New!', | ||
img: HelloImage2, | ||
}, | ||
]; | ||
|
||
const Slide: React.FC<{ slide: SlideProps }> = ({ slide }) => ( | ||
<div className="w-full h-auto flex flex-col p-5 gap-10 lg:flex-row md:flex-row"> | ||
<div className="border border-slate-50 w-full pl-0 md:w-1/2 flex h-auto flex-col flex-1 lg:pl-10 md:pl-0"> | ||
<h2 className="flex justify-center text-[#171A1F] text-[18px] mb-4 lg:justify-start items-start"> | ||
{slide.title} | ||
</h2> | ||
<div> | ||
{slide.mainText.map((text, index) => ( | ||
<p | ||
key={index} | ||
className="text-[28px] flex justify-center items-center md:text-[40px] font-extrabold lg:justify-start lg:items-start" | ||
> | ||
{index === 2 ? ( | ||
<> | ||
<span className="mr-2">{text.split(' ')[0]}</span> | ||
<span className="text-[#15ABFF]">{text.split(' ')[1]}</span> | ||
</> | ||
) : ( | ||
text | ||
)} | ||
</p> | ||
))} | ||
</div> | ||
<div className="flex justify-center lg:justify-start"> | ||
<HSButton | ||
title={slide.buttonText} | ||
styles="hidden bg-[#6D31ED] w-auto text-white p-3 outline-none rounded-md mt-4 lg:flex md:flex" | ||
/> | ||
</div> | ||
</div> | ||
<div className="lg:w-1/2 md:w-1/2 h-auto flex-1 lg:flex md:flex"> | ||
<img src={slide.img} alt="Slide Image" className="h-full" /> | ||
</div> | ||
</div> | ||
); | ||
|
||
const HelloSection: React.FC = () => { | ||
const [currentIndex, setCurrentIndex] = useState(0); | ||
|
||
const handlePrev = () => { | ||
setCurrentIndex((prevIndex) => | ||
prevIndex === 0 ? slides.length - 1 : prevIndex - 1 | ||
); | ||
}; | ||
|
||
const handleNext = () => { | ||
setCurrentIndex((prevIndex) => | ||
prevIndex === slides.length - 1 ? 0 : prevIndex + 1 | ||
); | ||
}; | ||
|
||
return ( | ||
<div className="relative w-full overflow-hidden"> | ||
<div | ||
className="flex transition-transform duration-300 ease-in-out" | ||
style={{ transform: `translateX(-${currentIndex * 100}%)` }} | ||
> | ||
{slides.map((slide, index) => ( | ||
<div key={index} className="min-w-full"> | ||
<Slide slide={slide} /> | ||
</div> | ||
))} | ||
</div> | ||
|
||
<div className="flex justify-center lg:justify-start"> | ||
<HSButton | ||
title={slides[currentIndex].buttonText} | ||
styles="flex bg-[#6D31ED]] w-auto text-white outline-none rounded-md lg:hidden md:hidden" | ||
/> | ||
</div> | ||
|
||
<button | ||
onClick={handlePrev} | ||
className="absolute top-1/2 left-[-10px] transform -translate-y-1/2 p-2 outline-none" | ||
title="Previous Slide" | ||
> | ||
<SlArrowLeft /> | ||
</button> | ||
<button | ||
onClick={handleNext} | ||
className="absolute top-1/2 right-[-10px] transform -translate-y-1/2 p-2 outline-none" | ||
title="Next Slide" | ||
> | ||
<SlArrowRight /> | ||
</button> | ||
<div className="relative bottom-[0] left-1/2 transform -translate-x-1/2 space-x-2 p-5 flex flex-row justify-center items-center"> | ||
{slides.map((_, index) => ( | ||
<div | ||
key={index} | ||
className={`w-3 h-3 rounded-full ${currentIndex === index ? 'bg-[#6D31ED]' : 'bg-gray-300'}`} | ||
/> | ||
))} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export { HelloSection }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
function NavBar() { | ||
return <div className="pl-20">Nav Bar</div>; | ||
} | ||
export default NavBar; |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { Link } from 'react-router-dom'; | ||
|
||
interface MyButtonProps { | ||
path?: string; | ||
title: string; | ||
styles?: string; | ||
click?: () => void; | ||
icon?: JSX.Element; | ||
target?: '_blank' | '_self' | '_parent' | '_top'; | ||
onChange?: React.ChangeEventHandler<HTMLAnchorElement>; | ||
} | ||
|
||
function HSButton({ | ||
path, | ||
click, | ||
title, | ||
icon, | ||
styles, | ||
target, | ||
onChange, | ||
}: MyButtonProps) { | ||
return ( | ||
<Link | ||
target={target} | ||
type="submit" | ||
onChange={onChange} | ||
rel="noopener noreferrer" | ||
to={path!} | ||
onClick={click} | ||
className={`${styles} bg-primary text-white px-6 py-3 rounded-md flex justify-center items-center gap-2 text-sm hover:text-gray-200 hover:shadow-lg hover:scale-105 transition-all duration-300 ease-in-out`} | ||
> | ||
{title} {icon} | ||
</Link> | ||
); | ||
} | ||
|
||
export default HSButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,13 @@ | ||
import { HelloSection } from '../components/HelloSection/HelloSection'; | ||
function Home() { | ||
return <p className="text-blueBg">Welcome to Dynamites E-commerce</p>; | ||
return ( | ||
<main> | ||
<div className="w-full h-auto p-2 border lg:p-10 md:p-10"> | ||
<HelloSection /> | ||
</div> | ||
{/* Add more componets as you wish!!! */} | ||
</main> | ||
); | ||
} | ||
|
||
export default Home; |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -26,4 +26,4 @@ export default { | |
}, | ||
}, | ||
plugins: [], | ||
}; | ||
}; |