Created
November 27, 2023 10:12
-
-
Save Rieranthony/c83756f8fa58efd3558a54f698b20e7b to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| "use client"; | |
| import { cn } from "@/libs/utils"; | |
| import { ReactNode, useState } from "react"; | |
| type Feature = { | |
| video: string; | |
| title: string; | |
| description: string; | |
| }; | |
| type Props = { | |
| header: ReactNode; | |
| subHeader: ReactNode; | |
| features: Feature[]; | |
| }; | |
| export function MarketingFeatureSection({ | |
| header, | |
| subHeader, | |
| features, | |
| }: Props) { | |
| const [selectedFeature, setSelectedFeature] = useState<Feature>(features[0]); | |
| const handleSelectFeature = (feature: Feature) => () => | |
| setSelectedFeature(feature); | |
| return ( | |
| <div className="flex flex-col w-full pt-40"> | |
| <div className="mx-auto flex flex-col items-center md:text-center"> | |
| <h2 className="text-3xl md:text-5xl font-medium px-6">{header}</h2> | |
| <p className="mt-6 text-primary/80 text-xl px-6 mb-10 max-w-xl leading-normal"> | |
| {subHeader} | |
| </p> | |
| </div> | |
| <div className="grid md:grid-cols-5 gap-8 mt-14 px-0 md:px-6"> | |
| <div className="flex md:flex-col gap-4 md:col-span-2 md:overflow-x-hidden overflow-x-scroll scroll-smooth snap-x snap-mandatory scroll-px-6 pb-6"> | |
| {features.map((feature) => ( | |
| <div | |
| key={`${feature.title}`} | |
| className={cn( | |
| "flex flex-col gap-2 p-5 rounded-md hover:bg-primary/[0.07] hover:cursor-pointer min-w-[80vw] md:min-w-[0px] snap-start first-of-type:ml-6 last-of-type:mr-20 md:first-of-type:ml-0 md:last-of-type:mr-0 transition-all", | |
| { | |
| "bg-primary/10": feature.title === selectedFeature.title, | |
| } | |
| )} | |
| onClick={handleSelectFeature(feature)} | |
| > | |
| <p className="font-medium text-base">{feature.title}</p> | |
| <p className="text-primary/80 text-sm">{feature.description}</p> | |
| </div> | |
| ))} | |
| </div> | |
| <div className="relative w-full max-w-[90vw] mx-auto md:max-w-3xl rounded-xl overflow-clip order-first md:order-2 col-span-1 md:col-span-3 aspect-video md:aspect-square xl:aspect-video my-auto drop-shadow-2xl border"> | |
| {selectedFeature && ( | |
| <video | |
| loop | |
| muted | |
| autoPlay | |
| key={selectedFeature.video} | |
| className="absolute top-0 left-0 w-full h-full object-cover" | |
| > | |
| <source | |
| src={`${selectedFeature.video}.mp4#t=0.1`} | |
| type="video/mp4" | |
| /> | |
| <source | |
| src={`${selectedFeature.video}.webm#t=0.1`} | |
| type="video/webm" | |
| /> | |
| </video> | |
| )} | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment