Landing Page Hero Section with TailwindCSS, React, TypeScript, and Re…

…dux Toolkit

package.json

@@ -21,7 +21,9 @@
     "dotenv": "^16.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.23.1",
     "redux": "^5.0.1"
   },

src/App.tsx

@@ -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;

src/components/FrontFooter.tsx

@@ -0,0 +1,5 @@
+function FrontFooter() {
+  return <div className="pl-20">Front Footer</div>;
+}
+
+export default FrontFooter;

src/components/NavBar.tsx

@@ -0,0 +1,4 @@
+function NavBar() {
+  return <div className="pl-20">Nav Bar</div>;
+}
+export default NavBar;

src/components/Slider.tsx

@@ -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;

src/components/form/HSButton.tsx

@@ -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;

src/pages/Home.tsx

@@ -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;

src/routes/AppRoutes.tsx

@@ -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;

tailwind.config.js

@@ -2,7 +2,26 @@
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    screens: {
+      xs: '320px',
+      sm: '360px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+      '3xl': '1920px',
+      '4xl': '2560px',
+      samsung: '412px',
+      iphone: '414px',
+      tablet: '640px',
+      desktop: '1280px',
+      landscape: { raw: '(min-height: 360px) and (orientation: landscape)' },
+    },
+    extend: {
+      fontFamily: {
+        secondary: ['Anton', 'sans-serif'],
+      },
+    },
   },
   plugins: [],
-};
+};