Added section wall of love or testimonial
This commit is contained in:
Faisal Amir
parent
5e7a28c5d4
commit
c77d881823
175
docs/src/containers/Testimonial/index.js
Normal file
175
docs/src/containers/Testimonial/index.js
Normal file
@ -0,0 +1,175 @@
|
||||
import { useColorMode } from '@docusaurus/theme-common'
|
||||
import { Tweet } from 'react-tweet'
|
||||
|
||||
const firstColumn = [
|
||||
{
|
||||
type: 'tweet',
|
||||
id: '1742843063938994469',
|
||||
},
|
||||
{
|
||||
type: 'youtube',
|
||||
id: 'ZCiEQVOjH5U',
|
||||
},
|
||||
{
|
||||
type: 'youtube',
|
||||
id: '7JpzE-_cKo4',
|
||||
},
|
||||
{
|
||||
type: 'tweet',
|
||||
id: '1744729548074459310',
|
||||
},
|
||||
]
|
||||
|
||||
const secondColumn = [
|
||||
{
|
||||
type: 'youtube',
|
||||
id: 'QpMQgJL4AZA',
|
||||
},
|
||||
{
|
||||
type: 'tweet',
|
||||
id: '1750801065132384302',
|
||||
},
|
||||
{
|
||||
type: 'youtube',
|
||||
id: '9ta2S425Zu8',
|
||||
},
|
||||
{
|
||||
type: 'tweet',
|
||||
id: '1757504717519749292',
|
||||
},
|
||||
]
|
||||
|
||||
const thirdColumn = [
|
||||
{
|
||||
type: 'tweet',
|
||||
id: '1745560583548670250',
|
||||
},
|
||||
{
|
||||
type: 'youtube',
|
||||
id: 'zkafOIyQM8s',
|
||||
},
|
||||
{
|
||||
type: 'tweet',
|
||||
id: '1757500111629025788',
|
||||
},
|
||||
]
|
||||
|
||||
const fourthColumn = [
|
||||
{
|
||||
type: 'tweet',
|
||||
id: '1742993414986068423',
|
||||
},
|
||||
{
|
||||
type: 'youtube',
|
||||
id: '9ta2S425Zu8',
|
||||
},
|
||||
{
|
||||
type: 'youtube',
|
||||
id: 'ES021_sY6WQ',
|
||||
},
|
||||
{
|
||||
type: 'youtube',
|
||||
id: 'CbJGxNmdWws',
|
||||
},
|
||||
]
|
||||
|
||||
const Testimonial = () => {
|
||||
const { colorMode } = useColorMode()
|
||||
|
||||
return (
|
||||
<div className="bg-[#F0F0F0] dark:bg-[#242424] p-8 mt-10 pb-20">
|
||||
<div className="w-full xl:w-3/5 mx-auto relative py-8 text-center">
|
||||
<h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
|
||||
People say nice things
|
||||
</h1>
|
||||
<p className="leading-relaxed mt-2 text-black/60 dark:text-white/60">
|
||||
...despite our bugs and fast moving releases
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full xl:w-3/4 mx-auto relative text-center">
|
||||
<div data-theme={colorMode} className="mt-10">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-left">
|
||||
<div className="space-y-4">
|
||||
{firstColumn.map((item, i) => {
|
||||
if (item.type === 'tweet') return <Tweet key={i} id={item.id} />
|
||||
if (item.type === 'youtube')
|
||||
return (
|
||||
<div>
|
||||
<iframe
|
||||
width="100%"
|
||||
height="260"
|
||||
src={`https://www.youtube.com/embed/${item.id}`}
|
||||
title="Install Jan to Run LLM Offline and Local First"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{secondColumn.map((item, i) => {
|
||||
if (item.type === 'tweet') return <Tweet key={i} id={item.id} />
|
||||
if (item.type === 'youtube')
|
||||
return (
|
||||
<div>
|
||||
<iframe
|
||||
width="100%"
|
||||
height="260"
|
||||
src={`https://www.youtube.com/embed/${item.id}`}
|
||||
title="Install Jan to Run LLM Offline and Local First"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{thirdColumn.map((item, i) => {
|
||||
if (item.type === 'tweet') return <Tweet key={i} id={item.id} />
|
||||
if (item.type === 'youtube')
|
||||
return (
|
||||
<div>
|
||||
<iframe
|
||||
width="100%"
|
||||
height="260"
|
||||
src={`https://www.youtube.com/embed/${item.id}`}
|
||||
title="Install Jan to Run LLM Offline and Local First"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{fourthColumn.map((item, i) => {
|
||||
if (item.type === 'tweet') return <Tweet key={i} id={item.id} />
|
||||
if (item.type === 'youtube')
|
||||
return (
|
||||
<div>
|
||||
<iframe
|
||||
width="100%"
|
||||
height="260"
|
||||
src={`https://www.youtube.com/embed/${item.id}`}
|
||||
title="Install Jan to Run LLM Offline and Local First"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Testimonial
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import DownloadApp from '@site/src/containers/DownloadApp'
|
||||
import { Tweet } from 'react-tweet'
|
||||
import { useForm } from 'react-hook-form'
|
||||
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
@ -27,6 +26,8 @@ import Svg from '@site/static/img/homepage/features01dark.svg'
|
||||
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
import Testimonial from '@site/src/containers/Testimonial'
|
||||
|
||||
const table = {
|
||||
labels: [
|
||||
'Ownership',
|
||||
@ -280,16 +281,7 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
{/* Wall of love */}
|
||||
<div className="bg-[#F0F0F0] dark:bg-[#242424] p-8 mt-20">
|
||||
<div className="w-full xl:w-3/5 mx-auto relative py-8 text-center">
|
||||
<h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
|
||||
People say nice things
|
||||
</h1>
|
||||
<p className="leading-relaxed mt-2 text-black/60 dark:text-white/60">
|
||||
...despite our bugs and fast moving releases
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Testimonial />
|
||||
|
||||
{/* Feature */}
|
||||
<div className="w-full xl:w-10/12 mx-auto relative py-8">
|
||||
@ -729,6 +721,12 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isBrowserChrome && (
|
||||
<div className="my-10" id="download-section">
|
||||
<DownloadApp />
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</Layout>
|
||||
</>
|
||||
|
||||
@ -27,6 +27,92 @@
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.react-tweet-theme {
|
||||
--tweet-container-margin: 1.5rem 0;
|
||||
--tweet-header-font-size: 0.9375rem;
|
||||
--tweet-header-line-height: 1.25rem;
|
||||
--tweet-body-font-size: 1.25rem;
|
||||
--tweet-body-font-weight: 400;
|
||||
--tweet-body-line-height: 1.5rem;
|
||||
--tweet-body-margin: 0;
|
||||
--tweet-quoted-container-margin: 0.75rem 0;
|
||||
--tweet-quoted-body-font-size: 0.938rem;
|
||||
--tweet-quoted-body-font-weight: 400;
|
||||
--tweet-quoted-body-line-height: 1.25rem;
|
||||
--tweet-quoted-body-margin: 0.25rem 0 0.75rem 0;
|
||||
--tweet-info-font-size: 0.9375rem;
|
||||
--tweet-info-line-height: 1.25rem;
|
||||
--tweet-actions-font-size: 0.875rem;
|
||||
--tweet-actions-line-height: 1rem;
|
||||
--tweet-actions-font-weight: 700;
|
||||
--tweet-actions-icon-size: 1.25em;
|
||||
--tweet-actions-icon-wrapper-size: calc(
|
||||
var(--tweet-actions-icon-size) + 0.75em
|
||||
);
|
||||
--tweet-replies-font-size: 0.875rem;
|
||||
--tweet-replies-line-height: 1rem;
|
||||
--tweet-replies-font-weight: 700;
|
||||
}
|
||||
|
||||
:is([data-theme='light'], .light) :where(.react-tweet-theme),
|
||||
:where(.react-tweet-theme) {
|
||||
--tweet-skeleton-gradient: linear-gradient(
|
||||
270deg,
|
||||
#fafafa,
|
||||
#eaeaea,
|
||||
#eaeaea,
|
||||
#fafafa
|
||||
);
|
||||
--tweet-border: 1px solid #cfd9de;
|
||||
--tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Helvetica, Arial, sans-serif;
|
||||
--tweet-font-color: #0f1419;
|
||||
--tweet-font-color-secondary: #536471;
|
||||
--tweet-bg-color: #fff;
|
||||
--tweet-bg-color-hover: #f7f9f9;
|
||||
--tweet-quoted-bg-color-hover: rgba(0, 0, 0, 0.03);
|
||||
--tweet-color-blue-primary: #1d9bf0;
|
||||
--tweet-color-blue-primary-hover: #1a8cd8;
|
||||
--tweet-color-blue-secondary: #006fd6;
|
||||
--tweet-color-blue-secondary-hover: rgba(0, 111, 214, 0.1);
|
||||
--tweet-color-red-primary: #f91880;
|
||||
--tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
|
||||
--tweet-color-green-primary: #00ba7c;
|
||||
--tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
|
||||
--tweet-twitter-icon-color: var(--tweet-font-color);
|
||||
--tweet-verified-old-color: #829aab;
|
||||
--tweet-verified-blue-color: var(--tweet-color-blue-primary);
|
||||
}
|
||||
|
||||
:is([data-theme='dark'], .dark) :where(.react-tweet-theme) {
|
||||
--tweet-skeleton-gradient: linear-gradient(
|
||||
270deg,
|
||||
#15202b,
|
||||
#1e2732,
|
||||
#1e2732,
|
||||
#15202b
|
||||
);
|
||||
--tweet-border: 1px solid #425364;
|
||||
--tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Helvetica, Arial, sans-serif;
|
||||
--tweet-font-color: #f7f9f9;
|
||||
--tweet-font-color-secondary: #8b98a5;
|
||||
--tweet-bg-color: #333333;
|
||||
--tweet-bg-color-hover: #1e2732;
|
||||
--tweet-quoted-bg-color-hover: hsla(0, 0%, 100%, 0.03);
|
||||
--tweet-color-blue-primary: #1d9bf0;
|
||||
--tweet-color-blue-primary-hover: #1a8cd8;
|
||||
--tweet-color-blue-secondary: #6bc9fb;
|
||||
--tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1);
|
||||
--tweet-color-red-primary: #f91880;
|
||||
--tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
|
||||
--tweet-color-green-primary: #00ba7c;
|
||||
--tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
|
||||
--tweet-twitter-icon-color: var(--tweet-font-color);
|
||||
--tweet-verified-old-color: #829aab;
|
||||
--tweet-verified-blue-color: #fff;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
@apply text-sm;
|
||||
@ -69,3 +155,12 @@
|
||||
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.actions_node_modules-react-tweet-dist-twitter-theme-tweet-actions-module,
|
||||
.authorFollow_node_modules-react-tweet-dist-twitter-theme-tweet-header-module {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.replies_node_modules-react-tweet-dist-twitter-theme-tweet-replies-module {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user