-
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
c0010a8
commit d9d8cf1
Showing
16 changed files
with
10,150 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,64 @@ | ||
import { render, screen, fireEvent } from '@testing-library/react'; | ||
import { describe, it, expect } from 'vitest'; | ||
import { HelloSection } from '@/pages/HelloSection'; | ||
|
||
describe('HelloSection Component', () => { | ||
it('renders HelloSection component with the first slide', () => { | ||
render(<HelloSection />); | ||
|
||
const firstSlideTitle = screen.getByText(/Absolutely hot collections🔥/i); | ||
expect(firstSlideTitle).toBeInTheDocument(); | ||
|
||
const firstSlideButton = screen.getByText(/Shop now!/i); | ||
expect(firstSlideButton).toBeInTheDocument(); | ||
|
||
const firstSlideImage = screen.getByAltText(/Slide Image/i); | ||
expect(firstSlideImage).toBeInTheDocument(); | ||
}); | ||
|
||
it('changes slides when navigation buttons are clicked', () => { | ||
render(<HelloSection />); | ||
|
||
expect(screen.getByText(/Absolutely hot collections🔥/i)).toBeInTheDocument(); | ||
|
||
const nextButton = screen.getByTitle('Next Slide'); | ||
fireEvent.click(nextButton); | ||
|
||
expect(screen.getByText(/Exclusive Summer Sale☀️/i)).toBeInTheDocument(); | ||
|
||
const prevButton = screen.getByTitle('Previous Slide'); | ||
fireEvent.click(prevButton); | ||
|
||
expect(screen.getByText(/Absolutely hot collections🔥/i)).toBeInTheDocument(); | ||
}); | ||
|
||
it('loops slides correctly', () => { | ||
render(<HelloSection />); | ||
|
||
const nextButton = screen.getByTitle('Next Slide'); | ||
fireEvent.click(nextButton); | ||
fireEvent.click(nextButton); | ||
|
||
expect(screen.getByText(/New Arrivals✨/i)).toBeInTheDocument(); | ||
|
||
fireEvent.click(nextButton); | ||
expect(screen.getByText(/Absolutely hot collections🔥/i)).toBeInTheDocument(); | ||
|
||
const prevButton = screen.getByTitle('Previous Slide'); | ||
fireEvent.click(prevButton); | ||
expect(screen.getByText(/New Arrivals✨/i)).toBeInTheDocument(); | ||
}); | ||
|
||
it('renders slide indicators and updates on slide change', () => { | ||
render(<HelloSection />); | ||
|
||
const initialIndicator = screen.getByText(/Absolutely hot collections🔥/i).closest('div')?.parentElement?.querySelector('.bg-[#6D31ED]'); | ||
expect(initialIndicator).toBeInTheDocument(); | ||
|
||
const nextButton = screen.getByTitle('Next Slide'); | ||
fireEvent.click(nextButton); | ||
|
||
const secondIndicator = screen.getByText(/Exclusive Summer Sale☀️/i).closest('div')?.parentElement?.querySelector('.bg-[#6D31ED]'); | ||
expect(secondIndicator).toBeInTheDocument(); | ||
}); | ||
}); |
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,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 |
---|---|---|
@@ -0,0 +1,126 @@ | ||
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-row p-5 gap-10"> | ||
<div className="w-full pl-0 md:w-1/2 flex h-auto flex-col flex-1 lg:pl-10 md:pl-0"> | ||
<h2 className="sm: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 sm:justify-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="bg-[#6D31ED] w-auto text-white p-3 outline-none rounded-md mt-4" | ||
/> | ||
</div> | ||
</div> | ||
<div className="hidden lg:w-1/2 h-auto lg:flex flex-1 "> | ||
<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> | ||
<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="absolute bottom-0 left-1/2 transform -translate-x-1/2 flex space-x-2"> | ||
{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 |
---|---|---|
@@ -1,5 +1,14 @@ | ||
import { HelloSection } from './HelloSection'; | ||
function Home() { | ||
return <p className="text-blueBg">Welcome to Dynamites E-commerce</p>; | ||
return ( | ||
<div className="App"> | ||
<main className=""> | ||
<div className="w-full h-auto p-10 border border-slate-500"> | ||
<HelloSection /> | ||
</div> | ||
</main> | ||
</div> | ||
); | ||
} | ||
|
||
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: [], | ||
}; | ||
}; |