diff --git a/docs/Edge/NVIDIA_Jetson/RecomputerPage.mdx b/docs/Edge/NVIDIA_Jetson/RecomputerPage.mdx index 54cb3feb24ac..3dc584c9c927 100644 --- a/docs/Edge/NVIDIA_Jetson/RecomputerPage.mdx +++ b/docs/Edge/NVIDIA_Jetson/RecomputerPage.mdx @@ -12,20 +12,8 @@ last_update: author: Lakshantha --- -import RecomputerPage from '@site/src/components/recomputer'; +import RecomputerPage from '@site/src/components/jeston'; -
-NVIDIA® Jetson™ brings accelerated AI performance to the Edge in a power-efficient and compact form factor. The Jetson family of modules all use the same NVIDIA CUDA-X™ software, and support cloud-native to build, deploy, and manage AI at the edge across all industries. -Seeed is the authorized reseller of NVIDIA Jetson Developer Kits and Elite Partner of the NVIDIA Jetson ecosystem. Based on our with our over 15 years of hardware expertise, we offer a one-stop experience to simplify edge AI development including standard carrier boards -and devices family, ODM services of both hardware & image flashing. Together with leading AI ecosystem partners, Seeed speeds time to market for customers by handling integration, manufacturing, fulfillment, and distribution. - -
-
-
- Click here to learn more about the comparison between the NVIDIA Jetson powered devices -
-
-
diff --git a/src/components/jeston/config.js b/src/components/jeston/config.js new file mode 100644 index 000000000000..a3f62667758f --- /dev/null +++ b/src/components/jeston/config.js @@ -0,0 +1,137 @@ +export const hadwareList = [ + { + id: 1, + name: 'reComputer', + img: '17.png', + brands: [ + { + name: 'reComputer J10 SerieseComputer J10 Series', + img: '17.png', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'reComputer J10 Series', + img: '18.png', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'reComputer J10 Series', + img: '17.png', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'reComputer J10 Series', + img: '18.png', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'reComputer J10 Series', + img: '17.png', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'reComputer J10 Series', + img: '18.png', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'reComputer J10 Series', + img: '17.png', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'reComputer J10 Series', + img: '18.png', + href: 'https://www.seeedstudio.com/', + }, + ], + }, + { + id: 3, + name: 'Mini AI PC', + img: '17.png', + brands: [ + { + name: 'reComputer J10 Series', + img: '18.png', + }, + { + name: 'reComputer J10 Series', + img: '17.png', + }, + ], + }, + { + id: 3, + name: 'Mini AI PC', + img: '17.png', + brands: [ + { + name: 'reComputer J10 Series', + img: '17.png', + }, + { + name: 'reComputer J10 Series', + img: '18.png', + }, + ], + }, + { + id: 3, + name: 'Mini AI PC', + img: '17.png', + brands: [ + { + name: 'reComputer J10 Series', + img: '17.png', + }, + { + name: 'reComputer J10 Series', + img: '17.png', + }, + ], + }, +] + +export const communityList = [ + { + name: 'Qualia S3 Fireplace', + img: 'com1', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'Simplifying Qualia CircuitPython Projects', + img: 'com2', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'Adafruit Qualia ESP32-S3 for RGB-666 Displays', + img: 'com3', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'Edge-Lit Tavern Sign with WLED - Control with WiFi...', + img: 'com4', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'ESP32-S2 Reverse TFT Digital Clock Display featuring...', + img: 'com5', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'No-Code IKEA Vindriktning Air Quality Sensor Hack...', + img: 'com6', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'LEGO Set Lighting', + img: 'com7', + href: 'https://www.seeedstudio.com/', + }, + { + name: 'Qualia S3 Space Clock', + img: 'com8', + href: 'https://www.seeedstudio.com/', + }, +] diff --git a/src/components/jeston/index.module.scss b/src/components/jeston/index.module.scss new file mode 100644 index 000000000000..3490c39fb994 --- /dev/null +++ b/src/components/jeston/index.module.scss @@ -0,0 +1,323 @@ +.jeston_page { + .flex { + display: flex; + } + + .cursor { + cursor: pointer; + + + } + + ::-webkit-scrollbar { + width: 5px; + /*滚动条宽度*/ + height: 5px; + /*滚动条高度*/ + } + + /*定义滚动条轨道 内阴影+圆角*/ + ::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px #eee; + border-radius: 10px; + /*滚动条的背景区域的圆角*/ + background-color: rgba(255, 255, 255, 0.8); + /*滚动条的背景颜色*/ + } + + /*定义滑块 内阴影+圆角*/ + ::-webkit-scrollbar-thumb { + border-radius: 10px; + /*滚动条的圆角*/ + -webkit-box-shadow: inset 0 0 6px #333; + background-color: #555; + /*滚动条的背景颜色*/ + } + + .banner { + display: flex; + justify-content: space-between; + background-image: url('https://files.seeedstudio.com/wiki/Jetson/banner_bg.png?v=2'); + background-size: cover; + background-color: #EEF4DF; + padding: 70px 60px; + + .banner_left { + flex: 1; + } + + .banner_right { + flex: 1; + } + + .title { + font-family: Montserrat; + font-size: 38px; + font-weight: 600; + line-height: 1.3; + margin-bottom: 20px; + } + + .bottom { + margin-top: 26px; + font-weight: 500; + align-items: center; + + + span { + line-height: 1.2; + flex: 1; + } + } + + .right { + width: 38px; + height: 38px; + background: #89B929; + border-radius: 50%; + margin-right: 12px; + justify-content: center; + + img { + width: 24px; + } + + } + } + + .section { + padding: 40px 30px; + + .title { + font-size: 32px; + font-weight: 600; + text-align: center; + } + + .desc { + font-size: 14px; + text-align: center; + margin-top: 20px; + } + + .section_wrapper { + margin-top: 50px; + } + } + + .community { + // background-color: #fff; + + .com_wrapper { + flex-wrap: wrap; + + .com_item { + width: calc(25% - 18px); + padding: 20px 8px; + border-radius: 20px; + background: #F3F5F8; + margin-right: 24px; + margin-bottom: 24px; + + &:nth-child(4n) { + margin-right: 0; + } + + img { + border-radius: 10px; + } + + .com_title { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + /* 限制显示的行数 */ + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + text-decoration: underline; + } + } + } + } + } + + .usage { + .left_container { + width: 280px; + margin-right: 24px; + + .tab { + height: 76px; + align-items: center; + cursor: pointer; + + padding: 0 20px; + + &.active { + background: #8FC31F; + border-radius: 8px; + color: #fff; + } + + img { + width: 40px; + + height: auto; + margin-right: 14px; + } + } + + .name { + + flex: 1; + } + } + + .right_container { + flex: 1; + border-radius: 8px; + background: #F3F5F8; + padding: 24px; + padding-right: 0; + height: 100%; + + .right_wrapper { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + height: 100%; + max-height: 494px; + + .prod_item { + background-color: #fff; + text-align: center; + border-radius: 8px; + margin-right: 24px; + padding: 24px; + margin-bottom: 20px; + width: calc(33% - 24px); + + img { + height: 99px; + } + + .name { + &:hover { + text-decoration: underline; + } + } + } + } + + + } + + &.gray { + + background: #F3F5F8; + + .right_container { + background-color: #fff; + + .right_wrapper { + .prod_item { + display: flex; + text-align: left; + + img { + width: 38px; + height: 38px; + margin-right: 8px; + } + + } + } + } + } + + } + + &.dark { + .banner { + background-color: #1B1B1D; + // background-color: linear-gradient(270deg, #000000 2%, rgba(0, 0, 0, 0) 100%); + } + + .usage { + .right_container { + background: #242526; + + .prod_item { + background: rgba(255, 255, 255, 0.05); + } + } + + &.gray { + background: #1B1B1D; + + .right_container { + background: #242526; + + .prod_item { + background: rgba(255, 255, 255, 0.05); + } + } + } + } + + .community { + .com_wrapper { + flex-wrap: wrap; + + .com_item { + background: #242526; + } + } + } + } + + @media (max-width: 768px) { + .banner { + flex-direction: column; + padding: 20px 10px; + } + + .section { + padding: 20px 10px; + + + } + + .usage { + .left_container { + width: 100%; + } + + .com_wrapper { + flex-direction: column; + + .right_container { + .prod_item { + width: 100%; + } + } + } + } + + .community { + .com_wrapper { + + .com_item { + width: calc(50% - 12px); + + &:nth-child(2n) { + margin-right: 0; + } + + } + } + } + } +} \ No newline at end of file diff --git a/src/components/jeston/index.tsx b/src/components/jeston/index.tsx new file mode 100644 index 000000000000..359130ef7d23 --- /dev/null +++ b/src/components/jeston/index.tsx @@ -0,0 +1,131 @@ +import React, { useState } from 'react'; +import clsx from 'clsx' +import styles from './index.module.scss' +import { hadwareList, communityList } from './config' +import { + useThemeConfig, + useColorMode, + ThemeConfig +} from '@docusaurus/theme-common'; +function getImgUrl(str: string, suffix?: string) { + return `https://files.seeedstudio.com/wiki/Jetson/${str}.${suffix || 'png'}` +} + +const toUrl=(url:string)=>{ +if(!url) return + window.open(url,'_blank') +} +const bannerRender = () => { + return ( +
+
+
+ NVIDIA® Jetson™ Powered Edge AI Devices Guide +
+
NVIDIA® Jetson™ delivers high-performance AI at the edge with energy-efficient modules using NVIDIA CUDA-X™ software. As an authorized reseller and Elite Partner, Seeed provides a comprehensive edge AI development solution, leveraging 15+ years of hardware expertise. Our offerings include standard carrier boards, ODM services, and image flashing, ensuring a seamless integration process. Partnering with top AI ecosystem players, we expedite your market launch with our end-to-end service from integration to distribution.
+
+
+ +
+ + learn more about the comparison between the NVIDIA Jetson powered devices + +
+
+
+ +
+
+ ) +} +const communityRender = () => { + return ( +
+
+ NVIDIA® Jetson™ Powered Edge AI Devices Guide +
+
+ { + communityList.map((item) => { + return ( +
toUrl(item.URL)}> + +
{item.name}
+
+ ) + })} +
+ +
+ ) +} +const usageRender = (obj) => { + const [activeIndex,setActiveIndex]=useState(0) + + return ( +
+
+ {obj.title} +
+
+ {obj.desc} +
+
+
+ {hadwareList.map((item,index) => { + return ( +
{ + setActiveIndex(index) + }}> + +
{item.name}
+
+ ) + })} +
+
+
+ + {hadwareList[activeIndex].brands.map((item) => { + return ( +
toUrl(item.URL)}> + +
{item.name}
+
+ ) + })} +
+
+
+
+ ) +} +const computerPageA = () => { + + + + const { colorMode } =useColorMode() + + return ( +
+ {bannerRender()} + {usageRender({ + title: 'Jetpack Flash and Hardware Usage', + desc: ` + Most of our reComputer Jetson products come with NVIDIA JetPack system pre-installed on the device. However, if you want to flash these devices again or flash other devices which do not come with JetPack system, you can follow the below links for step-by-step guidance. We have also included guidance on how to use different hardware peripherals on these NVIDIA Jetson powered devices. + ` + })} + {usageRender({ + class:styles.gray, + title: 'Jetpack Flash and Hardware Usage', + desc: ` + Most of our reComputer Jetson products come with NVIDIA JetPack system pre-installed on the device. However, if you want to flash these devices again or flash other devices which do not come with JetPack system, you can follow the below links for step-by-step guidance. We have also included guidance on how to use different hardware peripherals on these NVIDIA Jetson powered devices. + ` + })} + {communityRender()} + +
+ ); +}; + +export default computerPageA; \ No newline at end of file diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css index d5aaec1322c9..cd1088a4ddb0 100644 --- a/src/theme/DocItem/Layout/styles.module.css +++ b/src/theme/DocItem/Layout/styles.module.css @@ -5,6 +5,6 @@ @media (min-width: 997px) { .docItemCol { - max-width: 75% !important; + /* max-width: 75% !important; */ } }