You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

667 lines
30 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>app index</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<style>
:root {
--primary-color: #F5C000;
--bg-white: #fff;
--text-color: #121212;
--text-color-light: #64728f;
}
body {
font-family: "Montserrat", sans-serif;
}
</style>
</head>
<body>
<!-- overview -->
<div class="container">
<!-- support-header -->
<div class="supports my-5 py-3" style="border-bottom: 1px solid #e7e7e7;">
<div class="row justify-content-between">
<div class="col-4">
<div class="my-3">
<img src="//apps.odoocdn.com/apps/assets/17.0/theme_boec/images/Cybrosys.png?fcdde35"
style="width:auto !important; height:40px !important">
</div>
</div>
<div class="col-6">
<div class="row" style="margin-top:10px">
<div class="my-3 d-flex align-items-center justify-content-end">
<span class="me-3"><b>Supports: </b></span>
<div class="text-center"
style="background-color:#875A7B !important; color:#fff !important; font-size:0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important">
Enterprise
</div>
<div class="text-center"
style="background-color:#875A7B !important; color:#fff !important; font-size:0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important">
Community
</div>
</div>
</div>
<div class="row" style="margin-top:10px">
<div class="d-flex align-items-center justify-content-end">
<span class="me-3"><b>Availability: </b></span>
<div class="text-center col"
style="border:1px solid #017E84; font-size:0.8rem !important; color:#017E84 !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important">
<i class="fa fa-times" style="color:red"></i> Odoo Online
</div>
<div class="text-center col"
style="font-size:0.8rem !important; border:1px solid #714b67; color:#714b67 !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important">
<i class="fa fa-check" style="color:green"></i> Odoo.sh
</div>
<div class="text-center col"
style="font-size:0.8rem !important; color:#5B899E !important; border:1px solid #5B899E; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important">
<i class="fa fa-check" style="color:green"></i> On Premise
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<!-- banner-section -->
<div class="my-5">
<div class="">
<img src="./banner.jpg" class="img-fluid" style="border-radius: 10px; width:1250px;">
</div>
</div>
<!-- -->
<!--feature section -->
<div class="my-5" style="padding: 100px; background-color: #f1f5fd; border-radius: 16px;">
<div class="container">
<div class="row mb-60">
<div class="col-lg-12 d-flex justify-content-center align-items-center flex-wrap gap-3">
<div class="position-relative" ; style="
text-align: center;
font-size: 46.875px;
font-style: normal;
padding-bottom: 40px; ">
<h2 style="font-weight: 600;">Our Features</h2>
<p style="color: #999;
text-align: center;
font-size: 15.625px;
font-style: normal;
font-weight: 400;
line-height: 25.6px;">info includes 300+ elements that you may need to create website without
external plugins.</p>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6" style="visibility: visible;">
<div style="background-color: #fff;height: 100%;
border-radius: 12px;
padding: 35px 30px;">
<div class="content">
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px">
<h4 class="mt-3"><a href="#" style=" color: #121212;
font-size: 18px;
text-decoration: none;
font-weight: 700;
line-height: 1.2;">Attractive snippets</a></h4>
<p style=" font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #212529;"> Design: Unique and Attractive custom-designed snippets.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div style="background-color: #fff; height: 100%;
border-radius: 12px;
padding: 35px 30px;">
<div class="content">
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px">
<h4 class="mt-3"><a href="#" style=" color: #121212;
font-size: 18px;
text-decoration: none;
font-weight: 700;
line-height: 1.2;">Fast loading</a></h4>
<p style="font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #212529;"> Fast loading times:This theme loads all of its features more quickly than other designs.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div style="background-color: #fff; height: 100%;
border-radius: 12px;
padding: 35px 30px;">
<div class="content">
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px">
<h4 class="mt-3"><a href="#" style=" color: #121212;
font-size: 18px;
text-decoration: none;
font-weight: 700;
line-height: 1.2;">Responsive Design</a></h4>
<p style="font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #212529;"> Responsive Design:Different resolution devices can be used by users to watch websites. </p>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div style="background-color: #fff;height: 100%;
border-radius: 12px;
padding: 35px 30px;">
<div class="content">
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px">
<h4 class="mt-3"><a href="#" style=" color: #121212;
font-size: 18px;
text-decoration: none;
font-weight: 700;
line-height: 1.2;">One Click Installation</a></h4>
<p style="font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #212529;"> This mode is significantly easier than
others because Odoo makes One Click Installation feasible. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<section class="container my-5">
<div class="row">
<div class="col-md-12">
<ul role="tablist" class="nav nav-tabs justify-content-center d-flex justify-content-center" data-tabs="tabs"
style="border:none; background-color:unset; margin:0 auto">
</ul>
</div>
<div class="col-md-12 tab-content ui-front"
style="border-radius:20px;border: 1px solid #D6E0FF; height:auto;padding: 20px;">
<div class="tab-pane active show fade" id="Features" role="tabpanel" aria-labelledby="features-1">
<section class="">
<section class="mt-5">
<h2 class="pb-5" style="font-weight: 700; text-align: center;">Theme Features</h2>
<div class="row" style="margin-bottom: 24px;">
<div class="col-md-8">
<div style="border-radius: 10px; padding: 32px;
background-color: #303030;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px); height: 100%;">
<div class="info">
<span class="label" style="font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 32px;
color: #f14848;
margin-bottom: 13px;
text-transform: uppercase;">HIGHLIGHT</span>
<h3 class="text-white" style=" color: #fff;
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 9px;">Showcase Your Products in Style</h3>
<p class="des" style="color: #c7c7c7;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 0;">Present your products beautifully
with Odoo’s sleek product views.
Utilize detailed image galleries and clean layouts to
captivate customers and enhance their shopping experience,
driving sales effortlessly.</p>
</div>
<div class="mt-5">
<img src="./img/best_products.png" alt="Grid item" class="img-fluid">
</div>
<a href="#" target="_blank" class="url_link" name="grid_popup"
aria-label="Url link label"><span></span></a>
</div>
</div>
<!-- -->
<div class="col-md-4">
<div style="border-radius: 10px; padding: 32px;
background-color: #303030;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px); height: 100%;">
<div class="info">
<span class="label" style="font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 32px;
color: #f14848;
margin-bottom: 13px;
text-transform: uppercase;">HIGHLIGHT</span>
<h3 class="text-white" style=" color: #fff;
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 9px;">Shop Smart</h3>
<p class="des" style="color: #c7c7c7;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 0;">Browse through our stunning product displays and enjoy a smooth,
intuitive shopping experience. </p>
</div>
<div class="mt-5">
<img src="./img/cards1.png" alt="Grid item" class="img-fluid">
</div>
<a href="#" target="_blank" class="url_link" name="grid_popup"
aria-label="Url link label"><span></span></a>
</div>
</div>
</div>
<!-- -->
<!--row-3 -->
<div class="row" style="margin-bottom: 20px;">
<div class="col-md-4">
<div style="border-radius: 10px; padding: 32px;
background-color: rgba(48, 48, 48, 1);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px); height: 100%;">
<div class="info">
<span class="label" style="font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 32px;
color: #f14848;
margin-bottom: 13px;
text-transform: uppercase;">HIGHLIGHT</span>
<h3 class="text-white" style=" color: #fff;
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 9px;">Explore Our Collection</h3>
<p class="des" style="color: #c7c7c7;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 0;">Discover your next favorite product
with beautifully designed product cards.</p>
</div>
<div class="mt-5">
<img src="./img/cards2.png" alt="Grid item" class="img-fluid">
</div>
<a href="#" target="_blank" class="url_link" name="grid_popup"
aria-label="Url link label"><span></span></a>
</div>
</div>
<!-- -->
<div class="col-md-8">
<div style="border-radius: 10px; padding: 32px;
background-color: rgba(48, 48, 48, 1);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px); height: 100%;">
<div class="info">
<span class="label" style="font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 32px;
color: #f14848;
margin-bottom: 13px;
text-transform: uppercase;">HIGHLIGHT</span>
<h3 class="text-white" style=" color: #fff;
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 9px;">Unbeatable Deals</h3>
<p class="des" style="color: #c7c7c7;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 0;">Elevate your brand with a beautifully crafted theme that adapts perfectly to any device.</p>
</div>
<div class=" mt-5" style="--aspect-ratioapt: 872/443;">
<img src="./img/best_deals.png" alt="Grid item" class="img-fluid">
</div>
<a href="#" target="_blank" class="url_link" name="grid_popup"
aria-label="Url link label"><span></span></a>
</div>
</div>
</div>
<!-- -->
</section>
</section>
</div>
</div>
</div>
</section>
<!--sections -->
<!-- section content -->
<section class="mb-5"
style="background-color: #f1f5fd; border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;">
<div class="row d-flex align-items-center">
<div class="col col-12 col-md-12 col-lg-6">
<div style="padding: 20px;">
<h4 class="" style="font-size: 46px;">
<span style="color: #212121;
font-weight: 700;
display: inline-block;
width: 100%;">Stunning Pages, </span><br>
<span style="color: #212121;
font-weight: 700;
display: inline-block;
width: 100%;">Seamless Experience</span>
</h4>
<div class="mt-4">
<p style="color: #444; font-size: 16px;
font-weight: 400;
line-height: 1.5;">Design beautiful, responsive pages that captivate
visitors and enhance their shopping experience.
With easy customization and smooth navigation,
your store will shine on every device.</p>
<ul class="d-flex flex-column gap-3 ms-0 ps-0 mt-4">
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"
style="width: 24px;"><span style=" color: #444;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;">Fully Customizable Layouts</span></li>
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"
style="width: 24px;"><span style=" color: #444;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;">Mobile-Optimized Design</span></li>
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"
style="width: 24px;"><span style=" color: #444;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;">High-Quality Image Integration</span></li>
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"
style="width: 24px;"><span style=" color: #444;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;">Fast, Smooth Navigation</span></li>
</ul>
</div>
</div>
</div>
<div class="col col-12 col-md-12 col-lg-6">
<div>
<div>
<img class="img-fluid" src="./img/banner1.png" style="
border-radius: 20px;
">
</div>
</div>
</div>
</div>
</section>
<!-- 2 -->
<section class=""
style="background-color: #f1f5fd; border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;">
<div class="row d-flex align-items-center">
<div class="col col-12 col-md-12 col-lg-6">
<div>
<div>
<img class="img-fluid" src="./img/choose.png" style="
border-radius: 20px; height:400px;
">
</div>
</div>
</div>
<div class="col col-12 col-md-12 col-lg-6">
<div style="padding: 20px;">
<h4 class="" style="font-size: 46px;">
<span style="color: #212121;
font-weight: 700;
display: inline-block;
width: 100%;">Fully Responsive</span><br>
<span style="color: #212121;
font-weight: 700;
display: inline-block;
width: 100%;">Layout</span>
</h4>
<div class="mt-4">
<p style="color: #444; font-size: 16px;
font-weight: 400;
line-height: 1.5;">Now take advantage of everything your dashboard has to offer even on the go. Our
design are now fully responsive, enabling you to view and manage everything from the comfort of your
mobile device.</p>
<ul class="d-flex flex-column gap-3 ms-0 ps-0 mt-4">
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"
style="width: 24px;"><span style=" color: #444;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;">Interactive Elements</span></li>
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"
style="width: 24px;"><span style=" color: #444;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;"> Fast Loading Speed</span></li>
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg"
style="width: 24px;"><span style=" color: #444;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;">Customizable Fonts and Colors</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- -->
<!-- -->
<div class="my-5">
<!-- banner card -->
<!-- service-section -->
<section id="services" class="mt-5" style="border-radius: 16px;
border: 1px solid #EBEEF2;
background-color: #FFF;
padding: 60px 40px;
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25);">
<div class="text-center mt-4">
<h3 class="mb-0" style="color: #000;
text-align: center;
font-family: Montserrat;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
padding-bottom: 50px;">Our Services</h3>
</div>
<div class="row mt-3">
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#FFE2E5; margin:auto; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#FA5A7D; border-radius:50%; height:56px; width:56px">
<img src="./img/gear.svg" class="img-responsive" height="28px" width="28px">
</div>
<span class="mt-3" style="font-size: 18px;
color: #121212;
font-weight: 600;"> Odoo Customization</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#FFF4DE; margin:auto; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#FF947A; border-radius:50%; height:56px; width:56px">
<img src="./img/wrench-icon.svg" class="img-responsive" height="28px" width="28px">
</div>
<span class="mt-3" style="font-size: 18px;
color: #121212;
font-weight: 600;"> Odoo Implementation</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#DCFCE7; margin:auto; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#3CD856; border-radius:50%; height:56px; width:56px">
<img src="./img/life-ring-icon.svg" class="img-responsive" height="28px" width="28px">
</div>
<span class="mt-3" style="font-size: 18px;
color: #121212;
font-weight: 600;">Odoo Support</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#F3E8FF; margin:auto; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#BF83FF; border-radius:50%; height:56px; width:56px">
<img src="./img/arrows-repeat.svg" class="img-responsive" height="28px" width="28px">
</div>
<span class="mt-3" style="font-size: 18px;
color: #121212;
font-weight: 600;">Odoo Migration</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#F1F9FF; margin:auto; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#01649C; border-radius:50%; height:56px; width:56px">
<img src="./img/puzzle-piece-icon.svg" class="img-responsive" height="28px" width="28px">
</div>
<span class="mt-3" style="font-size: 18px;
color: #121212;
font-weight: 600;">Odoo integration</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#EDF8ED; margin:auto; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#69CC70; border-radius:50%; height:56px; width:56px">
<img src="./img/odoo-consultancy.svg" class="img-responsive" height="28px" width="28px">
</div>
<span class="mt-3" style="font-size: 18px;
color: #121212;
font-weight: 600;">Odoo Consultancy</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#F1F6FF; margin:auto; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#2E4556; border-radius:50%; height:56px; width:56px">
<img src="./img/odoo-licencing.svg" class="img-responsive" height="28px" width="28px">
</div>
<span class="mt-3" style="font-size: 18px;
color: #121212;
font-weight: 600;">Odoo Licensing</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#FAF6EA; margin:auto; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#FCD12C; border-radius:50%; height:56px; width:56px">
<img src="./img/hire-odoo.svg" class="img-responsive" height="28px" width="28px">
</div>
<span class="mt-3" style="font-size: 18px;
color: #121212;
font-weight: 600;">Hire Odoo Developer</span>
</div>
</a>
</div>
</div>
<!-- -->
</div>
</div>
</section>
<!-- -->
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</html>