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 ccb7e60540..26eb736559 100644 --- a/products/thingsboard-edge/index.md +++ b/products/thingsboard-edge/index.md @@ -5,183 +5,116 @@ 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 ThingsBoard Cloud 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?

@@ -199,55 +132,55 @@ description: Comprehensive software solutions for edge computing, providing data - + - + - + - + - + - + - + - + - + @@ -260,56 +193,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 +426,69 @@ 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..1d8d7fd17b 100644 --- a/products/thingsboard-edge/thingsboard-edge.sass +++ b/products/thingsboard-edge/thingsboard-edge.sass @@ -6,7 +6,7 @@ &::after opacity: 0 #hero - height: 100vh //calc(100vh + 5px) + height: 100vh padding-top: 0 position: relative overflow: hidden @@ -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: 25px + 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,174 @@ 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 + .stats-container + display: flex + justify-content: space-between + align-items: center + gap: 40px + max-width: 1500px + margin: 0 auto + .stat-block + flex: 1 text-align: center - color: #A5A5A5 + 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 + #background + max-width: 1500px + .small1 + top: -50px + .product-title + text-align: center + margin-top: 30px + margin-bottom: 30px + font-size: 42px + font-weight: 600 + color: #212529 + .scenario-wrapper + 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 - font-weight: 600 + h2 text-align: center - font-size: 20px - line-height: 40px + margin-bottom: 35px + font-size: 42px + font-weight: 600 + color: #212529 #backg-matrix position: relative margin-left: -20px @@ -179,7 +338,7 @@ width: 20% position: absolute z-index: -1 - top: 127px + top: 100px .coln height: 840px border-radius: 6px @@ -230,7 +389,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 @@ -238,12 +397,17 @@ th width: 20% text-align: center - vertical-align: center + vertical-align: middle font-weight: 600 - font-size: 11px - padding: 46px 0 30px + font-size: 20px + padding: 0 0 50px &:nth-child(1n) color: white + a + text-decoration: none + transition: color 0.2s ease + &:hover + text-decoration: underline td width: 40% tbody @@ -252,7 +416,7 @@ height: 64px th, a font-weight: 600 - font-size: 12px + font-size: 18px padding-right: 5px color: #212529 img @@ -260,161 +424,314 @@ td text-align: center font-weight: 600 - font-size: 11px + font-size: 18px 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 - 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 + .main1 + top: -150px + .small3 + top: -300px + .small4 + top: -90px main - #background - .main1 - top: -200px - height: 890px + 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 + 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 - #local-deployment, #data-filtering, #local-alarms, #batch-update, #minimal-requirements + #get-in-touch + padding: 60px 20px + position: relative + main + max-width: 1500px + margin: 0 auto + position: relative + opacity: 0 + transform: translateY(50px) + animation: slideUp 0.8s ease-out forwards + #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 + max-width: 1920px + margin: 0 auto + padding: 0 100px + h2 + text-align: center + margin: 60px 0 10px + font-size: 42px + font-weight: 600 + color: #212529 + .block display: flex + flex-direction: row align-items: center - flex-direction: column - padding: 50px 0 - .feature-des, img - width: 100% + justify-content: space-between + gap: 60px + padding: 80px 0 + max-width: 1400px + margin: 0 auto + .feature-des + flex: 0 0 40% + order: 1 .block-img - text-align: center + flex: 1 order: 2 img - margin-top: 32px width: 100% - max-width: fit-content + max-width: 100% + height: auto + #background + .main2 + height: 700px + .small7 + top: 900px + + #data-filtering, #batch-update + .block .feature-des + order: 2 + .block-img order: 1 - #local-deployment .block .feature-des + #local-deployment .block padding-top: 100px #data-filtering .block padding: 60px 0 - #local-alarms .block .feature-des - padding-top: 200px - h2, a, h3.item-heading - color: #fff - p - color: #868686 - .read-more-button .arrow - filter: brightness(100%) invert(100%) + #local-alarms + .block + position: relative + #background + position: absolute + top: 0 + left: 50% + height: 100% + z-index: 0 + .block .feature-des + padding-top: 200px + h2, a, h3.item-heading + color: #fff + p + color: #868686 + .read-more-button .arrow + filter: brightness(100%) invert(100%) #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 + .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 +826,456 @@ 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 - #edgeContent - #local-deployment, #data-filtering, #local-alarms, #batch-update - .block - .feature-des, .block-img - width: 80% + @keyframes slideUp + to + opacity: 1 + transform: translateY(0) + + @media screen and (max-width: 1250px) + #encyclopedia + #product + padding: 40px 20px 10px + .product-title + font-size: 28px + margin-top: 20px + margin-bottom: 20px + .scenario-wrapper + flex-direction: column + gap: 24px + align-items: center + .scenario-tabs + flex: none + width: 100% + max-width: 520px + .scenario-tab + padding: 16px 20px + font-size: 18px + .tab-header + .tab-name + font-size: 20px + .scenario-category + min-width: auto + width: 100% + &.active + display: block + div + padding: 24px + img + margin-bottom: 24px + .cta-button + font-size: 18px + padding: 10px 28px #matrix - h3 + h2 font-size: 42px line-height: 63px #backg-matrix .gateway, .edge, .cloud padding: 0 20px + top: 140px + vertical-align: middle width: 20% table thead - font-size: 30px tr th + vertical-align: middle width: 20% padding: 0 0 10px font-size: 20px td width: 40% - tbody + tbody + tr + th, a + padding-right: 30px + font-size: 20px + td + font-size: 20px + img + width: unset + #local-alarms + #background + .main2 + height: 500px + + @media screen and (max-width: 1024px) + #encyclopedia + #product + padding: 40px 20px 10px + .product-title + font-size: 28px + margin-top: 20px + margin-bottom: 20px + .scenario-wrapper + flex-direction: column + gap: 24px + align-items: center + .scenario-tabs + flex: none + width: 100% + max-width: 520px + .scenario-tab + padding: 16px 20px + font-size: 18px + .tab-header + .tab-name + font-size: 20px + .scenario-category + min-width: auto + width: 100% + &.active + display: block + div + padding: 24px + img + margin-bottom: 24px + .cta-button + font-size: 18px + padding: 10px 28px + #matrix + h2 + font-size: 42px + line-height: 63px + #backg-matrix + .gateway, .edge, .cloud + padding: 0 20px + top: 130px + vertical-align: middle + width: 20% + table + thead tr - th, a - padding-right: 30px + th + vertical-align: middle + width: 20% + padding: 0 0 10px font-size: 18px td - font-size: 20px + 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) - img - margin: 0 30px 0 0 + #local-alarms + #background + .main2 + height: 500px - @media screen and (max-width: 750px) + @media screen and (min-width: 750px) + #hero + #hero-content + .edge-title + font-size: 49px + .edge-description + font-size: 26px + margin-bottom: 60px + #edgeContent + #local-deployment, #data-filtering, #local-alarms, #batch-update + .block + .feature-des, .block-img + width: 80% #matrix - h3 - font-size: 38px - line-height: 42px + h2 + font-size: 42px + line-height: 63px + #backg-matrix + .gateway, .edge, .cloud + padding: 0 20px + top: 130px + vertical-align: middle + width: 20% + table + thead + tr + th + vertical-align: middle + 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 + + @media screen and (max-width: 750px) + #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 + .stats-container + gap: 16px + .stat-block + padding: 24px 16px + .stat-number + font-size: 40px + .stat-label + font-size: 14px + #product + padding: 40px 20px 10px + .product-title + font-size: 28px + margin-top: 20px + margin-bottom: 20px + .scenario-wrapper + flex-direction: column + gap: 24px + align-items: center + .scenario-tabs + flex: none + width: 100% + max-width: 520px + .scenario-tab + padding: 16px 20px + font-size: 18px + .tab-header + .tab-name + font-size: 20px + .scenario-category + min-width: auto + width: 100% + &.active + display: block + div + padding: 24px + img + margin-bottom: 24px + .cta-button + font-size: 18px + padding: 10px 28px + #matrix + margin: 40px 0 0 + padding: 0 20px 88px + h2 + font-size: 26px + line-height: 38px + margin-bottom: 65px + #backg-matrix + margin: 0 + width: 100% + .gateway, .edge, .cloud + top: 110px + width: 20% + vertical-align: middle table width: 100% + margin: 40px 0 16px + table-layout: fixed thead - font-size: 20px tr th width: 20% - padding: 0 0 2px + padding: 0 2px 2px font-size: 16px + vertical-align: middle td width: 40% tbody tr th, a font-size: 16px + padding-right: 4px td - font-size: 18px + padding: 6px 2px + font-size: 14px img - width: unset - - @media screen and (min-width: 1025px) - section, header - main - max-width: 100% - footer - main, div.main-div - max-width: 100% - #edgeContent - #intro - .intro_title - padding: 0 5% - .labeling - padding: 0 8% + width: 28px + #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-alarms + #background + .main2 + top: 0 + height: 100% #local-deployment, #data-filtering, #local-alarms, #batch-update - .block - flex-direction: row - .feature-des, .block-img - width: calc(50% - 80px) - order: unset - .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 + padding: 0 20px + h2 + text-align: center font-size: 28px - margin-bottom: 80px - .try-edge - line-height: 60px + margin: 50px 0 8px + .block + flex-direction: column + gap: 24px + padding: 36px 0 + .feature-des + flex: 1 + order: 1 + text-align: center + padding-top: 40px !important + .block-img + flex: 1 + order: 2 + img + max-width: 100% + #bottom-features + padding: 40px 16px + h2 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% + margin-bottom: 36px + .features-grid + grid-template-columns: 1fr + .feature-card + &:last-child:nth-child(odd) + grid-column: auto + max-width: none + margin: 0 + .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: 24px 20px + flex-direction: column + align-items: center + text-align: center + gap: 24px + img + flex: 0 0 auto + width: 100px + .contact-us-banner-content + flex: none + order: 2 + h2 + font-size: 24px + margin-bottom: 20px + .contact-us-banner-buttons + order: 3 + flex-direction: column + align-items: center + justify-content: center + width: 100% + gap: 12px + .bottom-button + font-size: 18px + padding: 14px 32px + width: 100% + max-width: 280px - @media screen and (min-width: 1500px) - #edgeContent - max-width: 1400px + @media screen and (max-width: 576px) + #encyclopedia + padding: 0 10px #intro - .intro_title - padding: 0 10% - .labeling - padding: 0 18% - #batch-update .block - padding-top: 40px - #local-alarms #background .main2 - height: 485px + padding-top: 20px + margin-bottom: 32px + .stats-container + display: grid + grid-template-columns: repeat(2, 1fr) + gap: 16px + .stat-block + padding: 8px 2px + .stat-number + font-size: 36px + margin-bottom: 8px + .stat-label + font-size: 18px + #matrix + h2 + font-size: 26px + line-height: 38px + margin-bottom: -10px + #backg-matrix + .gateway, .edge, .cloud + top: 90px + width: 20% + table + width: 100% + height: 100% + thead + tr + th + width: 20% + padding: 0 0 2px + font-size: 14px + vertical-align: middle + td + width: 40% + tbody + tr + th, a + font-size: 14px + td + font-size: 14px + img + width: 28px \ No newline at end of file