-
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
ebb3ec1
commit 81284bf
Showing
13 changed files
with
300 additions
and
8 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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,5 +1,6 @@ | ||
import AppRoutes from '@/routes/AppRoutes'; | ||
|
||
function App() { | ||
return <p className="text-blue-400">Welcome to Dynamites E-commerce</p>; | ||
return <AppRoutes />; | ||
} | ||
|
||
export default App; |
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; |
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,56 @@ | ||
import React, { useState } from 'react'; | ||
|
||
interface SlideProps { | ||
image: string; | ||
title: string; | ||
description: string; | ||
price: string; | ||
} | ||
|
||
const slides: SlideProps[] = [ | ||
{ image: '/path_to_image1.jpg', title: 'Product 1', description: 'Description 1', price: '$330' }, | ||
{ image: '/path_to_image2.jpg', title: 'Product 2', description: 'Description 2', price: '$123' }, | ||
]; | ||
|
||
const Slider: React.FC = () => { | ||
const [currentSlide, setCurrentSlide] = useState(0); | ||
|
||
const nextSlide = () => { | ||
setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length); | ||
}; | ||
|
||
const prevSlide = () => { | ||
setCurrentSlide((prevSlide) => (prevSlide === 0 ? slides.length - 1 : prevSlide - 1)); | ||
}; | ||
|
||
return ( | ||
<div className="relative w-full max-w-3xl mx-auto overflow-hidden"> | ||
<button | ||
onClick={prevSlide} | ||
className="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full" | ||
> | ||
← | ||
</button> | ||
<div className="flex transition-transform duration-500" style={{ transform: `translateX(-${currentSlide * 100}%)` }}> | ||
{slides.map((slide, index) => ( | ||
<div key={index} className="min-w-full flex-shrink-0"> | ||
<img src={slide.image} alt={slide.title} className="w-full" /> | ||
<div className="absolute bottom-10 left-10 bg-black bg-opacity-50 text-white p-4"> | ||
<h2 className="text-xl font-bold">{slide.title}</h2> | ||
<p className="text-sm">{slide.description}</p> | ||
<span className="text-lg">{slide.price}</span> | ||
</div> | ||
</div> | ||
))} | ||
</div> | ||
<button | ||
onClick={nextSlide} | ||
className="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full" | ||
> | ||
→ | ||
</button> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Slider; |
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,121 @@ | ||
import React, { useState } from 'react'; | ||
import Navbar from '@/components/NavBar'; | ||
import Footer from '@/components/FrontFooter'; | ||
import HSButton from '@/components/form/HSButton'; | ||
import HelloImage from '@/assets/welcome.jpg'; | ||
import { SlArrowLeft } from "react-icons/sl"; | ||
import { 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: 'Absolutely hot collections🔥', | ||
mainText: ['The Best Place To', 'Find And Buyer', 'Amazing Product'], | ||
buttonText: 'Shop now!', | ||
img: HelloImage, | ||
}, | ||
{ | ||
title: 'Absolutely hot collections🔥', | ||
mainText: ['The Best Place To', 'Find And Buyer', 'Amazing Product'], | ||
buttonText: 'Shop now!', | ||
img: HelloImage, | ||
}, | ||
]; | ||
|
||
const Slide: React.FC<{ slide: SlideProps }> = ({ slide }) => ( | ||
<div className="w-full h-auto flex flex-row border border-slate-400 p-5 gap-10"> | ||
<div className="w-1/2 h-auto border border-slate-400"> | ||
<h2 className="text-[#171A1F] text-[18px] mb-4">{slide.title}</h2> | ||
<div className='border'> | ||
{slide.mainText.map((text, index) => ( | ||
<p key={index} className="text-[40px] font-extrabold"> | ||
{index === 2 ? ( | ||
<> | ||
<span className="mr-2">{text.split(' ')[0]}</span> | ||
<span className="text-[#15ABFF]">{text.split(' ')[1]}</span> | ||
</> | ||
) : ( | ||
text | ||
)} | ||
</p> | ||
))} | ||
</div> | ||
<HSButton | ||
title={slide.buttonText} | ||
styles="bg-[#6D31ED] w-[125px] text-white p-3 outline-none rounded-md" | ||
/> | ||
</div> | ||
<div className="w-1/2 h-auto border border-slate-400"> | ||
<img src={slide.img} alt="Slide Image" /> | ||
</div> | ||
</div> | ||
); | ||
|
||
const Slider: 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-4 transform -translate-y-1/2 bg-gray-300 p-2 rounded-full" | ||
title="Previous Slide" | ||
> | ||
<SlArrowLeft /> | ||
</button> | ||
<button | ||
onClick={handleNext} | ||
className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-300 p-2 rounded-full" | ||
title="Next Slide" | ||
> | ||
<SlArrowRight /> | ||
</button> | ||
</div> | ||
); | ||
}; | ||
|
||
function Home() { | ||
return ( | ||
<div className="App"> | ||
<header> | ||
<Navbar /> | ||
</header> | ||
<main className=""> | ||
<div className="w-full h-auto border border-slate-300 p-10"> | ||
<Slider /> | ||
</div> | ||
</main> | ||
<Footer /> | ||
</div> | ||
); | ||
} | ||
|
||
export default Home; |
Empty file.
File renamed without changes.
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,14 @@ | ||
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; | ||
import Home from '@/pages/Home'; | ||
|
||
function AppRoutes() { | ||
return ( | ||
<Router> | ||
<Routes> | ||
<Route index element={<Home />} /> | ||
</Routes> | ||
</Router> | ||
); | ||
} | ||
|
||
export default AppRoutes; |
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