File: //home/artinside/sites.artinside.com.br/iande/themes/web/experiences.php
<?php
$this->layout("_theme");
$this->insert("views/page-title", ["pageTitle" => $pageTitle]);
?>
<section id="content">
<div class="content-wrap py-0">
<div class="section parallax bg-brown dark my-0 mb-0 px-lg-0">
<div class="overlay-black bg-brown"></div>
<div class="container">
<div class="row g-0 align-items-md-stretch align-items-lg-center">
<div class="col-xl-7 col-md-6 img-overlap">
<img src="<?= url("images/biomimetica1.jpg") ?>" alt="..." class="h-100"
style="object-fit: cover;">
</div>
<div class="col-xl-5 col-md-6 bg-yellow dark center" data-animate="fadeInRight">
<img src="<?= url("images/logo-parallax-2.png") ?>" style="max-width: 80px">
<p class="fw-lighter brown-text mt-3 lh-base fs-5">
Advinda do grego <i>bios</i> (vida) e <i>mimesis</i> (imitação), a Biomimética é uma ciência
que busca aprender com as formas, processos e sistemas da natureza – validados ao longo de
3,8 bilhões de anos de evolução – para emular e criar soluções mais sustentáveis.
</p>
<p class="fw-lighter brown-text mt-0 lh-base fs-5">
Ao longo deste período a natureza resolveu problemas como redução de materiais e energia,
armazenamento e distribuição de recursos, incentivos à colaboração, resiliência, entre
tantos outros que talvez você enfrente em sua organização.
</p>
</div>
</div>
</div>
<div class="swiper-slide-bg"
style="background-image: url('<?= url(
"images/wall5.jpg"
) ?>'); background-position: center top;"></div>
</div>
<div class="section mt-0 mb-0 bg-light" id="scenarios">
<div class="container">
<div class="row align-items-center justify-content-around align-items-center px-3 px-lg-0">
<div class="col-lg-5">
<img src="<?= url("images/biomimetica2.png") ?>" class="" data-animate="fadeIn"/>
</div>
<div class="col-lg-5">
<span class="text-uppercase small ls-2 text-secondary d-inline-block"
style="--cnvs-font-size-small: .9rem">BIOMIMÉTICA</span>
<h3 class="mb-3 fw-medium text-primary fs-1">Pilares da <span
class="text-secondary">Biomimética</span>?</h3>
<p class="op-08 mb-3">
A Biomimética tem como pilares a <b>Reconexão</b>, a <b>Ética</b> e a <b>Emulação</b>,
fornecendo bases sólidas para inovações modernas e responsáveis, assim como para a
implementação de iniciativas de ESG (meio ambiente, social e governança), sustentabilidade,
regeneração, e as chamadas “soluções baseadas na natureza”.
</p>
<p class="op-08 mb-3">
Pode-se <b>partir da observação da natureza</b> para criar novas soluções, ou mesmo <b>começar
com os desafios enfrentados pelas organizações</b> e buscar diferentes formas como a
natureza os resolveu </p>
</div>
</div>
</div>
</div>
<div class="section mt-0 mb-0 bg-iande-light2" id="benefices">
<div class="container">
<div class="row align-items-center justify-content-around align-items-center px-3 px-lg-0">
<div class="col-lg-4">
<span class="text-uppercase small ls-2 text-secondary d-inline-block"
style="--cnvs-font-size-small: .9rem">O que todos temos em comum?</span>
<h3 class="mb-3 fw-medium text-primary fs-1">Princípios da vida </h3>
<h4 class="text-uppercase"></h4>
<p class="op-08 mb-3">
Você já parou para pensar o que todas as espécies têm em comum?
</p>
<p class="op-08 mb-3">
Os princípios da vida são padrões, designs, macro-estratégias observadas na natureza e que
definem o que é realmente sustentável.
</p>
</div>
<div class="col-lg-7 mb-5 mb-lg-0">
<div class="row grid-container g-4 mb-6" data-layout="masonry" style="overflow: visible">
<div class="col-12 col-sm-6 col-xl-4" data-animate="fadeIn">
<div class="flip-card text-center">
<div class="flip-card-front bg-iande-light3">
<div class="flip-card-inner">
<div class="card bg-transparent border-0 text-center">
<div class="card-body text-contrast-900">
<h3 class="card-title fs-1 text-secondary">01</h3>
<p class="card-text fw-normal lh-1 text-primary font-secondary fs-6">
Ser eficiente com recursos e energia
</p>
</div>
</div>
</div>
</div>
<div class="flip-card-back bg-primary dark no-after">
<div class="flip-card-inner">
<p class="mb-2 text-white lh-base">
A natureza aproveita os recursos e oportunidades de forma habilidosa,
conservando energia
</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xl-4" data-animate="fadeIn" data-delay="500">
<div class="flip-card text-center">
<div class="flip-card-front bg-iande-light3">
<div class="flip-card-inner">
<div class="card bg-transparent border-0 text-center">
<div class="card-body text-contrast-900">
<h3 class="card-title fs-1 text-secondary">02</h3>
<p class="card-text fw-normal lh-1 text-primary font-secondary fs-6">
Adaptar-se às mudanças por meio de diversidade e resiliência
</p>
</div>
</div>
</div>
</div>
<div class="flip-card-back bg-primary dark no-after">
<div class="flip-card-inner">
<p class="mb-2 text-white lh-base">
A natureza responde de forma apropriada a contextos dinâmicos
</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xl-4" data-animate="fadeIn" data-delay="1000">
<div class="flip-card text-center">
<div class="flip-card-front bg-iande-light3">
<div class="flip-card-inner">
<div class="card bg-transparent border-0 text-center">
<div class="card-body text-contrast-900">
<h3 class="card-title fs-1 text-secondary">03</h3>
<p class="card-text fw-normal lh-1 text-primary font-secondary fs-6">
Integrar o desenvolvimento com o crescimento </p>
</div>
</div>
</div>
</div>
<div class="flip-card-back bg-primary dark no-after">
<div class="flip-card-inner">
<p class="mb-2 text-white lh-base">
A natureza investe de forma otimizada em estratégias que entregam tanto
desenvolvimento quanto crescimento
</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xl-4" data-animate="fadeIn" data-delay="1500">
<div class="flip-card text-center">
<div class="flip-card-front bg-iande-light3">
<div class="flip-card-inner">
<div class="card bg-transparent border-0 text-center">
<div class="card-body text-contrast-900">
<h3 class="card-title fs-1 text-secondary">04</h3>
<p class="card-text fw-normal lh-1 text-primary font-secondary fs-6">
Responder às condições locais com feedback e cooperação
</div>
</div>
</div>
</div>
<div class="flip-card-back bg-primary dark no-after">
<div class="flip-card-inner">
<p class="mb-2 text-white lh-base">
A natureza se conecta e se integra com o ambiente ao seu redor
</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xl-4" data-animate="fadeIn" data-delay="2000">
<div class="flip-card text-center">
<div class="flip-card-front bg-iande-light3">
<div class="flip-card-inner">
<div class="card bg-transparent border-0 text-center">
<div class="card-body text-contrast-900">
<h3 class="card-title fs-1 text-secondary">05</h3>
<p class="card-text fw-normal lh-1 text-primary font-secondary fs-6">
Evoluir através de modelos replicáveis e erros
</div>
</div>
</div>
</div>
<div class="flip-card-back bg-primary dark no-after">
<div class="flip-card-inner">
<p class="mb-2 text-white lh-base">
A natureza continuamente gera e incorpora informação, garantindo sua
performance duradoura
</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xl-4" data-animate="fadeIn" data-delay="2500">
<div class="flip-card text-center">
<div class="flip-card-front bg-iande-light3">
<div class="flip-card-inner">
<div class="card bg-transparent border-0 text-center">
<div class="card-body text-contrast-900">
<h3 class="card-title fs-1 text-secondary">06</h3>
<p class="card-text fw-normal lh-1 text-primary font-secondary fs-6">
Utilizar uma química "verde”
</p>
</div>
</div>
</div>
</div>
<div class="flip-card-back bg-primary dark no-after">
<div class="flip-card-inner">
<p class="mb-2 text-white lh-base">
A natureza utiliza química à base de água, não tóxica, que suporta os
processos da vida
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section parallax bg-dark bg-opacity-20 my-0 mb-0 px-lg-0">
<div class="overlay-black-light "></div>
<div class="w-100 h-100 d-none d-md-block"
style="position: absolute; bottom: -20px; background: url('<?= url(
"images/bg-coral-2.png"
) ?>')no-repeat bottom center;"></div>
<div class="vertical-middle">
<div class="container dark">
<div class="row justify-content-center">
<div class="col-10 col-md-7 text-center mb-3">
<small class="p-1 text-uppercase ls-2 mb-1 light-blue-text">CASES</small>
<h2 class="fw-bold lh-1 ls-0 mb-4 mt-3" style="font-size: 38px;">Cases de
<span class="light-blue-text">biomimética</span>
</h2>
<img src="<?= url("images/arrasta-2.png") ?>">
</div>
</div>
</div>
<div class="owl-carousel owl-carousel-full image-carousel carousel-widget mt-4 charity-card mb-6"
data-stage-padding="20" data-margin="5" data-center="true" data-loop="true"
data-autoplay="500000" data-speed="400" data-items-xs="1" data-items-sm="2" data-items-md="2"
data-items-lg="3" data-items-xl="4">
<?php
foreach ($cases as $case):
?>
<div class="oc-item text-start blue-text">
<img src="<?= image($case->cover, 450, 550) ?>" alt="<?= $case->title ?>" class="rounded">
<div class="oc-desc d-flex flex-column justify-content-center shadow-lg center">
<span class="small text-smaller text-uppercase blue-text"><?= $case->subtitle ?></span>
<small class=" fw-bolder ls-1 blue-text mb-0 d-block fs-2 font-secondary"
style="line-height: 1"><?= $case->title ?></small>
<p class="mb-5 blue-text lh-1 small mt-2 fw-bold ">
<?= $case->content2 ?></p>
<a href="<?= url("cases/{$case->uri}") ?>"
class="button button-circle text-transform-none fw-light m-0 text-uppercase fw-bold bg-light-blue blue-text">
Ver Case <i class="px-2 bi-arrow-right blue-text "></i>
</a>
</div>
</div>
<?php
endforeach; ?>
</div>
<div class="clear mb-6"></div>
</div>
<div class="swiper-slide-bg"
style="background-image: url('<?= url("images/bg-mar.jpg") ?>'); background-position: center top;"></div>
</div>
<div class="section mt-0 mb-0 bg-iande-light2" id="curiosidades">
<div class="container">
<div class="row align-items-center justify-content-around align-items-center px-3 px-lg-0">
<div class="col-lg-6 center mb-5">
<span class="text-uppercase small ls-2 text-secondary d-inline-block"
style="--cnvs-font-size-small: .9rem">CURIOSIDADES</span>
<h3 class="fw-medium text-primary fs-1">Inspiração na Natureza</h3>
<p class="op-08 fs-4 lh-1 mb-3">
Muitas vezes achamos que só nós, humanos, somos o máximo.
<span class="fw-bold text-primary">Mas você sabia que...</span>
</p>
</div>
<div class="clear"></div>
<div class="col-lg-12">
<div class="row justify-content-between align-items-center">
<div class="col-md-6">
<ul class="swiper-links-container list-unstyled">
<li class="swiper-tab-link active">
<h3 class="swiper-tab-title">Pavão</h3>
<p class="swiper-tab-content mb-2">
O pavão produz apenas 1 tipo de pigmento, melanina, e ela é marrom? Todas
aquelas cores lindas são chamadas “estruturais”, não desbotam, e ocorrem
porque a luz é refletida de forma diferente por conta das micro-estruturas
em suas penas.
<br>
<strong>Quais soluções, setores e negócios poderiam aprender com este tipo
de estratégia?</strong>
</p>
<div class="swiper-pagination-progress">
<span class="swiper-pagination-bar"></span><span
class="swiper-pagination-bar-active"></span>
</div>
</li>
<li class="swiper-tab-link active">
<h3 class="swiper-tab-title">Corpo Humano</h3>
<p class="swiper-tab-content mb-2">
O corpo humano funciona em diferentes sistemas que atuam de forma
descentralizada e interdependente? Eles não “esperam” uma decisão central do
cérebro, funcionam em ciclos de feedback rápidos e eficientes. E o mesmo
acontece entre os indivíduos de grandes grupos como colônias de formigas,
cardumes de peixes e bandos de aves.<br>
<strong>Já pensou o que estas estratégias poderiam ensinar a você e seu
negócio sobre liderança e hierarquia, trabalho em equipe e capacidade de
resposta? </strong>
</p>
<div class="swiper-pagination-progress">
<span class="swiper-pagination-bar"></span><span
class="swiper-pagination-bar-active"></span>
</div>
</li>
<li class="swiper-tab-link active">
<h3 class="swiper-tab-title">Aranha</h3>
<p class="swiper-tab-content mb-2">
A teia da aranha é 5x mais forte que o aço e 2x mais elástica que o nylon
quando comparados nas mesmas dimensões? E que algumas ainda refletem luz UV?
Elas são feitas à base de insetos, à temperatura ambiente, sem precisar de
altas pressões e compostos químicos tóxicos que nós, humanos, utilizamos.
<br>
<strong>O que você imagina que pode aprender com estes e outros materiais
naturais para melhorar seus produtos e reduzir seus custos? </strong>
</p>
<div class="swiper-pagination-progress">
<span class="swiper-pagination-bar"></span><span
class="swiper-pagination-bar-active"></span>
</div>
</li>
<li class="swiper-tab-link active">
<h3 class="swiper-tab-title">DNA</h3>
<p class="swiper-tab-content mb-2">
O DNA é uma forma de armazenamento de informação mais compacta e eficiente
que consegue armazenar cerca de 200 milhões de gigabytes em apenas 1g? E ele
pode durar décadas ou até milhares de anos, muito mais do que as atuais
tecnologias de armazenamento que utilizamos. <br>
<strong>O que esta e outras estratégias tão difundidas entre múltiplas
espécies podem te ensinar para superar desafios semelhantes? </strong>
</p>
<div class="swiper-pagination-progress">
<span class="swiper-pagination-bar"></span><span
class="swiper-pagination-bar-active"></span>
</div>
</li>
</ul>
<!-- <div class="swiper-pagination swiper-tab-pagination"></div> -->
</div>
<div class="col-md-5">
<div id="swiper-tab" class="swiper_wrapper h-auto">
<div class="swiper-container swiper-tab-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="<?= url("images/pavao.jpg") ?>" class="rounded-6"
alt="foto em zoom das penas de um pavão">
</div>
<div class="swiper-slide">
<img src="<?= url("images/corpo.jpg") ?>" class="rounded-6"
alt="Foto de um corpo humano em raio-x">
</div>
<div class="swiper-slide">
<img src="<?= url("images/aranha.jpg") ?>" class="rounded-6"
alt="Foto de uma aranha tecendo teia">
</div>
<div class="swiper-slide">
<img src="<?= url("images/dna.jpg") ?>" class="rounded-6"
alt="Foto de um DNA humano">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center align-items-center p-lg-6 p-4 rounded-xxl gx-0 dark mt-5 mt-lg-6 bg-secondary dark"
style=" background: url('<?= url(
"images/coral.svg"
) ?>') center center; background-size: cover;">
<div class="row align-items-center justify-content-between">
<div class="col mb-lg-0">
<h5 class="font-body fs-4 mb-1 fw-medium iande-light-text">É possível, sim, fazer de
forma diferente! </h5>
<h2 class=" fs-3 mb-0 lh-1">Vamos sair do “automático” e abrir espaço para aprender,
desaprender e reaprender com as estratégias empregadas pela natureza?</h2>
</div>
<div class="col-12 col-lg-auto mt-4 mt-lg-0">
<a href="<?= url("servicos/em/todos") ?>"
class="btn px-3 py-2 px-md-5 py-md-3 btn-dark btn-light bg-iande-light text-secondary rounded-pill">Nossas
Soluções <i class="bi-arrow-right text-secondary me-2 position-relative"
style="top: 1px"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<?php
$this->insert("views/newsletter-widget2"); ?>