diff --git a/_layouts/thingsboard-edge.html b/_layouts/thingsboard-edge.html index d1488e7232..5be69bbace 100644 --- a/_layouts/thingsboard-edge.html +++ b/_layouts/thingsboard-edge.html @@ -9,12 +9,13 @@ data-vide-options="bgColor: #000000, loop: true, muted: true, posterType: webp">
- ThingsBoard Edge -

Distribute data processing and analysis using edge computing

+

Open Source IoT Edge Computing

+

ThingsBoard Edge: IoT that works when the internet doesn't

- Learn More - Request a Demo + Contact Us + Learn More
diff --git a/images/edge/tb-cloud.webp b/images/edge/tb-cloud.webp index 94956d6052..872dbd5ab5 100644 Binary files a/images/edge/tb-cloud.webp and b/images/edge/tb-cloud.webp differ diff --git a/images/edge/tb-edge-gw.webp b/images/edge/tb-edge-gw.webp index e89a8787e7..ee123edb14 100644 Binary files a/images/edge/tb-edge-gw.webp and b/images/edge/tb-edge-gw.webp differ diff --git a/images/edge/tb-edge.webp b/images/edge/tb-edge.webp index 58fb49d872..c2ca65d5e7 100644 Binary files a/images/edge/tb-edge.webp and b/images/edge/tb-edge.webp differ diff --git a/products/thingsboard-edge/index.md b/products/thingsboard-edge/index.md index 99fe450ed4..9ca18e702d 100644 --- a/products/thingsboard-edge/index.md +++ b/products/thingsboard-edge/index.md @@ -5,183 +5,117 @@ description: Comprehensive software solutions for edge computing, providing data ---
-
-

Introducing ThingsBoard Edge: Our software solutions specifically designed for edge computing, delivering exceptional performance and efficiency where you need it most

-

With ThingsBoard Edge, data analysis and management happen right at the source, where your data is generated. This powerful solution ensures seamless synchronization with the ThingsBoard server, perfectly tailored to your business needs. Enjoy the flexibility to connect to public ThingsBoard servers like thingsboard.cloud or demo.thingsboard.io, or integrate it with your own on-premise installations, whether using Community Edition (CE) or Professional Edition (PE). Experience enhanced efficiency and real-time insights like never before!

-
-
- -
-
-
-
-
-
-

Local Deployment and Storage

-

Process and store data from local (edge) devices independently of the server. Sync updates with the server once connectivity is restored.

- Edge CEarrow firstarrow secondarrow third - Edge PEarrow firstarrow secondarrow third -
-
- local deployment -
-
-
-
- -
-
-
- data filtering +
+
+
5
+
Years in Edge domain
-

Data Filtering

-

Use the ThingsBoard Edge service to filter data from local (edge) devices and forward only a subset of data to the server for further processing or storage.

- Edge CEarrow firstarrow secondarrow third - Edge PEarrow firstarrow secondarrow third +
+
150+
+
Clients
-
-
-
- -
-
-
-
-
-
-

Local Alarms

-

Respond instantly to critical situations on-site, even without connectivity to server.

- Edge CEarrow firstarrow secondarrow third - Edge PEarrow secondarrow third +
+
∞
+
Devices per Edge
-
- local alarms +
+
100%
+
Data processed on-site
-
-
- -
-
-
-
- batch update -
-

Batch Update and Visualization

-

Update thousands of edge configurations with a single click. Monitor local events and time series data using a real-time dashboard.

- Edge CEarrow firstarrow secondarrow third - Edge PEarrow firstarrow secondarrow third -
-
-
+
-
+
-
+
-

More about ThingsBoard Edge strengths

-
-
-
- Robust and Efficient -
-

Robust and Efficient

-

A single Edge instance is capable of handling up to 1,000 devices, depending on the use-case and the capabilities of the deployed hardware.

-
-
-
-
-
Durable -
-

Durable

-

The Edge system collects all messages and events in a persistent layer. Selected messages can be transferred to the server, as per necessity.

-
+

IoT Architecture Comparison

+
+
+
+
+

IoT Gateway

+ + +
-
-
-
Customizable -
-

Customizable

-

Enhancing functionality is effortless with our rule engine, alongside the ability to customize widgets and dashboards to your preference.

-
+
+ Device connectivity + Data routing + Multi-protocol support + Legacy device integration +

The IoT Gateway bridges local devices to Edge or Server, handling multi-protocol conversion and data routing. It enables legacy equipment integration and real-time data streaming across diverse communication protocols without cloud dependency.

-
-
Scalable -
-

Scalable

-

Distribute your computational tasks and data analysis across thousands of Edge instances for superior scalability.

-
+
+
+

ThingsBoard Edge

+ + +
-
-
-
- 100% Open-source -
-

100% Open-source

-

ThingsBoard is licensed under Apache License 2.0, so you can use it in your commercial products for free. You can even host it as a SaaS or PaaS solution.

-
+
+ Local processing + Offline operation + Low latency + Remote sites + On-premises analytics +

ThingsBoard Edge processes and visualizes data locally at the network edge, enabling autonomous operation during connectivity outages. It reduces bandwidth costs by filtering data before cloud transmission while maintaining sub-second response times for critical automation.

-
-
- Real-Time Insights and Local Alarms -
-

Real-Time Insights and Local Alarms

-

Gain immediate access to critical data and insights, allowing for informed decision-making and timely responses to emerging challenges. Respond instantly to critical situations on-site, even without connectivity to the server.

-
+
+
+

ThingsBoard Server

+ + +
-
-
-
- Offline Capabilities -
-

Offline Capabilities

-

ThingsBoard Edge can continue to operate even when disconnected from the central server. It stores data locally and syncs with the server once connectivity is restored, ensuring no data is lost during outages.

-
+
+ Cloud infrastructure + Centralized platform + Multi-tenancy + Scalable architecture +

The ThingsBoard Server provides centralized data processing, storage, and advanced analytics with enterprise-grade scalability. It supports multi-tenancy, flexible deployment options from on-premises to cloud, and unlimited device connectivity for large-scale IoT infrastructure.

-
-
- Low Latency -
-

Low Latency

-

With local data processing capabilities, ThingsBoard Edge minimizes latency, enabling real-time data analysis and decision-making. This is particularly beneficial for applications requiring immediate response, such as industrial automation.

-
-
+
+
+ -
-
- Rule engine -
-

Rule engine

-

Process incoming device data with flexible rule chains based on entity attributes or message content. Forward data to external systems or trigger alarms using custom logic. Configure complex notification chains on alarms. Enrich server-side functionality or manipulate your devices with highly customizable rules. Define your application logic with drag-n-drop rule chain designer.

-
-
+
+
+ -
-
- User-Friendly -
-

User-Friendly

-

The intuitive interface and straightforward setup process make ThingsBoard Edge accessible for users with varying levels of technical expertise, enabling faster deployment and easier management. The platform supports various protocols (like MQTT, CoAP, and HTTP), making it easy to integrate with diverse devices and systems.

-
-
+
+
+
+
+
+
+
+
-

Feature Comparison Matrix

+

Which ThingsBoard Product Is Right for You?

+

Compare IoT Gateway, Edge, and Server capabilities to find the best fit for your IoT infrastructure and connectivity requirements.

@@ -199,55 +133,55 @@ description: Comprehensive software solutions for edge computing, providing data - + - + - + - + - + - + - + - + - + @@ -260,56 +194,232 @@ description: Comprehensive software solutions for edge computing, providing data
N/A
Data CollectionData Collection checked checked checked
Core Protocols Support
(MQTT, HTTP, CoAP, etc.)		Core Protocols Support
(MQTT, HTTP, CoAP, etc.)		 checked checked checked
Peripheral Infrastructure Protocols Support
(Modbus, BACNet, BLE, etc.)		Peripheral Infrastructure Protocols Support
(Modbus, BACNet, BLE, etc.)		 checked unchecked unchecked
Data Processing and AnalysisData Processing and Analysis unchecked checked checked
Real-Time and SCADA-like HMI DashboardsReal-Time HMI Dashboards
and SCADA-like HMI Dashboards		 unchecked checked checked
Alarms & NotificationsAlarms & Notifications unchecked checked checked
Asset ManagementAsset Management unchecked checked checked
Offline Data Computing and Storage
(Remote Site Scenarios)		Offline Data Computing and Storage
(Remote Site Scenarios)		 Data Collection checked unchecked
Multi-Tenancy SupportMulti-Tenancy Support unchecked unchecked checked
+
-
+
-
+
-

Typical Usage Scenario

-
-
-

IoT Gateway

-

The IoT Gateway collects, processes, and routes data from local area networks (LAN) to the Edge or Server. It acts as a critical bridge, facilitating seamless communication between IoT devices and larger network infrastructures.

- ThingsBoard Gateway block - What is ThingsBoard IoT Gateway? +
+ Dominic Winkler +
+

ÖBB-Infrastruktur AG

+

“Thingsboard Edge gives us the invaluable ability to allow data to flow within our IT network without the need to bridge Firewalls and Public Internet.”

+

Dominic Winkler

+

IT Enterprise Architect

-
-

Edge

-

ThingsBoard Edge processes and visualizes data directly at the network edge, offering immediate insights and reducing bandwidth demands by minimizing the volume of data transmitted to centralized servers.

- ThingsBoard Edge block - What is ThingsBoard Edge? +
+
+ +
+
+
+

Need offline-capable IoT solution?

+ Let's talk Edge
-
-

Server

-

The ThingsBoard Server provides robust data processing and storage solutions, along with advanced analytics capabilities. It supports a wide range of deployments, from on-premises to cloud-based, ensuring flexibility and scalability for diverse enterprise needs.

- ThingsBoard Cloud block - What is ThingsBoard Cloud? +
+
+ +
+
+

Edge Key Features

+
+

Local Deployment and Storage

+

Process and store data from local (edge) devices independently of the server. Sync updates with the server once connectivity is restored.

+ Edge CEarrow firstarrow secondarrow third + Edge PEarrow firstarrow secondarrow third +
+
+ local deployment +
-
+ + + +
+
+
+
+
+
+
+ data filtering +
+

Data Filtering

+

Use the ThingsBoard Edge service to filter data from local (edge) devices and forward only a subset of data to the server for further processing or storage.

+ Edge CEarrow firstarrow secondarrow third + Edge PEarrow firstarrow secondarrow third +
+
+
+
+ +
+
+
+
+
+
+

Local Alarms

+

Respond instantly to critical situations on-site, even without connectivity to server.

+ Edge CEarrow firstarrow secondarrow third + Edge PEarrow secondarrow third +
+
+ local alarms +
+
+
+
+ +
+
+
+
+ batch update +
+

Batch Update and Visualization

+

Update thousands of edge configurations with a single click. Monitor local events and time series data using a real-time dashboard.

+ Edge CEarrow firstarrow secondarrow third + Edge PEarrow firstarrow secondarrow third +
+
+
-
+
-
+
-

Minimal requirements

-
-
-
-
-

ThingsBoard Edge

-

Platform: Compact server (e.g, Intel NUC, mini-PC, embedded PC)
CPU: 2-core x86-64 processor
RAM: 2 GB
Storage: 20 GB of free disk space
OS: Linux (Debian, CentOS) or Windows
Java VM: JDK 8+ (JDK 17 preferred)

+

Why Edge Works

+
+
+
+
+ 100% Open-source +
+

100% Open-source

