Changeset View
Changeset View
Standalone View
Standalone View
web/e.cash_v2/app/components/Home/Quotes.tsx
| Show All 13 Lines | type Quote = { | ||||
| name: string; | name: string; | ||||
| title: string; | title: string; | ||||
| image: string; | image: string; | ||||
| }; | }; | ||||
| export const quotes: Quote[] = [ | export const quotes: Quote[] = [ | ||||
| { | { | ||||
| quote: | quote: | ||||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.", | "Of all the cryptocurrency nodes I have integrated into my pool, eCash has proven to be the most active and has the most dedicated team of maintainers.", | ||||
| name: "Satoshi Vega", | name: "letsmineit", | ||||
| title: "Front-End Developer", | title: "Mining Pool Operator", | ||||
| image: "/profile.png", | image: "/lets-mine-it.png", | ||||
| }, | }, | ||||
| { | { | ||||
| quote: | quote: | ||||
| "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.", | "Reading logs has never been so enjoyable. I wish more coin projects were as active to make pool admins' life easier.", | ||||
| name: "Hal Nakamoto", | name: "zpool", | ||||
| title: "Full-Stack Engineer", | title: "Mining Pool Operator", | ||||
| image: "/profile.png", | image: "/zpool.png", | ||||
| }, | }, | ||||
| { | { | ||||
| quote: | quote: | ||||
| "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.", | "We're proud to be the only shared RPC provider for eCash. From the very beginning, we believed in its vision, and the Avalanche upgrade only strengthened that belief.", | ||||
| name: "Vitalia Reyes", | name: "NOWNodes", | ||||
| title: "Smart Contract Developer", | title: "Mining Pool Operator", | ||||
| image: "/profile.png", | image: "/nownodes.png", | ||||
| }, | |||||
| { | |||||
| quote: | |||||
| "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.", | |||||
| name: "Charlie Decker", | |||||
| title: "Blockchain Engineer", | |||||
| image: "/profile.png", | |||||
| }, | |||||
| { | |||||
| quote: | |||||
| "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.", | |||||
| name: "Ada Moreno", | |||||
| title: "Back-End Developer", | |||||
| image: "/profile.png", | |||||
| }, | }, | ||||
| ]; | ]; | ||||
| export default function Quotes() { | export default function Quotes() { | ||||
| const [activeIndex, setActiveIndex] = useState<number>(2); | const [activeIndex, setActiveIndex] = useState<number>(2); | ||||
| const [paused, setPaused] = useState(false); | const [paused, setPaused] = useState(false); | ||||
| const containerRef = useRef<HTMLDivElement>(null); | const containerRef = useRef<HTMLDivElement>(null); | ||||
| const resumeTimeoutRef = useRef<NodeJS.Timeout | null>(null); | const resumeTimeoutRef = useRef<NodeJS.Timeout | null>(null); | ||||
| ▲ Show 20 Lines • Show All 92 Lines • ▼ Show 20 Lines | <ContentContainer className="max-w-[1400px]"> | ||||
| <div | <div | ||||
| key={index} | key={index} | ||||
| className={cn( | className={cn( | ||||
| "w-[60vw] max-w-[650px] flex-none snap-center transition-opacity lg:min-w-[85%]", | "w-[60vw] max-w-[650px] flex-none snap-center transition-opacity lg:min-w-[85%]", | ||||
| activeIndex === index ? "opacity-100" : "opacity-40" | activeIndex === index ? "opacity-100" : "opacity-40" | ||||
| )} | )} | ||||
| > | > | ||||
| <div className="mb-5 text-xl font-bold text-white lg:mb-7 lg:text-2xl"> | <div className="mb-5 text-xl font-bold text-white lg:mb-7 lg:text-2xl"> | ||||
| "{quote.quote}" | “{quote.quote}" | ||||
| </div> | </div> | ||||
| <div className="flex items-center gap-3"> | <div className="flex items-center gap-3"> | ||||
| <Image | <Image | ||||
| src={quote.image} | src={quote.image} | ||||
| alt={quote.name} | alt={quote.name} | ||||
| width={35} | width={35} | ||||
| height={35} | height={35} | ||||
| /> | /> | ||||
| Show All 39 Lines | |||||