+ We provide true deployment freedom designed to match your main platform license. Find the configuration that + corresponds to your current plan below. +
+{opt.text}
- - {opt.linkText} - + cards.map((card) => ( + )) } @@ -40,142 +64,161 @@ const options = [ diff --git a/src/components/Trendz/FAQSection.astro b/src/components/Trendz/FAQSection.astro new file mode 100644 index 0000000000..2d4816a3f6 --- /dev/null +++ b/src/components/Trendz/FAQSection.astro @@ -0,0 +1,431 @@ +--- +const categories = [ + { + id: 'understanding', + label: 'Understanding IoT Analytics & Business Value', + items: [ + { + id: 'q-what-is', + question: 'What is IoT analytics and how does it differ from standard visualization?', + answer: + 'IoT analytics is the process of converting raw sensor data into meaningful business insights. While standard dashboards show what is happening right now, IoT analytics helps you understand why it is happening and predicts what will happen next using statistical functions and calculated fields.', + }, + { + id: 'q-why-need', + question: 'Why do we need IoT analytics solutions if we already have ThingsBoard?', + answer: + 'ThingsBoard is excellent for real-time monitoring and device management. Trendz Analytics complements this by serving as one of the most powerful IoT analytics solutions available, adding model-driven analytics like anomaly detection, health scoring, and complex KPI modeling that basic dashboards cannot perform.', + }, + { + id: 'q-who-offers', + question: 'Who offers real-time IoT data analytics tools?', + answer: + 'While many cloud providers offer generic tools, Trendz Analytics is specifically designed for real-time IoT data analytics within the ThingsBoard ecosystem. It processes incoming telemetry instantly, allowing teams to generate reports and trigger automated workflows without the delay of transferring data to external third-party clouds.', + }, + ], + }, + { + id: 'predictive', + label: 'Predictive Maintenance & Forecasting', + items: [ + { + id: 'q-predictive', + question: 'Can Trendz be used as predictive maintenance software?', + answer: + 'Yes, Trendz is a comprehensive predictive maintenance software tool. It uses historical data to identify early signs of equipment degradation, allowing you to schedule repairs before a failure occurs, which significantly reduces downtime and maintenance costs.', + }, + { + id: 'q-forecasting', + question: 'How does Trendz function as forecasting software?', + answer: + 'Trendz acts as robust forecasting software by using built-in Machine Learning (ML) models to project future trends. You can predict energy consumption, future system loads, or the remaining useful life of an asset based on past telemetry patterns.', + }, + { + id: 'q-accuracy', + question: 'How accurate is data analytics in IoT for forecasting?', + answer: + 'The accuracy of data analytics in IoT depends on the stability of your telemetry and the amount of historical data available to establish baselines. Trendz allows you to validate these models against real-world outcomes to ensure your forecasts are highly reliable for planning.', + }, + ], + }, + { + id: 'integration', + label: 'Integration & Technical Implementation', + items: [ + { + id: 'q-licensing', + question: 'How is Trendz licensed and priced?', + answer: + 'Trendz is a separate add-on product by ThingsBoard and is charged as an add-on in the scope of the main ThingsBoard license. Pricing depends on license type and deployment model — public/private Cloud, self-hosted, or perpetual license.', + }, + { + id: 'q-data', + question: 'What data is required to start with IoT data analytics?', + answer: + 'At a minimum, you need stable telemetry keys and an asset structure in ThingsBoard. To get the most out of IoT data analytics, such as health scoring or predictions, you need enough historical data to establish a baseline for the ML models.', + }, + { + id: 'q-complex', + question: 'How does Trendz simplify IoT analytics for complex systems?', + answer: + 'Trendz automates much of the IoT analytics process through "Topology Discovery," which automatically learns your device and asset relationships from ThingsBoard. This allows you to build complex KPI models and Metric Explorers without manually re-mapping your entire network.', + }, + { + id: 'q-integrate', + question: 'How to integrate Trendz with ThingsBoard and external services?', + answer: + "Trendz is a ThingsBoard add-on and is designed to work with ThingsBoard telemetry and the device/entity model you already have. Optional external context (such as weather or business system inputs) and workflow integrations (ticketing/CMMS/work orders, etc.) are added using ThingsBoard's built-in Integrations and Rule Engine.", + }, + { + id: 'q-sso', + question: 'Do you support SSO, RBAC, and auditing for IoT analytics?', + answer: + 'Yes, Trendz is a native add-on that works within the ThingsBoard identity and access model. Your existing SSO and RBAC settings will apply to your IoT analytics dashboards, ensuring that data remains secure and auditable.', + }, + ], + }, +]; +--- + +{item.answer}
+- For better decision making, resource planning and reducing cost business requires answers - to 3 main questions: What will happen, When, and Why? -
-Trendz provides an answer
- Start Analysis -- Calculated fields are one of the most powerful features for KPI monitoring and prediction. - Based on the input data, calculated fields allow you to run statistical functions and - create new data items by applying calculations. -
- Learn More about calculated fields -- Detect anomalies with automated tools based on built-in machine learning algorithms. - Prioritise them and focus on real problems with anomaly scoring. -
- Start Analysis -- Connect Trendz to the ThingsBoard in few clicks with automatic Topology Discovery. -
-- Trendz works with all ThingsBoard products, including Open Source ThingsBoard Community - Edition and ThingsBoard Professional Edition. -
- Learn More about connecting ThingsBoard -All with respect to ThingsBoard user permissions.
- Learn More about embedding visuals -- See your data, like total resource consumption on any levels starting from country level - and deep dive into concrete meter level. Clear dataset in real-time by grouping and - filtering on dimensions that you are interested in. -
- Start Analysis -Trendz Analytics Platform
-Turn data into insights and make better decisions
++ Trendz Analytics is an add-on for ThingsBoard that turns telemetry into business KPIs and actionable insights. +
{item.description}
+Examples
+{item.featureText}
+{item.featureText}
++ This is your no-code engine for deep data analytics in IoT. Explore telemetry, slice data in seconds, and reveal + hidden patterns using AI-assisted tools. Build complex business logic and metrics instantly — without writing a + single line of code. +
+ More about Metric Explorer ++ A complete ecosystem for IoT data analytics. Leverage automated insights and custom reporting to stay ahead in a + connected world +
+{f.text}
+ cards.map((card, i) => ( +{card.subtitle}
+Was this helpful?
+ 
+ 
+ 
-
-
-
- 1
-years in IoT domain
-1
-countries
-1+
-delivered projects
-1%
-success rate
-1%
-clients engage us again
+1
+years in IoT domain
+1
+countries
+1+
+delivered projects
+1%
+success rate
+1%
+clients engage us again
+What our customers say about ThingsBoard
+
+ + "We were looking for a robust and scalable IoT platform to help us deploy leading edge + LoRaWAN™-based IoT projects. We landed a contract to deploy a city-wide network of + solar/wireless variable message "No Parking" signs to manage on-street parking for + snow removal operations. The dead... read more about smart city solutions +
+
+ 
+ + In IoT, data and dashboards mean nothing if they don't create real business value. At ThingsBoard, + our Development Unit makes sure your solution does exactly that. +
++ We don't just build features — we help you turn ideas into results. With our platform and experts, + your technical goals are covered, so you can stay focused on your business impact. From optimizing + supply chains to launching smart services, we ensure the tech drives results that matter — to your + customers and your bottom line. +
+What our customers say about ThingsBoard
-
- "We were looking for a robust and scalable IoT platform to help us deploy leading edge LoRaWAN™-based IoT projects. We landed a contract to deploy a city-wide network of solar/wireless variable message "No Parking" signs to manage on-street parking for snow removal operations. The dead... read more about smart city solutions
+ -
-
- In IoT, data and dashboards mean nothing if they don't create real business value. At ThingsBoard, our Development Unit makes sure your solution does exactly that.
-We don't just build features — we help you turn ideas into results. With our platform and experts, your technical goals are covered, so you can stay focused on your business impact. From optimizing supply chains to launching smart services, we ensure the tech drives results that matter — to your customers and your bottom line.
-
+
+
+
+ 
IoT in retail: how Schwarz Group accelerated digitalization with ThingsBoard
-500K+
DevicesConnected
devices
13K+
Stores
32
Countries
+ Revolutionizing beer distribution: how ThingsBoard empowered Super Bock Group
-100%
VisibilityVisibility of beer
stock in
real-time
90%
AutomationReduction in
manual
operations
3+
SolutionsIntegrated
solutions
+ Real-time production monitoring for automotive supplier by süc//dacor GmbH
-20
GatewaysLoRaWAN
gateways in our
public network
5+
IoT experienceExperience in the
field of IoT with
LoRaWAN
150
Sensor typesSensor types
tested in
our lab
+ Empowering alternative energy: how OXI TRADE streamlined IoT infrastructure with TB
-10+
ExperienceYears experience
in the alternative
energy sector
7K
SalesPellet burners
sold
96%
EfficiencyEfficiency of
pellet burners
+ Awake: unifying global rental operations with custom IoT solutions
-7
ExperienceYears of
experience
on the market
50+
RetailersRetailers
managed under
one system
6
ChallengesSolving
challenges
with data
65% of our clients build 2+ solution with us
+
+ 
+ + A serious IoT solution is never just devices and dashboards. It's an ecosystem of 30-plus moving + parts - middleware, integrations, workflows, server-side and application-level services. All of this + must be scaled and upgraded together. +
++ Most projects stall at that integration layer, while business logic waits. We eliminate that + bottleneck by placing ThingsBoard at the core of the solution. +
++ Its microservice architecture already provides us with all the needed components, and they are + already integrated, so we can focus on business logic and reuse functions instead of re-inventing + them. +
++ The outcome for our clients is simple - solution delivery is about 8x faster and 11x cheaper than a + traditional greenfield development. +
+
| + | Why it matters | +What it gives | +
|---|---|---|
| ThingsBoard at the Core | +We build on ThingsBoard's micro-service stack and re-using components instead of wiring them from + scratch | +8× faster process: regular 8-month MVP delivered in just 1 month | +
| Low-code accelerators | +Dashboards, workflows, and rules are configured, not coded | +About 70 % of UI built via drag-and-drop | +
| Vertical starter kits | +Reusable blueprints for 10+ industries cut uncertainty and tighten estimates. | +40 – 50 % of configuration is reused across engagements | +
| Architecture-as-a-Service | +Scaling, HA, observability, and DevOps patterns come pre-hardened and cloud-agnostic | +Scalable production-ready setup for 50k msg/s deployed in 5–8 days | +
| Fixed-price transparency | +Budget is locked on day one; no surprises down the line | +Projects delivered on agreed cost and timeline | +
Why it matters
+What it gives
+ We build on ThingsBoard's micro-service stack and re-using components instead of wiring them from + scratch +
+8x faster process: regular 8-month MVP delivered in just 1 month
Dashboards, workflows, and rules are configured, not coded
+About 70 % of UI built via drag-and-drop
Reusable blueprints for 10+ industries cut uncertainty and tighten estimates.
+40 – 50 % of configuration is reused across engagements
+ Scaling, HA, observability, and DevOps patterns come pre-hardened and cloud-agnostic +
+Scalable production-ready setup for 50k msg/s deployed in 5–8 days
Budget is locked on day one; no surprises down the line
+Projects delivered on agreed cost and timeline
+ + "We operate in highly competitive markets; from housing management to utilities and manufacturing sectors. + Technology innovation is at the heart of our product strategy and service delivery approach. As we grow + and extend our field service management solution, we recognised that we needed a flexible IoT platform + that enables our delivery needs with lower complexity and co... read more about smart energy solutions +
+65% of our clients build 2+ solution with us
+
-
- A serious IoT solution is never just devices and dashboards. It's an ecosystem of 30-plus moving parts - middleware, integrations, workflows, server-side and application-level services. All of this must be scaled and upgraded together.
-Most projects stall at that integration layer, while business logic waits. We eliminate that bottleneck by placing ThingsBoard at the core of the solution.
-Its microservice architecture already provides us with all the needed components, and they are already integrated, so we can focus on business logic and reuse functions instead of re-inventing them.
-The outcome for our clients is simple - solution delivery is about 8x faster and 11x cheaper than a traditional greenfield development.
+| - | Why it matters | -What it gives | -
|---|---|---|
| ThingsBoard at the Core | -We build on ThingsBoard's micro-service stack and re-using components instead of wiring them from scratch | -8× faster process: regular 8-month MVP delivered in just 1 month | -
| Low-code accelerators | -Dashboards, workflows, and rules are configured, not coded | -About 70 % of UI built via drag-and-drop | -
| Vertical starter kits | -Reusable blueprints for 10+ industries cut uncertainty and tighten estimates. | -40 – 50 % of configuration is reused across engagements | -
| Architecture-as-a-Service | -Scaling, HA, observability, and DevOps patterns come pre-hardened and cloud-agnostic | -Scalable production-ready setup for 50k msg/s deployed in 5–8 days | -
| Fixed-price transparency | -Budget is locked on day one; no surprises down the line | -Projects delivered on agreed cost and timeline | -
Why it matters
-What it gives
-We build on ThingsBoard's micro-service stack and re-using components instead of wiring them from scratch
-8x faster process: regular 8-month MVP delivered in just 1 month
-Dashboards, workflows, and rules are configured, not coded
-About 70 % of UI built via drag-and-drop
-Reusable blueprints for 10+ industries cut uncertainty and tighten estimates.
-40 – 50 % of configuration is reused across engagements
-Scaling, HA, observability, and DevOps patterns come pre-hardened and cloud-agnostic
-Scalable production-ready setup for 50k msg/s deployed in 5–8 days
-Budget is locked on day one; no surprises down the line
-Projects delivered on agreed cost and timeline
-
- "We operate in highly competitive markets; from housing management to utilities and manufacturing sectors. Technology innovation is at the heart of our product strategy and service delivery approach. As we grow and extend our field service management solution, we recognised that we needed a flexible IoT platform that enables our delivery needs with lower complexity and co... read more about smart energy solutions
-This timeline shows the key milestones in our development process, from the initial technical discussion to production deployment and maintenance. It is a structured framework that we adapt to the specific needs of client project
-| Steps | -Week 1 | -Week 2 | -Week 3 | -Week 4 | -Week 5 | -Week 6 | -Week 7 | -Week 8 | -
|---|---|---|---|---|---|---|---|---|
| 01. Technical Workshop | -1-3 sessions A working session with our solution architects and your team. We map your business objectives to concrete technical requirements and define the functional scope of the solution. |
- - | ||||||
| 02. Scope & Proposal | -- | 5 days Based on the workshop, we prepare a technical proposal. It includes the detailed system architecture, project scope, a fixed-cost breakdown, and an implementation plan with clear deliverables for each phase. |
- - | |||||
| 03. Project Kick-off | -- | 2 days Once the proposal is approved, we sign the contract and provision the dedicated project environment (development, staging, production). The assigned engineering team begins work. |
- - | |||||
| 04. Iterative Development | -- | Scope-dependent (from 1 week) The solution is built in agile sprints (typically 2 weeks). Each sprint concludes with a demo of the new functionality for your team to review and provide direct feedback, ensuring the project stays aligned with the goals. |
- - | |||||
| 05. Iterative Testing & Validation | -- | Scope-dependent (from 2 weeks) The solution undergoes a complete testing cycle, including functional, integration, and performance testing. We then proceed to User Acceptance Testing (UAT) with your team to formally validate that all requirements have been met. |
- - | |||||
| 06. Deployment | -- | 2 days Following successful validation, we deploy the solution to the production environment. The go-live process follows a pre-agreed plan designed to ensure a smooth cutover. |
- - | |||||
| 07. Support & Maintenance | -- | Ongoing Post-launch, we offer optional Service-Level Agreements (SLAs) for ongoing system maintenance, technical support, and planning for future feature development. |
- - |
1-3 sessions
-A working session with our solution architects and your team. We map your business objectives to concrete technical requirements and define the functional scope of the solution.
-5 days
-Based on the workshop, we prepare a technical proposal. It includes the detailed system architecture, project scope, a fixed-cost breakdown, and an implementation plan with clear deliverables for each phase.
-2 days
-Once the proposal is approved, we sign the contract and provision the dedicated project environment (development, staging, production). The assigned engineering team begins work.
-Scope-dependent (from 1 week)
-The solution is built in agile sprints (typically 2 weeks). Each sprint concludes with a demo of the new functionality for your team to review and provide direct feedback, ensuring the project stays aligned with the goals.
-Scope-dependent (typically 1-2 weeks)
-The solution undergoes a complete testing cycle, including functional, integration, and performance testing. We then proceed to User Acceptance Testing (UAT) with your team to formally validate that all requirements have been met.
-2 days
-Following successful validation, we deploy the solution to the production environment. The go-live process follows a pre-agreed plan designed to ensure a smooth cutover.
++ This timeline shows the key milestones in our development process, from the initial technical discussion to + production deployment and maintenance. It is a structured framework that we adapt to the specific needs of + client project +
+| Steps | +Week 1 | +Week 2 | +Week 3 | +Week 4 | +Week 5 | +Week 6 | +Week 7 | +Week 8 | +
|---|---|---|---|---|---|---|---|---|
| 01. Technical Workshop | +
+ 1-3 sessions + A working session with our solution architects and your team. We map your business objectives to + concrete technical requirements and define the functional scope of the solution. + + |
+ + | ||||||
| 02. Scope & Proposal | ++ |
+ 5 days + Based on the workshop, we prepare a technical proposal. It includes the detailed system + architecture, project scope, a fixed-cost breakdown, and an implementation plan with clear + deliverables for each phase. + + |
+ + | |||||
| 03. Project Kick-off | ++ |
+ 2 days + Once the proposal is approved, we sign the contract and provision the dedicated project + environment (development, staging, production). The assigned engineering team begins work. + + |
+ + | |||||
| 04. Iterative Development | ++ |
+ Scope-dependent (from 1 week) + The solution is built in agile sprints (typically 2 weeks). Each sprint concludes with a demo of + the new functionality for your team to review and provide direct feedback, ensuring the project + stays aligned with the goals. + + |
+ + | |||||
| 05. Iterative Testing & Validation | ++ |
+ Scope-dependent (from 2 weeks) + The solution undergoes a complete testing cycle, including functional, integration, and + performance testing. We then proceed to User Acceptance Testing (UAT) with your team to formally + validate that all requirements have been met. + + |
+ + | |||||
| 06. Deployment | ++ |
+ 2 days + Following successful validation, we deploy the solution to the production environment. The + go-live process follows a pre-agreed plan designed to ensure a smooth cutover. + + |
+ + | |||||
| 07. Support & Maintenance | ++ |
+ Ongoing + Post-launch, we offer optional Service-Level Agreements (SLAs) for ongoing system maintenance, + technical support, and planning for future feature development. + + |
+ + |
Ongoing
-Post-launch, we offer optional Service-Level Agreements (SLAs) for ongoing system maintenance, technical support, and planning for future feature development.
+1-3 sessions
++ A working session with our solution architects and your team. We map your business objectives to + concrete technical requirements and define the functional scope of the solution. +
+5 days
++ Based on the workshop, we prepare a technical proposal. It includes the detailed system architecture, + project scope, a fixed-cost breakdown, and an implementation plan with clear deliverables for each + phase. +
+2 days
++ Once the proposal is approved, we sign the contract and provision the dedicated project environment + (development, staging, production). The assigned engineering team begins work. +
+Scope-dependent (from 1 week)
++ The solution is built in agile sprints (typically 2 weeks). Each sprint concludes with a demo of the + new functionality for your team to review and provide direct feedback, ensuring the project stays + aligned with the goals. +
+Scope-dependent (typically 1-2 weeks)
++ The solution undergoes a complete testing cycle, including functional, integration, and performance + testing. We then proceed to User Acceptance Testing (UAT) with your team to formally validate that all + requirements have been met. +
+2 days
++ Following successful validation, we deploy the solution to the production environment. The go-live + process follows a pre-agreed plan designed to ensure a smooth cutover. +
+Ongoing
++ Post-launch, we offer optional Service-Level Agreements (SLAs) for ongoing system maintenance, + technical support, and planning for future feature development. +
+
- We manage the entire development lifecycle, from initial architecture to final deployment, delivering a production-ready solution on a fixed timeline and budget.
- -
- Analyze business processes to define effective IoT strategy
-
- Design system architecture and identify areas for improvement
-
- Develop detailed roadmap for successful IoT solution implementation
-
- Dedicated cross-functional team
-
- A single, expert point of contact managing the entire project
-
- Maximum development speed by leveraging our pre-built components
-
- We integrate our ThingsBoard experts directly into your team, providing specialized skills to accelerate your project and overcome specific technical challenges.
- -
- Fill a specific skill gap (e.g., in architecture, edge, or data science) in your in-house team
-
- Accelerate a project that is already in progress and needs a boost
-
- Upskill your team by having them work alongside leading IoT experts
-
- Targeted expertise to solve your most complex challenges
-
- Flexible access to elite engineering talent
-
- Seamless integration with your existing Agile/Scrum workflows
-
- Valuable knowledge transfer that strengthens your internal team for future projects
-
+ + We manage the entire development lifecycle, from initial architecture to final deployment, delivering + a production-ready solution on a fixed timeline and budget. +
+ +
+ Analyze business processes to define effective IoT strategy
+
+ Design system architecture and identify areas for improvement
+
+ Develop detailed roadmap for successful IoT solution implementation
+
+ Dedicated cross-functional team
+
+ A single, expert point of contact managing the entire project
+
+ Maximum development speed by leveraging our pre-built components
+
+ + We integrate our ThingsBoard experts directly into your team, providing specialized skills to + accelerate your project and overcome specific technical challenges. +
+ +
+ + Fill a specific skill gap (e.g., in architecture, edge, or data science) in your in-house team +
+
+ Accelerate a project that is already in progress and needs a boost
+
+ Upskill your team by having them work alongside leading IoT experts
+
+ Targeted expertise to solve your most complex challenges
+
+ Flexible access to elite engineering talent
+
+ Seamless integration with your existing Agile/Scrum workflows
+
+ Valuable knowledge transfer that strengthens your internal team for future projects
+IoT development services cover the design, development, deployment, and maintenance of IoT solutions. They include the creation of software ecosystems that allow you to manage communication between devices, collect data, map ingested data to digital twin, visualise it, and work as one integrated system. Think of smart electricity, water, heat meters, wearable health monitors, or asset tracking devices that provide critical information about asset health, allow decision makers to effectively strategies and improve the efficiency of key operational aspects. IoT development services bring these innovations to life.
- Key IoT development services: -Almost every industry can benefit from the IoT, including manufacturing, healthcare, retail, logistics, agriculture, energy, automotive, smart cities, education, and construction. IoT helps to improve efficiency, safety, productivity and provides companies with critical data tailored to their unique needs of each sector.
-The main challenges of the IoT include ensuring seamless connectivity of all devices, data security and privacy, managing large amounts of information, visualising and analysing the data, ensuring that different devices work together and meeting the high requirements of industry standards.
-No, you don't need to have hardware to start developing, you can add it in the next phases of the development process, and use simulated data to start with. But for a full product, IoT solutions usually require specialised hardware, such as sensors and gateways for data collection and transmission. The specific hardware depends on the goals of your project, such as temperature monitoring, location tracking, or remote equipment management.
++ IoT development services cover the design, development, deployment, and maintenance of IoT + solutions. They include the creation of software ecosystems that allow you to manage + communication between devices, collect data, map ingested data to digital twin, visualise it, + and work as one integrated system. Think of smart electricity, water, heat meters, wearable + health monitors, or asset tracking devices that provide critical information about asset health, + allow decision makers to effectively strategies and improve the efficiency of key operational + aspects. IoT development services bring these innovations to life. +
+ Key IoT development services: +An IoT platform is software that helps you easily manage connected devices, collect data, and visualise it in a clear and easy way. If you plan to effectively manage multiple devices and data streams, you'll definitely need an IoT platform, and we recommend using an IoT platform like ThingsBoard.
++ Almost every industry can benefit from the IoT, including manufacturing, healthcare, retail, + logistics, agriculture, energy, automotive, smart cities, education, and construction. IoT helps + to improve efficiency, safety, productivity and provides companies with critical data tailored + to their unique needs of each sector. +
+Development time is highly dependent on many factors, such as your specific needs, hardware availability, required integrations; simple projects can take weeks, while more complex ones can take several months.
++ The main challenges of the IoT include ensuring seamless connectivity of all devices, data + security and privacy, managing large amounts of information, visualising and analysing the data, + ensuring that different devices work together and meeting the high requirements of industry + standards. +
+Yes, we offer ongoing support, including problem analysis, problem resolution, upgrades, scaling services, and continuous enhancements to ensure your IoT system is running smoothly and meeting your ever-changing needs.
++ No, you don't need to have hardware to start developing, you can add it in the next phases of + the development process, and use simulated data to start with. But for a full product, IoT + solutions usually require specialised hardware, such as sensors and gateways for data collection + and transmission. The specific hardware depends on the goals of your project, such as + temperature monitoring, location tracking, or remote equipment management. +
+Yes, existing IoT solutions can be easily integrated with ThingsBoard. We help with seamless integration, ensuring that your current setup receives enhanced functionality and improved management capabilities.
++ An IoT platform is software that helps you easily manage connected devices, collect data, and + visualise it in a clear and easy way. If you plan to effectively manage multiple devices and + data streams, you'll definitely need an IoT platform, and we recommend using an IoT platform + like ThingsBoard. +
++ Development time is highly dependent on many factors, such as your specific needs, hardware + availability, required integrations; simple projects can take weeks, while more complex ones can + take several months. +
++ Yes, we offer ongoing support, including problem analysis, problem resolution, upgrades, scaling + services, and continuous enhancements to ensure your IoT system is running smoothly and meeting + your ever-changing needs. +
++ Yes, existing IoT solutions can be easily integrated with ThingsBoard. We help with seamless + integration, ensuring that your current setup receives enhanced functionality and improved + management capabilities. +
+Costs depend on the complexity of the project, hardware requirements, custom software development needs, integration with existing systems, and ongoing support needs. Each of these elements can have a significant impact on the total investment in your IoT project.
++ Costs depend on the complexity of the project, hardware requirements, custom software + development needs, integration with existing systems, and ongoing support needs. Each of these + elements can have a significant impact on the total investment in your IoT project. +
+Taking into account industry standards and regulations (HIPAA, GDPR, etc.). Regular audit of infrastructure and application security. Development of a comprehensive security strategy (encryption, multi-level authentication, access control).
++ Taking into account industry standards and regulations (HIPAA, GDPR, etc.). Regular audit of + infrastructure and application security. Development of a comprehensive security strategy + (encryption, multi-level authentication, access control). +
+We keep the IoT secure with strong encryption, multiple levels of authentication, and strict access controls. We also regularly audit our systems and comply with regulations such as GDPR and HIPAA to ensure your data is fully protected.
++ We keep the IoT secure with strong encryption, multiple levels of authentication, and strict + access controls. We also regularly audit our systems and comply with regulations such as GDPR + and HIPAA to ensure your data is fully protected. +
+
- 
- Thank you! Your message has been received.
'; @@ -1570,7 +2512,9 @@ const customerLogos = [ :global(.animation-trigger) { opacity: 1; transform: translateY(0); - transition: opacity 1s ease, transform 1s ease; + transition: + opacity 1s ease, + transform 1s ease; } :global(.visible-no-anim) { @@ -1653,7 +2597,9 @@ const customerLogos = [ text-align: center; text-decoration: none; cursor: pointer; - transition: background-color 0.15s, color 0.15s; + transition: + background-color 0.15s, + color 0.15s; &:hover { background-color: #fff; @@ -1681,7 +2627,9 @@ const customerLogos = [ cursor: pointer; transition: background-color 0.15s; - &:hover { background-color: #1557bb; } + &:hover { + background-color: #1557bb; + } } .hero-images { @@ -1712,7 +2660,9 @@ const customerLogos = [ max-width: 407px; animation-delay: 600ms; - @media (max-width: 1700px) { max-width: 306px; } + @media (max-width: 1700px) { + max-width: 306px; + } } .right { @@ -1721,7 +2671,9 @@ const customerLogos = [ max-width: 434px; animation-delay: 800ms; - @media (max-width: 1700px) { max-width: 399px; } + @media (max-width: 1700px) { + max-width: 399px; + } } .bottom { @@ -1730,7 +2682,9 @@ const customerLogos = [ max-width: 477px; animation-delay: 900ms; - @media (max-width: 1700px) { max-width: 387px; } + @media (max-width: 1700px) { + max-width: 387px; + } } } @@ -1917,62 +2871,9 @@ const customerLogos = [ } .project-screen-container { - min-height: 370px; - padding: 5px; - display: flex; - flex-direction: column; - align-items: center; - border-radius: 12px; margin-bottom: 50px; } - .project-screen { - position: relative; - width: 100%; - isolation: isolate; - - img { - height: auto; - width: 100%; - border-radius: 5px; - transition: opacity 0.3s ease; - } - - .bg-1 { - position: absolute; - width: 100%; - height: 100%; - z-index: -1; - border-radius: 24px; - right: -81px; - top: 46px; - border: 1.5px solid #3e9af8; - } - - .bg-2 { - position: absolute; - width: 100%; - height: 100%; - z-index: -2; - border-radius: 24px; - left: -61px; - top: -33px; - border: 1.5px solid #d1e9ff; - } - - .bg-3 { - position: absolute; - width: 100%; - height: 100%; - z-index: -3; - border-radius: 24px; - right: -57px; - top: -65px; - background: #f4f8fe; - border: none; - } - } - // :global() needed — buttons are injected via buildClientHtml() without Astro scoped attributes :global(.buttons-block) { display: flex; @@ -1991,7 +2892,9 @@ const customerLogos = [ text-decoration: none; transition: opacity 0.15s; } - :global(.buttons-block .button:hover) { opacity: 0.8; } + :global(.buttons-block .button:hover) { + opacity: 0.8; + } :global(.buttons-block .view-live-demo) { background-color: unset; color: #1e67d4; @@ -2088,9 +2991,18 @@ const customerLogos = [ padding: 0 100px; } - .cdu-title { font-size: 36px; line-height: 48px; font-weight: 500; } - .cdu-sub-title { font-size: 18px; line-height: 30px; } - .development-services-container { padding: 0 100px; } + .cdu-title { + font-size: 36px; + line-height: 48px; + font-weight: 500; + } + .cdu-sub-title { + font-size: 18px; + line-height: 30px; + } + .development-services-container { + padding: 0 100px; + } } // ≤1279px — tablet: column layout, hide right panel, show inside expanded panel @@ -2104,23 +3016,43 @@ const customerLogos = [ width: unset; padding-top: 50px; - .request-consultation-container { text-align: center; } + .request-consultation-container { + text-align: center; + } } - .hero-images { margin-top: 0; } + .hero-images { + margin-top: 0; + } } - .statistics { gap: 70px; padding: 20px; z-index: 3; } + .statistics { + gap: 70px; + padding: 20px; + z-index: 3; + } - #first-screen { min-height: unset; margin-bottom: 60px; } + #first-screen { + min-height: unset; + margin-bottom: 60px; + } - .development-services-container { padding: 32px; } + .development-services-container { + padding: 32px; + } - .custom-solution-container { flex-direction: column; gap: 20px; } + .custom-solution-container { + flex-direction: column; + gap: 20px; + } - .custom-solution-container > .cards { width: 100%; } + .custom-solution-container > .cards { + width: 100%; + } - .expansion-panel { width: 100%; } + .expansion-panel { + width: 100%; + } .expansion-panel.expanded { background: none; @@ -2132,7 +3064,10 @@ const customerLogos = [ border-radius: 15px; margin-bottom: 16px; - &::after { top: 35px; right: 23px; } + &::after { + top: 35px; + right: 23px; + } } .expansion-content { @@ -2147,38 +3082,73 @@ const customerLogos = [ display: none; width: 100%; - :global(.client-feedback-cards) { width: 100%; } - :global(.project-screen-container) { display: none; min-height: unset; } - :global(.feedback-heading) { display: none; } - :global(.buttons-block) { margin-bottom: 0; padding-top: 22px; } + :global(.client-feedback-cards) { + width: 100%; + } + :global(.project-screen-container) { + display: none; + } + :global(.feedback-heading) { + display: none; + } + :global(.buttons-block) { + margin-bottom: 0; + padding-top: 22px; + } } - .expansion-panel.expanded .expansion-content .panel-images { display: block; } + .expansion-panel.expanded .expansion-content .panel-images { + display: block; + } - .solutions-images { display: none; } + .solutions-images { + display: none; + } } // ≤959px @media (max-width: 959px) { - .page-wrap { overflow: hidden; } + .page-wrap { + overflow: hidden; + } - .development-services-container { padding: 0 32px; } - .custom-solutions { padding: 10px; margin-bottom: 50px; } - .solutions-images { width: 100%; } + .development-services-container { + padding: 0 32px; + } + .custom-solutions { + padding: 10px; + margin-bottom: 50px; + } + .solutions-images { + width: 100%; + } .hero-images { margin-right: 12%; - .top { max-width: 32vw; } - .right { max-width: 40vw; } - .bottom { max-width: 42vw; } + .top { + max-width: 32vw; + } + .right { + max-width: 40vw; + } + .bottom { + max-width: 42vw; + } } .statistics { gap: 16px; - .stat-num { font-size: 36px; line-height: 48px; margin-bottom: 16px; } - .stat-label { font-size: 14px; line-height: 24px; } + .stat-num { + font-size: 36px; + line-height: 48px; + margin-bottom: 16px; + } + .stat-label { + font-size: 14px; + line-height: 24px; + } } } @@ -2187,9 +3157,18 @@ const customerLogos = [ .hero-images { margin-right: 9%; - .top { top: 41px; left: 26px; } - .right { right: -114px; top: 78px; } - .bottom { bottom: 41px; left: -12px; } + .top { + top: 41px; + left: 26px; + } + .right { + right: -114px; + top: 78px; + } + .bottom { + bottom: 41px; + left: -12px; + } } } @@ -2203,18 +3182,30 @@ const customerLogos = [ padding: 0 16px; text-align: center; - .text { padding-bottom: 50px; margin: 0; } + .text { + padding-bottom: 50px; + margin: 0; + } } - .cdu-title { font-size: 28px; line-height: 44px; } - .cdu-sub-title { width: 100%; } + .cdu-title { + font-size: 28px; + line-height: 44px; + } + .cdu-sub-title { + width: 100%; + } // At this width the secondary screenshots break out of the laptop's // frame — `.right` sits at right:-114px off-screen and `.bottom` // drops below the main image instead of overlapping it. Hide them // so the hero shows just the laptop, cleanly centered. .hero-images { - .top, .right, .bottom { display: none; } + .top, + .right, + .bottom { + display: none; + } } #first-screen { @@ -2238,13 +3229,26 @@ const customerLogos = [ text-align: center; } - .stat-num { font-size: 36px; line-height: 48px; margin-bottom: 16px; } - .stat-label { font-size: 14px; line-height: 24px; width: 80px; } + .stat-num { + font-size: 36px; + line-height: 48px; + margin-bottom: 16px; + } + .stat-label { + font-size: 14px; + line-height: 24px; + width: 80px; + } } - .development-services-container { padding: 0 16px; } + .development-services-container { + padding: 0 16px; + } - .custom-solutions { padding: 40px 0; margin-bottom: 0; } + .custom-solutions { + padding: 40px 0; + margin-bottom: 0; + } .custom-solutions-wrapper h2 { font-size: 28px; @@ -2252,23 +3256,28 @@ const customerLogos = [ margin-bottom: 24px; } - .expansion-title { font-size: 22px; } + .expansion-title { + font-size: 22px; + } - .expansion-content { padding: 0; } + .expansion-content { + padding: 0; + } :global(.buttons-block) { flex-direction: column; width: 100%; } - :global(.buttons-block .button) { width: 100%; } + :global(.buttons-block .button) { + width: 100%; + } .panel-images { :global(.project-screen-container) { - display: block; + display: flex; width: 100%; padding: 56px 0 32px; margin-bottom: 0; - min-height: unset; } :global(.feedback-heading) { @@ -2278,25 +3287,32 @@ const customerLogos = [ margin-bottom: 12px; } - :global(.buttons-block) { margin-bottom: 22px; } + :global(.buttons-block) { + margin-bottom: 22px; + } - :global(.client-info) { padding: 0; } + :global(.client-info) { + padding: 0; + } - :global(.client-avatar-container) { flex-direction: column; } + :global(.client-avatar-container) { + flex-direction: column; + } :global(.client-avatar-img) { width: 75px; height: 75px; } - :global(.client-avatar-img img) { width: 75px; height: 75px; } + :global(.client-avatar-img img) { + width: 75px; + height: 75px; + } - :global(.client-info > div:last-child) { margin-left: 0; } + :global(.client-info > div:last-child) { + margin-left: 0; + } } - - :global(.project-screen .bg-1) { right: -13px; top: 10px; } - :global(.project-screen .bg-2) { left: -10px; top: -31px; } - :global(.project-screen .bg-3) { right: -14px; top: -19px; } } // ≤380px @@ -2304,9 +3320,21 @@ const customerLogos = [ .hero-images { margin-right: 0; - .top { top: 19px; left: 26px; max-width: 38vw; } - .right { right: -44px; top: 48px; max-width: 46vw; } - .bottom { bottom: 33px; left: 3px; max-width: 49vw; } + .top { + top: 19px; + left: 26px; + max-width: 38vw; + } + .right { + right: -44px; + top: 48px; + max-width: 46vw; + } + .bottom { + bottom: 33px; + left: 3px; + max-width: 49vw; + } } } @@ -2317,11 +3345,11 @@ const customerLogos = [ background-color: transparent; &::before { - content: ""; + content: ''; position: absolute; width: 100vw; height: 100%; - background-color: #F4F8FE; + background-color: #f4f8fe; z-index: -1; left: 49.4%; transform: translateX(-50%); @@ -2338,7 +3366,7 @@ const customerLogos = [ background-color: var(--color-bg); padding: 46px; border-radius: 24px; - border: 1px solid #2A7DEC; + border: 1px solid #2a7dec; box-shadow: 0 26px 40px 0 rgba(42, 125, 236, 0.08); } @@ -2386,7 +3414,7 @@ const customerLogos = [ .text-wrap { height: fit-content; padding-left: 17px; - border-left: 3px solid #2A7DEC; + border-left: 3px solid #2a7dec; margin-bottom: 16px; p { @@ -2395,7 +3423,9 @@ const customerLogos = [ font-weight: 400; line-height: 28px; - &:first-child { margin-bottom: 12px; } + &:first-child { + margin-bottom: 12px; + } } } } @@ -2404,7 +3434,7 @@ const customerLogos = [ display: flex; justify-content: space-between; align-items: center; - border-top: 1px solid #E5EFFC; + border-top: 1px solid #e5effc; padding-top: 32px; .vision-footer-text { @@ -2434,7 +3464,9 @@ const customerLogos = [ justify-content: start; width: 70%; - .vision-img { max-width: 250px; } + .vision-img { + max-width: 250px; + } } } } @@ -2442,9 +3474,13 @@ const customerLogos = [ // ≤959px — vision @media (max-width: 959px) { .vision-section { - .vision-wrapper { padding: 32px; } + .vision-wrapper { + padding: 32px; + } - .vision-info { gap: 28px; } + .vision-info { + gap: 28px; + } .vision-header { width: 100%; @@ -2462,7 +3498,9 @@ const customerLogos = [ align-items: flex-start; gap: 28px; - .vision-footer-text { text-align: left; } + .vision-footer-text { + text-align: left; + } } } } @@ -2472,25 +3510,43 @@ const customerLogos = [ .vision-section { padding: 40px 0; - .vision-wrapper { padding: 46px 24px; } + .vision-wrapper { + padding: 46px 24px; + } .vision-title { display: flex; gap: 16px; margin: 0; - .vision-img { width: 100%; display: none; } - .vision-img-mobile { display: block; } + .vision-img { + width: 100%; + display: none; + } + .vision-img-mobile { + display: block; + } - .name { font-size: 18px; } - .vision-title-text { font-size: 16px; } + .name { + font-size: 18px; + } + .vision-title-text { + font-size: 16px; + } } - .vision-descr .text-wrap p { font-size: 14px; } + .vision-descr .text-wrap p { + font-size: 14px; + } .vision-footer { - .vision-footer-text { font-size: 18px; line-height: 30px; } - .cdu-button { width: 100%; } + .vision-footer-text { + font-size: 18px; + line-height: 30px; + } + .cdu-button { + width: 100%; + } } } } @@ -2533,7 +3589,7 @@ const customerLogos = [ background-size: cover; &::after { - content: ""; + content: ''; position: absolute; top: 0; right: 0; @@ -2546,14 +3602,20 @@ const customerLogos = [ } &:hover { - &::after { transform: scale(1.2); } + &::after { + transform: scale(1.2); + } .content .footer { padding-bottom: 45px; .stats p { - .short { opacity: 0; } - .long { opacity: 1; } + .short { + opacity: 0; + } + .long { + opacity: 1; + } } } } @@ -2576,8 +3638,8 @@ const customerLogos = [ width: 100%; .glass-tag { - color: #1C1C1B; - background: rgba(255, 255, 255, 0.60); + color: #1c1c1b; + background: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 500; line-height: 24px; @@ -2610,7 +3672,10 @@ const customerLogos = [ } } - .logo { height: 36px; width: auto; } + .logo { + height: 36px; + width: auto; + } } .footer { @@ -2624,7 +3689,7 @@ const customerLogos = [ transition: all 0.5s; padding-bottom: 12px; margin-bottom: 12px; - border-bottom: 1px solid #B9C0C5; + border-bottom: 1px solid #b9c0c5; } .stats { @@ -2641,7 +3706,9 @@ const customerLogos = [ flex-shrink: 0; position: relative; - &:last-child { width: auto; } + &:last-child { + width: auto; + } .num { font-size: 24px; @@ -2649,13 +3716,16 @@ const customerLogos = [ line-height: 36px; } - .short, .long { + .short, + .long { position: absolute; transition: opacity 0.5s linear; white-space: nowrap; } - .long { opacity: 0; } + .long { + opacity: 0; + } } } } @@ -2665,12 +3735,16 @@ const customerLogos = [ // ≤1350px — case studies @media (max-width: 1350px) { - #case-studies-clients .wrap .client-card { width: calc((100% - 32px) / 2); } + #case-studies-clients .wrap .client-card { + width: calc((100% - 32px) / 2); + } } // ≤959px — case studies @media (max-width: 959px) { - #case-studies-clients .wrap .client-card { width: 100%; } + #case-studies-clients .wrap .client-card { + width: 100%; + } } // ≤599px — case studies @@ -2678,7 +3752,10 @@ const customerLogos = [ #case-studies-clients { padding: 40px 0; - h2 { font-size: 28px; line-height: 44px; } + h2 { + font-size: 28px; + line-height: 44px; + } .wrap .client-card { width: 100%; @@ -2686,7 +3763,9 @@ const customerLogos = [ .bg-wrap .content .footer .stats { justify-content: space-around; - p { width: 109px; } + p { + width: 109px; + } } } } @@ -2699,11 +3778,11 @@ const customerLogos = [ background-color: transparent; &::before { - content: ""; + content: ''; position: absolute; width: 100vw; height: 100%; - background-color: #F4F8FE; + background-color: #f4f8fe; z-index: -1; left: 49.4%; transform: translateX(-50%); @@ -2763,8 +3842,8 @@ const customerLogos = [ display: block; width: 8px; height: 8px; - border-right: 2px solid #6B7178; - border-bottom: 2px solid #6B7178; + border-right: 2px solid #6b7178; + border-bottom: 2px solid #6b7178; transform: rotate(45deg); transition: transform 0.6s; flex-shrink: 0; @@ -2798,9 +3877,11 @@ const customerLogos = [ max-height: 370px; .expansion-header { - border-bottom: 1px solid #BDBDBD; + border-bottom: 1px solid #bdbdbd; - &::after { transform: rotate(-135deg); } + &::after { + transform: rotate(-135deg); + } } .expansion-content { @@ -2816,7 +3897,10 @@ const customerLogos = [ overflow: hidden; text-align: left; opacity: 0; - transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out, padding 0.4s ease-in-out; + transition: + opacity 0.4s ease-in-out, + max-height 0.4s ease-in-out, + padding 0.4s ease-in-out; ul { display: flex; @@ -2831,7 +3915,9 @@ const customerLogos = [ line-height: 24px; color: #424242; - &::marker { color: #2A7DEC; } + &::marker { + color: #2a7dec; + } } } } @@ -2872,13 +3958,17 @@ const customerLogos = [ // ≤1100px — services @media (max-width: 1100px) { .services { - .cards .expansion-card { width: calc(50% - 8px); } + .cards .expansion-card { + width: calc(50% - 8px); + } } } // ≤750px — services 1 col @media (max-width: 750px) { - .services .cards .expansion-card { width: 100%; } + .services .cards .expansion-card { + width: 100%; + } } // ≤599px — services @@ -2886,8 +3976,14 @@ const customerLogos = [ .services { padding: 40px 0; - .services-title { font-size: 28px; line-height: 44px; } - .services-sub-title { font-size: 16px; line-height: 28px; } + .services-title { + font-size: 28px; + line-height: 44px; + } + .services-sub-title { + font-size: 16px; + line-height: 28px; + } .cards .expansion-card { width: 100%; @@ -2958,7 +4054,7 @@ const customerLogos = [ max-width: 50%; width: 50%; scrollbar-width: thin; - scrollbar-color: #ADB5BD transparent; + scrollbar-color: #adb5bd transparent; padding-right: 16px; .menu-item { @@ -2968,13 +4064,17 @@ const customerLogos = [ padding: 20px 32px; cursor: pointer; - &:hover .menu-item-header h3 { color: #000; } + &:hover .menu-item-header h3 { + color: #000; + } &.active { border-radius: 24px; - background: #F4F8FE; + background: #f4f8fe; - .menu-item-header h3 { color: #000; } + .menu-item-header h3 { + color: #000; + } } .menu-item-header { @@ -2989,7 +4089,7 @@ const customerLogos = [ font-size: 24px; font-weight: 400; line-height: 36px; - color: #3D3D3D; + color: #3d3d3d; } } } @@ -3004,7 +4104,9 @@ const customerLogos = [ gap: 32px; } - :global(.industries-card.inline) { display: none; } + :global(.industries-card.inline) { + display: none; + } } // Industries card inner content — fully global (injected via innerHTML) @@ -3023,7 +4125,9 @@ const customerLogos = [ color: #212121; } - :global(.industries-card .card-descr) { margin-bottom: 32px; } + :global(.industries-card .card-descr) { + margin-bottom: 32px; + } :global(.industries-card ul) { display: flex; @@ -3034,18 +4138,22 @@ const customerLogos = [ :global(.industries-card ul li) { list-style-type: disc; - color: #3D3D3D; + color: #3d3d3d; font-size: 16px; font-weight: 400; line-height: 28px; } - :global(.industries-card ul li::marker) { color: #2A7DEC; } + :global(.industries-card ul li::marker) { + color: #2a7dec; + } // ≤1280px — industries (mobile: inline card) @media (max-width: 1280px) { .industries { - .industries-title { text-align: center; } + .industries-title { + text-align: center; + } .content-container { width: 100%; @@ -3064,13 +4172,19 @@ const customerLogos = [ flex-direction: column; padding: 16px 0; - &.active .menu-item-header { padding-bottom: 0; } + &.active .menu-item-header { + padding-bottom: 0; + } - .menu-item-header { padding: 16px 32px; } + .menu-item-header { + padding: 16px 32px; + } } } - :global(.industries-card.global) { display: none; } + :global(.industries-card.global) { + display: none; + } :global(.industries-card.inline) { display: flex; @@ -3078,8 +4192,14 @@ const customerLogos = [ max-width: 95%; } - :global(.industries-card.inline .card-descr) { width: 60%; } - :global(.industries-card.inline .card-img) { max-width: 300px; bottom: 20px; right: 20px; } + :global(.industries-card.inline .card-descr) { + width: 60%; + } + :global(.industries-card.inline .card-img) { + max-width: 300px; + bottom: 20px; + right: 20px; + } } } @@ -3088,9 +4208,13 @@ const customerLogos = [ .industries { padding: 40px 0; - .industries-container { padding: 10px; } + .industries-container { + padding: 10px; + } - .menu .menu-item { padding: 12px 0; } + .menu .menu-item { + padding: 12px 0; + } } :global(.industries-card.inline) { @@ -3099,8 +4223,12 @@ const customerLogos = [ line-height: 21px; } - :global(.industries-card.inline .card-img) { display: none; } - :global(.industries-card.inline .card-descr) { width: 100%; } + :global(.industries-card.inline .card-img) { + display: none; + } + :global(.industries-card.inline .card-descr) { + width: 100%; + } } // ── Trusted Partner Section ────────────────────────────────────────────────── @@ -3110,11 +4238,11 @@ const customerLogos = [ position: relative; &::before { - content: ""; + content: ''; position: absolute; width: 100vw; height: 100%; - background-color: #F4F8FE; + background-color: #f4f8fe; z-index: -1; left: 49.4%; transform: translateX(-50%); @@ -3161,8 +4289,8 @@ const customerLogos = [ &::before { content: '✓'; - color: #FAFBFC; - background-color: #2A7DEC; + color: #fafbfc; + background-color: #2a7dec; border-radius: 50%; font-size: 25px; font-weight: 600; @@ -3197,7 +4325,7 @@ const customerLogos = [ display: flex; flex-direction: column; gap: 12px; - border-left: 3px solid #2A7DEC; + border-left: 3px solid #2a7dec; padding-left: 17px; margin-bottom: 32px; @@ -3216,8 +4344,13 @@ const customerLogos = [ align-items: center; gap: 16px; - .avatar { max-width: 220px; height: auto; } - .avatar-mobile { display: none; } + .avatar { + max-width: 220px; + height: auto; + } + .avatar-mobile { + display: none; + } .trusted-partner-text { .name { @@ -3237,13 +4370,19 @@ const customerLogos = [ // ≤1279px — trusted partner @media (max-width: 1279px) { - .trusted-partner .trusted-partner-container { padding: 40px; } - .trusted-partner .trusted-partner-avatar .avatar { max-width: 245px; } + .trusted-partner .trusted-partner-container { + padding: 40px; + } + .trusted-partner .trusted-partner-avatar .avatar { + max-width: 245px; + } } // ≤959px — trusted partner @media (max-width: 959px) { - .trusted-partner .trusted-partner-container { padding: 20px; } + .trusted-partner .trusted-partner-container { + padding: 20px; + } .trusted-partner .trusted-partner-footer { flex-direction: column-reverse; gap: 20px; @@ -3252,8 +4391,12 @@ const customerLogos = [ .trusted-partner-avatar { width: 100%; - .avatar { margin: 0 auto; } - .trusted-partner-text { text-align: left; } + .avatar { + margin: 0 auto; + } + .trusted-partner-text { + text-align: left; + } } } } @@ -3263,8 +4406,13 @@ const customerLogos = [ .trusted-partner { padding: 40px 0; - .trusted-partner-title { font-size: 28px; line-height: 44px; } - .trusted-partner-container { padding: 20px 0; } + .trusted-partner-title { + font-size: 28px; + line-height: 44px; + } + .trusted-partner-container { + padding: 20px 0; + } .trusted-tips { gap: 45px; @@ -3274,19 +4422,35 @@ const customerLogos = [ font-weight: 400; line-height: 32px; - &::before { width: 32px; height: 32px; font-size: 14px; } + &::before { + width: 32px; + height: 32px; + font-size: 14px; + } } } - .trusted-partner-header-descr p { font-size: 16px; font-weight: 400; line-height: 30px; } + .trusted-partner-header-descr p { + font-size: 16px; + font-weight: 400; + line-height: 30px; + } - .trusted-partner-descr p { font-size: 14px; font-weight: 400; } + .trusted-partner-descr p { + font-size: 14px; + font-weight: 400; + } .trusted-partner-avatar { flex-direction: row; - .avatar { width: 100%; display: none; } - .avatar-mobile { display: block; } + .avatar { + width: 100%; + display: none; + } + .avatar-mobile { + display: block; + } } } } @@ -3299,11 +4463,11 @@ const customerLogos = [ background-color: transparent; &::before { - content: ""; + content: ''; position: absolute; width: 100vw; height: 100%; - background-color: #F4F8FE; + background-color: #f4f8fe; z-index: -1; left: 49.4%; transform: translateX(-50%); @@ -3319,13 +4483,16 @@ const customerLogos = [ color: #212121; } - .mobile-container { display: none; } + .mobile-container { + display: none; + } table { width: 100%; border-collapse: collapse; - th, td { + th, + td { padding: 10px 20px; text-align: center; font-size: 16px; @@ -3334,7 +4501,7 @@ const customerLogos = [ border: 4px solid #f4f7fa; border-radius: 7px; background: #fff; - color: #3D3D3D; + color: #3d3d3d; height: 75px; } @@ -3350,30 +4517,38 @@ const customerLogos = [ thead th:first-child { width: 30%; - background-color: #F4F8FE; + background-color: #f4f8fe; border-radius: 0; } - thead th:not(:first-child) { width: 35%; } + thead th:not(:first-child) { + width: 35%; + } tbody td:first-child { font-weight: 400; color: #212529; width: 30%; - background-color: #F4F8FE; + background-color: #f4f8fe; border-radius: 0; text-align: left; } - tbody td:not(:first-child) { width: 35%; } + tbody td:not(:first-child) { + width: 35%; + } - tr:last-child td { border-bottom: none; } + tr:last-child td { + border-bottom: none; + } } } // ≤1279px — fast delivery @media (max-width: 1279px) { - .fast-delivery table td { padding: 20px; } + .fast-delivery table td { + padding: 20px; + } } // ≤959px — fast delivery @@ -3381,7 +4556,9 @@ const customerLogos = [ .fast-delivery { padding: 100px 10px; - .table-container { display: none; } + .table-container { + display: none; + } .mobile-container { display: flex; @@ -3403,7 +4580,7 @@ const customerLogos = [ font-size: 14px; line-height: 24px; font-weight: 400; - color: #3D3D3D; + color: #3d3d3d; text-align: left; box-shadow: 0 26px 40px 0 rgba(42, 125, 236, 0.08); } @@ -3422,7 +4599,7 @@ const customerLogos = [ font-size: 16px; font-weight: 500; line-height: 28px; - color: #1F2021; + color: #1f2021; } } } @@ -3434,8 +4611,14 @@ const customerLogos = [ padding: 40px 0; padding-top: 0; - .fast-delivery-title { padding: 0; font-size: 24px; line-height: 36px; } - .table-container { overflow-x: scroll; } + .fast-delivery-title { + padding: 0; + font-size: 24px; + line-height: 36px; + } + .table-container { + overflow-x: scroll; + } } } @@ -3446,11 +4629,13 @@ const customerLogos = [ gap: 64px; align-items: flex-start; - img { flex-shrink: 0; } + img { + flex-shrink: 0; + } .quote-text { p { - color: #3A3B3D; + color: #3a3b3d; font-style: italic; font-size: 18px; font-weight: 400; @@ -3459,7 +4644,7 @@ const customerLogos = [ margin-bottom: 32px; a.read-more-link { - color: #3D3D3D; + color: #3d3d3d; font-style: normal; text-decoration: underline; } @@ -3482,7 +4667,9 @@ const customerLogos = [ flex-direction: column; padding: 40px 0; - img { display: none; } + img { + display: none; + } } } @@ -3492,11 +4679,11 @@ const customerLogos = [ position: relative; &::before { - content: ""; + content: ''; position: absolute; width: 100vw; height: 100%; - background-color: #F4F8FE; + background-color: #f4f8fe; z-index: -1; left: 49.4%; transform: translateX(-50%); @@ -3542,13 +4729,16 @@ const customerLogos = [ line-height: 28px; } } - } // ≤1279px — more feature @media (max-width: 1279px) { - .more-feature .cards .card { padding: 32px; } - .more-feature :global(.banner-img) { display: none; } + .more-feature .cards .card { + padding: 32px; + } + .more-feature :global(.banner-img) { + display: none; + } } // ≤959px — more feature @@ -3558,7 +4748,11 @@ const customerLogos = [ margin-bottom: 80px; width: 100%; - .card { margin-bottom: 0; width: 48%; flex: unset; } + .card { + margin-bottom: 0; + width: 48%; + flex: unset; + } } } @@ -3567,16 +4761,26 @@ const customerLogos = [ .more-feature { padding: 40px 0; - .more-feature-title { font-size: 24px; line-height: 36px; } + .more-feature-title { + font-size: 24px; + line-height: 36px; + } .cards { flex-direction: column; margin-bottom: 32px; - .card { width: 100%; margin-bottom: 0; padding: 32px; } - .card-title { font-size: 24px; line-height: 36px; margin-bottom: 0; } + .card { + width: 100%; + margin-bottom: 0; + padding: 32px; + } + .card-title { + font-size: 24px; + line-height: 36px; + margin-bottom: 0; + } } - } } @@ -3619,7 +4823,7 @@ const customerLogos = [ font-weight: 500; line-height: 30px; text-align: center; - border-bottom: 1px solid #9E9E9E; + border-bottom: 1px solid #9e9e9e; &:first-child { text-align: left; @@ -3629,7 +4833,7 @@ const customerLogos = [ th:not(:last-child), td:not(:last-child) { - border-right: 1px dashed #9E9E9E; + border-right: 1px dashed #9e9e9e; } th:first-child, @@ -3643,9 +4847,15 @@ const customerLogos = [ tbody { tr { - &:nth-child(4).highlight-row { background-color: #F2F7FE; } - &:hover { background-color: #F2F7FE; } - &:hover td:first-child { font-weight: 500; } + &:nth-child(4).highlight-row { + background-color: #f2f7fe; + } + &:hover { + background-color: #f2f7fe; + } + &:hover td:first-child { + font-weight: 500; + } } td { @@ -3670,7 +4880,11 @@ const customerLogos = [ overflow: hidden; position: relative; color: rgb(33, 37, 41); - transition: height 0.3s ease-in-out, width 0.3s ease-in-out, transform 0.3s ease-in-out, text-align 0.3s; + transition: + height 0.3s ease-in-out, + width 0.3s ease-in-out, + transform 0.3s ease-in-out, + text-align 0.3s; cursor: default; p { @@ -3684,12 +4898,14 @@ const customerLogos = [ margin-bottom: 8px; } - &:last-child { opacity: 0; } + &:last-child { + opacity: 0; + } } &.first { - border: 1px solid #B5C0CE; - background: linear-gradient(90deg, #FFF 0%, #B5C0CE 100%); + border: 1px solid #b5c0ce; + background: linear-gradient(90deg, #fff 0%, #b5c0ce 100%); width: 150%; &:hover { @@ -3699,13 +4915,15 @@ const customerLogos = [ text-align: left; height: 136px; - p:last-child { opacity: 1; } + p:last-child { + opacity: 1; + } } } &.second { - border: 1px solid rgba(42, 125, 236, 0.40); - background: #D9EBFF; + border: 1px solid rgba(42, 125, 236, 0.4); + background: #d9ebff; width: 100%; margin-left: 50%; @@ -3715,13 +4933,15 @@ const customerLogos = [ text-align: left; height: 136px; - p:last-child { opacity: 1; } + p:last-child { + opacity: 1; + } } } &.third { - border: 1px solid rgba(42, 125, 236, 0.60); - background: #BBD5F9; + border: 1px solid rgba(42, 125, 236, 0.6); + background: #bbd5f9; width: 50%; margin-left: 50%; padding: 6px 2px; @@ -3732,12 +4952,14 @@ const customerLogos = [ text-align: left; height: 136px; - p:last-child { opacity: 1; } + p:last-child { + opacity: 1; + } } } &.fourth { - border: 1px solid #2670D4; + border: 1px solid #2670d4; background: #1e67d4; width: 100%; color: white; @@ -3745,7 +4967,9 @@ const customerLogos = [ padding: 4px 1px; text-align: center; - p { color: white; } + p { + color: white; + } &:hover { padding-left: 8px; @@ -3754,13 +4978,15 @@ const customerLogos = [ text-align: left; height: 136px; - p:last-child { opacity: 1; } + p:last-child { + opacity: 1; + } } } &.fifth { - border: 1px solid rgba(42, 125, 236, 0.60); - background: #BBD5F9; + border: 1px solid rgba(42, 125, 236, 0.6); + background: #bbd5f9; width: 200%; height: 54px; @@ -3770,13 +4996,15 @@ const customerLogos = [ text-align: left; height: 136px; - p:last-child { opacity: 1; } + p:last-child { + opacity: 1; + } } } &.sixth { - border: 1px solid #2670D4; - background: #D9EBFF; + border: 1px solid #2670d4; + background: #d9ebff; width: 50%; padding: 6px 2px; @@ -3787,13 +5015,15 @@ const customerLogos = [ height: 136px; transform: translateX(-92px); - p:last-child { opacity: 1; } + p:last-child { + opacity: 1; + } } } &.seventh { - border: 1px solid #B5C0CE; - background: linear-gradient(90deg, #B5C0CE 0%, #FFF 100%); + border: 1px solid #b5c0ce; + background: linear-gradient(90deg, #b5c0ce 0%, #fff 100%); width: 150%; margin-left: 50%; @@ -3804,7 +5034,9 @@ const customerLogos = [ height: 136px; transform: translateX(-147px); - p:last-child { opacity: 1; } + p:last-child { + opacity: 1; + } } } } @@ -3820,7 +5052,9 @@ const customerLogos = [ // ≤1279px — project-timeline → mobile layout @media (max-width: 1279px) { .project-timeline { - .table-container { display: none; } + .table-container { + display: none; + } .mobile-timeline { display: flex; @@ -3837,10 +5071,12 @@ const customerLogos = [ font-weight: 400; line-height: 30px; letter-spacing: 0.15px; - color: #3D3D3D; + color: #3d3d3d; border-bottom: 1px dashed #757575; - &:last-child { border-bottom: none; } + &:last-child { + border-bottom: none; + } } } @@ -3868,13 +5104,16 @@ const customerLogos = [ font-weight: 400; line-height: 30px; letter-spacing: 0.15px; - color: #3D3D3D; + color: #3d3d3d; } p:last-child { max-height: 0; overflow: hidden; - transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out, opacity 0.4s ease-in-out; + transition: + max-height 0.5s ease-in-out, + margin-top 0.5s ease-in-out, + opacity 0.4s ease-in-out; margin-top: 0; opacity: 0; } @@ -3899,19 +5138,19 @@ const customerLogos = [ // even with a 1500px cap. &:nth-child(1) { padding: 51.5px 16px; - background: linear-gradient(180deg, #FFF 0%, #B5C0CE 100%); + background: linear-gradient(180deg, #fff 0%, #b5c0ce 100%); min-height: 167px; } &:nth-child(2) { padding: 34px 16px; - background: #D4E5FB; + background: #d4e5fb; min-height: 132px; } &:nth-child(3) { padding: 4px 16px; - background: #BBD5F9; + background: #bbd5f9; min-height: 72px; } @@ -3920,24 +5159,27 @@ const customerLogos = [ background: #1e67d4; min-height: 132px; - p, h3 { color: white; } + p, + h3 { + color: white; + } } &:nth-child(5) { padding: 100px 16px; - background: #BBD5F9; + background: #bbd5f9; min-height: 264px; } &:nth-child(6) { padding: 4px 16px; - background: #D4E5FB; + background: #d4e5fb; min-height: 72px; } &:nth-child(7) { padding: 51.5px 16px; - background: linear-gradient(180deg, #B5C0CE 0%, #FFF 100%); + background: linear-gradient(180deg, #b5c0ce 0%, #fff 100%); min-height: 167px; } } @@ -3952,810 +5194,921 @@ const customerLogos = [ padding: 40px 0; .mobile-timeline { - .mt-left div { padding-left: 0; } + .mt-left div { + padding-left: 0; + } .mt-right > div { - h3 { font-size: 18px; line-height: 30px; } - p { font-size: 16px; line-height: 28px; } + h3 { + font-size: 18px; + line-height: 30px; + } + p { + font-size: 16px; + line-height: 28px; + } } - .mt-right > div:nth-child(4) { padding-top: 9%; } - .mt-right > div:nth-child(5) { padding-top: 28%; } + .mt-right > div:nth-child(4) { + padding-top: 9%; + } + .mt-right > div:nth-child(5) { + padding-top: 28%; + } } } } -// ─── ENGAGEMENT MODELS ────────────────────────────────────────────────────── + // ─── ENGAGEMENT MODELS ────────────────────────────────────────────────────── -.engagement-models { - padding: 100px 0; - position: relative; + .engagement-models { + padding: 100px 0; + position: relative; - &::before { - content: ''; - position: absolute; - top: 0; - left: 49.4%; - transform: translateX(-50%); - width: 100vw; - height: 100%; - background-color: #F4F8FE; - z-index: -1; - } + &::before { + content: ''; + position: absolute; + top: 0; + left: 49.4%; + transform: translateX(-50%); + width: 100vw; + height: 100%; + background-color: #f4f8fe; + z-index: -1; + } - .engagement-model-container { - display: flex; - gap: 20px; - flex-direction: column; - align-items: center; - justify-content: center; - margin-bottom: 40px; - } + .engagement-model-container { + display: flex; + gap: 20px; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 40px; + } - .engagement-model-title { - font-size: 36px; - font-weight: 500; - line-height: 48px; - color: #212121; - margin-bottom: 16px; - text-align: center; + .engagement-model-title { + font-size: 36px; + font-weight: 500; + line-height: 48px; + color: #212121; + margin-bottom: 16px; + text-align: center; + } + + .engagement-model-descr { + text-align: center; + max-width: 824px; + font-size: 18px; + font-weight: 400; + color: #424242; + margin-bottom: 40px; + line-height: 30px; + } + + .em-container { + display: flex; + gap: 32px; + width: 100%; + } + + .em-card { + flex: 1; + padding: 46px; + display: flex; + flex-direction: column; + border: 1px solid #ddeafc; + border-radius: 24px; + box-shadow: 0 26px 40px 0 rgba(0, 0, 0, 0.08); + background-color: #fff; + + & > img:first-child { + margin: 0 auto 16px; + } + + h3 { + font-size: 28px; + font-weight: 500; + line-height: 44px; + text-align: center; + margin-bottom: 8px; + color: #212121; + } + + .em-subtitle { + font-size: 16px; + font-weight: 400; + line-height: 28px; + color: #3d3d3d; + text-align: center; + margin-bottom: 40px; + } + + .em-btn { + font-size: 16px; + margin-bottom: 40px; + align-self: center; + } + + h4 { + font-size: 18px; + font-weight: 500; + line-height: 30px; + color: #212121; + margin-bottom: 16px; + } + + ul:first-of-type { + margin-bottom: 40px; + } + + li { + display: flex; + margin-bottom: 12px; + + img { + margin-right: 12px; + } + + p { + font-size: 14px; + font-weight: 400; + line-height: 24px; + color: #212121; + } + } + } } - .engagement-model-descr { - text-align: center; - max-width: 824px; - font-size: 18px; - font-weight: 400; - color: #424242; - margin-bottom: 40px; - line-height: 30px; + // ≤1279px — engagement models + @media (max-width: 1279px) { + .engagement-models .em-container { + flex-direction: column; + max-width: unset; + + .em-card:first-child h3 { + width: unset; + margin-left: auto; + margin-right: auto; + } + } } - .em-container { - display: flex; - gap: 32px; - width: 100%; + // ≤959px — engagement models + @media (max-width: 959px) { + .engagement-models { + padding: 40px 0; + + .engagement-model-title { + font-size: 24px; + line-height: 36px; + } + .engagement-model-descr { + font-size: 16px; + line-height: 28px; + } + + .em-card { + padding: 32px; + + h3 { + font-size: 24px; + line-height: 36px; + } + + ul:first-of-type li img { + margin-top: 3px; + } + li { + align-items: flex-start; + } + } + } } - .em-card { - flex: 1; - padding: 46px; - display: flex; - flex-direction: column; - border: 1px solid #DDEAFC; - border-radius: 24px; - box-shadow: 0 26px 40px 0 rgba(0, 0, 0, 0.08); - background-color: #FFF; + // ─── REVIEWS ──────────────────────────────────────────────────────────────── - & > img:first-child { - margin: 0 auto 16px; - } + .reviews { + padding: 40px 0 0; + background: transparent; - h3 { - font-size: 28px; + .reviews-title { + font-size: 36px; font-weight: 500; - line-height: 44px; + line-height: 48px; text-align: center; - margin-bottom: 8px; color: #212121; - } - - .em-subtitle { - font-size: 16px; - font-weight: 400; - line-height: 28px; - color: #3D3D3D; - text-align: center; margin-bottom: 40px; - white-space: break-spaces; } - .em-btn { - font-size: 16px; + .reviews-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; margin-bottom: 40px; - align-self: center; } + } - h4 { - font-size: 18px; - font-weight: 500; - line-height: 30px; - color: #212121; - margin-bottom: 16px; + @media (max-width: 959px) { + .reviews .reviews-grid { + grid-template-columns: 1fr; + margin-bottom: 0; } + } - ul:first-of-type { margin-bottom: 40px; } - - li { - display: flex; - margin-bottom: 12px; + // ─── CONTACT BANNER ───────────────────────────────────────────────────────── - img { margin-right: 12px; } + .contact { + padding: 100px 0; + background: transparent; + } - p { - font-size: 14px; - font-weight: 400; - line-height: 24px; - color: #212121; - } + @media (max-width: 959px) { + .contact { + padding: 40px 0; } } -} -// ≤1279px — engagement models -@media (max-width: 1279px) { - .engagement-models .em-container { + // ─── FAQ ───────────────────────────────────────────────────────────────────── + + .faq-iot-development { + display: flex; flex-direction: column; - max-width: unset; + padding: 100px 0; + z-index: 10; - .em-card:first-child h3 { - width: unset; - margin-left: auto; - margin-right: auto; + .faq-section-title { + font-size: 36px; + font-weight: 500; + line-height: 48px; + margin-bottom: 56px; + text-align: center; + color: #212529; + white-space: normal; + padding: 0; } - } -} -// ≤959px — engagement models -@media (max-width: 959px) { - .engagement-models { - padding: 40px 0; + .faq-section-content { + display: flex; + gap: 20px; + } - .engagement-model-title { font-size: 24px; line-height: 36px; } - .engagement-model-descr { font-size: 16px; line-height: 28px; } + .faq-section-selector { + display: flex; + flex-direction: column; + gap: 16px; + align-items: flex-start; + padding: 8px; + width: fit-content; + color: rgba(0, 0, 0, 0.38); - .em-card { - padding: 32px; + .faq-section-option { + width: 100%; + font-size: 24px; + font-weight: 500; + line-height: 36px; + padding: 16px 24px; + border: 1.5px solid transparent; + border-radius: 16px; + cursor: pointer; + color: #757575; + white-space: nowrap; - h3 { font-size: 24px; line-height: 36px; } + &:hover { + color: #2a2e33; + } - ul:first-of-type li img { margin-top: 3px; } - li { align-items: flex-start; } + &.active { + color: #202021; + background: #f4f8fe; + } + } } - } -} -// ─── REVIEWS ──────────────────────────────────────────────────────────────── + .answers { + flex: 1.5; -.reviews { - padding: 40px 0 0; - background: transparent; + .pi-accordion { + display: none; - .reviews-title { - font-size: 36px; - font-weight: 500; - line-height: 48px; - text-align: center; - color: #212121; - margin-bottom: 40px; - } + &.active { + display: block; + } + } - .reviews-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 24px; - margin-bottom: 40px; - } -} + .item { + border-bottom: 1.5px solid #dee2e6; + overflow: visible; + position: relative; -@media (max-width: 959px) { - .reviews .reviews-grid { - grid-template-columns: 1fr; - margin-bottom: 0; - } -} + &:not(:last-of-type) { + margin-bottom: 7px; + } -// ─── CONTACT BANNER ───────────────────────────────────────────────────────── + h3.title { + font-size: 18px; + font-weight: 500; + line-height: 30px; + color: #212529; + padding: 22px 37px 22px 20px; + margin: 0; + cursor: pointer; + position: relative; + white-space: normal; + + &:hover { + color: rgba(33, 33, 33, 0.78); + } -.contact { - padding: 100px 0; - background: transparent; -} + // CSS chevron + &::after { + content: ''; + display: block; + position: absolute; + right: 12px; + top: 50%; + width: 8px; + height: 8px; + border-right: 2px solid rgba(0, 0, 0, 0.38); + border-bottom: 2px solid rgba(0, 0, 0, 0.38); + transform: translateY(-70%) rotate(45deg); + transition: transform 0.3s; + } + } -@media (max-width: 959px) { - .contact { padding: 40px 0; } -} + .content { + max-height: 0; + overflow: hidden; + transition: max-height 0.35s ease; + border: none; + box-shadow: none; + border-radius: 4px; + padding: 0 50px 0 10px; + margin: 0 10px; -// ─── FAQ ───────────────────────────────────────────────────────────────────── + .container { + max-width: unset; + padding-bottom: 16px; -.faq-iot-development { - display: flex; - flex-direction: column; - padding: 100px 0; - z-index: 10; + > *:not(:last-child) { + padding-bottom: 20px; + } + } - .faq-section-title { - font-size: 36px; - font-weight: 500; - line-height: 48px; - margin-bottom: 56px; - text-align: center; - color: #212529; - white-space: normal; - padding: 0; - } + ol { + list-style-type: decimal; + padding-left: 20px; - .faq-section-content { - display: flex; - gap: 20px; - } + li { + list-style: decimal; + margin-bottom: 16px; + } + } - .faq-section-selector { - display: flex; - flex-direction: column; - gap: 16px; - align-items: flex-start; - padding: 8px; - width: fit-content; - color: rgba(0, 0, 0, 0.38); + p, + li { + font-size: 14px; + font-weight: 400; + color: #3d3d3d; + line-height: 24px; + } - .faq-section-option { - width: 100%; - font-size: 24px; - font-weight: 500; - line-height: 36px; - padding: 16px 24px; - border: 1.5px solid transparent; - border-radius: 16px; - cursor: pointer; - color: #757575; - white-space: nowrap; + span { + display: inline-block; + font-size: 16px; + font-weight: 500; + color: #3d3d3d; + line-height: 24px; + padding-bottom: 16px; + } + } - &:hover { color: #2A2E33; } + &.on { + h3.title::after { + transform: translateY(-30%) rotate(225deg); + } - &.active { - color: #202021; - background: #F4F8FE; + .content { + max-height: 2000px; + } + } } } } - .answers { - flex: 1.5; - - .pi-accordion { - display: none; - - &.active { display: block; } + // ≤1200px — FAQ + @media (max-width: 1200px) { + .faq-iot-development .faq-section-content { + flex-direction: column; } + } - .item { - border-bottom: 1.5px solid #DEE2E6; - overflow: visible; - position: relative; - - &:not(:last-of-type) { margin-bottom: 7px; } - - h3.title { + // ≤1150px — FAQ + @media (max-width: 1150px) { + .faq-iot-development { + .faq-section-title { + font-size: 24px; + } + .faq-section-selector .faq-section-option { font-size: 18px; - font-weight: 500; - line-height: 30px; - color: #212529; - padding: 22px 37px 22px 20px; - margin: 0; - cursor: pointer; - position: relative; - white-space: normal; + } + } + } - &:hover { color: rgba(33, 33, 33, 0.78); } + // ≤959px — FAQ + @media (max-width: 959px) { + .faq-iot-development { + padding: 40px 0; - // CSS chevron - &::after { - content: ''; - display: block; - position: absolute; - right: 12px; - top: 50%; - width: 8px; - height: 8px; - border-right: 2px solid rgba(0, 0, 0, 0.38); - border-bottom: 2px solid rgba(0, 0, 0, 0.38); - transform: translateY(-70%) rotate(45deg); - transition: transform 0.3s; - } + .faq-section-selector { + width: 100%; } - .content { - max-height: 0; - overflow: hidden; - transition: max-height 0.35s ease; - border: none; - box-shadow: none; - border-radius: 4px; - padding: 0 50px 0 10px; - margin: 0 10px; - - .container { - max-width: unset; - padding-bottom: 16px; - - > *:not(:last-child) { padding-bottom: 20px; } + .answers .item { + h3.title { + font-size: 16px; } - ol { - list-style-type: decimal; - padding-left: 20px; - + .content { + p, li { - list-style: decimal; - margin-bottom: 16px; + font-size: 14px; + line-height: 20px; + } + span { + font-size: 15px; + line-height: 22px; } } + } + } + } - p, li { - font-size: 14px; - font-weight: 400; - color: #3D3D3D; - line-height: 24px; + // ≤690px — FAQ selector full width + @media (max-width: 690px) { + .faq-iot-development .faq-section-selector { + width: 100%; + } + } + + // ─── SHARED FORM STYLES (contact form + modal) ─────────────────────────────── + + .contact-us-form, + .dev-modal-sub-content { + .form-section { + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 16px; + + .form-element { + display: inline-block; + position: relative; + width: calc(50% - 8px); + margin-bottom: 8px; + + &.next, + &:last-of-type { + width: 100%; } - span { - display: inline-block; + .form-control { + width: 100%; + margin: 24px 0 0 0; + line-height: 30px; font-size: 16px; - font-weight: 500; - color: #3D3D3D; - line-height: 24px; - padding-bottom: 16px; - } - } + vertical-align: middle; + border: 1px solid #e0e1e2; + background-color: transparent; + border-radius: 6px; + color: #212529; + box-shadow: none; + + &::placeholder { + color: #9e9e9e; + } + &.invalid-input { + border: 1px solid #d9534f; + } + &.invalid-input:focus { + border-color: #d9534f; + box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.25); + } - &.on { - h3.title::after { - transform: translateY(-30%) rotate(225deg); + // Focus uses a box-shadow ring instead of growing the border — + // border width changes shift the input's content box and cause + // a 1px caret/placeholder jump on focus. box-shadow paints + // outside the layout box, so dimensions stay stable. + &:focus { + outline: none; + border-color: #2a7dec; + box-shadow: 0 0 0 1px #2a7dec; + color: #212529; + &::placeholder { + opacity: 0.2; + } + } } - .content { max-height: 2000px; } - } - } - } -} + input.form-control { + height: 44px; + padding: 0 16px; + } -// ≤1200px — FAQ -@media (max-width: 1200px) { - .faq-iot-development .faq-section-content { - flex-direction: column; - } -} + textarea.form-control { + height: 170px; + resize: vertical; + padding: 8px 16px; + margin-bottom: 16px; + &:focus { + cursor: initial; + } + } -// ≤1150px — FAQ -@media (max-width: 1150px) { - .faq-iot-development { - .faq-section-title { font-size: 24px; } - .faq-section-selector .faq-section-option { font-size: 18px; } - } -} + label { + width: 100%; + line-height: 100%; + font-size: 14px; + margin-bottom: 0; + + p { + cursor: text; + position: absolute; + left: unset; + top: unset; + margin: 0 0 0 10px; + padding: 11px 0; + font-size: 14px; + font-weight: 500; + color: #3d3d3d; + transition: 150ms; + transform: scale(1) translate(-10px, -86px); + pointer-events: none; -// ≤959px — FAQ -@media (max-width: 959px) { - .faq-iot-development { - padding: 40px 0; + &.text-area-label { + position: absolute; + top: 68px; + } + } + } - .faq-section-selector { width: 100%; } + .form-control:focus + p, + .form-control:not(.input--empty) + p { + color: inherit; + } - .answers .item { - h3.title { font-size: 16px; } + // :global() because the hintis created dynamically in JS, so + // it never gets the scoping attribute that surrounding scoped + // styles rely on. The parent (`.cdu-form` / contact-us modal) + // keeps its scope, so the rule only applies inside this form. + :global(.error-message-hint) { + color: #d9534f; + font-size: 14px; + font-weight: 400; + margin-bottom: 0; + width: 100%; + display: block; + box-sizing: border-box; + } + } - .content { - p, li { font-size: 14px; line-height: 20px; } - span { font-size: 15px; line-height: 22px; } + &.mb30 { + margin-bottom: 30px; } } } -} - -// ≤690px — FAQ selector full width -@media (max-width: 690px) { - .faq-iot-development .faq-section-selector { width: 100%; } -} -// ─── SHARED FORM STYLES (contact form + modal) ─────────────────────────────── + // ─── CONTACT US SECTION ─────────────────────────────────────────────────────── -.contact-us-form, -.dev-modal-sub-content { - .form-section { - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 16px; + .contact-us-section { + padding: 100px 0; + position: relative; + background-color: transparent; - .form-element { - display: inline-block; - position: relative; - width: calc(50% - 8px); - margin-bottom: 8px; + &::before { + content: ''; + position: absolute; + width: 100vw; + height: 100%; + background-color: #f4f8fe; + z-index: -1; + left: 49.4%; + transform: translateX(-50%); + top: 0; + } - &.next, &:last-of-type { width: 100%; } + .contact-us-section-content { + max-width: 100%; + margin: 0; + padding: 0 20px; - .form-control { - width: 100%; - margin: 24px 0 0 0; - line-height: 30px; - font-size: 16px; - vertical-align: middle; - border: 1px solid #E0E1E2; - background-color: transparent; - border-radius: 6px; - color: #212529; - box-shadow: none; - - &::placeholder { color: #9E9E9E; } - &.invalid-input { border: 1px solid #D9534F; } - &.invalid-input:focus { border-color: #D9534F; box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.25); } - - // Focus uses a box-shadow ring instead of growing the border — - // border width changes shift the input's content box and cause - // a 1px caret/placeholder jump on focus. box-shadow paints - // outside the layout box, so dimensions stay stable. - &:focus { - outline: none; - border-color: #2a7dec; - box-shadow: 0 0 0 1px #2a7dec; - color: #212529; - &::placeholder { opacity: 0.2; } - } + .contact-us-container { + position: relative; + background: white; + border-radius: 24px; + display: flex; + padding: 8px; + gap: 8px; + box-shadow: + -4px 15px 50px -20px rgba(0, 0, 0, 0.15), + 0 0 8px 0 rgba(0, 0, 0, 0.08); } + } - input.form-control { - height: 44px; - padding: 0 16px; + .contact-us-descr { + & > img:first-child { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 1; } - textarea.form-control { - height: 170px; - resize: vertical; - padding: 8px 16px; - margin-bottom: 16px; - &:focus { cursor: initial; } - } + width: 42%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 60px 38px; + background: #2a7dec; + border-radius: 16px; + position: relative; - label { - width: 100%; - line-height: 100%; - font-size: 14px; - margin-bottom: 0; + .contact-us-descr-container { + display: flex; + flex-direction: column; + gap: 16px; + z-index: 2; - p { - cursor: text; - position: absolute; - left: unset; - top: unset; - margin: 0 0 0 10px; - padding: 11px 0; - font-size: 14px; + h2 { + font-size: 48px; font-weight: 500; - color: #3D3D3D; - transition: 150ms; - transform: scale(1) translate(-10px, -86px); - pointer-events: none; - - &.text-area-label { position: absolute; top: 68px; } + line-height: 130%; + color: white; + white-space: normal; + padding: 0; } - } - - .form-control:focus + p, - .form-control:not(.input--empty) + p { color: inherit; } - // :global() because the hint
is created dynamically in JS, so
- // it never gets the scoping attribute that surrounding scoped
- // styles rely on. The parent (`.cdu-form` / contact-us modal)
- // keeps its scope, so the rule only applies inside this form.
- :global(.error-message-hint) {
- color: #D9534F;
- font-size: 14px;
- font-weight: 400;
- margin-bottom: 0;
- width: 100%;
- display: block;
- box-sizing: border-box;
+ span {
+ color: white;
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 36px;
+ margin-bottom: 72px;
+ }
}
- }
-
- &.mb30 { margin-bottom: 30px; }
- }
-}
+ .client-avatar-container {
+ display: flex;
+ justify-content: flex-start;
+ gap: 16px;
+ z-index: 2;
-// ─── CONTACT US SECTION ───────────────────────────────────────────────────────
-
-.contact-us-section {
- padding: 100px 0;
- position: relative;
- background-color: transparent;
+ .client-avatar-img img {
+ max-width: 64px;
+ height: auto;
+ }
- &::before {
- content: "";
- position: absolute;
- width: 100vw;
- height: 100%;
- background-color: #F4F8FE;
- z-index: -1;
- left: 49.4%;
- transform: translateX(-50%);
- top: 0;
- }
+ .client-descr {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ text-align: start;
- .contact-us-section-content {
- max-width: 100%;
- margin: 0;
- padding: 0 20px;
+ .client-name {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 30px;
+ color: white;
+ }
- .contact-us-container {
- position: relative;
- background: white;
- border-radius: 24px;
- display: flex;
- padding: 8px;
- gap: 8px;
- box-shadow: -4px 15px 50px -20px rgba(0, 0, 0, 0.15), 0 0 8px 0 rgba(0, 0, 0, 0.08);
+ .client-title {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 28px;
+ color: white;
+ }
+ }
+ }
}
- }
- .contact-us-descr {
- & > img:first-child {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
+ .contact-us-form {
+ width: 58%;
z-index: 1;
- }
+ padding: 60px;
+ border-radius: 24px;
+ max-height: 817px;
+ overflow: auto;
- width: 42%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- padding: 60px 38px;
- background: #2A7DEC;
- border-radius: 16px;
- position: relative;
+ .developmentServicesContactUsForm {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
- .contact-us-descr-container {
- display: flex;
- flex-direction: column;
- gap: 16px;
- z-index: 2;
+ .cus-hp-container {
+ position: absolute;
+ left: -9999px;
+ }
- h2 {
- font-size: 48px;
- font-weight: 500;
- line-height: 130%;
- color: white;
- white-space: normal;
- padding: 0;
+ .submit-button-container {
+ display: flex;
+ justify-content: flex-end;
}
- span {
- color: white;
- font-size: 24px;
- font-weight: 500;
- line-height: 36px;
- margin-bottom: 72px;
+ .cus-submit-btn {
+ width: 255px;
+ height: 56px;
+ font-size: 20px;
+ text-align: center;
+ line-height: 1;
+ padding: 0;
}
}
+ }
- .client-avatar-container {
- display: flex;
- justify-content: flex-start;
- gap: 16px;
- z-index: 2;
-
- .client-avatar-img img {
- max-width: 64px;
- height: auto;
+ @media (max-width: 1279px) {
+ .contact-us-section {
+ .contact-us-section-content {
+ margin-bottom: 0;
}
- .client-descr {
- display: flex;
+ .contact-us-container {
flex-direction: column;
- justify-content: flex-end;
- text-align: start;
+ }
- .client-name {
- font-size: 18px;
- font-weight: 500;
- line-height: 30px;
- color: white;
+ .contact-us-descr {
+ width: 100%;
+ gap: 25px;
+ padding: 40px;
+
+ & > img:first-child {
+ display: none;
}
- .client-title {
- font-size: 16px;
- font-weight: 400;
- line-height: 28px;
- color: white;
+ .client-avatar-container {
+ flex-direction: row-reverse;
}
}
+
+ .contact-us-form {
+ width: 100%;
+ }
}
}
- .contact-us-form {
- width: 58%;
- z-index: 1;
- padding: 60px;
- border-radius: 24px;
- max-height: 817px;
- overflow: auto;
+ @media (max-width: 959px) {
+ .contact-us-section {
+ padding: 40px 0;
- .developmentServicesContactUsForm {
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
+ .contact-us-descr {
+ padding: 32px;
- .cus-hp-container {
- position: absolute;
- left: -9999px;
- }
+ .contact-us-descr-container {
+ h2 {
+ font-size: 24px;
+ line-height: 36px;
+ }
+ span {
+ font-size: 16px;
+ line-height: 28px;
+ }
+ }
- .submit-button-container {
- display: flex;
- justify-content: flex-end;
- }
+ .client-avatar-container {
+ flex-direction: column;
+ }
+ }
- .cus-submit-btn {
- width: 255px;
- height: 56px;
- font-size: 20px;
- text-align: center;
- line-height: 1;
- padding: 0;
+ .contact-us-form {
+ padding: 32px;
+ }
}
}
-}
-
-@media (max-width: 1279px) {
- .contact-us-section {
- .contact-us-section-content { margin-bottom: 0; }
- .contact-us-container {
- flex-direction: column;
- }
-
- .contact-us-descr {
- width: 100%;
- gap: 25px;
- padding: 40px;
+ // ─── MODAL ───────────────────────────────────────────────────────────────────
- & > img:first-child { display: none; }
+ .dev-modal {
+ display: none;
+ position: fixed;
+ align-items: center;
+ justify-content: center;
+ z-index: 13000;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.4);
- .client-avatar-container { flex-direction: row-reverse; }
- }
+ .dev-modal-content {
+ width: 861px;
+ max-width: 90%;
+ max-height: 90%;
+ display: flex;
+ flex-direction: column;
+ animation: animatetop 0.4s;
+ background-color: #fefefe;
+ border: 1px solid #888;
+ border-radius: 24px;
+ overflow: hidden;
+ padding: 30px;
- .contact-us-form { width: 100%; }
- }
-}
+ .dev-modal-title-container {
+ position: sticky;
+ top: 0;
+ background: #fefefe;
+ z-index: 1;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
-@media (max-width: 959px) {
- .contact-us-section {
- padding: 40px 0;
+ h2 {
+ font-size: 24px;
+ font-weight: 500;
+ white-space: normal;
+ padding: 0;
+ }
- .contact-us-descr {
- padding: 32px;
+ .dev-modal-close-button {
+ cursor: pointer;
+ padding: 4px;
- .contact-us-descr-container {
- h2 { font-size: 24px; line-height: 36px; }
- span { font-size: 16px; line-height: 28px; }
+ img {
+ width: 28px;
+ height: 28px;
+ display: block;
+ }
+ }
}
- .client-avatar-container { flex-direction: column; }
- }
-
- .contact-us-form { padding: 32px; }
- }
-}
-
-// ─── MODAL ───────────────────────────────────────────────────────────────────
-
-.dev-modal {
- display: none;
- position: fixed;
- align-items: center;
- justify-content: center;
- z-index: 13000;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.4);
-
- .dev-modal-content {
- width: 861px;
- max-width: 90%;
- max-height: 90%;
- display: flex;
- flex-direction: column;
- animation: animatetop 0.4s;
- background-color: #fefefe;
- border: 1px solid #888;
- border-radius: 24px;
- overflow: hidden;
- padding: 30px;
+ form {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: auto;
+ }
- .dev-modal-title-container {
- position: sticky;
- top: 0;
- background: #fefefe;
- z-index: 1;
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 8px;
+ .cus-hp-container {
+ position: absolute;
+ left: -9999px;
+ }
- h2 {
- font-size: 24px;
- font-weight: 500;
- white-space: normal;
- padding: 0;
+ .dev-modal-sub-content {
+ flex: 1;
+ overflow-y: auto;
+ min-height: 0;
+ padding: 20px 0;
}
- .dev-modal-close-button {
- cursor: pointer;
- padding: 4px;
+ .dev-modal-submit-container {
+ position: sticky;
+ bottom: 0;
+ background: #fefefe;
+ z-index: 1;
+ margin-top: auto;
+ padding-top: 20px;
- img {
- width: 28px;
- height: 28px;
- display: block;
+ .cus-submit-btn {
+ width: 100%;
+ height: 56px;
+ font-size: 20px;
+ text-align: center;
+ line-height: 1;
+ padding: 0;
}
}
}
+ }
- form {
- height: 100%;
- display: flex;
- flex-direction: column;
- flex: 1;
- overflow: auto;
- }
-
- .cus-hp-container {
- position: absolute;
- left: -9999px;
+ @keyframes animatetop {
+ from {
+ top: -300px;
+ opacity: 0;
}
-
- .dev-modal-sub-content {
- flex: 1;
- overflow-y: auto;
- min-height: 0;
- padding: 20px 0;
+ to {
+ top: 0;
+ opacity: 1;
}
+ }
- .dev-modal-submit-container {
- position: sticky;
- bottom: 0;
- background: #fefefe;
- z-index: 1;
- margin-top: auto;
- padding-top: 20px;
+ @media (max-width: 959px) {
+ .dev-modal .dev-modal-content {
+ .dev-modal-title-container h2 {
+ font-size: 18px;
+ }
- .cus-submit-btn {
+ .dev-modal-sub-content .form-section .form-element {
width: 100%;
- height: 56px;
- font-size: 20px;
- text-align: center;
- line-height: 1;
- padding: 0;
}
}
- }
-}
-
-@keyframes animatetop {
- from { top: -300px; opacity: 0; }
- to { top: 0; opacity: 1; }
-}
-
-@media (max-width: 959px) {
- .dev-modal .dev-modal-content {
- .dev-modal-title-container h2 { font-size: 18px; }
- .dev-modal-sub-content .form-section .form-element { width: 100%; }
+ // Stack Name + Email at the same breakpoint the modal does. At 50% width
+ // on a 375px viewport the email column collapses to ~150px, which both
+ // crams "john@example.com" placeholder and forces the "Email Address"
+ // floating label to wrap onto two lines and overlap the input.
+ .contact-us-form .form-section .form-element {
+ width: 100%;
+ }
}
-
- // Stack Name + Email at the same breakpoint the modal does. At 50% width
- // on a 375px viewport the email column collapses to ~150px, which both
- // crams "john@example.com" placeholder and forces the "Email Address"
- // floating label to wrap onto two lines and overlap the input.
- .contact-us-form .form-section .form-element { width: 100%; }
-}
-
diff --git a/src/pages/use-cases/[slug].astro b/src/pages/use-cases/[slug].astro
index f89d99d2d1..46ec12cf09 100644
--- a/src/pages/use-cases/[slug].astro
+++ b/src/pages/use-cases/[slug].astro
@@ -4,7 +4,9 @@ import { useCaseBySlug } from '@data/use-cases';
import UseCaseLayout from '../../layouts/UseCaseLayout.astro';
import AboutSection from '../../components/UseCase/AboutSection.astro';
import ImageComparison from '../../components/UseCase/ImageComparison.astro';
-import UseCaseCarousel from '../../components/UseCase/UseCaseCarousel.astro';
+import Carousel from '@components/Carousel/Carousel.astro';
+import CarouselSlide from '@components/Carousel/CarouselSlide.astro';
+import DashboardImageSlide from '@components/UseCase/DashboardImageSlide.astro';
import ContactUsBanner from '../../components/UseCase/ContactUsBanner.astro';
import ComparisonTable from '../../components/UseCase/ComparisonTable.astro';
import SolutionStructure from '../../components/UseCase/SolutionStructure.astro';
@@ -55,7 +57,21 @@ const { data } = Astro.props;
}
{
data.overview?.type === 'carousel' && data.overview.carouselImages && (
-
+