vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
zzlgreat
2025-10-11 11:55:25 +08:00
parent 467dad8449
commit 8107dee8d3
2879 changed files with 610575 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/templates/FeaturesPage/Community/index.tsx Normal file
View File

@@ -0,0 +1,107 @@
import { useRef, useState } from "react";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import Section from "@/components/Section";
import Image from "@/components/Image";
import { community } from "@/mocks/community";
type CommunityProps = {};
const Community = ({}: CommunityProps) => {
const [activeIndex, setActiveIndex] = useState<number>(0);
const ref = useRef<any>(null);
const handleClick = (index: number) => {
setActiveIndex(index);
ref.current?.go(index);
};
return (
<Section className="">
<div className="container">
<div className="relative p-0.5 bg-gradient-to-b from-color-2/80 from-[4.5rem] via-color-1/40 via-[9rem] to-n-1/15 rounded-3xl">
<div className="pt-20 px-5 py-10 bg-n-8 rounded-[1.375rem] md:pt-20 md:px-20 mb:pb-16 lg:py-28 lg:pr-48">
<Splide
options={{
type: "fade",
pagination: false,
arrows: false,
}}
onMoved={(e, newIndex) => setActiveIndex(newIndex)}
ref={ref}
>
{community.map((comment) => (
<SplideSlide className="flex" key={comment.id}>
<div className="flex flex-col lg:flex-row lg:items-start">
<div className="quote mb-6 md:mb-12 lg:mb-0 lg:text-[1.75rem] lg:leading-[2.25rem]">
{comment.text}
</div>
<div className="flex items-center mt-auto lg:block lg:mt-0 lg:ml-20">
<div className="w-20 mr-6 lg:w-40 lg:mr-0 lg:mb-11">
<Image
className="w-full rounded-2xl"
src={comment.avatarUrl}
width={160}
height={160}
alt={comment.name}
/>
</div>
<div>
<h6 className="h6">
{comment.name}
</h6>
<div className="caption text-n-1/25">
{comment.role}
</div>
</div>
</div>
</div>
</SplideSlide>
))}
</Splide>
<div
className="flex justify-center mt-10 -mx-2 md:mt-12 md:justify-start lg:absolute lg:top-0
lg:right-20 lg:h-full lg:flex-col lg:justify-center lg:m-0"
>
{community.map((item: any, index: number) => (
<button
className="relative w-6 h-6 mx-2 lg:my-2 lg:mx-0"
onClick={() => handleClick(index)}
key={item.id}
>
<span
className={`absolute inset-0 bg-conic-gradient rounded-full transition-opacity ${
index === activeIndex
? "opacity-100"
: "opacity-0"
}`}
></span>
<span className="absolute inset-0.25 bg-n-8 rounded-full">
<span className="absolute inset-2 bg-n-1 rounded-full"></span>
</span>
</button>
))}
</div>
</div>
<div className="absolute -top-14 left-0 z-2 font-code text-[11.25rem] text-color-1 leading-none md:left-12">
“
</div>
<div className="absolute top-0 right-0 bg-n-8">
<svg width="72" height="72" viewBox="0 0 72 72">
<path
fill="#0E0C15"
stroke="#FFC876"
strokeWidth="2"
strokeOpacity=".8"
d="M-1176,1 L6.15,1 C13.89,1 21.35,3.89547 27.06,9.11714 L60.91,40.0541 C67.34,45.9271 71,54.2315 71,62.937 L71,444 C71,461.121 57.12,475 40,475 L-1176,475 C-1193.1209,475 -1207,461.121 -1207,444 L-1207,32 C-1207,14.8792 -1193.1208,1 -1176,1 Z"
/>
</svg>
</div>
</div>
</div>
</Section>
);
};
export default Community;