+ + + +
+
+

Licensed under Apache 2.0. Use freely in commercial products, host as SaaS/PaaS, or modify to fit your needs.

+
+
+
+
+
+ Customizable
+

Customizable

+ + + +
+
+

Flexible rule engine and customizable dashboards let you tailor Edge to your specific workflow and business requirements.

-
-
-
-

ThingsBoard IoT Gateway

-

Platform: Low-spec server (e.g, Raspberry Pi, Intel NUC)
CPU: Single-core x86-x64 processor
RAM: 1 GB
Storage: 10 GB of free disk space
OS: Linux (Debian, CentOS)

-
+
+
+
+ Robust and Efficient +
+

Robust and Reliable

+ + + +
+
+

Handles up to 1,000 devices per Edge instance while ensuring zero data loss through persistent local storage and automatic sync.

+
+
+
+
+
+ Scalable +
+

Scalable

+ + + +
+
+

Deploy thousands of Edge instances across distributed sites for horizontal scalability and distributed data processing.

+
+
+
+
+
+ Real-Time +
+

Real-Time

+ + + +
+
+

Instant access to critical data enables immediate decision-making. Local alarms trigger on-site without server connectivity.

+
+
+
+
+
+ Offline Capable +
+

Offline Capable

+ + + +
+
+

Operates independently when disconnected. Stores data locally and auto-syncs when connection restores—zero data loss.

+
+
+
+
+
+ Responsive +
+

Responsive

+ + + +
+
+

Local processing delivers sub-second response times, critical for industrial automation and real-time control systems.

+
+
+
+
+
+ Logic-Driven +
+

Logic-Driven

+ + + +
+
+

Drag-and-drop rule chain designer lets you define custom logic for data processing, external integrations, and alarm notifications.

+
+
+
+
+
+ User-Friendly +
+

User-Friendly

+ + + +
+
+

Intuitive interface and multi-protocol support (MQTT, CoAP, HTTP) enable fast deployment across diverse device ecosystems.

@@ -317,5 +427,58 @@ description: Comprehensive software solutions for edge computing, providing data
- Try Edge now +
+
+

Ready to bring intelligence to the network edge?

