This is an automated email from the ASF dual-hosted git repository.
luzhijing pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new 8a8a710c6dc (feat) add first-page carousel (#395)
8a8a710c6dc is described below
commit 8a8a710c6dc96d2639ebcccabd533c3eadf5620d
Author: hututu <[email protected]>
AuthorDate: Tue Jan 23 17:20:46 2024 +0800
(feat) add first-page carousel (#395)
---
src/components/newsletter-swiper/index.scss | 62 ++++++++
src/components/newsletter-swiper/index.tsx | 110 ++++++++++++++
src/components/user-case-carousel/index.scss | 146 ++++++++++++++++++
src/components/user-case-carousel/index.tsx | 115 ++++++++++++++
src/pages/index.scss | 212 --------------------------
src/pages/index.tsx | 215 +--------------------------
6 files changed, 437 insertions(+), 423 deletions(-)
diff --git a/src/components/newsletter-swiper/index.scss
b/src/components/newsletter-swiper/index.scss
new file mode 100644
index 00000000000..3407b9bb93f
--- /dev/null
+++ b/src/components/newsletter-swiper/index.scss
@@ -0,0 +1,62 @@
+.swiper-button-next:active,
+.swiper-button-prev:active {
+ color: #00b1fd;
+}
+
+.swiper-pagination-bullet {
+ background: #d9d9d9;
+ margin: 0 0.5rem !important;
+}
+
+.swiper-pagination-bullet-active {
+ background: var(--ifm-color-primary);
+}
+
+.firstPageSwiper {
+ .swiper-pagination-bullets.swiper-pagination-horizontal {
+ left: 155px;
+ top: 150px;
+ width: auto;
+ .swiper-pagination-bullet {
+ background-color: rgba(255, 255, 255, 0.5);
+ opacity: 100%;
+ height: 0.25rem;
+ width: 0.25rem;
+ }
+ .swiper-pagination-bullet-active {
+ width: 2.5rem;
+ border-radius: 0.375rem;
+ background: linear-gradient(to right, white var(--progress-count),
rgba(255, 255, 255, 0.5) 0%) !important;
+ }
+ }
+}
+
+@media (max-width: 1280px) {
+ .firstPageSwiper {
+ .swiper-pagination-bullets.swiper-pagination-horizontal {
+ top: 35%;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+}
+
+@media (max-width: 1024px) {
+ .firstPageSwiper {
+ .swiper-pagination-bullets.swiper-pagination-horizontal {
+ top: 38%;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ .firstPageSwiper {
+ .swiper-pagination-bullets.swiper-pagination-horizontal {
+ top: 33%;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+}
diff --git a/src/components/newsletter-swiper/index.tsx
b/src/components/newsletter-swiper/index.tsx
new file mode 100644
index 00000000000..ee1f9ea4b65
--- /dev/null
+++ b/src/components/newsletter-swiper/index.tsx
@@ -0,0 +1,110 @@
+import { Pagination, Navigation } from 'swiper';
+import React, { useCallback, useState } from 'react';
+import usePhone from '../../hooks/use-phone';
+import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';
+import { NEWSLETTER_DATA } from '../../constant/newsletter.data';
+import ReadMore from '../../components/ReadMore';
+import { useAnimationFrame } from '../../hooks/use-animation-frame';
+import './index.scss';
+
+export function NewsLetterSwiper() {
+ const { isPhone } = usePhone();
+
+ const [swiperRef, setSwiperRef] = useState<SwiperClass>();
+ const [progressCount, setProgressCount] = useState<number>(0);
+ const [stop, setStop] = useState<boolean>(false);
+
+ const handlePrevious = useCallback(() => {
+ swiperRef?.slidePrev();
+ }, [swiperRef]);
+
+ const handleNext = useCallback(() => {
+ swiperRef?.slideNext();
+ }, [swiperRef]);
+
+ useAnimationFrame(deltaTime => {
+ // Pass on a function to the setter of the state
+ // to make sure we always have the latest state
+
+ setProgressCount(prevProgressCount => {
+ if (prevProgressCount >= 100) {
+ handleNext();
+ return 0;
+ }
+ if (deltaTime > 100) return prevProgressCount;
+
+ return prevProgressCount + deltaTime * 0.01;
+ });
+ }, stop);
+
+ const pagination = {
+ clickable: true,
+ renderBullet: function (index, className) {
+ return '<span class="' + className + '"></span>';
+ },
+ };
+
+ return (
+ <div className="container pt-14" onMouseMove={() => setStop(true)}
onMouseLeave={() => setStop(false)}>
+ <div style={{ position: 'relative', '--progress-count':
`${progressCount}%` } as any}>
+ {!isPhone && (
+ <div
+ onClick={handlePrevious}
+ className="swiper-button-prev invisible
group-hover:visible"
+ style={{ position: 'absolute', top: 'calc(50% -
2rem)', left: '-3rem', zIndex: 99 }}
+ ></div>
+ )}
+
+ <Swiper
+ pagination={pagination}
+ spaceBetween={50}
+ slidesPerView={1}
+ navigation={false}
+ modules={[Pagination]}
+ loop={true}
+ className="firstPageSwiper"
+ // style={{ minHeight: 480 }}
+ onSlideChange={() => setProgressCount(0)}
+ onSwiper={setSwiperRef}
+ >
+ {NEWSLETTER_DATA.map(newsletter => {
+ return (
+ <SwiperSlide key={newsletter.title}>
+ <div className=" row flex justify-center
xl:justify-start flex-start pb-8 lg:pb-16">
+ <div className="w-full lg:w-auto flex
justify-center ml-4">
+ <img
+ width={424}
+
src={`${require(`@site/static/images/${newsletter.image}`).default}`}
+ alt={newsletter.title}
+ />
+ </div>
+ <div className="lg:w-[48rem] px-6 lg:px-0
lg:ml-12 mt-4 lg:mt-0 flex flex-col ">
+ <div className="flex gap-1 mb-1">
+ {newsletter.tags.map(value => (
+ <div
className="color-[#4c576c] font-medium text-xs leading-5">
+ {value}
+ </div>
+ ))}
+ </div>
+ <h3 className="leading-[38px] text-2xl
font-semibold line-clamp-1 ">
+ {newsletter.title}
+ </h3>
+ <p className="pt-3 line-clamp-2
text-lg leading-8">{newsletter.content}</p>
+ <ReadMore to={newsletter.to}
className="pt-6" />
+ </div>
+ </div>
+ </SwiperSlide>
+ );
+ })}
+ </Swiper>
+ {!isPhone && (
+ <div
+ onClick={handleNext}
+ className="swiper-button-next invisible
group-hover:visible"
+ style={{ position: 'absolute', top: 'calc(50% -
2rem)', right: '-3rem', zIndex: 99 }}
+ ></div>
+ )}
+ </div>
+ </div>
+ );
+}
diff --git a/src/components/user-case-carousel/index.scss
b/src/components/user-case-carousel/index.scss
new file mode 100644
index 00000000000..4ee949498e0
--- /dev/null
+++ b/src/components/user-case-carousel/index.scss
@@ -0,0 +1,146 @@
+.cases-tabs {
+ .ant-tabs-ink-bar {
+ background-color: #444fd9;
+ }
+ .ant-tabs-nav {
+ .ant-tabs-tab {
+ width: 17.5rem;
+ font-size: 1.25rem;
+ line-height: 1.6;
+ position: relative;
+ margin-top: 0 !important;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ &:hover {
+ color: #444fd9;
+ }
+ &.ant-tabs-tab-active {
+ background: linear-gradient(270deg, rgba(223, 224, 247, 0.4)
0%, rgba(223, 224, 247, 0.02) 100%);
+ .ant-tabs-tab-btn {
+ color: #444fd9;
+ .progress {
+ display: block;
+ }
+ }
+ }
+ .ant-tabs-tab-btn {
+ flex: 1;
+ color: #1d1d1d;
+ .progress {
+ display: none;
+ }
+ }
+ }
+ }
+ .ant-tabs-content-holder {
+ border-left: 1px solid #f2f3fc;
+ .ant-tabs-content {
+ height: 100%;
+ min-height: 300px;
+ .ant-tabs-tabpane {
+ transition-property: opacity;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 300ms;
+ padding-left: 3.5rem;
+ height: 100%;
+ position: absolute;
+ .cases-bg-datalake {
+ background: url('/static/images/cases-bg-datalake.png')
no-repeat center;
+ background-size: cover;
+ }
+ .cases-bg-ad-hoc {
+ background: url('/static/images/cases-bg-ad-hoc.png')
no-repeat center;
+ background-size: cover;
+ }
+ .cases-bg-customer {
+ background: url('/static/images/cases-bg-customer.png')
no-repeat center;
+ background-size: cover;
+ }
+ .cases-bg-ELT {
+ background: url('/static/images/cases-bg-ELT.png')
no-repeat center;
+ background-size: cover;
+ }
+ .cases-bg-log {
+ background: url('/static/images/cases-bg-log.png')
no-repeat center;
+ background-size: cover;
+ }
+
+ .cases-bg-real-time {
+ background: url('/static/images/cases-bg-real-time.png')
no-repeat center;
+ background-size: cover;
+ }
+
+ &.ant-tabs-tabpane-active {
+ opacity: 1;
+ z-index: 1;
+ }
+ &.ant-tabs-tabpane-hidden {
+ display: block;
+ opacity: 0;
+ z-index: 0;
+ }
+ }
+ }
+ }
+}
+
+.cases-collapse {
+ text-align: left;
+ .ant-collapse {
+ background-color: #fff;
+ .ant-collapse-item-active {
+ .ant-collapse-header-text {
+ color: #444fd9;
+ }
+ .ant-collapse-expand-icon {
+ transform: rotate(180deg);
+ color: #444fd9;
+ }
+ }
+ .ant-collapse-item {
+ border-bottom: 0.5px solid #dfe5f0;
+ .ant-collapse-header {
+ align-items: center;
+ padding: 1rem 0;
+ .ant-collapse-expand-icon {
+ padding: 0;
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+ }
+ }
+ .ant-collapse-content-box {
+ height: 12rem;
+ padding: 0;
+ margin-top: 0.75rem;
+ margin-bottom: 1rem;
+
+ .cases-bg-datalake {
+ background: url('/static/images/cases-bg-datalake.png')
no-repeat center;
+ background-size: cover;
+ }
+ .cases-bg-ad-hoc {
+ background: url('/static/images/cases-bg-ad-hoc.png')
no-repeat center;
+ background-size: cover;
+ }
+ .cases-bg-customer {
+ background: url('/static/images/cases-bg-customer.png')
no-repeat center;
+ background-size: cover;
+ }
+ .cases-bg-ELT {
+ background: url('/static/images/cases-bg-ELT.png')
no-repeat center;
+ background-size: cover;
+ }
+ .cases-bg-log {
+ background: url('/static/images/cases-bg-log.png')
no-repeat center;
+ background-size: cover;
+ }
+
+ .cases-bg-real-time {
+ background: url('/static/images/cases-bg-real-time.png')
no-repeat center;
+ background-size: cover;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/user-case-carousel/index.tsx
b/src/components/user-case-carousel/index.tsx
new file mode 100644
index 00000000000..011c5400475
--- /dev/null
+++ b/src/components/user-case-carousel/index.tsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import usePhone from '../../hooks/use-phone';
+import { Collapse, Tabs } from 'antd';
+import { VariousAnalyticsData } from '../../constant/various-analytics.data';
+import { ArrowDownIcon } from '../../components/Icons/arrow-down-icon';
+import LinkWithArrow from '../../components/link-arrow';
+import { useAnimationFrame } from '../../hooks/use-animation-frame';
+import './index.scss';
+import { Progress } from '../../components/progress/progress';
+
+export function UserCaseCarousel() {
+ const { isPhone } = usePhone();
+ const [count, setCount] = useState<number>(0);
+ const [activeKey, setActiveKey] = useState<string>('0');
+ const [stop, setStop] = useState<boolean>(false);
+
+ useAnimationFrame(deltaTime => {
+ // Pass on a function to the setter of the state
+ // to make sure we always have the latest state
+
+ setCount(prevCount => {
+ if (prevCount >= 100) {
+ setActiveKey(activeKey => {
+ let nextKey = +activeKey + 1;
+ if (nextKey >= VariousAnalyticsData.length) {
+ nextKey = 0;
+ }
+ return nextKey.toString();
+ });
+ return 0;
+ }
+ if (deltaTime > 100) return prevCount;
+
+ return prevCount + deltaTime * 0.01;
+ });
+ }, stop);
+
+ return isPhone ? (
+ <div className="cases-collapse">
+ <Collapse
+ bordered={false}
+ defaultActiveKey={['0']}
+ accordion
+ expandIcon={ArrowDownIcon}
+ expandIconPosition="right"
+ items={VariousAnalyticsData.map(({ title, content, icon,
links, backgroundClassName }, index) => {
+ return {
+ key: index,
+ label: (
+ <div className="flex items-center">
+ <div className="mr-4">{icon}</div>
+ <span className="text-base">{title}</span>
+ </div>
+ ),
+ children: (
+ <div
+ className={`font-misans text-start h-full
${backgroundClassName} text-[10px] leading-[17px]`}
+ >
+ <div className=" pt-3 pr-3">{content}</div>
+
+ <div className="flex mt-3 gap-2">
+ {links.map(({ content, to }) => (
+ <LinkWithArrow
+ style={{ fontSize: '10px',
lineHeight: '17px' }}
+ className="text-start"
+ to={to}
+ text={content}
+ />
+ ))}
+ </div>
+ </div>
+ ),
+ };
+ })}
+ />
+ </div>
+ ) : (
+ <div className="cases-tabs" onMouseMove={() => setStop(true)}
onMouseLeave={() => setStop(false)}>
+ <Tabs
+ activeKey={activeKey}
+ onChange={activeKey => {
+ setCount(0);
+ setActiveKey(activeKey);
+ }}
+ tabPosition={isPhone ? 'top' : 'left'}
+ items={VariousAnalyticsData.map(({ content, title, links,
backgroundClassName, icon }, index) => {
+ return {
+ label: (
+ <div className="font-misans text-start">
+ <span>{title}</span>
+ <div className="absolute -bottom-0 w-full">
+ <Progress percent={count} />
+ </div>
+ </div>
+ ),
+ key: index.toString(),
+ children: (
+ <div
+ className={`font-misans text-start h-full
${backgroundClassName} py-14 pr-14 text-base leading-7`}
+ >
+ <div>{content}</div>
+
+ <div className="flex mt-14 gap-10">
+ {links.map(({ content, to }) => (
+ <LinkWithArrow className="text-start"
to={to} text={content} />
+ ))}
+ </div>
+ </div>
+ ),
+ };
+ })}
+ />
+ </div>
+ );
+}
diff --git a/src/pages/index.scss b/src/pages/index.scss
index f9056a4a803..de9c333a55c 100644
--- a/src/pages/index.scss
+++ b/src/pages/index.scss
@@ -239,215 +239,3 @@
}
}
}
-
-.swiper-button-next:active,
-.swiper-button-prev:active {
- color: #00b1fd;
-}
-
-.swiper-pagination-bullet {
- background: #d9d9d9;
- margin: 0 0.5rem !important;
-}
-
-.swiper-pagination-bullet-active {
- background: var(--ifm-color-primary);
-}
-
-.firstPageSwiper {
- .swiper-pagination-bullets.swiper-pagination-horizontal {
- left: 155px;
- top: 150px;
- width: auto;
- .swiper-pagination-bullet {
- background-color: white;
- opacity: 80%;
- height: 0.25rem;
- width: 0.25rem;
- }
- .swiper-pagination-bullet-active {
- width: 2.5rem;
- border-radius: 0.375rem;
- }
- }
-}
-
-@media (max-width: 1280px) {
- .firstPageSwiper {
- .swiper-pagination-bullets.swiper-pagination-horizontal {
- top: 35%;
- left: 50%;
- transform: translateX(-50%);
- }
- }
-}
-
-@media (max-width: 1024px) {
- .firstPageSwiper {
- .swiper-pagination-bullets.swiper-pagination-horizontal {
- top: 38%;
- left: 50%;
- transform: translateX(-50%);
- }
- }
-}
-
-@media (max-width: 640px) {
- .firstPageSwiper {
- .swiper-pagination-bullets.swiper-pagination-horizontal {
- top: 33%;
- left: 50%;
- transform: translateX(-50%);
- }
- }
-}
-
-.cases-tabs {
- .ant-tabs-ink-bar {
- background-color: #444fd9;
- }
- .ant-tabs-nav {
- .ant-tabs-tab {
- width: 17.5rem;
- font-size: 1.25rem;
- line-height: 1.6;
- position: relative;
- margin-top: 0 !important;
- padding-top: 1rem;
- padding-bottom: 1rem;
- &:hover {
- color: #444fd9;
- }
- &.ant-tabs-tab-active {
- background: linear-gradient(270deg, rgba(223, 224, 247, 0.4)
0%, rgba(223, 224, 247, 0.02) 100%);
- .ant-tabs-tab-btn {
- color: #444fd9;
- .progress {
- display: block;
- }
- }
- }
- .ant-tabs-tab-btn {
- flex: 1;
- color: #1d1d1d;
- .progress {
- display: none;
- }
- }
- }
- }
- .ant-tabs-content-holder {
- border-left: 1px solid #f2f3fc;
- .ant-tabs-content {
- height: 100%;
- min-height: 300px;
- .ant-tabs-tabpane {
- transition-property: opacity;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 300ms;
- padding-left: 3.5rem;
- height: 100%;
- position: absolute;
- .cases-bg-datalake {
- background: url('/static/images/cases-bg-datalake.png')
no-repeat center;
- background-size: cover;
- }
- .cases-bg-ad-hoc {
- background: url('/static/images/cases-bg-ad-hoc.png')
no-repeat center;
- background-size: cover;
- }
- .cases-bg-customer {
- background: url('/static/images/cases-bg-customer.png')
no-repeat center;
- background-size: cover;
- }
- .cases-bg-ELT {
- background: url('/static/images/cases-bg-ELT.png')
no-repeat center;
- background-size: cover;
- }
- .cases-bg-log {
- background: url('/static/images/cases-bg-log.png')
no-repeat center;
- background-size: cover;
- }
-
- .cases-bg-real-time {
- background: url('/static/images/cases-bg-real-time.png')
no-repeat center;
- background-size: cover;
- }
-
- &.ant-tabs-tabpane-active {
- opacity: 1;
- z-index: 1;
- }
- &.ant-tabs-tabpane-hidden {
- display: block;
- opacity: 0;
- z-index: 0;
- }
- }
- }
- }
-}
-
-.cases-collapse {
- text-align: left;
- .ant-collapse {
- background-color: #fff;
- .ant-collapse-item-active {
- .ant-collapse-header-text {
- color: #444fd9;
- }
- .ant-collapse-expand-icon {
- transform: rotate(180deg);
- color: #444fd9;
- }
- }
- .ant-collapse-item {
- border-bottom: 0.5px solid #dfe5f0;
- .ant-collapse-header {
- align-items: center;
- padding: 1rem 0;
- .ant-collapse-expand-icon {
- padding: 0;
- transition-property: all;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
- }
- }
- .ant-collapse-content-box {
- height: 12rem;
- padding: 0;
- margin-top: 0.75rem;
- margin-bottom: 1rem;
-
- .cases-bg-datalake {
- background: url('/static/images/cases-bg-datalake.png')
no-repeat center;
- background-size: cover;
- }
- .cases-bg-ad-hoc {
- background: url('/static/images/cases-bg-ad-hoc.png')
no-repeat center;
- background-size: cover;
- }
- .cases-bg-customer {
- background: url('/static/images/cases-bg-customer.png')
no-repeat center;
- background-size: cover;
- }
- .cases-bg-ELT {
- background: url('/static/images/cases-bg-ELT.png')
no-repeat center;
- background-size: cover;
- }
- .cases-bg-log {
- background: url('/static/images/cases-bg-log.png')
no-repeat center;
- background-size: cover;
- }
-
- .cases-bg-real-time {
- background: url('/static/images/cases-bg-real-time.png')
no-repeat center;
- background-size: cover;
- }
- }
- }
- }
-}
-
-@media (max-width: 1024px) {
-}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 886a1aada10..d752f900d7f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,14 +3,11 @@ import Layout from '../theme/Layout';
import Link from '@docusaurus/Link';
import More from '../components/More/index';
import PageBanner, { ButtonProps } from '../components/PageBanner';
-import { Progress } from '../components/progress/progress';
-
import PageColumn from '../components/PageColumn';
import React, { useCallback, useEffect, useState } from 'react';
import Translate, { translate } from '@docusaurus/Translate';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import usePhone from '../hooks/use-phone';
-import { useAnimationFrame } from '../hooks/use-animation-frame';
import './index.scss';
import LinkWithArrow from '@site/src/components/link-arrow';
import { NEWSLETTER_DATA } from '../constant/newsletter.data';
@@ -25,29 +22,12 @@ import { Collapse, Tabs } from 'antd';
import { Content } from 'antd/es/layout/layout';
import ReadMore from '../components/ReadMore';
import { ArrowDownIcon } from '../components/Icons/arrow-down-icon';
+import { UserCaseCarousel } from '../components/user-case-carousel';
+import { NewsLetterSwiper } from '../components/newsletter-swiper';
export default function Home(): JSX.Element {
const { siteConfig } = useDocusaurusContext();
const { isPhone } = usePhone();
- const pagination = {
- clickable: true,
- renderBullet: function (index, className) {
- return '<span class="' + className + '"></span>';
- },
- };
- const modules = [Pagination];
- const [swiperRef, setSwiperRef] = useState<SwiperClass>();
-
- const [count, setCount] = useState<number>(0);
- const [activeKey, setActiveKey] = useState<string>('0');
- const [stop, setStop] = useState<boolean>(false);
- const handlePrevious = useCallback(() => {
- swiperRef?.slidePrev();
- }, [swiperRef]);
-
- const handleNext = useCallback(() => {
- swiperRef?.slideNext();
- }, [swiperRef]);
const buttons: ButtonProps[] = [
{
@@ -402,95 +382,6 @@ export default function Home(): JSX.Element {
},
];
- function renderSwiper() {
- const modules = [Pagination];
- // if (!isPhone) {
- // modules.push(Navigation);
- // }
- return (
- <div style={{ position: 'relative' }}>
- {!isPhone && (
- <div
- onClick={handlePrevious}
- className="swiper-button-prev invisible
group-hover:visible"
- style={{ position: 'absolute', top: 'calc(50% -
2rem)', left: '-3rem', zIndex: 99 }}
- ></div>
- )}
-
- <Swiper
- pagination={pagination}
- spaceBetween={50}
- slidesPerView={1}
- navigation={false}
- modules={modules}
- loop={true}
- className="firstPageSwiper"
- // style={{ minHeight: 480 }}
- onSlideChange={() => console.log('slide change')}
- onSwiper={setSwiperRef}
- >
- {NEWSLETTER_DATA.map(newsletter => {
- return (
- <SwiperSlide key={newsletter.title}>
- <div className=" row flex justify-center
xl:justify-start flex-start pb-8 lg:pb-16">
- <div className="w-full lg:w-auto flex
justify-center ml-4">
- <img
- width={424}
-
src={`${require(`@site/static/images/${newsletter.image}`).default}`}
- alt={newsletter.title}
- />
- </div>
- <div className="lg:w-[48rem] px-6 lg:px-0
lg:ml-12 mt-4 lg:mt-0 flex flex-col ">
- <div className="flex gap-1 mb-1">
- {newsletter.tags.map(value => (
- <div
className="color-[#4c576c] font-medium text-xs leading-5">
- {value}
- </div>
- ))}
- </div>
- <h3 className="leading-[38px] text-2xl
font-semibold line-clamp-1 ">
- {newsletter.title}
- </h3>
- <p className="pt-3 line-clamp-2
text-lg leading-8">{newsletter.content}</p>
- <ReadMore to={newsletter.to}
className="pt-6" />
- </div>
- </div>
- </SwiperSlide>
- );
- })}
- </Swiper>
- {!isPhone && (
- <div
- onClick={handleNext}
- className="swiper-button-next invisible
group-hover:visible"
- style={{ position: 'absolute', top: 'calc(50% -
2rem)', right: '-3rem', zIndex: 99 }}
- ></div>
- )}
- </div>
- );
- }
-
- useAnimationFrame(deltaTime => {
- // Pass on a function to the setter of the state
- // to make sure we always have the latest state
-
- setCount(prevCount => {
- if (prevCount >= 100) {
- setActiveKey(activeKey => {
- let nextKey = +activeKey + 1;
- if (nextKey >= VariousAnalyticsData.length) {
- nextKey = 0;
- }
- return nextKey.toString();
- });
- return 0;
- }
- if (deltaTime > 100) return prevCount;
-
- return prevCount + deltaTime * 0.01;
- });
- }, stop);
-
return (
<Layout
title={translate({ id: 'homepage.title', message: 'Apache Doris:
Open-Source Real-Time Data Warehouse' })}
@@ -504,7 +395,7 @@ export default function Home(): JSX.Element {
<PageBanner {...banner}></PageBanner>
<AchievementBanner />
<section style={{ backgroundColor: '#F7F9FE' }} className="group">
- <div className="container pt-14">{renderSwiper()}</div>
+ <NewsLetterSwiper />
</section>
<section className="apache-doris">
<PageColumn
@@ -575,105 +466,7 @@ export default function Home(): JSX.Element {
</div>
}
>
- {isPhone ? (
- <div className="cases-collapse">
- <Collapse
- bordered={false}
- defaultActiveKey={['0']}
- accordion
- expandIcon={ArrowDownIcon}
- expandIconPosition="right"
- items={VariousAnalyticsData.map(
- ({ title, content, icon, links,
backgroundClassName }, index) => {
- return {
- key: index,
- label: (
- <div className="flex items-center">
- <div
className="mr-4">{icon}</div>
- <span
className="text-base">{title}</span>
- </div>
- ),
- children: (
- <div
- className={`font-misans
text-start h-full ${backgroundClassName} text-[10px] leading-[17px]`}
- >
- <div className=" pt-3
pr-3">{content}</div>
-
- <div className="flex mt-3
gap-2">
- {links.map(({ content, to
}) => (
- <LinkWithArrow
- style={{ fontSize:
'10px', lineHeight: '17px' }}
-
className="text-start"
- to={to}
- text={content}
- />
- ))}
- </div>
- </div>
- ),
- };
- },
- )}
- />
- </div>
- ) : (
- <div className="cases-tabs" onMouseMove={() =>
setStop(true)} onMouseLeave={() => setStop(false)}>
- <Tabs
- activeKey={activeKey}
- onChange={activeKey => {
- setCount(0);
- setActiveKey(activeKey);
- }}
- tabPosition={isPhone ? 'top' : 'left'}
- items={VariousAnalyticsData.map(
- ({ content, title, links, backgroundClassName,
icon }, index) => {
- return {
- label: (
- <div className="font-misans
text-start">
- <span>{title}</span>
- <div className="absolute
-bottom-0 w-full">
- <Progress percent={count}
/>
- </div>
- </div>
- ),
- key: index.toString(),
- children: (
- <div
- className={`font-misans
text-start h-full ${backgroundClassName} py-14 pr-14 text-base leading-7`}
- >
- <div>{content}</div>
-
- <div className="flex mt-14
gap-10">
- {links.map(({ content, to
}) => (
- <LinkWithArrow
className="text-start" to={to} text={content} />
- ))}
- </div>
- </div>
- ),
- };
- },
- )}
- />
- {/* {VariousAnalyticsData.map(({ title, content,
links, icon }) => (
- <div className="various-analytics-group flex-col
lg:flex-row">
- <div className="items-title w-auto lg:w-[27.25rem]
">
- <div>{icon}</div>
- <div>{title}</div>
- </div>
- <div className="items-content px-6 lg:px-0">
- <div>{content}</div>
-
- <div className="links">
- {links.map(({ content, to }) => (
- <LinkWithArrow to={to} text={content}
/>
- // <More style={{ textAlign: 'left' }}
link={to} text={content} />
- ))}
- </div>
- </div>
- </div>
- ))} */}
- </div>
- )}
+ <UserCaseCarousel />
</PageColumn>
<PageColumn
className="bg-[#F7F9FE]"
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
