-
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.
- Loading branch information
Showing
9 changed files
with
100 additions
and
190 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
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
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 React from "react"; | ||
|
|
||
| export default function CardCarousel({img, link}) { | ||
| return ( | ||
| <> | ||
| <div className='flex flex-col justify-end items-center h-60 bg-white p-3 rounded-md'> | ||
| <img src={img} ></img> | ||
| <div className='flex flex-row justify-center rounded-md text-center mt-2 bg-gray-300 hover:bg-[#06d2dd] cursor-pointer w-14'> | ||
| <a href={link} target="_blank" className="text-xs">Confira</a> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| } |
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 |
|---|---|---|
| @@ -1,142 +1,39 @@ | ||
| import React from 'react' | ||
| import React, { useState } from 'react'; | ||
| import ItemsCarousel from 'react-items-carousel'; | ||
| // import styled from 'styled-components' | ||
|
|
||
| export function Carousel() { | ||
| const main_slider = $("#main-slider"); | ||
| main_slider.owlCarousel({ | ||
| rtl: false, | ||
| loop: true, | ||
| nav: false, | ||
| dots: false, | ||
| autoplay: true, | ||
| autoplayTimeout: 3000, | ||
| autoplayHoverPause: false, | ||
| responsive: { | ||
| 0: { | ||
| items: 1 | ||
| } | ||
| } | ||
| }); | ||
| import Delivery from "../../public/delivery bebidas.png"; | ||
| import Portfolio from "../../public/portfolio.png"; | ||
| import PSG from "../../public/LP-PSG.png"; | ||
| import Finances from "../../public/finances.png"; | ||
| import Dark from "../../public/loginDark.png"; | ||
|
|
||
| const slider_thumb = $("#slider-thumb"); | ||
| slider_thumb.owlCarousel({ | ||
| rtl: false, | ||
| loop: true, | ||
| margin: 12, | ||
| nav: false, | ||
| dots: false, | ||
| autoplay: true, | ||
| autoplayTimeout: 3000, | ||
| autoplayHoverPause: false, | ||
| responsive: { | ||
| 0: { | ||
| items: 2 | ||
| } | ||
| } | ||
| }); | ||
| import CardCarousel from "./cardCarousel" | ||
|
|
||
| // Custom Navigation Events | ||
| $(".customNextBtn").click(function () { | ||
| main_slider.trigger("next.owl.carousel"); | ||
| }); | ||
| $(".customPrevBtn").click(function () { | ||
| main_slider.trigger("prev.owl.carousel"); | ||
| }); | ||
| export default function Carousel() { | ||
| const [activeItemIndex, setActiveItemIndex] = useState(0); | ||
| const chevronWidth = 40; | ||
|
|
||
| $(".customNextBtn").click(function () { | ||
| slider_thumb.trigger("next.owl.carousel"); | ||
| }); | ||
| $(".customPrevBtn").click(function () { | ||
| slider_thumb.trigger("prev.owl.carousel"); | ||
| }); | ||
|
|
||
| return ( | ||
| <section> | ||
| <div id="main-slider" className="owl-carousel owl-theme relative"> | ||
| <div className="relative w-full bg-[url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg')] bg-no-repeat bg-cover bg-center"> | ||
| <div className="bg-overlay grid grid-cols-1 lg:grid-cols-2 py-20 md:py-28 lg:py-32 xl:py-56 px-3 md:px-4 lg:px-8"> | ||
| {/* <!-- Content --> */} | ||
| <div className="flex flex-col gap-5 md:gap-8"> | ||
| <div className="flex flex-col gap-4"> | ||
| <h2 className="text-xl md:text-3xl lg:text-4xl font-semibold">Mukunda - Shotru - Trailer</h2> | ||
| <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> | ||
| <div className="flex gap-3"> | ||
| <p>1h : 56min</p> | ||
| <p><strong className="font-bold">Genres:</strong> <span>Action</span></p> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row items-center gap-3 md:gap-4"> | ||
| <a href="single-video.html" className="btn btn-secondary">Watch Now <i className="pl-2 fa-solid fa-play"></i></a> | ||
| <button className="btn btn-primary">Add To List <i className="pl-2 fa-solid fa-plus"></i></button> | ||
| <button className="outline-icon w-10 h-10 border border-acent rounded-full flex items-center justify-center"> | ||
| <i className="fa-solid fa-share-nodes"></i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| {/* <!-- End Content --> */} | ||
| </div> | ||
| </div> | ||
| <div className="relative w-full bg-[url('https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_1280.jpg')] bg-no-repeat bg-cover bg-center"> | ||
| <div className="bg-overlay grid grid-cols-1 lg:grid-cols-2 py-20 md:py-28 lg:py-32 xl:py-56 px-3 md:px-4 lg:px-8"> | ||
| <div className="flex flex-col gap-5 md:gap-8"> | ||
| <div className="flex flex-col gap-4"> | ||
| <h2 className="text-xl md:text-3xl lg:text-4xl font-semibold">Mukunda - Shotru - Trailer</h2> | ||
| <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> | ||
| <div className="flex gap-3"> | ||
| <p>1h : 56min</p> | ||
| <p><strong className="font-bold">Genres:</strong> <span>Action</span></p> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row items-center gap-3 md:gap-4"> | ||
| <a href="single-video.html" className="btn btn-secondary">Watch Now <i className="pl-2 fa-solid fa-play"></i></a> | ||
| <button className="btn btn-primary">Add To List <i className="pl-2 fa-solid fa-plus"></i></button> | ||
| <button className="outline-icon w-10 h-10 border border-acent rounded-full flex items-center justify-center"> | ||
| <i className="fa-solid fa-share-nodes"></i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="relative w-full bg-[url('https://cdn.pixabay.com/photo/2016/08/11/23/48/mountains-1587287_1280.jpg')] bg-no-repeat bg-cover bg-center"> | ||
| <div className="bg-overlay grid grid-cols-1 lg:grid-cols-2 py-20 md:py-28 lg:py-32 xl:py-56 px-3 md:px-4 lg:px-8 "> | ||
| <div className="flex flex-col gap-5 md:gap-8"> | ||
| <div className="flex flex-col gap-4"> | ||
| <h2 className="text-xl md:text-3xl lg:text-4xl font-semibold">Mukunda - Shotru - Trailer</h2> | ||
| <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> | ||
| <div className="flex gap-3"> | ||
| <p>1h : 56min</p> | ||
| <p><strong className="font-bold">Genres:</strong> <span>Action</span></p> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row items-center gap-3 md:gap-4"> | ||
| <a href="single-video.html" className="btn btn-secondary">Watch Now <i className="pl-2 fa-solid fa-play"></i></a> | ||
| <button className="btn btn-primary">Add To List <i className="pl-2 fa-solid fa-plus"></i></button> | ||
| <button className="outline-icon w-10 h-10 border border-acent rounded-full flex items-center justify-center"> | ||
| <i className="fa-solid fa-share-nodes"></i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="hidden lg:block absolute top-[25%] -right-8 bg-slate-700 py-5 pl-5 rounded-xl z-[1] w-[450px]"> | ||
| <div id="slider-thumb" className="owl-carousel owl-theme"> | ||
| <div className="item"> | ||
| <img src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg" className="w-64 h-72 object-cover rounded-xl" /> | ||
| </div> | ||
| <div className="item"> | ||
| <img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_1280.jpg" className="w-64 h-72 object-cover rounded-xl" /> | ||
| </div> | ||
| <div className="item"> | ||
| <img src="https://cdn.pixabay.com/photo/2016/08/11/23/48/mountains-1587287_1280.jpg" className="w-64 h-72 object-cover rounded-xl" /> | ||
| </div> | ||
| </div> | ||
| {/* <!-- Slider Nav --> */} | ||
| <div className="flex flex-row gap-3 pt-4"> | ||
| <button type="button" role="presentation" className="customPrevBtn py-1 px-2 rounded-sm bg-primary text-white hover:bg-acent"><i className="fa-solid fa-chevron-left"></i></button> | ||
| <button type="button" role="presentation" className="customNextBtn py-1 px-2 rounded-sm bg-primary text-white hover:bg-acent"><i className="fa-solid fa-chevron-right"></i></button> | ||
| </div> | ||
| {/* <!-- End Slider Nav --> */} | ||
| </div> | ||
| </section> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <div style={{ padding: `0 ${chevronWidth}px` }}> | ||
| <ItemsCarousel | ||
| requestToChangeActive={setActiveItemIndex} | ||
| activeItemIndex={activeItemIndex} | ||
| numberOfCards={2} | ||
| gutter={20} | ||
| leftChevron={<button className='bg-white rounded-full w-6'>{'<'}</button>} | ||
| rightChevron={<button className='bg-white rounded-full w-6'>{'>'}</button>} | ||
| outsideChevron | ||
| chevronWidth={chevronWidth} | ||
| infiniteLoop={true} | ||
| > | ||
| <CardCarousel img={Delivery} link={'https://allandrs.github.io/delivery_bebidas/'}/> | ||
| <CardCarousel img={Portfolio} link={'https://allandrs.github.io/portfolio-html-css/'}/> | ||
| <CardCarousel img={PSG} link={'https://allandrs.github.io/site-futebol/'}/> | ||
| <CardCarousel img={Finances} link={'https://allandrs.github.io/sistema-controle-financeiro/'}/> | ||
| <CardCarousel img={Dark} link={'https://allandrs.github.io/tela-login-dark/'}/> | ||
| </ItemsCarousel> | ||
| </div> | ||
| ); | ||
| }; |
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
Oops, something went wrong.