+
+ Get started now +
+
+ Edge icon +
+ + + \ No newline at end of file diff --git a/products/thingsboard-edge/thingsboard-edge.sass b/products/thingsboard-edge/thingsboard-edge.sass index 7bb379d84a..974762e83d 100644 --- a/products/thingsboard-edge/thingsboard-edge.sass +++ b/products/thingsboard-edge/thingsboard-edge.sass @@ -34,27 +34,41 @@ align-content: center background-color: rgba(0,0,0,0.72) .edge-title - margin-bottom: 20px - font-size: 22px - font-weight: 400 + margin-bottom: 24px + font-size: 42px + font-weight: 500 text-shadow: 0 0 18px rgba(0,0,0,.66) .edge-description - margin-bottom: 40px - font-size: 14px - line-height: 16px + margin-bottom: 48px + font-size: 22px + line-height: 32px text-shadow: 0 0 18px rgba(0,0,0,.66) .try-edge cursor: pointer - line-height: 40px - font-size: 16px - padding: 0 15px - border: 1px solid white - background-color: transparent - transition: 0.6s - text-shadow: 0 0 18px rgba(0,0,0,.66) + line-height: 52px + font-size: 20px + padding: 0 28px + transition: all 0.3s ease + border: 2px solid white + color: white &:hover + transform: scale(1.08) + background-color: rgba(255,255,255,0.15) + &:first-of-type background-color: white - color: $dark-grey + color: #009688 + &:hover + transform: scale(1.08) + background-color: white + color: #009688 + text-shadow: none + &:last-of-type + background-color: transparent + &:hover + transform: scale(1.05) + background-color: white + color: #009688 + text-shadow: none .learn-tb cursor: pointer line-height: 40px @@ -146,29 +160,184 @@ font-size: 18px #intro - margin-bottom: 80px - padding-top: 98px + margin-bottom: 10px + padding-top: 25px color: #212924 .intro_title padding: 0 - .labeling - margin: 48px 0 102px text-align: center - color: #A5A5A5 + margin-bottom: 64px + .stats-container + display: flex + justify-content: space-between + align-items: center + gap: 40px + max-width: 1200px + margin: 0 auto + .stat-block + flex: 1 + text-align: center + padding: 32px 20px + position: relative + &:not(:last-child)::after + content: '' + position: absolute + right: -20px + top: 50% + transform: translateY(-50%) + width: 1px + height: 60px + background: linear-gradient(to bottom, transparent, #E0E0E0 20%, #E0E0E0 80%, transparent) + .stat-number + font-size: 64px + font-weight: 700 + color: #009688 + line-height: 1 + margin-bottom: 12px + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Poppins, sans-serif + .stat-label + font-size: 18px + font-weight: 500 + color: #757C76 + line-height: 1.4 + + #product + padding: 10px 0 + #background + .small1 + top: -50px + .product-title + text-align: center + margin-top: 30px + margin-bottom: 30px + font-size: 42px + font-weight: 600 + color: #212529 + .scenario-wrapper + max-width: 1400px + margin: 0 auto + display: flex + gap: 40px + align-items: flex-start + .scenario-tabs + flex: 0 0 520px + display: flex + flex-direction: column + gap: 12px + .scenario-tab + padding: 20px 24px font-size: 20px - line-height: 1.5em - font-weight: normal - padding: 0 + font-weight: 500 + line-height: 1.4 + color: #212529 + background: white + border-radius: 12px + cursor: pointer + transition: all 0.3s ease + text-align: left + border: 2px solid transparent + &:hover + background: #F5F7FA + &.active + background: #E8F5F3 + color: #212529 + box-shadow: 0 2px 8px rgba(0,0,0,0.08) + .chevron + transform: rotate(180deg) + .tab-tags + display: flex + .tag + color: #009688 + border: 1px solid #009688 + background: transparent + font-size: 16px + font-weight: 400 + p + color: #212529 + font-size: 16px + font-weight: 400 + .tab-header + display: flex + justify-content: space-between + align-items: center + width: 100% + .tab-name + margin: 0 + font-size: 24px + font-weight: 400 + line-height: inherit + display: block + .chevron + display: inline-block + margin-left: 8px + vertical-align: middle + transition: transform 0.3s ease + flex-shrink: 0 + color: currentColor + .tab-tags + display: none + flex-wrap: wrap + gap: 8px + margin-top: 12px + .tag + display: inline-block + padding: 6px 14px + font-size: 13px + font-weight: 400 + color: #009688 + background: transparent + border: 1px solid #009688 + border-radius: 6px + transition: all 0.2s ease + text-align: center + .scenario-category + display: none + flex: 1 + min-width: 1000px + &.active + display: block + div + background: transparent + padding: 48px + img + display: block + max-width: 100% + height: auto + margin: 0 auto 32px + border-radius: 8px + .cta-button + display: block + width: fit-content + padding: 12px 32px + margin: 0 auto + background: #009688 + color: white + font-size: 20px + font-weight: 500 + text-decoration: none + border-radius: 6px + transition: all 0.3s ease + box-shadow: 0 2px 8px rgba(0,150,136,0.3) + &:hover + background: #1EB7A9 + box-shadow: 0 4px 12px rgba(0,150,136,0.4) + text-decoration: none + transform: translateY(-2px) #matrix - margin: 80px -100% 0 + margin: 40px -100% 0 padding: 0 100% 88px - h3 - color: #212529 + h2 + text-align: center + margin-bottom: 35px + font-size: 42px font-weight: 600 + color: #212529 + p text-align: center + margin-bottom: 54px font-size: 20px - line-height: 40px + line-height: 1.6 #backg-matrix position: relative margin-left: -20px @@ -179,7 +348,7 @@ width: 20% position: absolute z-index: -1 - top: 127px + top: 185px .coln height: 840px border-radius: 6px @@ -230,7 +399,7 @@ filter: invert(32%) sepia(100%) saturate(700%) hue-rotate(207deg) brightness(100%) contrast(102%) thead color: #212529 - font-size: 12px + font-size: 16px line-height: 30px background-color: unset tr @@ -240,10 +409,15 @@ text-align: center vertical-align: center font-weight: 600 - font-size: 11px + font-size: 16px padding: 46px 0 30px &:nth-child(1n) color: white + a + text-decoration: none + transition: color 0.2s ease + &:hover + text-decoration: underline td width: 40% tbody @@ -252,7 +426,7 @@ height: 64px th, a font-weight: 600 - font-size: 12px + font-size: 16px padding-right: 5px color: #212529 img @@ -260,65 +434,127 @@ td text-align: center font-weight: 600 - font-size: 11px + font-size: 14px img width: 32px - #products - margin-bottom: 143px - #typical-usage-scenario - font-size: 42px + + #authored-quote + margin-top: 150px + padding: 20px 20px #background - .main2 - height: 877px - .product-title - text-align: center - margin-bottom: 72px - .product-list - display: flex + .main1 + top: -150px + .small3 + top: -300px + .small4 + top: -90px + main + max-width: 1500px + margin: 0 auto + background: white + border: 2px solid #E8EBF0 + border-radius: 24px + padding: 24px + display: grid + grid-template-columns: 185px 1fr gap: 40px - align-items: flex-start - @media screen and (max-width: 1450px) - flex-direction: column - div - width: 100% - display: flex - flex-direction: column - align-items: center - gap: 40px - padding: 40px - border-radius: 6px - text-align: center - background-color: white - box-shadow: 0 50px 50px -20px rgba(0,0,0,0.15), 0 0 30px 0 rgba(0,0,0,0.05) - @media screen and (max-width: 1450px) - gap: 30px - padding: 30px - p - font-size: 16px - h4 - font-size: 40px - &:first-of-type - p - margin-bottom: 45px - &.main - height: 820px - h4 - font-size: 55px - p - font-size: 18px - margin: 0 - a - padding-top: 20px - color: #009688 - font-weight: 500 - #minimal-requirements + position: relative + img + grid-column: 1 + grid-row: 1 + width: 200px + height: 200px + border-radius: 12px + object-fit: cover + object-position: 15% center + position: relative + z-index: 1 + .text + grid-column: 2 + grid-row: 1 + padding-left: 32px + border-left: 4px solid #009688 + position: relative + z-index: 1 + h2 + font-size: 24px + font-weight: 600 + color: #212529 + margin-bottom: 20px + .quote + font-size: 16px + line-height: 1.6 + color: #3D3D3D + margin-bottom: 24px + .author + font-size: 18px + font-weight: 600 + color: #212529 + margin-bottom: 4px + .title + font-size: 14px + color: #757C76 + margin: 0 + + #get-in-touch + padding: 60px 20px + position: relative main - #background - .main1 - top: -200px - height: 890px + max-width: 1500px + margin: 0 auto + position: relative + opacity: 0 + transform: translateY(50px) + animation: slideUp 0.8s ease-out forwards + @keyframes slideUp + to + opacity: 1 + transform: translateY(0) + #background + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + z-index: -1 + .block + background: white + border: 2px solid #009688 + border-radius: 24px + padding: 40px 60px + box-shadow: 0 2px 12px rgba(0,0,0,0.08) + display: flex + justify-content: space-between + align-items: center + gap: 40px + .cta + font-size: 32px + font-weight: 600 + color: #212529 + margin: 0 + .button + display: inline-block + padding: 16px 40px + background: #009688 + color: white + font-size: 20px + font-weight: 500 + text-decoration: none + border-radius: 8px + transition: all 0.3s ease + white-space: nowrap + &:hover + background: #1EB7A9 + transform: translateY(-2px) + box-shadow: 0 4px 12px rgba(0,150,136,0.4) - #local-deployment, #data-filtering, #local-alarms, #batch-update, #minimal-requirements + #local-deployment, #data-filtering, #local-alarms, #batch-update + h2 + text-align: center + margin: 60px 0 10px + font-size: 42px + font-weight: 600 + color: #212529 .block justify-content: space-between display: flex @@ -355,66 +591,139 @@ #batch-update .block padding: 80px 0 120px - #minimal-requirements .block .feature-des - padding: 80px 0 120px - #bottom-features - padding-top: 72px - .cards - background-color: #EFFAF9 - padding: 72px 50% 28px + padding: 20px 20px + main + max-width: 1500px + margin: 0 auto + position: relative + h2 + text-align: center + margin-bottom: 60px + font-size: 42px + font-weight: 600 + color: #212529 + .features-grid + display: grid + grid-template-columns: repeat(3, 1fr) + gap: 24px + .feature-card + background: white + border: 2px solid #E8EBF0 + border-radius: 12px + overflow: hidden + transition: all 0.3s ease + &:hover + border-color: #009688 + box-shadow: 0 4px 12px rgba(0,150,136,0.15) + &.active + border-color: #009688 + .chevron + transform: rotate(180deg) + &.open + .chevron + transform: rotate(180deg) + .feature-content + max-height: 500px + padding: 0 24px 24px + opacity: 1 + .feature-header + display: flex + align-items: center + gap: 16px + padding: 24px + cursor: pointer + transition: background 0.2s ease + &:hover + background: #F8F9FA + .feature-icon + flex: 0 0 68px + width: 68px + height: 68px + display: flex + align-items: center justify-content: center - margin-right: -50% - margin-left: -50% - &>div - margin-bottom: 36px - &.col-lg-6 - padding: 0 18px - max-width: 100% - .block - padding: 48px - float: left - width: 100% - height: 100% - background: white - border-radius: 6px - box-shadow: 0 50px 50px -20px rgba(0,0,0,0.15) - display: unset - text-align: center - div - width: 100% - .title - margin-bottom: 6px - line-height: 33px - p - margin-top: 10px - img - height: fit-content - margin: 0 0 18px + background: #F0F8F7 + border-radius: 8px + img + width: 58px + height: 58px + .feature-title + flex: 1 + font-size: 18px + font-weight: 600 + color: #212529 + margin: 0 + .chevron + flex: 0 0 20px + color: #757C76 + transition: transform 0.3s ease + .feature-content + max-height: 0 + overflow: hidden + opacity: 0 + transition: all 0.4s ease + p + font-size: 18px + line-height: 1.6 + color: #3D3D3D + margin: 0 #bottom - display: flex - justify-content: center - padding: 46px 0 100px + padding: 80px 20px + .contact-us-banner + max-width: 1500px + margin: 0 auto + background: white + border: 2px solid #009688 + border-radius: 24px + box-shadow: 0 4px 20px rgba(0,0,0,0.08) + display: flex + align-items: center + justify-content: space-between + padding: 10px 60px + gap: 60px + position: relative + overflow: hidden + opacity: 0 + transform: translateY(50px) + animation: slideUp 0.8s ease-out forwards + @keyframes slideUp + to + opacity: 1 + transform: translateY(0) + .contact-us-banner-content + flex: 1 + h2 + font-size: 32px + font-weight: 500 + color: #212529 + margin: 0 0 32px + line-height: 1.2 + .contact-us-banner-buttons + display: flex + gap: 16px .bottom-button - background-color: #009688 - font-size: 24px - font-weight: 400 - text-align: center + display: inline-block + padding: 16px 40px + background: #009688 color: white - border-radius: 4px + font-size: 20px + font-weight: 500 text-decoration: none - padding: 16px - width: 350px - display: block - box-shadow: 0 28px 16px -20px rgba(34,41,41,0.25) + border-radius: 8px + transition: all 0.3s ease &:hover - background-color: #1EB7A9 - text-decoration: none - color: #fff - &:active - background-color: #009688 - transition-duration: 0s + background: #1EB7A9 + transform: translateY(-2px) + box-shadow: 0 4px 12px rgba(0,150,136,0.4) + img + flex: 0 0 280px + width: 280px + height: auto + opacity: 0.9 + -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%) + mask-image: linear-gradient(to bottom, black 0%, transparent 100%) #background z-index: -1 @@ -509,135 +818,856 @@ opacity: 1 transform: translate3d(0, 0, 0) - @media screen and (min-width: 750px) - #hero - #hero-content - .edge-title - font-size: 36px - .edge-description - font-size: 20px - margin-bottom: 60px + // Large desktop (≤1400px) + @media screen and (max-width: 1400px) + #edgeContent + #product + .scenario-wrapper + max-width: 1200px + .scenario-tabs + flex: 0 0 420px + .scenario-category + min-width: 700px + + // Desktop/Laptop (≤1200px) + @media screen and (max-width: 1200px) + #thingsboard-edge + #hero + #hero-content + .edge-title + font-size: 36px + .edge-description + font-size: 20px + line-height: 28px + .try-edge + font-size: 18px + line-height: 48px + padding: 0 24px #edgeContent + h1 + font-size: 28px + line-height: 44px + a + font-size: 28px + h2, h3.item-heading + font-size: 32px + line-height: 48px + h3:not(.item-heading) + font-size: 28px + #intro + .stats-container + gap: 24px + .stat-number + font-size: 52px + .stat-label + font-size: 16px + #product + .product-title + font-size: 36px + .scenario-wrapper + max-width: 100% + gap: 24px + .scenario-tabs + flex: 0 0 360px + .scenario-tab + padding: 16px 20px + .tab-header .tab-name + font-size: 20px + .scenario-category + min-width: 500px + div + padding: 32px + #matrix + h2 + font-size: 36px + p + font-size: 18px + table + thead + font-size: 14px + tr th + font-size: 14px + tbody tr + th, a + font-size: 14px + td + font-size: 13px + #authored-quote + main + gap: 24px + img + width: 160px + height: 160px + .text + h2 + font-size: 22px + .quote + font-size: 15px #local-deployment, #data-filtering, #local-alarms, #batch-update + h2 + font-size: 36px + #bottom-features + h2 + font-size: 36px + .features-grid + gap: 16px + .feature-header + padding: 20px + .feature-icon + flex: 0 0 56px + width: 56px + height: 56px + img + width: 48px + height: 48px + .feature-title + font-size: 16px + #get-in-touch .block - .feature-des, .block-img - width: 80% + padding: 32px 40px + .cta + font-size: 28px + .button + font-size: 18px + padding: 14px 32px + #bottom + .contact-us-banner + padding: 10px 40px + gap: 40px + .contact-us-banner-content h2 + font-size: 28px + img + flex: 0 0 220px + width: 220px + + // Tablet landscape (≤992px) + @media screen and (max-width: 992px) + #thingsboard-edge + #hero + #hero-content + .edge-title + font-size: 32px + .edge-description + font-size: 18px + line-height: 26px + margin-bottom: 36px + .try-edge + font-size: 16px + line-height: 44px + padding: 0 20px + #edgeContent + h1 + font-size: 26px + line-height: 40px + a + font-size: 26px + h2, h3.item-heading + font-size: 28px + line-height: 42px + h3:not(.item-heading) + font-size: 24px + p + font-size: 16px + line-height: 24px + #intro + .intro_title + margin-bottom: 48px + .stats-container + flex-wrap: wrap + gap: 20px + .stat-block + flex: 1 1 calc(50% - 20px) + min-width: 200px + &:not(:last-child)::after + display: none + .stat-number + font-size: 48px + .stat-label + font-size: 15px + #product + .product-title + font-size: 32px + .scenario-wrapper + flex-direction: column + gap: 24px + .scenario-tabs + flex: none + width: 100% + .scenario-category + min-width: unset + width: 100% + div + padding: 24px #matrix - h3 - font-size: 42px - line-height: 63px + h2 + font-size: 32px + p + font-size: 16px #backg-matrix .gateway, .edge, .cloud - padding: 0 20px - width: 20% + top: 150px + .coln + height: 720px table thead - font-size: 30px + font-size: 13px tr + height: 90px th - width: 20% - padding: 0 0 10px - font-size: 20px - td - width: 40% - tbody - tr - th, a - padding-right: 30px - font-size: 18px - td - font-size: 20px - img - width: unset - #bottom-features .cards .col-lg-6 .block - text-align: left - display: flex - div - width: calc(100% - 122px) + font-size: 13px + padding: 36px 0 24px + tbody tr + height: 56px + th, a + font-size: 13px + td + font-size: 12px + img + width: 28px + #authored-quote + margin-top: 100px + main + grid-template-columns: 140px 1fr + gap: 24px + padding: 20px + img + width: 140px + height: 140px + .text + padding-left: 24px + h2 + font-size: 20px + margin-bottom: 16px + .quote + font-size: 15px + margin-bottom: 20px + #local-deployment, #data-filtering, #local-alarms, #batch-update + h2 + font-size: 32px + .block + padding: 40px 0 + #bottom-features + h2 + font-size: 32px + margin-bottom: 40px + .features-grid + grid-template-columns: repeat(2, 1fr) + #get-in-touch + .block + padding: 28px 32px + gap: 24px + .cta + font-size: 24px + .button + font-size: 16px + padding: 12px 28px + #bottom + .contact-us-banner + flex-direction: column + text-align: center + padding: 32px + gap: 24px + .contact-us-banner-content h2 + font-size: 26px + .contact-us-banner-buttons + justify-content: center img - margin: 0 30px 0 0 + flex: 0 0 auto + width: 200px + order: -1 - @media screen and (max-width: 750px) - #matrix - h3 - font-size: 38px - line-height: 42px + // Tablet portrait (≤768px) + @media screen and (max-width: 768px) + #thingsboard-edge + #hero + #hero-content + .edge-title + font-size: 28px + margin-bottom: 16px + .edge-description + font-size: 16px + line-height: 22px + margin-bottom: 32px + .try-edge + font-size: 15px + line-height: 42px + padding: 0 18px + #edgeContent + h1 + font-size: 24px + line-height: 36px + a + font-size: 24px + h2, h3.item-heading + font-size: 26px + line-height: 38px + h3:not(.item-heading) + font-size: 22px + p + font-size: 15px + line-height: 23px + #intro + .intro_title + margin-bottom: 40px + .stats-container + gap: 16px + .stat-block + padding: 24px 16px + .stat-number + font-size: 40px + .stat-label + font-size: 14px + #product + .product-title + font-size: 28px + margin-top: 24px + margin-bottom: 24px + .scenario-tab + padding: 14px 16px + font-size: 15px + .tab-header .tab-name + font-size: 18px + .tag + font-size: 12px + padding: 5px 12px + &.active p + font-size: 14px + .scenario-category + div + padding: 20px 16px + .cta-button + font-size: 18px + padding: 10px 28px + #matrix + margin: 30px 0 0 + padding: 0 0 70px + h2 + font-size: 28px + margin-bottom: 24px + p + font-size: 15px + margin-bottom: 40px + #backg-matrix + display: none table width: 100% + margin: 30px 0 16px + border-collapse: collapse thead - font-size: 20px + font-size: 12px tr + height: 70px th - width: 20% - padding: 0 0 2px - font-size: 16px - td - width: 40% - tbody - tr - th, a - font-size: 16px - td - font-size: 18px - img - width: unset + font-size: 12px + padding: 20px 6px + vertical-align: middle + &:nth-child(2) + background-color: rgba(122, 77, 195, 0.15) + color: #7A4DC3 + &:nth-child(3) + background-color: rgba(0, 150, 136, 0.15) + color: #009688 + &:nth-child(4) + background-color: rgba(42, 125, 236, 0.15) + color: #2A7DEC + tbody tr + height: 48px + th, a + font-size: 12px + td + font-size: 11px + padding: 6px + &:nth-child(2) + background-color: rgba(122, 77, 195, 0.08) + &:nth-child(3) + background-color: rgba(0, 150, 136, 0.08) + &:nth-child(4) + background-color: rgba(42, 125, 236, 0.08) + img + width: 26px + #authored-quote + margin-top: 80px + padding: 20px 16px + main + display: flex + flex-direction: column + gap: 16px + padding: 20px + img + width: 140px + height: 140px + margin: 0 auto + order: 1 + .text + order: 2 + border-left: none + padding-left: 0 + padding-top: 16px + border-top: 4px solid #009688 + text-align: center + h2 + font-size: 20px + .quote + font-size: 14px + .author + font-size: 16px + #local-deployment, #data-filtering, #local-alarms, #batch-update + h2 + font-size: 28px + margin: 50px 0 8px + .block + padding: 36px 0 + .feature-des + padding-top: 40px !important + #bottom-features + padding: 40px 16px + h2 + font-size: 28px + margin-bottom: 36px + .features-grid + grid-template-columns: 1fr + gap: 12px + .feature-header + padding: 18px 16px + .feature-icon + flex: 0 0 52px + width: 52px + height: 52px + img + width: 42px + height: 42px + .feature-title + font-size: 15px + #get-in-touch + padding: 50px 16px + .block + padding: 24px 20px + flex-direction: column + text-align: center + gap: 20px + .cta + font-size: 22px + .button + font-size: 16px + padding: 12px 28px + #bottom + padding: 60px 16px + .contact-us-banner + padding: 28px 24px + .contact-us-banner-content h2 + font-size: 24px + margin-bottom: 24px + .bottom-button + font-size: 18px + padding: 14px 32px + img + width: 180px - @media screen and (min-width: 1025px) - section, header - main - max-width: 100% - footer - main, div.main-div - max-width: 100% + // Mobile landscape (≤576px) + @media screen and (max-width: 576px) + #thingsboard-edge + #hero + #hero-content + .edge-title + font-size: 24px + margin-bottom: 14px + .edge-description + font-size: 14px + line-height: 20px + margin-bottom: 28px + .try-edge + font-size: 14px + line-height: 38px + padding: 0 14px #edgeContent + h1 + font-size: 22px + line-height: 32px + a + font-size: 22px + h2, h3.item-heading + font-size: 24px + line-height: 34px + h3:not(.item-heading) + font-size: 20px + p + font-size: 14px + line-height: 22px + a + font-size: 16px #intro + padding-top: 20px .intro_title - padding: 0 5% - .labeling - padding: 0 8% + font-size: 22px + margin-bottom: 32px + .stats-container + display: grid + grid-template-columns: repeat(2, 1fr) + gap: 16px + .stat-block + padding: 16px 12px + .stat-number + font-size: 36px + margin-bottom: 8px + .stat-label + font-size: 13px + #product + .product-title + font-size: 26px + margin-top: 20px + margin-bottom: 20px + .scenario-tab + padding: 14px 14px + .tab-header .tab-name + font-size: 16px + .tag + font-size: 12px + padding: 4px 10px + &.active p + font-size: 14px + .scenario-category + div + padding: 18px 12px + .cta-button + font-size: 16px + padding: 10px 24px + #matrix + margin: 30px 0 0 + padding: 0 0 50px + h2 + font-size: 24px + margin-bottom: 16px + p + font-size: 14px + margin-bottom: 28px + #backg-matrix + display: none + table + width: 100% + margin: 24px 0 16px + border-collapse: collapse + thead + font-size: 10px + tr + height: 65px + th + font-size: 10px + padding: 16px 4px + vertical-align: middle + &:nth-child(2) + background-color: rgba(122, 77, 195, 0.15) + color: #7A4DC3 + &:nth-child(3) + background-color: rgba(0, 150, 136, 0.15) + color: #009688 + &:nth-child(4) + background-color: rgba(42, 125, 236, 0.15) + color: #2A7DEC + tbody tr + height: 44px + th, a + font-size: 10px + padding-right: 4px + td + font-size: 9px + padding: 4px + &:nth-child(2) + background-color: rgba(122, 77, 195, 0.08) + &:nth-child(3) + background-color: rgba(0, 150, 136, 0.08) + &:nth-child(4) + background-color: rgba(42, 125, 236, 0.08) + img + width: 20px + #authored-quote + margin-top: 60px + padding: 16px 12px + main + display: flex + flex-direction: column + padding: 18px 14px + gap: 14px + img + width: 110px + height: 110px + margin: 0 auto + order: 1 + .text + order: 2 + border-left: none + padding-left: 0 + padding-top: 14px + border-top: 4px solid #009688 + text-align: center + h2 + font-size: 18px + margin-bottom: 14px + .quote + font-size: 13px + margin-bottom: 18px + .author + font-size: 15px + .title + font-size: 13px #local-deployment, #data-filtering, #local-alarms, #batch-update + h2 + font-size: 26px + margin: 36px 0 6px .block - flex-direction: row - .feature-des, .block-img - width: calc(50% - 80px) - order: unset + padding: 28px 0 + .feature-des + padding-top: 16px !important .block-img img - margin: unset - #local-alarms #background .main2 - height: 405px - - @media screen and (min-width: 1250px) - #hero - #hero-content - .edge-title - margin-bottom: 60px - font-size: 64px - .edge-description - font-size: 28px - margin-bottom: 80px - .try-edge - line-height: 60px - font-size: 28px - padding: 0 40px - margin: 0 4px - border-width: 3px - #edgeContent - max-width: 1400px - #intro - .intro_title - padding: 0 7% - .labeling - padding: 0 13% + max-width: 100% + #bottom-features + padding: 32px 12px + h2 + font-size: 26px + margin-bottom: 28px + .features-grid + gap: 10px + .feature-header + padding: 14px 12px + gap: 12px + .feature-icon + flex: 0 0 48px + width: 48px + height: 48px + img + width: 36px + height: 36px + .feature-title + font-size: 14px + .feature-content p + font-size: 14px + #get-in-touch + padding: 40px 12px + .block + padding: 20px 16px + gap: 16px + .cta + font-size: 20px + .button + font-size: 15px + padding: 10px 24px + #bottom + padding: 50px 12px + .contact-us-banner + padding: 24px 18px + gap: 18px + .contact-us-banner-content h2 + font-size: 22px + margin-bottom: 20px + .contact-us-banner-buttons + flex-direction: column + gap: 12px + .bottom-button + font-size: 16px + padding: 12px 28px + img + width: 160px - @media screen and (min-width: 1500px) + // Mobile portrait (≤414px) + @media screen and (max-width: 414px) + #thingsboard-edge + #hero + #hero-content + .edge-title + font-size: 22px + .edge-description + font-size: 13px + line-height: 18px + margin-bottom: 24px + .try-edge + font-size: 13px + line-height: 36px + padding: 0 12px #edgeContent - max-width: 1400px #intro .intro_title - padding: 0 10% - .labeling - padding: 0 18% - #batch-update .block - padding-top: 40px - #local-alarms #background .main2 - height: 485px + font-size: 24px + margin-bottom: 40px + .stats-container + display: grid + grid-template-columns: repeat(2, 1fr) + gap: 20px + .stat-block + padding: 16px 12px + &:not(:last-child)::after + display: none + .stat-number + font-size: 32px + margin-bottom: 8px + .stat-label + font-size: 14px + #product + .product-title + font-size: 28px + margin-top: 20px + margin-bottom: 20px + .scenario-tabs + flex: none + width: 100% + .scenario-tab + padding: 16px 18px + font-size: 16px + .tab-header .tab-name + font-size: 18px + .tag + font-size: 13px + padding: 4px 10px + .scenario-wrapper + flex-direction: column + gap: 20px + .scenario-category + min-width: unset + width: 100% + div + padding: 24px 16px + img + max-width: 100% + .cta-button + font-size: 16px + padding: 10px 24px + #matrix + margin: 40px 0 0 + padding: 0 0 40px + h2 + font-size: 22px + margin-bottom: 16px + p + font-size: 14px + margin-bottom: 24px + #backg-matrix + display: none + table + width: 100% + margin: 20px 0 16px + border-collapse: collapse + thead + font-size: 9px + tr + height: 60px + th + font-size: 9px + padding: 12px 2px + vertical-align: middle + background-color: transparent + &:nth-child(2) + background-color: rgba(122, 77, 195, 0.15) + color: #7A4DC3 + &:nth-child(3) + background-color: rgba(0, 150, 136, 0.15) + color: #009688 + &:nth-child(4) + background-color: rgba(42, 125, 236, 0.15) + color: #2A7DEC + tbody + tr + height: 40px + th, a + font-size: 9px + padding-right: 2px + td + font-size: 8px + padding: 4px 2px + &:nth-child(2) + background-color: rgba(122, 77, 195, 0.08) + &:nth-child(3) + background-color: rgba(0, 150, 136, 0.08) + &:nth-child(4) + background-color: rgba(42, 125, 236, 0.08) + img + width: 18px + #authored-quote + margin-top: 80px + padding: 20px 12px + main + display: flex + flex-direction: column + padding: 20px 16px + gap: 20px + img + width: 120px + height: 120px + margin: 0 auto + order: 1 + .text + order: 2 + border-left: none + padding-left: 0 + padding-top: 20px + border-top: 4px solid #009688 + text-align: center + h2 + font-size: 18px + .quote + font-size: 14px + .author + font-size: 16px + #local-deployment, #data-filtering, #local-alarms, #batch-update + h2 + font-size: 28px + margin: 40px 0 8px + .block + padding: 30px 0 + .feature-des + padding-top: 20px !important + .block-img + img + max-width: 100% + #get-in-touch + padding: 40px 12px + .block + padding: 24px 16px + flex-direction: column + text-align: center + gap: 20px + .cta + font-size: 22px + .button + font-size: 16px + padding: 12px 28px + #bottom-features + padding: 40px 12px + h2 + font-size: 28px + margin-bottom: 40px + .features-grid + grid-template-columns: repeat(3, 1fr) + gap: 12px + .feature-header + padding: 16px 8px + flex-direction: column + gap: 8px + .feature-icon + width: 48px + height: 48px + img + width: 36px + height: 36px + .feature-title + display: none + .chevron + display: none + .feature-content + display: none + #bottom + padding: 40px 12px + .contact-us-banner + flex-direction: column + text-align: center + padding: 28px 20px + gap: 20px + .contact-us-banner-content + h2 + font-size: 22px + margin-bottom: 20px + .contact-us-banner-buttons + justify-content: center + .bottom-button + font-size: 16px + padding: 12px 24px + img + width: 180px + flex: 0 0 auto \ No newline at end of file