-
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
a2a61d9
commit ee35235
Showing
17 changed files
with
10,156 additions
and
3,610 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
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 was deleted.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import { render, screen, fireEvent, waitFor } from '@testing-library/react'; | ||
import { HelloSection } from '@/components/HelloSection/HelloSection'; | ||
import { describe, it, expect } from 'vitest'; | ||
import { MemoryRouter } from 'react-router-dom'; | ||
|
||
describe('HelloSection Component', () => { | ||
it('renders the first slide initially', async () => { | ||
render( | ||
<MemoryRouter> | ||
<HelloSection /> | ||
</MemoryRouter> | ||
); | ||
|
||
await waitFor(() => { | ||
const images = screen.getAllByAltText('Slide Image'); | ||
expect(images[0]).toBeInTheDocument(); | ||
expect( | ||
screen.getByText('Absolutely hot collections🔥') | ||
).toBeInTheDocument(); | ||
}); | ||
}); | ||
|
||
it('navigates to the next slide on button click', async () => { | ||
render( | ||
<MemoryRouter> | ||
<HelloSection /> | ||
</MemoryRouter> | ||
); | ||
|
||
const nextButton = screen.getByRole('button', { name: /next slide/i }); | ||
fireEvent.click(nextButton); | ||
|
||
await waitFor(() => { | ||
expect(screen.getByText('Exclusive Summer Sale☀️')).toBeInTheDocument(); | ||
expect( | ||
screen.getByRole('button', { name: /previous slide/i }) | ||
).toBeEnabled(); | ||
}); | ||
}); | ||
|
||
it('navigates to the previous slide on button click', async () => { | ||
render( | ||
<MemoryRouter> | ||
<HelloSection /> | ||
</MemoryRouter> | ||
); | ||
|
||
const nextButton = screen.getByRole('button', { name: /next slide/i }); | ||
fireEvent.click(nextButton); | ||
fireEvent.click(nextButton); | ||
|
||
const prevButton = screen.getByRole('button', { name: /previous slide/i }); | ||
fireEvent.click(prevButton); | ||
|
||
await waitFor(() => { | ||
expect( | ||
screen.getByText('Absolutely hot collections🔥') | ||
).toBeInTheDocument(); | ||
}); | ||
}); | ||
|
||
it('updates the active slide indicator', async () => { | ||
render( | ||
<MemoryRouter> | ||
<HelloSection /> | ||
</MemoryRouter> | ||
); | ||
|
||
await waitFor(() => { | ||
expect(screen.getByTestId('active-indicator-0')).toHaveClass( | ||
'bg-[#6D31ED]' | ||
); | ||
|
||
const nextButton = screen.getByRole('button', { name: /next slide/i }); | ||
fireEvent.click(nextButton); | ||
|
||
expect(screen.getByTestId('active-indicator-1')).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,135 @@ | ||
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 bg-white"> | ||
<div className="w-full pl-0 pt-10 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-4 outline-none font-bold text-[20px]" | ||
title="Previous Slide" | ||
> | ||
<SlArrowLeft /> | ||
</button> | ||
<button | ||
onClick={handleNext} | ||
className="absolute top-1/2 right-[-10px] transform -translate-y-1/2 p-4 outline-none font-bold text-[20px]" | ||
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-2 h-2 rounded-full ${currentIndex === index ? 'bg-[#6D31ED]' : 'bg-gray-300'}`} | ||
data-testid={`active-indicator-${index}`} | ||
/> | ||
))} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export { HelloSection }; |
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 className=" relative w-full h-auto p-2 lg:p-10 md:p-10 bg-violeteBg"> | ||
<div> | ||
<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 |
---|---|---|
|
@@ -28,4 +28,4 @@ export default { | |
}, | ||
}, | ||
plugins: [], | ||
}; | ||
}; |