File size: 8,806 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
/* eslint-disable @next/next/no-img-element */
'use client'
import { useState, useRef, useEffect } from 'react'
import { Transition } from '@headlessui/react'
import CONFIG from '../config'
import LazyImage from '@/components/LazyImage'
import { siteConfig } from '@/lib/config'
// import FeaturesElement from '@/public/images/features-element.png'
export default function Features() {
const [tab, setTab] = useState(1)
const tabs = useRef(null)
const heightFix = () => {
if (tabs.current && tabs.current.parentElement) tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`
}
useEffect(() => {
heightFix()
}, [])
return (
<section className="relative">
{/* Section background (needs .relative class on parent and next sibling elements) */}
<div className="absolute inset-0 bg-gray-100 dark:bg-black pointer-events-none mb-16" aria-hidden="true"></div>
<div className="absolute left-0 right-0 m-auto w-px p-px h-20 bg-gray-200 transform -translate-y-1/2"></div>
<div className="relative max-w-6xl mx-auto px-4 sm:px-6">
<div className="pt-12 md:pt-20">
{/* Section header */}
<div className="max-w-3xl mx-auto text-center pb-12 md:pb-16">
<h1 className="h2 mb-4 dark:text-white">{siteConfig('LANDING_FEATURES_HEADER_1', null, CONFIG)}</h1>
<p className="text-xl text-gray-600 dark:text-gray-400 leading-relaxed" dangerouslySetInnerHTML={{ __html: siteConfig('LANDING_FEATURES_HEADER_1_P', null, CONFIG) }}></p>
</div>
{/* Section content */}
<div className="md:grid md:grid-cols-12 md:gap-6">
{/* Content */}
<div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6 md:mt-6" data-aos="fade-right">
<div className="md:pr-4 lg:pr-12 xl:pr-16 mb-8">
<h3 className="h3 mb-3 dark:text-white">{siteConfig('LANDING_FEATURES_HEADER_2', null, CONFIG)}</h3>
<p className="text-xl text-gray-600 dark:text-gray-400">{siteConfig('LANDING_FEATURES_HEADER_2_P', null, CONFIG)}</p>
</div>
{/* Tabs buttons */}
<div className="mb-8 md:mb-0">
<a
className={`flex items-center text-lg p-5 rounded border transition duration-300 ease-in-out mb-3 ${tab !== 1 ? 'bg-white shadow-md border-gray-200 hover:shadow-lg' : 'bg-gray-200 border-transparent'}`}
href="#0"
onClick={(e) => { e.preventDefault(); setTab(1) }}
>
<div>
<div className="font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_CARD_1_TITLE', null, CONFIG)}</div>
<div className="text-gray-600">{siteConfig('LANDING_FEATURES_CARD_1_P', null, CONFIG)}</div>
</div>
<div className="flex justify-center items-center w-8 h-8 bg-white rounded-full shadow flex-shrink-0 ml-3">
<svg className="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
</svg>
</div>
</a>
<a
className={`flex items-center text-lg p-5 rounded border transition duration-300 ease-in-out mb-3 ${tab !== 2 ? 'bg-white shadow-md border-gray-200 hover:shadow-lg' : 'bg-gray-200 border-transparent'}`}
href="#0"
onClick={(e) => { e.preventDefault(); setTab(2) }}
>
<div>
<div className="font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_CARD_2_TITLE', null, CONFIG)}</div>
<div className="text-gray-600">{siteConfig('LANDING_FEATURES_CARD_2_P', null, CONFIG)}</div>
</div>
<div className="flex justify-center items-center w-8 h-8 bg-white rounded-full shadow flex-shrink-0 ml-3">
<svg className="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z" fillRule="nonzero" />
</svg>
</div>
</a>
<a
className={`flex items-center text-lg p-5 rounded border transition duration-300 ease-in-out mb-3 ${tab !== 3 ? 'bg-white shadow-md border-gray-200 hover:shadow-lg' : 'bg-gray-200 border-transparent'}`}
href="#0"
onClick={(e) => { e.preventDefault(); setTab(3) }}
>
<div>
<div className="font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_CARD_3_TITLE', null, CONFIG)}</div>
<div className="text-gray-600">{siteConfig('LANDING_FEATURES_CARD_3_P', null, CONFIG)}</div>
</div>
<div className="flex justify-center items-center w-8 h-8 bg-white rounded-full shadow flex-shrink-0 ml-3">
<svg className="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11.334 8.06a.5.5 0 00-.421-.237 6.023 6.023 0 01-5.905-6c0-.41.042-.82.125-1.221a.5.5 0 00-.614-.586 6 6 0 106.832 8.529.5.5 0 00-.017-.485z" fill="#191919" fillRule="nonzero" />
</svg>
</div>
</a>
</div>
</div>
{/* Tabs items */}
<div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1 pt-24">
<div className="transition-all">
<div className="relative flex flex-col text-center lg:text-right" data-aos="zoom-y-out" ref={tabs}>
{/* Item 1 */}
<Transition
show={tab === 1}
appear={true}
className="w-full"
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform absolute"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
beforeEnter={() => heightFix()}
unmount={false}
>
<div className="relative inline-flex flex-col">
<LazyImage src='/images/feature-1.webp'/>
</div>
</Transition>
{/* Item 2 */}
<Transition
show={tab === 2}
appear={true}
className="w-full"
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform absolute"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
beforeEnter={() => heightFix()}
unmount={false}
>
<div className="relative inline-flex flex-col">
<LazyImage src='/images/feature-2.webp'/>
</div>
</Transition>
{/* Item 3 */}
<Transition
show={tab === 3}
appear={true}
className="w-full"
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform absolute"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
beforeEnter={() => heightFix()}
unmount={false}
>
<div className="relative inline-flex flex-col">
<LazyImage src='/images/feature-3.webp'/>
</div>
</Transition>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
|