Jul 17 : [ADD] Initial Commit 'theme_classic_store'

theme_classic_store/README.rst

@@ -0,0 +1,47 @@
+.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg
+    :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: LGPL-3
+
+Theme Classic Store
+===================
+* Design Web Pages with theme classic store
+
+Installation
+============
+- www.odoo.com/documentation/16.0/setup/install.html
+- Install our custom addon
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.odoo.com/documentation/user/13.0/legal/licenses/licenses.html)
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developers: 	Vivek v16 @ cybrosys, Jumana Jabin MP  @ cybrosys
+* Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit https://www.cybrosys.com
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

theme_classic_store/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Vivek @ cybrosys,(odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import controllers
+from . import models

theme_classic_store/__manifest__.py

@@ -0,0 +1,80 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Vivek,(odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    'name': 'Theme Classic Store',
+    'version': '16.0.1.0.0',
+    'category': 'Theme/eCommerce',
+    'summary': 'Theme Classic Store for Odoo Website and e-Commerce',
+    'description': 'Theme Classic Store is an attractive eCommerce theme.'
+                   'The theme comes with many useful and stylish snippets',
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'images': [
+        'static/description/banner.png',
+        'static/description/theme_screenshot.png',
+    ],
+    'website': 'https://www.cybrosys.com',
+    'depends': ['website_blog', 'website_sale_wishlist',
+                'website_sale_comparison'],
+    'data': [
+        'security/ir.model.access.csv',
+        'data/classic_store_config_data.xml',
+        'views/classic_store_config_views.xml',
+        'views/website_templates.xml',
+        'views/website_contactus_templates.xml',
+        'views/website_blog_templates.xml',
+        'views/http_routing_templates.xml',
+        'views/website_sale_templates.xml',
+        'views/snippets/snippets_templates.xml',
+        'views/snippets/classic_store_aboutus_templates.xml',
+        'views/snippets/classic_store_banner_templates.xml',
+        'views/snippets/classic_store_categories_templates.xml',
+        'views/snippets/classic_store_listing_templates.xml',
+        'views/snippets/classic_store_package_templates.xml',
+        'views/snippets/classic_store_team_templates.xml',
+        'views/snippets/classic_store_counter_templates.xml',
+        'views/snippets/classic_store_subheader_templates.xml',
+        'views/snippets/classic_store_search_templates.xml',
+        'views/snippets/classic_store_trending_templates.xml',
+    ],
+    'assets': {
+        'web.assets_frontend': [
+            ('replace', 'website_sale/static/src/js/website_sale_utils.js',
+             'theme_classic_store/static/src/js/sale_utils.js'),
+            "/theme_classic_store/static/src/css/style.css",
+            "/theme_classic_store/static/src/css/style.css.map",
+            "/theme_classic_store/static/src/css/animate.min.css",
+            "/theme_classic_store/static/src/css/classic_store.css",
+            "/theme_classic_store/static/src/css/owl.carousel.min.css",
+            "/theme_classic_store/static/src/css/owl.theme.default.min.css",
+            "/theme_classic_store/static/src/js/owl.carousel.js",
+            "/theme_classic_store/static/src/js/snippets_category.js",
+            "/theme_classic_store/static/src/js/snippets_trending.js",
+            "/theme_classic_store/static/src/js/shop_sidebar.js",
+        ],
+    },
+    'license': 'LGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

theme_classic_store/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Vivek @ cybrosys,(odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import theme_classic_store

theme_classic_store/controllers/theme_classic_store.py

@@ -0,0 +1,108 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Vivek @ cybrosys,(odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+import datetime
+from odoo import fields, http
+from odoo.http import request
+
+
+class WebsiteClassicCategory(http.Controller):
+    """
+    This controller method returns a JSON object that categorizes products based
+     on their product categories.
+    :return: a JSON object containing the main product categories and their
+    respective product counts
+    :rtype: dict
+    """
+
+    @http.route('/classic_product_category', auth="public", type='json')
+    def get_product_categories(self):
+        """
+        Categorize products based on product categories
+        The counter "category_counter" is used to keep track of the product
+        count in each category
+        """
+        product_ids = request.env['product.template'].sudo().search(
+            [('website_published', '=', True)])
+        product_category_ids = request.env[
+            'product.public.category'].sudo().search([])
+        product_categories_main_list = [rec for rec in product_category_ids if
+                                        rec.child_id]
+        category_counter = {rec: 0 for rec in product_category_ids}
+        for rec in product_ids:
+            for cat in rec.public_categ_ids:
+                if cat in product_category_ids:
+                    category_counter[cat] += 1
+        values = {
+            'product_categories_main': product_categories_main_list,
+            'counter': category_counter
+        }
+        response = http.Response(
+            template='theme_classic_store.s_classic_store_categories',
+            qcontext=values)
+        return response.render()
+
+
+class WebsiteClassicTrending(http.Controller):
+    """
+    This module defines a controller for the website that showcases trending
+    products.
+    It contains a class `WebsiteClassicTrending` with a method
+    `get_trending_products()`
+    that is called when the route `/classic_product_trending` is accessed.
+    """
+
+    @http.route('/classic_product_trending', auth="public", type='json',
+                website=True)
+    def get_trending_products(self):
+        """
+        Showcase trending products based on their number of views between a
+        defined period
+        number of views for a product is tracked and then the most viewed
+        products are shown in order of views
+        """
+        classic_config = request.env[
+            'classic.store.config'].sudo().search([])
+        trending_products = classic_config.trending_product_ids
+        if not trending_products:
+            products = request.env['product.template'].sudo().search([])
+            for product in products:
+                product.views = 0
+                product.most_viewed = False
+            date = fields.Datetime.now()
+            date_before = date - datetime.timedelta(days=7)
+            products = request.env['website.track'].sudo().search(
+                [('visit_datetime', '<=', date),
+                 ('visit_datetime', '>=', date_before),
+                 ('product_id', '!=', False)])
+            for product in products:
+                product.product_id.views = product.product_id.views + 1
+            trending_products = request.env['product.template'].sudo().search(
+                [('is_published', '=', True),
+                 ('views', '!=', 0)],
+                order='views desc', limit=4)
+        values = {
+            'trending_products': trending_products
+        }
+        response = http.Response(
+            template='theme_classic_store.s_classic_store_trending',
+            qcontext=values)
+        return response.render()

theme_classic_store/data/classic_store_config_data.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <data noupdate="1">
+        <!-- Configuration data for Classic Store -->
+        <record id="classic_store_config_data" model="classic.store.config">
+            <!-- Name of the Classic Store -->
+            <field name="name">Classic Store Configuration</field>
+            <!-- Maximum price allowed for products -->
+            <field name="max_price">100000</field>
+        </record>
+    </data>
+</odoo>

theme_classic_store/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <theme_classic_store>
+
+#### 14.07.2023
+#### Version 16.0.1.0.0
+#### ADD
+- Initial commit for Theme Classic Store

theme_classic_store/models/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Vivek @ cybrosys,(odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import classic_store_config
+from . import product_category

theme_classic_store/models/classic_store_config.py

@@ -0,0 +1,79 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Vivek @ cybrosys,(odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import fields, models
+
+
+class ClassicStoreConfig(models.Model):
+    """
+    Creating 'name', 'max_price', 'trending_product_ids', field in
+    classic.store.config settings
+    """
+    _name = 'classic.store.config'
+    _description = 'Configuration model for theme classic store'
+
+    name = fields.Char(string='Name',
+                       help="Name field in classic store config settings")
+    max_price = fields.Integer(string="Maximum Price", default=100000,
+                               help="Maximum amount to apply in product filter")
+    trending_product_ids = fields.Many2many('product.template',
+                                            string="Trending Products",
+                                            help="Manually enter trending "
+                                                 "products or leave the field "
+                                                 "blank to automatically "
+                                                 "add the trending products.",
+                                            domain=[
+                                                ('is_published', '=', True)])
+
+
+class ThemeClassicStore(models.AbstractModel):
+    """
+    This class extends the 'theme.utils' abstract model to provide
+    theme-specific functionalities.
+    """
+    _inherit = 'theme.utils'
+
+    def _theme_classic_store_post_copy(self, mod):
+        """
+        Disable certain views in the website sale and wishlist functionality
+        of the Odoo e-commerce module for the "Classic" theme.
+        This method disables certain views related to features such as product
+        comparison, grid or list views, adding products to the cart or wishlist,
+        displaying product attributes and variants, displaying recommended or
+        recently viewed products, and other product-related features in the
+        e-commerce website.
+        """
+        self.disable_view('website_sale_comparison.add_to_compare')
+        self.disable_view('website_sale_comparison.product_attributes_body')
+        self.disable_view('website_sale.add_grid_or_list_option')
+        self.disable_view('website_sale.products_add_to_cart')
+        self.disable_view('website_sale_comparison.add_to_compare')
+        self.disable_view('website_sale.product_buy_now')
+        self.disable_view('website_sale_wishlist.add_to_wishlist')
+        self.disable_view('website_sale.add_grid_or_list_option')
+        self.disable_view('website_sale.products_list_view')
+        self.disable_view('website_sale.product_buy_now')
+        self.disable_view('website_sale.product_comment')
+        self.disable_view('website_sale.product_variants')
+        self.disable_view('website_sale_comparison.product_attributes_body')
+        self.disable_view('website_sale.ecom_show_extra_fields')
+        self.disable_view('website_sale.product_custom_text')
+        self.disable_view('website_sale_wishlist.product_add_to_wishlist')

theme_classic_store/models/product_category.py

@@ -0,0 +1,59 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Vivek @ cybrosys,(odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import fields, models
+
+
+class ProductPublicCategory(models.Model):
+    """
+    Adding 'category_count' field to the 'product.public.category' model.
+    """
+    _inherit = 'product.public.category'
+
+    category_count = fields.Integer(string="Count",
+                                    help="The count of different products in each category.",
+                                    compute="_compute_category_count")
+
+    def _compute_category_count(self):
+        """
+        Compute function for calculating the value of category_count
+        Calculates the count of different products in each category
+        """
+        product_ids = self.env['product.template'].search(
+            [('website_published', '=', True)])
+        for category in self:
+            category_ids = category.search(
+                [('id', 'child_of', category.id)]).ids
+            category.category_count = sum(
+                1 for rec in product_ids for cat in rec.public_categ_ids if
+                cat.id in category_ids)
+
+
+class Product(models.Model):
+    """
+    Adding 'views' and 'most_viewed' fields to the 'product.template' model
+    """
+    _inherit = 'product.template'
+
+    views = fields.Integer(string="Views",
+                           help="The total views for the product through website.")
+    most_viewed = fields.Boolean(string="Most Viewed",
+                                 help='Set true if the product is most viewed')

theme_classic_store/security/ir.model.access.csv

@@ -0,0 +1,2 @@
+id,name,model_id/id,group_id/id,perm_read,perm_write,perm_create,perm_unlink
+access_theme_classic_store,access.classic.store.config,model_classic_store_config,base.group_user,1,1,1,1

theme_classic_store/static/description/index.html

@@ -0,0 +1,294 @@
+<!-- Hero Section -->
+<div class="container pt-4 mt-4 rounded" style="background-color: #f0f2f4; font-family: Montserrat, 'sans-serif';">
+    <div class="row">
+        <div class="col-lg-12 mb-4">
+            <img src="images/Cybrosys.png" alt="Cybrosys Logo" style="width: 120px; height: auto;">
+            <hr style="border-color: #e1e5e9;" />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 text-center">
+            <img src="images/hero.png" width=60% height="auto" class="mb-4" alt="Theme Screenshot">
+        </div>
+        <div class="col-lg-12 text-center">
+            <h1 class="mt-4">Theme Classic Store</h1>
+            <p class="lead mb-4" style="max-width: 700px; margin: 0 auto;">
+                Theme Classic Store is an attractive and unique front-end theme mainly suitable for eCommerce website.
+                Many
+                custom designed snippets facilitates to add better user experience. Contains Categories Snippet with
+                subcategories and its product count, Shop categories sidebar with product count, Shop price filter. This
+                theme fully customized the eCommerce website, shop view, custom categories view, product view,
+                contact-us page...etc.
+            </p>
+        </div>
+    </div>
+
+    <!-- End of Hero Section -->
+
+    <!-- Alternate Section -->
+    <div class="row p-4">
+        <div class="col-lg-6 px-4" style="margin-top: 100px;">
+            <h2>Desktop View</h2>
+            <p class="lead">
+                Attractive webpages with elegant desktop view. User friendly and Modern looking theme makes your page
+                more Stylish and Beautiful.
+            </p>
+        </div>
+        <div class="col-lg-6 px-4">
+            <img style="border-radius: 0.5em;" src="images/laptop-screenshots.jpg" width="90%" height="auto"
+                class="mb-4 shadow-sm" alt="Theme Screenshot">
+        </div>
+    </div>
+    <div class="row p-4">
+        <div class="col-lg-6 px-4">
+            <img style="border-radius: 0.5em;" src="images/phone-screenshots.jpg" width="90%" height="auto"
+                class="mb-4 shadow-sm" alt="Theme Screenshot">
+        </div>
+        <div class="col-lg-6 px-4" style="margin-top: 100px;">
+            <h2>Mobile View</h2>
+            <p class="lead">
+                The webpages are Stylish, Attractive and Easy to use in mobile view also.
+            </p>
+        </div>
+    </div>
+    <!-- End of Alternate Section -->
+
+
+    <!-- Two Columns Section -->
+    <div class="row p-4">
+        <!-- Column 1 -->
+        <div class="col-lg-6">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/1.jpg" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">Home Page</h2>
+                    <p class="lead text-center">
+                        Stylish Home page which is easily customizable. Simple and attractive header with
+                        page menus that has animated styles.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 1 -->
+
+        <!-- Column 2 -->
+        <div class="col-lg-6">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/2.jpg" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">Shop page</h2>
+                    <p class="lead text-center">
+                        Shop Page with additional features like Category sidebar with product counts and Price filter.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 2 -->
+    </div>
+    <!-- End of Two Columns Section -->
+
+
+    <!-- One Column Section -->
+    <div class="row p-4">
+        <div class="col-lg-6">
+            <img style="border-radius: 0.5em;" src="images/3.jpg" width="90%" height="auto" class="mb-4 shadow-sm"
+                alt="Theme Screenshot">
+        </div>
+        <div class="col-lg-6" style="padding-top: 40px;">
+            <h2>Overview</h2>
+            <p class="lead">
+                Theme Classic Store is a simple and elegant theme for your odoo website. It is easy to customize and
+                use. It comes with customizable snippets that can be dragged and dropped to make attractive webpages.
+                Simple and stylish header, footer and page banners.
+            </p>
+        </div>
+    </div>
+    <!-- End of One Column Section -->
+
+    <!-- Categories Section -->
+    <div class="row p-4">
+        <div class="col-lg-6">
+            <h2>Categories</h2>
+            <p class="lead">
+                Categories Snippet which shows all the main categories of the e-commerce shop with its sub categories
+                and corresponding product count. The sequence of apperance, image and count is dynamically updated from
+                backend data.
+            </p>
+        </div>
+        <div class="col-lg-6 d-flex justify-content-center align-items-center mt-4">
+            <img style="border-radius: 0.5em;" src="images/categories.jpg" width="90%" height="auto"
+                class="mb-4 shadow-sm" alt="Theme Screenshot">
+        </div>
+    </div>
+    <!-- End of Categories Section -->
+
+    <!-- Two Columns Section -->
+    <div class="row p-4">
+        <!-- Column 1 -->
+        <div class="col-lg-4">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/4.jpg" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">Product Preview</h2>
+                    <p class="lead text-center">
+                        Product preview page with simple and stylish display features and additional Product Details,
+                        Specification and Review Tabs.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 1 -->
+
+        <!-- Column 2 -->
+        <div class="col-lg-4">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/5.jpg" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">Blog</h2>
+                    <p class="lead text-center">
+                        Blog Page with stylish banner and list view.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 2 -->
+
+        <!-- Column 4 -->
+        <div class="col-lg-4">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/6.jpg" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">About Us</h2>
+                    <p class="lead text-center">
+                        About Us page which can be easily created and customized using snippets.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 4 -->
+    </div>
+    <!-- End of Two Columns Section -->
+
+    <!-- Demo Pages -->
+    <section class="oe_container">
+        <div class="row" style="margin: 60px auto -30px;">
+            <div class="col-lg-12 text-center">
+                <h4 class="mt-4">Demo Pages</h4>
+                <hr style="border-width: 3px; border-color: #0984e3; width: 100px;">
+            </div>
+        </div>
+
+        <div class="row" style="margin: 40px auto; border-radius: 15px; padding: 38px;">
+            <div class="col-sm-6 col-md-4 px-2">
+                <div class="bg-white shadow overflow-hidden mb32"
+                    style="border-radius: 15px; width: 300px; padding-bottom: 0; margin-right: 30px;">
+                    <img src="./images/demo1.png" width="300px" height="auto">
+                    <h6 class="text-center my-3">Home</h6>
+                    <hr style="border-width: 5px; border-color: #0984e3; width: 150px; margin-bottom: 0;">
+                </div>
+            </div>
+
+            <div class="col-sm-6 col-md-4 px-2">
+                <div class="bg-white shadow overflow-hidden mb32"
+                    style="border-radius: 15px; width: 300px; padding-bottom: 0;">
+                    <img src="./images/demo2.png" width="300px" height="auto">
+                    <h6 class="text-center my-3">Shop</h6>
+                    <hr style="border-width: 5px; border-color: #05c46b; width: 150px; margin-bottom: 0;">
+                </div>
+            </div>
+
+            <div class="col-sm-6 col-md-4 px-2">
+                <div class="bg-white shadow overflow-hidden mb32"
+                    style="border-radius: 15px; width: 300px; padding-bottom: 0;">
+                    <img src="./images/demo3.png" width="300px" height="auto">
+                    <h6 class="text-center my-3">Product Page</h6>
+                    <hr style="border-width: 5px; border-color: #f44f52; width: 150px; margin-bottom: 0;">
+                </div>
+            </div>
+
+        </div>
+
+        <div class="row d-flex justify-content-center" style="margin: 40px auto; border-radius: 15px; padding: 38px;">
+            <div class="col-sm-6 col-md-4 px-2">
+                <div class="bg-white shadow overflow-hidden mb32"
+                    style="border-radius: 15px; width: 300px; padding-bottom: 0;">
+                    <img src="./images/demo4.png" width="300px" height="auto">
+                    <h6 class="text-center my-3">Blog</h6>
+                    <hr style="border-width: 5px; border-color: #ffa801; width: 150px; margin-bottom: 0;">
+                </div>
+            </div>
+
+        </div>
+    </section>
+    <!-- End of Demo Pages -->
+
+    <!-- Footer -->
+    <div class="row" style="margin-top: 4rem;">
+        <div class="col-lg-12 text-center">
+            <h2>Get Help</h2>
+            <hr style=" border: 2px solid #b22126; margin-top: 2px;" width="40px">
+            <p class="text-center" style="max-width: 650px; margin: 0 auto;">If you have anything to share with us
+                based
+                on
+                your use of this module, please let us know. We are ready to offer our support.</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col px-4 pt-3 pb-2 shadow-sm"
+            style="background-color: #fff; max-width: 450px; border-radius: 0.5em; margin: 1em auto;">
+            <div class="row">
+                <div class="col-lg-8">
+                    <h6><a href="mailto:odoo@cybrosys.com" target="_blank"
+                            style="color: #050505; text-decoration: none;"><i
+                                class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a></h6>
+                </div>
+                <div class="col-lg-4 d-flex justify-content-end" style="position: relative;">
+                    <h6><a href="mailto:odoo@cybrosys.com" target="_blank"
+                            style="color: #050505; text-decoration: none;"><i class="fa fa-chevron-right"></i></a>
+                    </h6>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col px-4 pt-3 pb-2 shadow-sm"
+            style="background-color: #fff; max-width: 450px; border-radius: 0.5em; margin: 1em auto;">
+            <div class="row">
+                <div class="col-lg-8">
+                    <h6><a href="https://www.cybrosys.com" target="_blank"
+                            style="color: #050505; text-decoration: none;"><i
+                                class="fa fa-globe mr-2"></i>www.cybrosys.com</a></h6>
+                </div>
+                <div class="col-lg-4 d-flex justify-content-end" style="position: relative;">
+                    <h6><a href="https://www.cybrosys.com" target="_blank"
+                            style="color: #050505; text-decoration: none;"><i class="fa fa-chevron-right"></i></a>
+                    </h6>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 mt-4 mb-2 text-center">
+            <p style="font-weight: bold">A Quality Theme From</p>
+        </div>
+        <div class="col-lg-12 text-center">
+            <img src="images/cybro-logo-oca.png" width="80px" height="auto">
+        </div>
+    </div>
+    <!-- End of Footer -->
+</div>

theme_classic_store/static/src/css/classic_store.css

@@ -0,0 +1,25 @@
+.page-link {
+    position: relative;
+    display: block;
+    padding: .5rem .75rem;
+    margin-left: -1px;
+    line-height: 1.25;
+    color: #763242 !important;
+    background-color: #fff;
+    border: 1px solid #dee2e6;
+}
+
+.page-item.active .page-link {
+    z-index: 3;
+    color: #fff;
+    background-color: #c09f7f !important;
+    border-color: #c09f7f !important;
+}
+
+.page-link:hover {
+    z-index: 2;
+    color: #0056b3;
+    text-decoration: none;
+    background-color: #763242 !important;
+    border-color: #dee2e6;
+}

theme_classic_store/static/src/css/owl.carousel.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

theme_classic_store/static/src/css/owl.theme.default.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

theme_classic_store/static/src/js/sale_utils.js

@@ -0,0 +1,126 @@
+ odoo.define('website_sale.utils', function (require) {
+'use strict';
+    const wUtils = require('website.utils');
+    /**
+     * Mixin providing common functionality for handling cart updates.
+     */
+    const cartHandlerMixin = {
+        /**
+         * Determines whether to redirect after adding to cart or stay on the same page.
+         */
+        getRedirectOption() {
+            const html = document.documentElement;
+            this.stayOnPageOption = html.dataset.add2cartRedirect !== '0';
+        },
+        /**
+         * Determines whether the "Buy Now" option was selected and gets the item image container.
+         * @param {Event} ev - The event that triggered the cart update .
+         */
+        getCartHandlerOptions(ev) {
+            this.isBuyNow = ev.currentTarget.classList.contains('o_we_buy_now');
+            const targetSelector = ev.currentTarget.dataset.animationSelector || 'img';
+            this.$itemImgContainer = this.$el.find('#product_detail_main');
+        },
+        /**
+         * Adds a product to the cart.
+         * @param {Object} params - The parameters for the cart update.
+         * @returns {Promise} - A promise that resolves when the cart is updated.
+         */
+        addToCart(params) {
+            if (this.isBuyNow) {
+                params.express = true;
+            } else if (this.stayOnPageOption) {
+                return this._addToCartInPage(params);
+            }
+            return wUtils.sendRequest('/shop/cart/update', params);
+        },
+        /**
+         * Adds a product to the cart on the same page.
+         * @private
+         * @param {Object} params - The parameters for the cart update.
+         * @returns {Promise} - A promise that resolves when the cart is updated.
+         */
+        _addToCartInPage(params) {
+            params.force_create = true;
+            return this._rpc({
+                route: "/shop/cart/update_json",
+                params: params,
+            }).then(async data => {
+                await animateClone(this.$el.find('header .o_wsale_my_cart').first(), this.$itemImgContainer, 25, 40);
+                updateCartNavBar(data);
+            });
+        },
+    };
+
+    /**
+     * Animates the image of the product being added to the cart.
+     * @param {jQuery} $cart - The cart element.
+     * @param {jQuery} $elem - The element representing the product being added.
+     * @param {number} offsetTop - The top offset of the animated image.
+     * @param {number} offsetLeft - The left offset of the animated image.
+     * @returns {Promise} - A promise that resolves when the animation is complete.
+     */
+    function animateClone($cart, $elem, offsetTop, offsetLeft) {
+        $cart.find('.o_animate_blink').addClass('o_red_highlight o_shadow_animation').delay(500).queue(function () {
+            $(this).removeClass("o_shadow_animation").dequeue();
+        }).delay(2000).queue(function () {
+            $(this).removeClass("o_red_highlight").dequeue();
+        });
+        return new Promise(function (resolve, reject) {
+            var $imgtodrag = $elem.find('img').eq(0);
+            if ($imgtodrag.length) {
+                var $imgclone = $imgtodrag.clone()
+                    .offset({
+                        top: $imgtodrag.offset().top,
+                        left: $imgtodrag.offset().left
+                    })
+                    .addClass('o_website_sale_animate')
+                    .appendTo(document.body)
+                    .css({
+                        // Keep the same size on cloned img.
+                        width: $imgtodrag.width(),
+                        height: $imgtodrag.height(),
+                    })
+                    .animate({
+                        top: 100,
+                        left: 1400,
+                        width: 75,
+                        height: 75,
+                    }, 1000, 'easeInOutExpo');
+
+                $imgclone.animate({
+                    width: 0,
+                    height: 0,
+                }, function () {
+                    resolve();
+                    $(this).detach();
+                });
+            } else {
+                resolve();
+            }
+        });
+    }
+
+/**
+ * Updates both navbar cart
+ * @param {Object} data
+ */
+function updateCartNavBar(data) {
+    var $qtyNavBar = $(".my_cart_quantity");
+    _.each($qtyNavBar, function (qty) {
+        var $qty = $(qty);
+        $qty.parents('li:first').removeClass('d-none');
+        $qty.addClass('o_mycart_zoom_animation').delay(300).queue(function () {
+            $(this).text(data.cart_quantity);
+            $(this).removeClass("o_mycart_zoom_animation").dequeue();
+        });
+    });
+    $(".js_cart_lines").first().before(data['website_sale.cart_lines']).end().remove();
+    $(".js_cart_summary").first().before(data['website_sale.short_cart_summary']).end().remove();
+}
+return {
+    animateClone: animateClone,
+    updateCartNavBar: updateCartNavBar,
+    cartHandlerMixin: cartHandlerMixin,
+};
+});

theme_classic_store/static/src/js/shop_sidebar.js

@@ -0,0 +1,35 @@
+/*
+    This JavaScript file defines a custom widget for the Classic Store theme.
+    The widget adds functionality to show or hide a product sidebar when a arrow is clicked.
+*/
+odoo.define('theme_classic_store', function (require) {
+    'use strict';
+    var publicWidget = require('web.public.widget');
+    publicWidget.registry.show = publicWidget.Widget.extend({
+        selector: '.product_sidebar',
+        events: {
+            'click .show_div': '_showDiv',
+        },
+        start: function () {
+            this._super.apply(this, arguments);
+            this._setupEventDelegation();
+        },
+        _setupEventDelegation: function () {
+            this.$el.on('click', '.fa-angle-down.dropdown-arrow', this._showDiv.bind(this));
+        },
+        _showDiv: function (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            var arrow = this.$(ev.currentTarget);
+            var div = arrow[0].parentElement.parentElement.nextElementSibling;
+             if (div.hasAttribute('hidden')) {
+        div.removeAttribute('hidden');
+    } else {
+        div.setAttribute('hidden', '');
+    }
+        },
+    });
+    return {
+        show: publicWidget.registry.show,
+    };
+});

theme_classic_store/static/src/js/snippets_category.js

@@ -0,0 +1,29 @@
+odoo.define('theme_classic_store.categories', function(require){
+'use strict';
+    var Animation = require('website.content.snippets.animation');
+    var ajax = require('web.ajax');
+    /**
+     * Defines an animation class for the categories element in the HTML document.
+     * Sends an AJAX request to the /classic_product_category URL using the ajax.jsonRpc
+     * method, and calls the 'call' method on the server-side. If the request is successful,
+     * clears the current content of the categories element using the empty method on the
+     * self.$target jQuery object, and appends the returned data to the element using the
+     * append method. The selector property defines the CSS selector for the element that
+     * the animation will be applied to.
+     *
+     * @module theme_classic_store.price_filter
+     * @extends Animation.Class
+     */
+    Animation.registry.categories = Animation.Class.extend({
+        selector : '.categories',
+        start: function(){
+            var self = this;
+            ajax.jsonRpc('/classic_product_category', 'call', {})
+            .then(function (data) {
+                if(data){
+                    self.$target.empty().append(data);
+                }
+            });
+        }
+        });
+    });

theme_classic_store/static/src/js/snippets_trending.js

@@ -0,0 +1,72 @@
+odoo.define('theme_classic_store.trending', function(require){
+'use strict';
+var Animation = require('website.content.snippets.animation');
+var ajax = require('web.ajax');
+/**
+ * Defines an animation class for the trending element in the HTML document.
+ * Sends an AJAX request to the /classic_product_trending URL using the ajax.jsonRpc
+ * method, and calls the 'call' method on the server-side. If the request is successful,
+ * clears the current content of the trending element using the empty method on the
+ * self.$target jQuery object, and appends the returned data to the element using the
+ * append method. Initializes the owl carousel on the .owl-carousel element inside the
+ * trending element with the specified options. The selector property defines the CSS
+ * selector for the element that the animation will be applied to.
+ *
+ * @module theme_classic_store.price_filter
+ * @extends Animation.Class
+ */
+Animation.registry.trending = Animation.Class.extend({
+    selector : '.trending',
+    start: function(){
+        var self = this;
+        ajax.jsonRpc('/classic_product_trending', 'call', {})
+        .then(function (data) {
+            if(data){
+                self.$target.empty().append(data);
+                self.product_carousel();
+            }
+        });
+    },
+    product_carousel: function (autoplay=false, items=4, slider_timing=5000) {
+        var self= this;
+            this.$el.find(".owl-carousel").owlCarousel(
+                {
+                    items: 3,
+                    loop: true,
+                    margin: 30,
+                    stagePadding: 30,
+                    smartSpeed: 450,
+                    autoplay: true,
+                    autoPlaySpeed: 1000,
+                    autoPlayTimeout: 1000,
+                    autoplayHoverPause: true,
+                    onInitialized: self.counter(),
+                    dots: true,
+                    nav: true,
+                    responsiveClass: true,
+                    responsive: {
+                        0: {
+                            items: 1,
+                            nav: true
+                        },
+                        600: {
+                            items: 2,
+                            nav: false
+                        },
+                        1000: {
+                            items: 3,
+                            nav: true,
+                            loop: true
+                        }
+                    }
+                }
+            );
+        },
+        counter:  function() {
+            var buttons = this.$el.find('.owl-dots button');
+            buttons.each(function (index, item) {
+                $(item).find('span').text(index + 1);
+            });
+        }
+});
+});

theme_classic_store/static/src/scss/_common.scss

@@ -0,0 +1,37 @@
+*:focus {
+    outline: 0 !important;
+    box-shadow: none !important;
+}
+
+button:focus {
+    border: none;
+    outline: none;
+}
+button:active {
+    border: none;
+    outline: none;
+    box-shadow: none;
+}
+
+*{
+    list-style-type:none;
+
+    font-family: $font-default;
+    font-size: 14px;
+    &:focus,&:active{
+        outline: none !important;
+    }
+}
+
+*:hover{
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+}
+
+h3{
+    color: $color-brand2;
+    font-weight: 700;
+    font-size: $font-sub-heading;
+    letter-spacing: 0.05em;
+    text-align: center;
+}

theme_classic_store/static/src/scss/_normalize.scss

@@ -0,0 +1,350 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ===========================================
+  =============================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }

theme_classic_store/static/src/scss/_variables.scss

@@ -0,0 +1,30 @@
+//font
+$font-default:'Mulish', sans-serif;
+$font-offer: 'Roboto', sans-serif;
+//colors
+$color-brand: #763242;
+$color-brand2: #565656;
+$color-black:#000000;
+$color-white:#fff;
+$color-font:#797979;
+$color-font2:#535353;
+$color-green:#d8ceca;
+$color-button:#c09f7f;
+$color-footer:#121725;
+$color-grey:#6c6a74;
+$color-hover:#e9c939;
+$color-border:#dedede;
+$select-border-color: #ccc;
+$select-focus-color: green;
+//font-size
+$font-h1:36px;
+$font-h2: 18px;
+$font-h3:36px;
+$font-h4: 25px;
+$font-h5:19px;
+$font-h6: 18px;
+$font-p:18px;
+$font-size-banner:60px;
+$font-heading:46px;
+$font-sub-heading:30px;
+$font-text:14px;

theme_classic_store/static/src/scss/components/_banner.scss

@@ -0,0 +1,121 @@
+.banner{
+    background-image:linear-gradient(9deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.65)), url(./../images/banner/hero.jpg);
+   
+    width: 100%;
+    // background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    @media screen and(max-width:768px) {
+       height: 820px;
+    }
+
+
+    .card{background: transparent;
+        border: none;
+        padding: 100px 0 25px 0;
+        .card-body{
+            background: transparent;
+            text-align: center;
+            .card-title{
+            
+                font-size: 65px;
+                font-weight: bold;
+                letter-spacing: 0.05em;
+                margin-bottom: 15px;
+                color: $color-brand;
+
+                @media screen and(max-width:768px) {
+                    font-size: 50px;
+                }
+            }
+            .card-text{
+                font-size: 20px;
+                font-weight: 500;
+                color: $color-white;
+                @media screen and(max-width:768px) {
+                    font-size: 16px;
+                    font-weight: normal;
+                }   
+             
+            }
+        }
+    }
+
+    .populor{
+
+
+        padding-bottom: 180px;
+        h4{color: $color-white;
+        font-size: 16px;
+        font-weight: bolder;
+        margin-bottom: 30px;
+
+        
+    @media screen and(max-width:768px) {
+      
+     }
+    }
+
+    .populor-buttons{
+       
+           a{
+               margin: 0 7px;
+           }
+    }
+    }
+
+    
+
+
+
+
+}
+    .search{
+        .wrapper{
+             background-color: $color-white;
+        -webkit-box-shadow: 1px 25px 19px -16px #c4c4c4;
+        -moz-box-shadow: 1px 25px 19px -16px #c4c4c4;
+        box-shadow: 1px 25px 19px -16px #c4c4c4;
+        border-radius: 3px;
+        padding: 35px 15px;
+        margin-top: -95px;
+   
+        @media screen and(max-width:768px) {
+         margin-top: -276px;
+         }
+
+            .form-group{
+                input{
+                    padding: 25px 5px;
+                }
+                select{
+                    // padding: 25px 5px;
+                }
+            }
+
+
+        }
+       
+        
+    }
+
+    .banner_about{
+        background-color: $color-brand;
+        width: 100%;
+        text-align: center;
+        h3{
+            color: $color-white;
+            font-weight: bold;
+            font-size: 42px;
+            padding: 40px 0;
+        }
+    }
+
+    
+    .banner_search{
+        background-color: $color-brand;
+        width: 100%;
+        text-align: center;
+      
+    }

theme_classic_store/static/src/scss/components/_button.scss

@@ -0,0 +1,224 @@
+.btn {
+    border: none !important;
+    outline: 0 !important;
+    box-shadow: none !important;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    color: $color-button;
+    &-primary {
+        background-color:$color-button !important;
+        border-color: $color-button;
+        padding: 14px 31px;
+        color: $color-white !important;
+        font-size: 16px;
+        font-weight: 600;
+        border-radius:3px;
+letter-spacing:  1px;
+        
+        &:hover {
+         
+            color: $color-white !important;
+            background-color: lighten($color-button, 5%) !important;
+        }
+    }
+
+    &-primary-s{
+        background-color:$color-button !important;
+        border-color: $color-button;
+        padding: 14px 31px;
+        color: $color-white !important;
+        font-size: 16px;
+        font-weight: 600;
+        border-radius:3px;
+
+        
+        &:hover {
+         
+            color: $color-white !important;
+            background-color: lighten($color-button, 5%) !important;
+        }
+    }
+
+    &-login {
+        background-color: transparent !important;
+      
+        padding: 4px 18px;
+        color: $color-black !important;
+        font-size: 14px;
+        font-weight: 600;
+        border-radius:0;
+        border:1px solid !important;
+        border-color: 2px solid #dedede !important;
+        margin-left: 10px;
+        &:hover {
+         
+        
+            color: $color-white !important;
+            background-color: darken($color-button, 5%) !important;
+        }
+    }
+    &-listing {
+        background-color: $color-green !important;
+        
+        padding: 5px 18px;
+        color: $color-white !important;
+        font-size: 14px;
+        font-weight: 600;
+        border-radius:0;
+        border:1px solid !important;
+       
+        &:hover {
+         
+        
+            color: $color-white !important;
+            background-color: darken($color-green, 5%) !important;
+            border: none; 
+        }
+    }
+
+     &-pop {
+        background-color: transparent !important;
+        
+        padding: 4px 14px;
+        color: $color-white !important;
+        font-size: 12px;
+        font-weight: 600;
+        border-radius:0;
+        border:1px solid #404040 !important;
+        span{
+            padding-right: 5px;
+        }
+       
+        &:hover {
+         
+        
+            color: $color-white !important;
+           
+             
+        }
+    }
+    &-cta {
+        background-color:$color-brand !important;
+       
+        padding: 14px 34px;
+        color: $color-white !important;
+        font-size: 16px;
+        font-weight: 600;
+        border-radius:3px;
+        letter-spacing: 0.05em;
+        margin-right: 10px;
+        &:hover {
+         
+           
+            color: $color-white !important;
+            background: $color-button !important;
+        }
+    }
+
+    &-ctb {
+        background-color:$color-white !important;
+        padding: 14px 31px;
+        color: $color-black !important;
+        font-size: 16px;
+        font-weight: 600;
+        border-radius:3px;
+        letter-spacing: 0.05em;
+        border: 1px solid;
+        border-color: $color-white;
+        margin-right: 10px;
+        &:hover {
+         
+           border: 1px solid !important;
+           border-color: $color-white !important;
+            color: $color-white !important;
+            background: $color-brand !important;
+        }
+    }
+
+    &-profile {
+        background-color: $color-brand !important;
+        padding: 5px 18px;
+        color: $color-white !important;
+        font-size: 14px;
+        font-weight: 400;
+        border-radius:5px;
+     
+
+        &:hover {
+                 
+            color: $color-white !important;
+            background-color: darken($color-brand, 5%) !important;
+            border: none; 
+        }
+    }
+
+    &-delete {
+        background-color:#d43d3d !important;
+        border-color: $color-button;
+        padding: 14px 31px;
+        color: $color-white !important;
+        font-size: 16px;
+        font-weight: 600;
+        border-radius:3px;
+
+        &:hover {
+         
+            color: $color-white !important;
+            background:#eb2424 !important;
+        }
+    }
+    &-transparent {
+        background-color:transparent !important;
+        border-color: $color-button;
+        padding: 14px 31px;
+        color: $color-button !important;
+        font-size: 16px;
+        font-weight: 600;
+        border-radius:3px;
+        border:1px solid !important;
+        margin-top: 20px;
+        &:hover {
+         
+            color: $color-white !important;
+            background: $color-button !important;
+        }
+    }
+
+    &-transparent2 {
+        background-color:transparent !important;
+        border-color: $color-white;
+        padding: 14px 31px;
+        color: $color-white !important;
+        font-size: 16px;
+        font-weight: 600;
+        border-radius:3px;
+        border:1px solid !important;
+        margin-top: 20px;
+        &:hover {
+           
+            color: $color-font !important;
+            background: $color-white !important;
+            border: none !important;
+        }
+    }
+
+    &-primaryc {
+        background-color:$color-button !important;
+        border-color: $color-button;
+        padding: 14px 31px;
+        color: $color-white !important;
+        font-size: 16px;
+        font-weight: 600;
+        border-radius:5px;
+letter-spacing:  1px;
+width: 55%;
+
+        
+        &:hover {
+         
+            color: $color-white !important;
+            background-color: lighten($color-button, 5%) !important;
+        }
+    }
+  
+    }

theme_classic_store/static/src/scss/components/_components.scss

@@ -0,0 +1,3 @@
+@import './banner';
+@import './button';
+@import './product';

theme_classic_store/static/src/scss/layout/_footer.scss

@@ -0,0 +1,129 @@
+.footer{
+    background-color: $color-brand2;
+
+    .footer_logo{
+
+        margin-top: 30px;
+        .navbar-brand{
+            padding-top: 30px;
+            color: $color-white;
+            font-size: 30px;
+            font-weight: 900;
+            &:hover{
+                color: $color-black;
+            }
+            span{
+                color: $color-brand;
+                font-size: 20px;
+            }
+        }
+        p{
+            color: #c7c7c7;
+            line-height: 26px;
+            padding-top: 30px;
+        }
+    }
+
+
+    .pages{
+        margin-top: 44px;
+        @media screen and(max-width:768px){
+            margin-top: 0;
+        }
+
+        h4{
+            padding-top: 32px;
+            color: $color-white;
+            font-size:20px;
+            padding-bottom: 30px;
+            
+        }
+        a{
+            display: block;
+color: #797979;
+padding-bottom: 15px;
+
+&:hover{
+   color: $color-brand;
+}
+        }
+    }
+
+    .apps
+    {
+        @media screen and(max-width:768px){
+            margin-top: 30px;
+            margin-bottom: 50px;
+        }
+     
+            margin-top: 75px;
+        padding: 18px 30px;
+        background: #46484A;
+        border-radius: 2px;
+    
+        .mob_img{
+            display: flex;
+            padding-bottom: 20px;
+            .mob_icon{
+                max-width: 50px;
+            }
+            img{
+                width: 100%;
+            }
+            p{
+                color:  #c7c7c7;
+                padding-left: 20px;
+            }
+        }
+
+        .buttons{
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            .wrapper_img{
+                max-width: 140px;
+                img{
+                    width: 100%;
+                }
+            }
+        }
+}
+
+.footer_bottom
+    {
+        position: relative;
+        background: #363839;
+        padding: 25px 0;
+        .bottom_left{
+            margin-top: 10px;
+            color: #c7c7c7;
+        }
+        .bottom-right{
+            margin-top: 10px;
+            ul{
+
+                @media screen and(max-width:768px) {
+                    padding-left: 0;
+margin-top: 30px;
+                }
+                a{
+                    color:#c7c7c7;; 
+                    padding: 0 20px;
+                    @media screen and(max-width:768px) {
+                    &:first-child{
+                        padding-left: 0;
+                    }
+                    }
+                &:hover{
+                    color: $color-white;
+                }
+                }
+                li{
+                    font-size: 14px;
+                    margin-right: 20px;
+                }
+            }
+        }
+    }
+
+}

theme_classic_store/static/src/scss/layout/_layouts.scss

@@ -0,0 +1,3 @@
+@import './navigation';
+@import './footer';
+@import './sidebar';

theme_classic_store/static/src/scss/layout/_navigation.scss

@@ -0,0 +1,113 @@
+.navigation {
+    border: 1px solid;
+    border-bottom-color: $color-border;
+
+    .login {
+        @media screen and(max-width:992px) {
+            display: none;
+        }
+    }
+    .login2 {
+        display: none;
+        @media screen and(max-width:992px) {
+            display: block;
+            text-align: center;
+            margin-top: 15px;
+        }
+    }
+}
+.navbar-dark {
+    padding: 20px 0;
+
+    .navbar-toggler {
+        border: 2px solid;
+        border-color: $color-brand;
+
+        .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(86, 114, 249)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+        }
+    }
+
+    .navbar-brand {
+        color: $color-brand2;
+        font-size: 30px;
+        font-weight: 900;
+        &:hover {
+            color: $color-black;
+        }
+        span {
+            color: $color-brand;
+            font-size: 20px;
+        }
+    }
+    .navbar-nav {
+        text-align: center;
+
+        .nav-item {
+            .dropdown-menu {
+                @media screen and(max-width:992px) {
+                    text-align: center;
+                }
+
+                .dropdown-item {
+                    padding: 10px 10px;
+                    &:hover {
+                        color: $color-brand;
+                    }
+                }
+            }
+
+            .nav-link {
+                color: $color-font;
+                font-size: 16px;
+                padding: 0 20px;
+                @media screen and(max-width:992px) {
+                    padding: 10px 0;
+                }
+
+                &:hover {
+                }
+            }
+        }
+    }
+}
+
+.navbar-nav .nav-item.active .nav-link {
+    color: $color-brand !important;
+}
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:hover {
+    color: rgba(0, 0, 0, 0.993);
+}
+
+/* ============ desktop view ============ */
+@media all and (min-width: 992px) {
+    .navbar .nav-item .dropdown-menu {
+        display: none;
+    }
+    .navbar .nav-item:hover .nav-link {
+        color: #181818;
+    }
+    .navbar .nav-item:hover .dropdown-menu {
+        display: block;
+        border: none;
+    }
+    .navbar .nav-item .dropdown-menu {
+        margin-top: 0;
+        padding: 20px 10px;
+    }
+}
+/* ============ desktop view .end// ============ */
+
+#arrow {
+    position: relative;
+    top: 0;
+    transition: top ease 0.5s;
+}
+#arrow:hover {
+    top: -5px;
+}
+
+.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:active {
+ color:$color-white;
+}

theme_classic_store/static/src/scss/layout/_sidebar.scss

@@ -0,0 +1,400 @@
+.Products_main {
+    margin-top: 90px;
+    margin-bottom: 90px;
+    .heading {
+        padding-bottom: 50px;
+        h3 {
+            text-align: left;
+            font-size: 25px;
+        }
+        p {
+            color: $color-font;
+        }
+    }
+
+    .product_sidebar {
+        padding: 0 25px;
+        .wrapper {
+            margin-bottom: 30px;
+            .widget_header {
+                h4 {
+                    font-size: 22px;
+                    font-weight: 600;
+                }
+            }
+            hr {
+                color: $color-black;
+            }
+            ul {
+                padding-left: 0;
+                li {
+                    padding: 10px 0;
+                    a {
+                        display: flex !important;
+                        justify-content: space-between !important;
+                        color: $color-brand2;
+                        text-decoration: none;
+                        &:hover {
+                            color: $color-brand;
+                            span {
+                                color: $color-white !important;
+
+                                background-color: $color-brand;
+                                height: 25px;
+                                width: 36px;
+
+                                border-radius: 16%;
+
+                                display: inline-block;
+                                text-align: center;
+                                padding-top: 1px;
+                            }
+                        }
+                        span {
+                            color: $color-font !important;
+
+                            height: 25px !important;
+                            width: 36px !important;
+
+                            border-radius: 16% !important;
+
+                            display: inline-block;
+                            text-align: center;
+                            padding-top: 1px;
+                        }
+                    }
+                }
+            }
+
+            .range_main {
+                position: relative;
+                margin-top: 40px;
+padding-left: 30px;
+
+                .range {
+                    width: 149px;
+                    height: 48px;
+                    border: 0;
+                    background: #579de7;
+                    position: absolute;
+                    top: 193%;
+                    // left: 71%;
+                    // margin-left: -117px;
+
+                    &:before,
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        top: 0;
+                        z-index: -1;
+                        height: 100%;
+                        width: 28px;
+                        background: silver;
+                        pointer-events: none;
+                    }
+                    &:before {
+                        left: -28px;
+                        border-radius: 5px 0 0 5px;
+                    }
+                    &:after {
+                        right: -28px;
+                        border-radius: 0 5px 5px 0;
+                    }
+                }
+                input {
+                    -webkit-appearance: none;
+                    position: absolute;
+                    width: calc(100% + 40px);
+                    height: 100%;
+                    margin: 0;
+                    background-color: transparent;
+                    outline: none;
+                    left: -20px;
+                    -webkit-tap-highlight-color: transparent;
+                }
+
+                .lbl-lft,
+                .lbl-rgt {
+                    position: absolute;
+                    top: -15px;
+                    color: #1a1a1a;
+                    font-size: 12px;
+                    font-weight: 700;
+                }
+                .lbl-lft {
+                    left: -28px;
+                }
+                .lbl-rgt {
+                    right: -28px;
+                    text-align: left;
+                }
+
+                .range-thumb {
+                    position: absolute;
+                    top: 0px;
+                    margin-left: -24px;
+                    border-radius: 50%;
+                    border: 5px solid #878484;
+                    background: white;
+                    height: 48px;
+                    width: 48px;
+                    outline: none;
+                    transition: transform 0.3s ease;
+                    text-align: center;
+                    font-size: 12px;
+                    line-height: 38px;
+                    color: #1a1a1a;
+                    font-weight: 700;
+                    pointer-events: none;
+                    &::before {
+                        display: none;
+                        content: "";
+                        position: absolute;
+                        z-index: 1;
+                        top: 53px;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        border-radius: 3px;
+                        width: 2px;
+                        height: 28px;
+                        margin-left: -3px;
+                        background: rgba(white, 0.25);
+                        box-shadow: 6px 0 0 rgba(white, 0.25);
+                    }
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        bottom: -5px;
+                        left: -5px;
+                        width: 48px;
+                        height: 10px;
+                        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgNDggMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3ICg0NTM5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+Q29tYmluZWQgU2hhcGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIGZpbGw9IiM2MTY4RTciPgogICAgICAgICAgICA8cGF0aCBkPSJNMTEuMTU0NjA2NCwyLjE4MjkyMDUxZS0xMiBMNC40NzIyMTMwMSwyLjE4MjkyMDUxZS0xMiBDNS40MjIyOTI4NiwxLjA2MTUxMjk4IDYsMi40NjMyOTExMyA2LDQgQzYsNy4zMTM3MDg1IDMuMzEzNzA4NSwxMCAwLDEwIEw0OCwxMCBDNDQuNjg2MjkxNSwxMCA0Miw3LjMxMzcwODUgNDIsNCBDNDIsMi40NjMyOTExMyA0Mi41Nzc3MDcxLDEuMDYxNTEyOTggNDMuNTI3Nzg3LDAgTDQzLjUyNzc4NywyLjE4MjkyMDUxZS0xMiBMMzYuODQ1MzkzNiwyLjE4MjkyMDUxZS0xMiBDMzMuNDYzMzI1NSwzLjEwNDc5MzA5IDI4Ljk1Mjk4NzQsNSAyNCw1IEMxOS4wNDcwMTI2LDUgMTQuNTM2Njc0NSwzLjEwNDc5MzA5IDExLjE1NDYwNjQsMi4xOTQyNDQ3OWUtMTIgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                    }
+                }
+                .resize {
+                    position: fixed;
+                    bottom: 20px;
+                    left: 0;
+                    width: 100%;
+                    text-align: center;
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #c8ccd4;
+                }
+
+                .hover + .range-thumb,
+                .active + .range-thumb {
+                    @media screen and (max-width: 768px) {
+                        transform: translateY(-48px);
+                    }
+                    &::before {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        .check {
+            margin-top: 90px;
+            padding-top: 60px;
+        }
+
+        .chekbox_wrapper {
+            margin-top: 20px;
+        }
+
+        /*Checkboxes styles*/
+        input[type="checkbox"] {
+            display: none;
+        }
+
+        input[type="checkbox"] + label {
+            display: block;
+            position: relative;
+            padding-left: 35px;
+            margin-bottom: 20px;
+            color: $color-font;
+            cursor: pointer;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+        }
+
+        input[type="checkbox"] + label:last-child {
+            margin-bottom: 0;
+        }
+
+        input[type="checkbox"] + label:before {
+            content: "";
+            display: block;
+            width: 20px;
+            height: 20px;
+            border: 1px solid $color-brand;
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0.6;
+            -webkit-transition: all 0.12s, border-color 0.08s;
+            transition: all 0.12s, border-color 0.08s;
+        }
+
+        input[type="checkbox"]:checked + label:before {
+            width: 10px;
+            top: -5px;
+            left: 5px;
+            border-radius: 0;
+            opacity: 1;
+            border-top-color: transparent;
+            border-left-color: transparent;
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+    }
+
+
+.product_right{
+
+    @media screen and(max-width:768px) {
+        margin-top: 70px;
+    }
+    .product_right_top {
+        .choose {
+.ch{
+    @media screen and(max-width:992px){
+        margin-right: 10px !important;
+    }
+}
+            display: flex;
+justify-content: space-between;
+
+
+   
+        
+    }
+
+        }
+
+        .views{
+            float: right;
+            display: flex;
+
+            @media screen and(max-width:768px){
+             float: none;
+             margin-top: 30px;
+            }
+
+            ul{
+                display: flex;
+
+                &:last-child{
+                    padding-right: 0;
+                }
+            }
+li{
+    padding-right: 20px;
+    a{
+        color: $color-brand2;
+        text-decoration: none;
+&:hover{
+    color: $color-brand;
+}
+        &:active{
+            color: $color-font;
+        }
+    }
+}
+        }
+    }
+
+.product_right_bottom{
+    padding-top: 20px;
+    margin-top: 50px;
+    .card{
+        margin-bottom: 30px;
+
+  
+        .card-body{
+            .card-title{
+                color: $color-brand2;
+                font-weight: 700;
+                letter-spacing: 0.05em;
+                font-size: $font-h5;
+            }
+            .list-group-item{
+                border: 0;
+                padding: 10px 10px 10px 0;
+                margin-bottom: 0 !important;
+              
+                margin-bottom: 10px;
+                a{
+                    color: $color-font;
+                    text-decoration: none;
+                }
+                span{
+                    padding-right: 10px;
+                }
+            }
+            .list-group-flush{
+          
+            }
+
+            p{
+                color: $color-font;
+            }
+        }
+        .card-rating{
+            padding-left: 16px;
+padding-bottom: 20px;
+padding-top: 5px;
+            .card-link{
+                color: $color-brand;
+                span{
+                font-size: $font-p;
+            }
+        }
+    }
+    }
+
+
+    .bottom {
+        display: flex;
+        justify-content: center;
+        padding-top: 50px;
+      
+        nav {
+            .pagination {
+                .page-item {
+                    border: none;
+                    .page-link {
+                        border: none;
+                        color: $color_font;
+                        padding: 15px 20px;
+border-radius: 7px;
+font-size: 18px;
+margin: 0 5px;
+@media screen and(max-width:456px) {
+padding: 12px 16px !important;
+font-size: 16px !important;
+}
+                      
+                        &:hover {
+                            background-color: $color_brand;
+                            color: $color_white;
+                        }
+                    }
+                }
+                .page-item.active .page-link {
+                    z-index: 3;
+                    color: #fff;
+                    background-color: $color_brand;
+                    border-color: $color_brand;
+                }
+            }
+        }
+    }
+}
+
+}
+

theme_classic_store/static/src/scss/pages/_404.scss

@@ -0,0 +1,25 @@
+.forw{margin: 90px 0;
+    .error{
+        text-align: center;
+        .message{
+            margin: auto;
+           .wrapper_img{max-width: 400px;
+            margin: auto;
+               img{
+                   width: 100%;
+               }
+           }
+           .oops{
+               font-size: 70px;
+               color: $color-font;
+               padding-top: 20px;
+               font-weight: 600;
+           }
+           p{
+               color: $color-font;
+               padding-top: 15px;
+               padding-bottom: 20px;
+           }
+        }
+    }
+}

theme_classic_store/static/src/scss/pages/_about.scss

@@ -0,0 +1,89 @@
+.about{
+    margin-top: 90px;
+    padding-bottom: 40px;
+    .about_img{
+     
+        img{
+            width: 100%;
+            border-radius: 5px;
+        }
+    }
+    .about_left{
+        h4{
+            color: $color-brand2;
+            padding-bottom: 10px;
+        }
+
+        p{
+            color: $color-font;
+            font-size: 14px;
+            line-height: 30px;
+        }
+    }
+}
+.team{
+        margin-top: 90px;
+        padding-bottom: 70px;
+
+    h4{
+        text-align: center;
+        font-size:25px;
+    }
+    .card{
+     margin-top: 50px;
+        .card-img-top{
+            img{
+                width: 100%;
+                border-radius: 5px;
+            }
+        }
+        .card-body{
+            text-align: center;
+
+            h4{
+                font-size: 20px;
+                padding-top: 10px;
+            }
+            p{
+                padding-bottom: 10px;
+                color: $color-font;
+            }
+        }
+    }
+}
+.counter_main{
+    margin-top: 90px;
+    padding-bottom: 95px;
+    .counter {
+        background-color:#f5f5f5;
+        padding: 20px 0;
+        border-radius: 5px;
+    }
+    
+    .count-title {
+        font-size: 25px;
+        font-weight: normal;
+        margin-top: 15px;
+        margin-bottom: 0;
+        color: $color-brand2;
+        text-align: center;
+    }
+    
+    .count-text {
+        font-size: 20px;
+        font-weight: normal;
+        margin-top: 15px;
+        margin-bottom: 0;
+        text-align: center;
+        color: $color-brand2;
+    }
+    
+    .fa-2x {
+        margin: 0 auto;
+        float: none;
+        display: table;
+        color: $color-brand;
+        font-size: 60px;
+        font-weight: lighter;
+    }
+}

theme_classic_store/static/src/scss/pages/_blog-single.scss

@@ -0,0 +1,253 @@
+.blog{
+    margin-top: 90px;
+    margin-bottom: 90px;
+    .blog_left{
+
+        .wrapper{
+
+            margin-bottom: 70px;
+            padding-bottom: 30px;
+
+
+
+    
+        .bottom-right{
+            margin-top: 10px;
+            ul{ padding-left: 0;
+                a{
+                    color:$color-brand; 
+                    height: 37px;
+width: 37px;
+border: 2px solid;
+border-radius: 50%;
+text-align: center;
+padding-top: 6px;
+margin-right: 15px;
+                    
+                &:hover{
+                    color: $color-white;
+                    background-color: $color-brand;
+                    border: 2px solid;
+                    border-color: $color-brand;
+                }
+                }
+                li{
+                    font-size: 14px;
+                   
+                }
+            }
+        }
+    
+
+            .play{
+                max-width: 80px;
+                position: absolute;
+top: 41%;
+z-index: 2;
+display: flex;
+
+left: 45%;
+            }
+            .blog_img{
+              position: relative;
+                margin-bottom: 30px;
+
+                .video_overlay{
+
+                
+                &:before{
+                    content: '';
+background: rgba(0, 0, 0, 0.51);
+position:absolute;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+              
+                }
+            }
+                img{
+                    width: 100%;
+                    border-radius: 3px;
+                }
+            }
+            h4{
+                font-size: 22px;
+                color: $color-brand2;
+            }
+
+            .date{
+                color: $color-font;
+                margin-bottom: 20px;
+                a{
+                    text-decoration: none;
+                    &:hover{
+                        color: $color-brand;
+                    }
+                }
+            }
+            .blog_p{
+                color: $color-font;
+             padding-bottom: 20px !important;
+                line-height: 25px !important;
+
+            }
+        }
+
+        .bottom {
+            display: flex;
+         
+            padding-bottom: 50px;
+            nav {
+                .pagination {
+                    .page-item {
+                        border: none;
+                        .page-link {
+                            border: none;
+                            color: $color_font;
+                            padding: 15px 20px;
+                            border-radius: 7px;
+                            font-size: 18px;
+                            margin: 0 5px;
+                          
+                            &:hover {
+                                background-color: $color_brand;
+                                color: $color_white;
+                            }
+                        }
+                    }
+                    .page-item.active .page-link {
+                        z-index: 3;
+                        color: #fff;
+                        background-color: $color_brand;
+                        border-color: $color_brand;
+                    }
+                }
+            }
+        }
+
+        .c_blog{
+h4{
+    color: $color-brand2;
+    padding-left: 15px;
+}
+
+            .form-group{
+                padding: 20px 20px;
+    
+                label{
+                    color: $color-font;
+                }
+                .form-control {
+                    border-radius: 2px;
+                    height: 50px;
+                    background-color: transparent;
+                    color: #666;
+                    box-shadow: none;
+                    font-size: 15px;
+                    
+                }
+    
+               
+    
+                textarea{
+                    height: 200px;
+                    margin-bottom: 30px;
+                }
+            }
+        }
+    }
+
+    .blog_right{
+        .product_sidebar {
+            padding: 0 25px;
+            .wrapper {
+                margin-bottom: 30px;
+                position: relative;
+
+
+                .input-group{
+                   
+                    margin-bottom: 40px;
+                    padding-bottom: 20px;
+                    
+                }
+                .form-control{
+
+                    height: 50px;
+                    border: none !important;
+                   
+                }
+
+                
+                
+                .md-form.form-sm.form-1 input{
+                    border: 1px solid #bdbdbd;
+                    border-top-right-radius: 0.25rem;
+                    border-bottom-right-radius: 0.25rem;
+                    
+                  }
+                .widget_header {
+                    h4 {
+                        font-size: 18px;
+                        font-weight: 600;
+                    }
+                }
+                hr {
+                    color: $color-black;
+                }
+                ul {
+                    padding-left: 0;
+                    li {
+                        padding: 7px 0;
+                        a {
+                            display: flex !important;
+                            justify-content: space-between !important;
+                            color: $color-font;
+                            text-decoration: none;
+                            &:hover {
+                                color: $color-brand;
+                                span {
+                                    color: $color-brand !important;
+    
+                                   
+                                    height: 25px;
+                                    width: 36px;
+    
+                                    border-radius: 16%;
+    
+                                    display: inline-block;
+                                    text-align: center;
+                                    padding-top: 1px;
+                                }
+                            }
+                            span {
+                                color: $color-font !important;
+    
+                                height: 25px !important;
+                                width: 36px !important;
+    
+                                border-radius: 16% !important;
+    
+                                display: inline-block;
+                                text-align: center;
+                                padding-top: 1px;
+                            }
+                        }
+                    }
+                }
+    
+                
+            }
+    
+          
+        }
+    }
+}
+
+.input-group-text {
+    
+    background-color:$color-brand;
+    border:1px solid;
+    border-color: $color-brand;
+    }

theme_classic_store/static/src/scss/pages/_blog.scss

@@ -0,0 +1,193 @@
+.blog{
+    margin-top: 90px;
+    margin-bottom: 90px;
+    .blog_left{
+
+        .wrapper{
+
+            margin-bottom: 70px;
+            padding-bottom: 30px;
+
+            .play{
+                max-width: 80px;
+                position: absolute;
+top: 41%;
+z-index: 2;
+display: flex;
+
+left: 45%;
+            }
+            .blog_img{
+              position: relative;
+                margin-bottom: 30px;
+
+                .video_overlay{
+
+                
+                &:before{
+                    content: '';
+background: rgba(0, 0, 0, 0.51);
+position:absolute;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+              
+                }
+            }
+                img{
+                    width: 100%;
+                    border-radius: 3px;
+                }
+            }
+            h4{
+                font-size: 22px;
+                color: $color-brand2;
+            }
+
+            .date{
+                color: $color-font;
+                margin-bottom: 20px;
+                a{
+                    text-decoration: none;
+                    &:hover{
+                        color: $color-brand;
+                    }
+                }
+            }
+            p{
+                color: $color-font;
+            }
+        }
+
+        .bottom {
+            display: flex;
+         
+            padding-bottom: 50px;
+            nav {
+                .pagination {
+                    .page-item {
+                        border: none;
+                        .page-link {
+                            border: none;
+                            color: $color_font;
+                            padding: 15px 20px;
+                            border-radius: 7px;
+                            font-size: 18px;
+                            margin: 0 5px;
+
+                            @media screen and(max-width:456px) {
+                            padding: 12px 16px !important;
+                            font-size: 16px !important;
+                            }
+                          
+                            &:hover {
+                                background-color: $color_brand;
+                                color: $color_white;
+                            }
+                        }
+                    }
+                    .page-item.active .page-link {
+                        z-index: 3;
+                        color: #fff;
+                        background-color: $color_brand;
+                        border-color: $color_brand;
+                    }
+                }
+            }
+        }
+    }
+
+    .blog_right{
+        .product_sidebar {
+            padding: 0 25px;
+            .wrapper {
+                margin-bottom: 30px;
+                position: relative;
+
+
+                .input-group{
+                   
+                    margin-bottom: 40px;
+                    padding-bottom: 20px;
+                    
+                }
+                .form-control{
+
+                    height: 50px;
+                    border: none !important;
+                   
+                }
+
+                
+                
+                .md-form.form-sm.form-1 input{
+                    border: 1px solid #bdbdbd;
+                    border-top-right-radius: 0.25rem;
+                    border-bottom-right-radius: 0.25rem;
+                    
+                  }
+                .widget_header {
+                    h4 {
+                        font-size: 18px;
+                        font-weight: 600;
+                    }
+                }
+                hr {
+                    color: $color-black;
+                }
+                ul {
+                    padding-left: 0;
+                    li {
+                        padding: 7px 0;
+                        a {
+                            display: flex !important;
+                            justify-content: space-between !important;
+                            color: $color-font;
+                            text-decoration: none;
+                            &:hover {
+                                color: $color-brand;
+                                span {
+                                    color: $color-brand !important;
+    
+                                   
+                                    height: 25px;
+                                    width: 36px;
+    
+                                    border-radius: 16%;
+    
+                                    display: inline-block;
+                                    text-align: center;
+                                    padding-top: 1px;
+                                }
+                            }
+                            span {
+                                color: $color-font !important;
+    
+                                height: 25px !important;
+                                width: 36px !important;
+    
+                                border-radius: 16% !important;
+    
+                                display: inline-block;
+                                text-align: center;
+                                padding-top: 1px;
+                            }
+                        }
+                    }
+                }
+    
+                
+            }
+    
+          
+        }
+    }
+}
+
+.input-group-text {
+    
+    background-color:$color-brand;
+    border:1px solid;
+    border-color: $color-brand;
+    }

theme_classic_store/static/src/scss/pages/_contact.scss

@@ -0,0 +1,113 @@
+.contact{
+    margin-top: 90px;
+    padding-bottom: 90px;
+
+    .c_left{
+        color: $color-brand2;
+
+        @media screen and(max-width:992px) {
+          margin-bottom: 80px;
+        }
+
+        h4{
+            font-size: 22px;
+            padding-bottom: 20px;
+        }
+
+        .mind{
+            font-size: 66px;
+            color: $color-brand2;
+            font-weight: 600;
+
+            @media screen and(max-width:992px) {
+                font-size: 50px;
+            }
+        }
+        p{
+            color: $color-font;
+            font-size: 14px;
+            padding-top: 25px;
+        }
+    }
+
+    .c_right{
+
+
+        .form-group{
+            padding: 20px 20px;
+
+            @media screen and(max-width:992px) {
+              padding: 0;
+              
+            }
+            .form-control {
+                border-radius: 2px;
+                height: 50px;
+                background-color: transparent;
+                color: #666;
+                box-shadow: none;
+                font-size: 15px;
+                margin-bottom: 20px;
+            }
+
+           
+
+            textarea{
+                height: 200px;
+            }
+        }
+    }
+}
+
+
+select {
+
+    .selected{
+        font-weight: 600;
+    }
+    cursor: pointer;
+    /* styling */
+    background-color: white;
+    border: 1px solid $select-border-color;
+    border-radius: 4px;
+    display: inline-block;
+    font: inherit;
+    line-height: 1.5em;
+    padding: 0.5em 3.5em 0.5em 1em;
+
+    /* reset */
+    margin: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    background-image: linear-gradient(45deg, transparent 50%, $select-border-color 50%),
+    linear-gradient(135deg, $select-border-color 50%, transparent 50%),
+    linear-gradient(to right, $select-border-color, $select-border-color);
+    background-position: calc(100% - 20px) calc(1em + 2px),
+    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
+    background-size: 5px 5px, 5px 5px, 1px 1.5em;
+    background-repeat: no-repeat;
+
+    /* Very imp: hide arrow in IE */
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: none;
+    }
+
+    &:focus {
+      background-image: linear-gradient(45deg, $select-focus-color 50%, transparent 50%),
+      linear-gradient(135deg, transparent 50%, $select-focus-color 50%), linear-gradient(to right, $select-focus-color, $select-focus-color);
+      background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;
+      background-size: 5px 5px, 5px 5px, 1px 1.5em;
+      background-repeat: no-repeat;
+      border-color: $select-focus-color;
+      outline: 0;
+    }
+  }

theme_classic_store/static/src/scss/pages/_dashboard.scss

@@ -0,0 +1,282 @@
+.dashboard {
+    margin-top: 90px;
+    margin-bottom: 40px;
+
+    .sidebar {
+        width: 100%;
+        text-align: center;
+        margin-bottom: 50px;
+        .profile_img {
+            max-width: 130px;
+            text-align: center;
+            margin: auto;
+            img {
+                width: 100%;
+                border-radius: 50%;
+            }
+        }
+
+        .user {
+            .user_name {
+                padding-top: 10px;
+                color: $color_brand2;
+                font-size: 18px;
+                font-weight: 700;
+                p {
+                    color: $color_font;
+                    margin-top: 5px;
+                    font-weight: 400;
+                }
+            }
+
+            margin-bottom: 90px;
+        }
+
+        .user_menu {
+            ul {
+                text-align: left;
+                font-weight: 700;
+                padding: 0 15px;
+
+                li {
+                    margin-bottom: 10px;
+                    align-items: baseline;
+                    display: flex;
+
+                    a {
+                        display: flex;
+                        align-items: baseline;
+                        color: $color_font;
+                        text-decoration: none;
+                        font-size: 16px;
+                        padding: 10px 20px;
+                        width: 100%;
+                        &:hover {
+                            color: $color_brand2;
+                        }
+                        .icon {
+                            padding-right: 10px;
+                        }
+                        .count {
+                            margin-left: auto;
+                            color: $color_font;
+                            height: 24px;
+                            width: 26px;
+                            border-radius: 50%;
+                            text-align: center;
+                            color: $color_font;
+
+                            &:hover {
+                                background-color: $color_brand;
+                                color: $color_white !important;
+                            }
+                        }
+                    }
+                }
+            }
+
+            li.active a {
+                background: $color-brand;
+                color: #fff;
+            }
+        }
+    }
+
+    .dashbord_content {
+        .right_head {
+            color: $color_brand2;
+            border: 1px solid;
+            border-color: transparent;
+            border-bottom-color: $color-border !important;
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+        }
+
+        .dash_head {
+            color: $color_brand2;
+            border: 1px solid;
+            border-color: transparent;
+            border-bottom-color: $color-border !important;
+            border-top-color: $color-border !important;
+            padding-left: 10px;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            font-weight: 700;
+        }
+
+        .dash_body {
+            .wrapper {
+                margin: 40px 0;
+                border: 1px solid;
+                border-color: transparent;
+                border-bottom-color: $color-border !important;
+                padding-bottom: 20px;
+
+                &:last-child {
+                    border: none !important;
+                }
+            }
+            .dash_img {
+                max-width: 100px;
+                padding-top: 25px;
+                img {
+                    width: 100%;
+                }
+            }
+
+            .dash_product {
+                h5 {
+                    padding-bottom: 10px;
+                }
+
+                ul {
+                    padding-left: 0;
+                    li {
+                        display: flex;
+                        justify-content: space-between;
+                        color: $color_font;
+
+                        @media screen and(max-width:768px){
+                         display: block;
+                         margin-bottom: 10px;
+                        }
+
+                        .active {
+                            color: $color-green;
+                        }
+                    }
+                }
+            }
+            .dash_cat {
+                font-size: 16px;
+                height: 10em;
+                display: flex;
+                align-items: center;
+                justify-content: end;
+            }
+            .dash_buttons {
+                display: flex;
+                justify-content: end;
+                height: 100%;
+                align-items: center;
+
+                @media screen and(max-width:768px){
+                   
+                    display: block;
+                }
+                ul {
+                    display: flex;
+                    padding-left: 0;
+
+                    @media screen and(max-width:568px){
+                        display: block;
+                    }
+                    li {
+                        max-width: 45px;
+
+                        margin-right: 8px;
+                        .view {
+                            &:hover {
+                                background-color: #3791bb;
+                                color: $color_white;
+                            }
+                        }
+                        .edit {
+                            &:hover {
+                                background-color: #e45ed9;
+                                color: $color_white;
+                            }
+                        }
+                        .paper {
+                            &:hover {
+                                background-color: #74e45e;
+                                color: $color_white;
+                            }
+                        }
+                        .delete {
+                            &:hover {
+                                background-color: #883d3d;
+                                color: $color_white;
+                            }
+                        }
+                        a {
+                            color: $color_brand2;
+                            font-size: 18px;
+                            width: 100%;
+                            display: block;
+                            border-radius: 50%;
+
+                            text-align: center;
+                            width: 40px;
+                            height: 40px;
+                            padding-top: 4px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .bottom {
+            display: flex;
+            justify-content: center;
+            padding-bottom: 50px;
+            nav {
+                .pagination {
+                    .page-item {
+                        border: none;
+                        .page-link {
+                            border: none;
+                            color: $color_font;
+                            padding: 15px 20px;
+border-radius: 7px;
+font-size: 18px;
+margin: 0 5px;
+@media screen and(max-width:456px) {
+    padding: 12px 16px !important;
+    font-size: 16px !important;
+    }
+                          
+                            &:hover {
+                                background-color: $color_brand;
+                                color: $color_white;
+                            }
+                        }
+                    }
+                    .page-item.active .page-link {
+                        z-index: 3;
+                        color: #fff;
+                        background-color: $color_brand;
+                        border-color: $color_brand;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+.modal-footer{
+    justify-content: space-between; 
+}
+
+.modal-body{
+    .model_img{
+        text-align: center;
+        margin: auto;
+        max-width: 200px;
+        padding-bottom: 20px;
+        img{
+            width: 100%;
+        }
+    }
+    .question{
+        text-align: center;
+        h4{
+            color: $color_brand2;
+           
+        }
+        p{
+            color: $color_font;
+        }
+    }
+}

theme_classic_store/static/src/scss/pages/_list.scss

@@ -0,0 +1,411 @@
+.Products_main {
+    margin-top: 90px;
+    margin-bottom: 90px;
+    .heading {
+        padding-bottom: 50px;
+        h3 {
+            text-align: left;
+            font-size: 25px;
+        }
+        p {
+            color: $color-font;
+        }
+    }
+
+    .product_sidebar {
+        padding: 0 25px;
+        .wrapper {
+            margin-bottom: 30px;
+            .widget_header {
+                h4 {
+                    font-size: 22px;
+                    font-weight: 600;
+                }
+            }
+            hr {
+                color: $color-black;
+            }
+            ul {
+                padding-left: 0;
+                li {
+                    padding: 10px 0;
+                    a {
+                        display: flex !important;
+                        justify-content: space-between !important;
+                        color: $color-brand2;
+                        text-decoration: none;
+                        &:hover {
+                            color: $color-brand;
+                            span {
+                                color: $color-white !important;
+
+                                background-color: $color-brand;
+                                height: 25px;
+                                width: 36px;
+
+                                border-radius: 16%;
+
+                                display: inline-block;
+                                text-align: center;
+                                padding-top: 1px;
+                            }
+                        }
+                        span {
+                            color: $color-font !important;
+
+                            height: 25px !important;
+                            width: 36px !important;
+
+                            border-radius: 16% !important;
+
+                            display: inline-block;
+                            text-align: center;
+                            padding-top: 1px;
+                        }
+                    }
+                }
+            }
+
+            .range_main {
+                position: relative;
+                margin-top: 40px;
+padding-left: 30px;
+
+                .range {
+                    width: 149px;
+                    height: 48px;
+                    border: 0;
+          background: $color-brand;
+                    position: absolute;
+                    top: 193%;
+                    // left: 71%;
+                    // margin-left: -117px;
+
+                    &:before,
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        top: 0;
+                        z-index: -1;
+                        height: 100%;
+                        width: 28px;
+                        background: silver;
+                        pointer-events: none;
+                    }
+                    &:before {
+                        left: -28px;
+                        border-radius: 5px 0 0 5px;
+                    }
+                    &:after {
+                        right: -28px;
+                        border-radius: 0 5px 5px 0;
+                    }
+                }
+                input {
+                    -webkit-appearance: none;
+                    position: absolute;
+                    width: calc(100% + 40px);
+                    height: 100%;
+                    margin: 0;
+                    background-color: transparent;
+                    outline: none;
+                    left: -20px;
+                    -webkit-tap-highlight-color: transparent;
+                }
+
+                .lbl-lft,
+                .lbl-rgt {
+                    position: absolute;
+                    top: -15px;
+                    color: #1a1a1a;
+                    font-size: 12px;
+                    font-weight: 700;
+                }
+                .lbl-lft {
+                    left: -28px;
+                }
+                .lbl-rgt {
+                    right: -28px;
+                    text-align: left;
+                }
+
+                .range-thumb {
+                    position: absolute;
+                    top: 0px;
+                    margin-left: -24px;
+                    border-radius: 50%;
+                    border: 5px solid #878484;
+                    background: white;
+                    height: 48px;
+                    width: 48px;
+                    outline: none;
+                    transition: transform 0.3s ease;
+                    text-align: center;
+                    font-size: 12px;
+                    line-height: 38px;
+                    color: #1a1a1a;
+                    font-weight: 700;
+                    pointer-events: none;
+                    &::before {
+                        display: none;
+                        content: "";
+                        position: absolute;
+                        z-index: 1;
+                        top: 53px;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        border-radius: 3px;
+                        width: 2px;
+                        height: 28px;
+                        margin-left: -3px;
+                        background: rgba(white, 0.25);
+                        box-shadow: 6px 0 0 rgba(white, 0.25);
+                    }
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        bottom: -5px;
+                        left: -5px;
+                        width: 48px;
+                        height: 10px;
+                        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgNDggMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3ICg0NTM5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+Q29tYmluZWQgU2hhcGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIGZpbGw9IiM2MTY4RTciPgogICAgICAgICAgICA8cGF0aCBkPSJNMTEuMTU0NjA2NCwyLjE4MjkyMDUxZS0xMiBMNC40NzIyMTMwMSwyLjE4MjkyMDUxZS0xMiBDNS40MjIyOTI4NiwxLjA2MTUxMjk4IDYsMi40NjMyOTExMyA2LDQgQzYsNy4zMTM3MDg1IDMuMzEzNzA4NSwxMCAwLDEwIEw0OCwxMCBDNDQuNjg2MjkxNSwxMCA0Miw3LjMxMzcwODUgNDIsNCBDNDIsMi40NjMyOTExMyA0Mi41Nzc3MDcxLDEuMDYxNTEyOTggNDMuNTI3Nzg3LDAgTDQzLjUyNzc4NywyLjE4MjkyMDUxZS0xMiBMMzYuODQ1MzkzNiwyLjE4MjkyMDUxZS0xMiBDMzMuNDYzMzI1NSwzLjEwNDc5MzA5IDI4Ljk1Mjk4NzQsNSAyNCw1IEMxOS4wNDcwMTI2LDUgMTQuNTM2Njc0NSwzLjEwNDc5MzA5IDExLjE1NDYwNjQsMi4xOTQyNDQ3OWUtMTIgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                    }
+                }
+                .resize {
+                    position: fixed;
+                    bottom: 20px;
+                    left: 0;
+                    width: 100%;
+                    text-align: center;
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #c8ccd4;
+                }
+
+                .hover + .range-thumb,
+                .active + .range-thumb {
+                    @media screen and (max-width: 768px) {
+                        transform: translateY(-48px);
+                    }
+                    &::before {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        .check {
+            margin-top: 90px;
+            padding-top: 60px;
+        }
+
+        .chekbox_wrapper {
+            margin-top: 20px;
+        }
+
+        /*Checkboxes styles*/
+        input[type="checkbox"] {
+            display: none;
+        }
+
+        input[type="checkbox"] + label {
+            display: block;
+            position: relative;
+            padding-left: 35px;
+            margin-bottom: 20px;
+            color: $color-font;
+            cursor: pointer;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+        }
+
+        input[type="checkbox"] + label:last-child {
+            margin-bottom: 0;
+        }
+
+        input[type="checkbox"] + label:before {
+            content: "";
+            display: block;
+            width: 20px;
+            height: 20px;
+            border: 1px solid $color-brand;
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0.6;
+            -webkit-transition: all 0.12s, border-color 0.08s;
+            transition: all 0.12s, border-color 0.08s;
+        }
+
+        input[type="checkbox"]:checked + label:before {
+            width: 10px;
+            top: -5px;
+            left: 5px;
+            border-radius: 0;
+            opacity: 1;
+            border-top-color: transparent;
+            border-left-color: transparent;
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+    }
+
+
+.product_right{
+
+    @media screen and(max-width:768px) {
+        margin-top: 70px;
+    }
+    .product_right_top {
+        .choose {
+.ch{
+    @media screen and(max-width:992px){
+        margin-right: 10px !important;
+    }
+}
+            display: flex;
+justify-content: space-between;
+
+
+   
+        
+    }
+
+        }
+
+        .views{
+            float: right;
+            display: flex;
+
+            @media screen and(max-width:768px){
+             float: none;
+             margin-top: 30px;
+            }
+
+            ul{
+                display: flex;
+
+                &:last-child{
+                    padding-right: 0;
+                }
+            }
+li{
+    padding-right: 20px;
+    a{
+        color: $color-brand2;
+        text-decoration: none;
+&:hover{
+    color: $color-brand;
+}
+
+       
+    }
+    
+}
+
+li.active a{
+    color: $color-brand !important;
+}
+        }
+    }
+
+.product_right_bottom_list{
+    padding-top: 20px;
+    margin-top: 50px;
+    .card{
+       
+        margin-bottom: 30px;
+.c_img{
+    max-width: 300px;
+    img{
+        width: 100%;
+    }
+}
+  
+        .card-body{
+            .card-title{
+                color: $color-brand2;
+                font-weight: 700;
+                letter-spacing: 0.05em;
+                font-size: $font-h5;
+            }
+            .list-group-item{
+                border: 0;
+                padding: 10px 10px 10px 0;
+                margin-bottom: 0 !important;
+              
+                margin-bottom: 10px;
+                a{
+                    color: $color-font;
+                    text-decoration: none;
+                }
+                span{
+                    padding-right: 10px;
+                }
+            }
+            .list-group-flush{
+          
+            }
+
+            p{
+                color: $color-font;
+            }
+        }
+        .card-rating{
+            padding-left: 16px;
+padding-bottom: 20px;
+padding-top: 5px;
+            .card-link{
+                color: $color-brand;
+                span{
+                font-size: $font-p;
+            }
+        }
+    }
+    }
+
+
+    .bottom {
+        display: flex;
+        justify-content: center;
+        padding-top: 50px;
+      
+        nav {
+            .pagination {
+                .page-item {
+                    border: none;
+                    .page-link {
+                        border: none;
+                        color: $color_font;
+                        padding: 15px 20px;
+border-radius: 7px;
+font-size: 18px;
+margin: 0 5px;
+@media screen and(max-width:456px) {
+padding: 12px 16px !important;
+font-size: 16px !important;
+}
+                      
+                        &:hover {
+                            background-color: $color_brand;
+                            color: $color_white;
+                        }
+                    }
+                }
+                .page-item.active .page-link {
+                    z-index: 3;
+                    color: #fff;
+                    background-color: $color_brand;
+                    border-color: $color_brand;
+                }
+            }
+        }
+    }
+    
+}
+
+}
+

theme_classic_store/static/src/scss/pages/_login.scss

@@ -0,0 +1,55 @@
+
+    .;{
+
+    
+  
+        
+
+        .personal_info , .mail_info ,.password_info{
+
+
+            .info_head {
+                width: 100%;
+                padding-top: 10px;
+                padding-bottom: 5px;
+                border: 1px solid;
+                border-color: transparent;
+                margin-bottom: 40px;
+            }
+
+            .form-group {
+                label {
+                    color: $color_font;
+                }
+
+                .form-control {
+                    border-radius: 2px;
+                    height: 50px;
+                    background-color: transparent;
+                    color: #666;
+                    box-shadow: none;
+                    font-size: 15px;
+                    margin-bottom: 20px;
+                }
+            }
+            
+
+            .form-check{
+                color: $color_font;
+                padding-bottom: 20px;
+            }
+        }
+
+        .mail_info{
+            border: 1px solid;
+            padding: 20px 30px;
+            border-color: $color-border;
+            border-radius: 5px;
+            .links{
+                margin-top: 10px;
+
+                .fp{padding-bottom: 15px;}
+            }
+        }
+    }
+

theme_classic_store/static/src/scss/pages/_package.scss

@@ -0,0 +1,68 @@
+.packages{
+    margin-top: 90px;
+    margin-bottom: 90px;
+
+    .package_head{
+        padding-top: 20px;
+       
+    }
+
+    .card{
+        margin-top: 50px;
+
+        &:hover{
+ -webkit-box-shadow: 0px 8px 13px 5px rgba(176,176,176,0.71);
+        -moz-box-shadow: 0px 8px 13px 5px rgba(176,176,176,0.71);
+        box-shadow: 0px 8px 13px 5px rgba(176,176,176,0.71);}
+        .card-body{
+            padding: 60px 20px;
+            span{
+                color: $color-brand;
+                font-size: 50px;
+            }
+
+            .card-title{
+                color: $color-brand2;
+                font-size: 25px;
+                font-weight: 700;
+                margin-top: 30px;
+            }
+            .card-text{
+                color: $color-brand2;
+                font-size: 25px;
+                margin-top: 20px;
+                font-weight: 700;
+                border: 1px solid;
+                border-color: transparent;
+                padding-bottom: 10px;
+                margin-left: 32px;
+                margin-right: 32px;
+                border-bottom-color: $color-border !important;
+                span{
+                    font-size: 20px;
+                    color: $color-brand2;
+                }
+            }
+
+            ul{
+                margin: 30px 0;
+                padding-left: 0;
+                font-size: 15px;
+
+               
+                .hh{
+                    padding-left: 10px;
+                    
+                }
+            }
+        }
+    }
+}
+.nn{
+    
+    display: flex !important;
+justify-content: center;
+align-items: baseline;
+color:$color-font;
+margin-bottom: 30px;
+}

theme_classic_store/static/src/scss/pages/_pages.scss

@@ -0,0 +1,15 @@
+@import './home/home';
+@import './dashboard';
+@import './about';
+@import './contact';
+@import './user-profile';
+@import './package';
+@import './single';
+@import './store';
+@import './products';
+@import './blog';
+@import './blog-single';
+@import './list';
+@import './404';
+@import './terms';
+@import './login';

theme_classic_store/static/src/scss/pages/_single.scss

@@ -0,0 +1,567 @@
+.advance-search{
+    margin-top: 35px;
+    margin-bottom: 20px;
+    color: $color-white;
+    .form-control {
+        display: block;
+        width: 100%;
+        height: 100%;
+        padding: .375rem .75rem;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #ffffff;
+        background-color:transparent;
+        background-clip: padding-box;
+        border: 1px solid #ffffff;
+       border-radius: 0 !important;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+
+        &::placeholder { 
+            color:$color-white;
+            opacity: 1;
+          }
+    }
+}
+
+
+//product
+
+.product_single{
+
+    margin-top: 90px;
+    margin-bottom: 90px;
+    .product_preview{
+
+        .head{
+            color: $color-brand2;
+            font-weight: 600;
+            font-size: 25px;
+        }
+        .product_type{
+            margin-top: 20px;
+            display: flex;
+            .wrapper{
+                padding-right: 40px;
+            }
+            span{
+                color: $color-font;
+                font-size: 14px;
+            }
+            a{
+                color: $color-brand2;
+                font-size: 15px;
+                padding-left: 5px;
+               
+                &:hover{
+                    color: grey;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    .trending_body1{
+        margin-top: 90px;
+        margin-bottom: 150px;
+
+        .card{
+           max-width: 450px;
+            border: none;
+            margin: auto;
+
+            @media screen and(max-width:768px) {
+    
+                      max-width: 350px;   
+            }
+            img{
+                width: 100%;
+            }
+        }
+    }
+
+
+    .tabs{
+        @media screen and(max-width:992px ){
+            margin-bottom: 70px;
+        }
+        
+       
+       .nav-pills{
+        justify-content: center;
+        .nav-item{
+           
+               .nav-link{
+                   border-radius: 0;
+                   padding: 20px 30px;
+                   color: $color-black;
+                   margin-right: 5px;
+
+                   &:hover{
+                       background-color: $color-brand;
+                       color: $color-white;
+                   }
+               }
+           
+        }
+       }
+
+       .tab-content{
+           .tab-pane{
+                .p_details{
+                    padding-top: 20px;
+                    h4{
+                        color: $color-brand2;
+                        font-weight: 700;
+                        font-size: 22px;
+                        margin-top: 10px;
+                        width: 100%;
+                        border: 1px solid;
+                        border-color: transparent;
+                        border-bottom-color: $color-border !important;
+                        padding-bottom: 10px;
+                    }
+                    p{
+                        color: $color-font;
+                        padding-top: 20px;
+                        line-height: 25px;
+                    }
+                    .youtube{
+                        width: 100%;
+                    }
+                }
+
+                .p_spec{
+                    padding-top: 20px;
+                    h4{
+                        color: $color-brand2;
+                        font-weight: 700;
+                        font-size: 22px;
+                        margin-top: 10px;
+                        width: 100%;
+                        border: 1px solid;
+                        border-color: transparent;
+                        border-bottom-color: $color-border !important;
+                        padding-bottom: 10px; 
+                    }
+                }
+
+                .P_review{
+                    padding-top: 20px;
+                    h4{
+                        color: $color-brand2;
+                        font-weight: 700;
+                        font-size: 22px;
+                        margin-top: 10px;
+                        width: 100%;
+                        border: 1px solid;
+                        border-color: transparent;
+                        border-bottom-color: $color-border !important;
+                        padding-bottom: 10px; 
+                    }
+                    .u_review{
+                        margin-top: 20px;
+                        margin-bottom: 50px;
+
+                        .wrapper{
+                            display: flex;
+                      
+                        }
+                        .user_img{
+                            max-width: 75px;
+                            margin-right: 50px;
+                            img{
+                                width: 100%;
+                            }
+                        }
+                        .review_details{
+                            padding-top: 20px;
+                            .rating{
+                                display: flex;
+                                span{
+
+                                    color: grey;
+                                    font-size: 14px;
+                                    padding-right: 10px;
+                                }
+                            }
+                            h5{
+                                padding: 10px 0;
+                            }
+
+                            .date{
+                                color: $color-font;
+                                padding-bottom: 10px;
+
+                            }
+                            p{
+                                color: $color-font;
+                                line-height: 25px;
+                            }
+                        }
+                    }
+                }
+
+                .sub_review{
+                    .rating{
+                        padding-top: 20px;
+                        span{
+                            color: $color-grey;
+                            font-size: 14px;
+                            padding-right: 10px;
+                            &:hover{
+                                color: $color-black;
+                            }
+                        }
+                    }
+                    .review-submit{
+                        margin-top: 20px;
+                     
+
+                        .form-control{
+                            height: 50px;
+                            margin-bottom: 20px;
+                        }
+                        textarea{
+                            height: 200px !important;
+                        }
+                    }
+                }
+           }
+       }
+    }
+
+    .single_sidebar{
+        .price{
+            background-color: $color-brand;
+            text-align: center;
+            padding: 30px;
+            margin-bottom: 50px;
+            p{
+                color: $color-white;
+               font-size: 18px;
+               font-weight: 600;
+               padding-bottom: 5px;
+            }
+
+            .value{
+                color: $color-white;
+                font-size: 30px;
+                font-weight: 700;
+            }
+        }
+
+        .user_info{
+            text-align: center;
+            padding-top: 20px;
+            .user_img{
+                max-width: 150px;
+                margin: auto;
+                img{
+                    border-radius: 50%;
+                    width: 100%;
+                }
+            }
+            h5{
+                color: $color-brand2;
+                margin-top: 30px;
+                font-size: 22px;
+                font-weight: 600;
+            }
+            .date{
+                color: $color-font;
+            }
+            a{
+                text-decoration: none;
+                color: $color-brand2;
+                font-size: 18x;
+                &:hover{
+                    color: $color-brand;
+                }
+            }
+            .buttons{
+                padding-top: 30px;
+                border: 1px solid;
+                border-color: transparent;
+                border-bottom-color: $color-border !important;
+                padding-bottom: 30px; 
+            }
+            .map{
+                width: 100%;
+margin-top: 30px;
+margin-bottom: 30px;
+                padding: 20px;
+                .mapouter {
+                    position: relative;
+                    text-align: right;
+                    height: 300px;
+                    width: 100%;
+                }
+
+                .gmap_canvas {
+                    overflow: hidden;
+                    background: none !important;
+                    height: 300px;
+                    width: 100%
+                }
+            
+            }
+
+            .side_rate{
+                p{
+                    font-size: 16px;
+                    padding-bottom: 25px;
+                    font-weight: 600;
+                    border: 1px solid;
+                border-color: transparent;
+                border-bottom-color: $color-border !important;
+
+                }
+
+                .rating{
+                    padding-top: 15px;
+                    border: 1px solid;
+                border-color: transparent;
+                border-bottom-color: $color-border !important;
+                padding-bottom: 25px;
+                    span{
+                        color: $color-hover;
+                        font-size: 18px;
+                        margin-right: 12px;
+                    }
+                }
+
+               
+            }
+
+            .listing{
+                margin-top: 30px;
+                background-color: $color-brand;
+                padding: 30px;
+                margin-bottom: 50px;
+                border-radius: 3px;
+                p{
+                    color: $color-white;
+                   font-size: 18px;
+                   font-weight: 600;
+                   padding-bottom: 5px;
+                   text-align: left !important;
+                }
+                
+            }
+
+        }
+    }
+}
+.safty{
+                   
+    h5{
+        color: $color-brand2;
+        font-weight: 600;
+        text-align: left !important;
+        border: 1px solid;
+        border-color: transparent;
+        border-bottom-color: $color-border !important;
+        padding-bottom: 25px;
+    }
+    p{
+        color: $color-font;
+        line-height: 22px;
+        text-align: left !important;
+        border: 1px solid;
+        border-color: transparent;
+        border-bottom-color: $color-border !important;
+        padding-bottom: 25px;
+    }
+}
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+    color: #fff !important;
+    background-color:$color-brand;
+}
+
+// .owl-carousel button.owl-dot span {
+//     height: 100px;
+//     width: 100px;
+//     color: $color-black;
+// padding-left: 20px;
+  
+//     display: flex;
+//     background-position: center;
+//     background-size: cover;
+//     background-repeat: no-repeat;
+//     display: block;
+//     font-weight: 700;
+//     margin: 5px;
+// }
+// .owl-carousel button.owl-dot.active span{
+//     color:$color-hover;
+// }
+
+
+// .owl-carousel{
+
+//     .owl-dots{
+//             position: absolute;
+// width: 100%;
+
+   
+// }
+// }
+
+
+@keyframes fadeInOut {
+    0% {
+      opacity: 0;
+    }
+  
+    45% {
+      opacity: 1;
+    }
+  
+    100% {
+      opacity: 0%;
+    }
+  }
+
+
+  .trending_body1{
+    .owl-carousel .owl-nav{
+        overflow: hidden;
+        height: 0px;
+      
+      }
+    
+      .owl-carousel .nav-btn{
+        height: 38px;
+        position: absolute;
+        width: 38px;
+        cursor: pointer;
+        top: 100px !important;
+        border-radius: 50%;
+        padding-top: 8px;
+        padding-left: 2px;
+    }
+    
+    .owl-carousel .owl-prev.disabled,
+    .owl-carousel .owl-next.disabled{
+      pointer-events: none;
+      opacity: 0.2;
+    }
+    
+    .owl-carousel .prev-slide{
+    background-color: $color-brand;
+        left: -33px;
+    
+    @media screen and(max-width:768px) {
+        
+        left:-13px;
+    
+    }
+    @media screen and(max-width:568px) {
+        
+        left:0 !important;
+        top: 31px !important;
+    
+    }
+    
+        span{
+            color: white;
+            font-size: 21px; 
+            padding-right: 5px;
+            
+        }
+    }
+    .owl-carousel .next-slide{
+        background-color:  $color-brand;
+        right: -33px;
+        @media screen and(max-width:768px) {
+        
+            right:-13px;
+        
+        }
+        @media screen and(max-width:568px) {
+        
+            right:0 !important;
+            top: 31px !important;
+        }
+        span{
+            color: $color-white;
+            font-size: 21px; 
+            
+        }
+    
+    }
+    .owl-carousel .prev-slide:hover{
+       background-position: 0px -53px;
+    }
+    .owl-carousel .next-slide:hover{
+      background-position: -24px -53px;
+    }
+    
+    .slider-nav { 
+        
+        // position: absolute; 
+        // bottom: 0; 
+        // left: 0; right: 0;
+        //  z-index: 10;
+          background-color: #fff; 
+          margin-bottom: 75px;
+        }
+            
+    .thumbs { width: 100%; display: table; table-layout: fixed; padding: 0; margin: 0;  }
+    
+    .thumb { width: 5%; display: table-cell; vertical-align: middle; position: relative; 
+         cursor: pointer; background-color: #000; }
+    .thumb img { width: 100%; height: auto; display: block; }
+    .thumb span { font-size: 1.2em; 
+        line-height: 1; color: transparent;
+         text-align: center; font-weight: bold;
+          text-decoration: none; display: block;
+           position: absolute;
+            top: 50%; left: 0; 
+            right: 0; padding: 1em 0;
+             margin-top: -1.6em; 
+            
+     }
+    
+    // .thumb:hover span,
+    // .thumb.active span { color: rgba(255, 255, 255, 0); border-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0.253); }
+    
+    
+    
+    .owl-carousel button.owl-dot span {
+      
+        display: inline-block;
+        color:transparent;
+       
+        font-size: 20px;
+        font-weight: 700;
+        margin: 5px;
+    }
+    .owl-carousel button.owl-dot.active span{
+        color:$color-font;
+        background-color:#64646400;
+        height: 100%;
+        width: 100%
+    }
+    
+    
+    .owl-carousel{
+    
+        .owl-dots{
+                position: absolute;
+                width: 5%; display: table-cell; vertical-align: middle; position: relative; 
+                cursor: pointer;
+        width: 100%; table-layout: fixed; padding: 0; margin: 0;
+        display: flex;
+        position: absolute;
+        bottom: -58px;
+      
+    }
+    }
+    .owl-carousel button.owl-dot{
+    width: 100%;  table-layout: fixed; padding: 0; margin: 0;
+    }
+  }
+  
+ 

theme_classic_store/static/src/scss/pages/_store.scss

@@ -0,0 +1,198 @@
+.store{
+    margin-top: 90px;
+margin-bottom: 90px;
+
+.Store_slider{
+    .item{
+        text-align: center;
+        a{
+            color: $color-black;
+            text-decoration: none;
+        
+            &:hover{
+             color: $color-brand;
+            }
+            h5{
+                margin-top: 10px;
+                padding: 10px;
+                font-size: 16px !important;
+                color: $color-brand2;
+                &:hover{
+                    color: $color-black !important;
+                   }
+            }
+        }
+
+        li{
+           
+            font-size: 37px;
+        }
+        
+    }
+
+    .owl-carousel .nav-btn{
+        height: 38px;
+        position: absolute;
+        width: 38px;
+        cursor: pointer;
+        top: 50px !important;
+        border-radius: 50%;
+        padding-top: 8px;
+        padding-left: 2px;
+    }
+}
+  
+}
+ 
+.more{
+
+padding-top: 50px;
+margin-bottom: 90px;
+    .top_heading{
+        margin-bottom: 60px;
+         h3{
+             color: $color-brand2;
+             font-weight: 700;
+             font-size: $font-sub-heading;
+             letter-spacing: 0.05em;
+             text-align: center;
+     position: relative;
+
+     &:before{
+        content: " ";
+display: block;
+margin: 0 auto;
+position: absolute;
+top: 50px;
+left: 0;
+right: 0;
+width: 127px;
+height: 2px;
+background-color: #e0e0e0;
+    }
+    &:after{
+        content: " ";
+display: block;
+margin: 0 auto;
+position: absolute;
+bottom: -17px;
+left: 0;
+right: 0;
+width: 50px;
+height: 4px;
+background-color: $color-brand;
+    }
+
+
+         }
+     
+       
+        
+       
+     }
+
+     
+
+     .links{
+        margin-bottom: 25px;
+        @media screen and(max-width:576px) {
+            text-align: center;
+        }
+
+        .hash{
+            padding-left: 15px;
+            width: 100%;
+            color: $color-brand2;
+            font-size: 25px;
+            font-weight: 700;
+            border: 1px solid;
+                   border-color: transparent;
+                   border-bottom-color: $color-border !important;
+                   padding-bottom: 20px; 
+                   margin-bottom: 20px;
+        }
+         .store-list{
+             padding-left: 0;
+            li{
+                padding: 15px 0;
+            }
+             a{
+                 color: $color-font;
+                 font-size: 16px;
+                 &:hover{
+                     color: $color-brand;
+                 }
+             }
+         }
+     }
+}
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+    color: black;
+    background-color:white;
+}
+
+@keyframes fadeInOut {
+    0% {
+      opacity: 0;
+    }
+  
+    45% {
+      opacity: 1;
+    }
+  
+    100% {
+      opacity: 0%;
+    }
+  }
+  
+  .owl-carousel .owl-nav{
+    overflow: hidden;
+    height: 0px;
+  
+  }
+
+
+
+.owl-carousel .owl-prev.disabled,
+.owl-carousel .owl-next.disabled{
+  pointer-events: none;
+  opacity: 0.2;
+}
+
+.owl-carousel .prev-slide{
+background-color: $color-brand;
+    left: 0px;
+    span{
+        color: $color-white;
+        font-size: 21px; 
+        padding-right: 5px;
+        
+    }
+}
+.owl-carousel .next-slide{
+    background-color:  $color-brand;
+    right: 0px;
+    span{
+        color: $color-white;
+        font-size: 21px; 
+        
+    }
+
+}
+.owl-carousel .prev-slide:hover{
+   background-position: 0px -53px;
+}
+.owl-carousel .next-slide:hover{
+  background-position: -24px -53px;
+}
+
+.slider-nav { 
+    
+    // position: absolute; 
+    // bottom: 0; 
+    // left: 0; right: 0;
+    //  z-index: 10;
+      background-color: #fff; 
+      margin-bottom: 75px;
+    }
+    

theme_classic_store/static/src/scss/pages/_terms.scss

@@ -0,0 +1,19 @@
+.terms{
+    margin: 90px 0;
+    .terms-condition-content{
+
+        @media screen and(max-width:576px) {
+            padding: 0 30px;
+        }
+        .t_head{
+            color: $color-brand2;
+            font-size: 18px;
+            text-align: left;
+        }
+
+        p{
+            color: $color-font;
+            line-height: 30px;
+        }
+    }
+}

theme_classic_store/static/src/scss/pages/_user-profile.scss

@@ -0,0 +1,155 @@
+.user_profile {
+    margin-top: 90px;
+    margin-bottom: 90px;
+
+    .sidebar {
+        width: 100%;
+        text-align: center;
+        .profile_img {
+            max-width: 150px;
+            text-align: center;
+            margin: auto;
+
+            img {
+                width: 100%;
+                border-radius: 50%;
+                border: 8px solid;
+                border-color: $color-border;
+            }
+        }
+
+        .user {
+            .user_name {
+                padding-top: 10px;
+                color: $color_brand2;
+                font-size: 18px;
+                font-weight: 700;
+            }
+
+            margin-bottom: 90px;
+        }
+
+        .user_menu {
+            ul {
+                text-align: left;
+
+                padding: 0 15px;
+
+                li {
+                    margin-bottom: 10px;
+                    align-items: baseline;
+                    display: flex;
+
+                    a {
+                        display: flex;
+                        align-items: baseline;
+                        color: $color_brand2;
+                        text-decoration: none;
+                        font-size: 16px;
+                        padding: 10px 20px;
+                        width: 100%;
+                        &:hover {
+                            color: $color_brand;
+                        }
+
+                        .count {
+                            margin-left: auto;
+                            color: $color_font;
+                            height: 24px;
+                            width: 26px;
+                            border-radius: 50%;
+                            text-align: center;
+                            color: $color_font;
+
+                            &:hover {
+                                background-color: $color_brand;
+                                color: $color_white !important;
+                            }
+                        }
+                    }
+                }
+            }
+
+            li.active a {
+                background: #5672f9;
+                color: #fff;
+            }
+        }
+    }
+
+    .Profile_content {
+
+        @media screen and(max-width:992px) {
+            margin-top: 70px;
+          }
+  
+        .heading {
+
+            margin-bottom: 45px;
+            h4 {
+                color: $color_brand2;
+                font-size: 25px;
+                text-align: left;
+            }
+            p {
+                color: $color_font;
+                font-size: 14px;
+                padding-top: 10px;
+            }
+        }
+
+        .personal_info , .mail_info ,.password_info{
+
+
+            .info_head {
+                width: 100%;
+                padding-top: 10px;
+                padding-bottom: 5px;
+                border: 1px solid;
+                border-color: transparent;
+                border-bottom-color: $color-border !important;
+                margin-bottom: 20px;
+            }
+
+            .form-group {
+                label {
+                    color: $color_font;
+                }
+
+                .form-control {
+                    border-radius: 2px;
+                    height: 50px;
+                    background-color: transparent;
+                    color: #666;
+                    box-shadow: none;
+                    font-size: 15px;
+                    margin-bottom: 20px;
+                }
+            }
+            .choose-file {
+                align-items: baseline;
+
+                i {
+                    background-color: $color_brand;
+                    margin-right: 10px;
+                    height: 46px;
+                    width: 49px;
+                    padding-top: 13px;
+                    color: white;
+                    border-radius: 50%;
+                    font-size: 19px;
+                }
+            }
+
+            .form-check{
+                color: $color_font;
+                padding-bottom: 20px;
+            }
+        }
+
+        .mail_info{
+            margin-top: 90px;
+            
+        }
+    }
+}

theme_classic_store/static/src/scss/pages/home/_categories.scss

@@ -0,0 +1,161 @@
+.categories {
+    margin-top: 90px;
+    padding-bottom: 90px;
+    .top_heading2 {
+        margin-bottom: 60px;
+        position: relative;
+        h3 {
+            color: $color-brand2;
+            font-weight: 700;
+            font-size: $font-sub-heading;
+            letter-spacing: 0.05em;
+            text-align: center;
+        }
+        p {
+            color: $color-font;
+            font-size: $font-p;
+            margin-top: 12px;
+        }
+        .bottom_line {
+            &:before {
+                content: " ";
+                display: block;
+                margin: 0 auto;
+                position: absolute;
+                bottom: -30px;
+                left: 0;
+                right: 0;
+                width: 127px;
+                height: 2px;
+                background-color: #e0e0e0;
+            }
+            &:after {
+                content: " ";
+                display: block;
+                margin: 0 auto;
+                position: absolute;
+                bottom: -30px;
+                left: 0;
+                right: 0;
+                width: 50px;
+                height: 4px;
+                background-color: $color-brand;
+            }
+        }
+    }
+    .wrapper {
+        padding-top: 40px;
+        .c_wrapper{
+
+            -webkit-box-shadow: 0px 7px 7px 4px rgba(240,240,240,1);
+-moz-box-shadow: 0px 7px 7px 4px rgba(240,240,240,1);
+box-shadow: 0px 7px 7px 4px rgba(240,240,240,1);
+&:hover{
+    background-color: #eeeee6a8;
+}
+           .categories_single {
+            text-align: center !important;
+            padding-bottom: 10px;
+            .icon {
+                color: $color-white;
+                background-color: #ccdb38;
+                height: 40px;
+                width: 40px;
+                padding-top: 13px;
+                border-radius: 50%;
+                font-size: 14px;
+                -webkit-box-shadow: 0 0 0px 4px #b4b87659;
+                -moz-box-shadow: 0 0 0px 4px #b4b87659;
+                box-shadow: 0 0 0px 4px #b4b87659;
+                margin-bottom: 15px;
+            }
+            .c_img{
+                height: 80px;
+                width: 80px;
+                padding-top: 0;
+                border-radius: 50%;
+                margin: auto;
+                -webkit-box-shadow: 0 0 0px 4px #b4b87659;
+                -moz-box-shadow: 0 0 0px 4px #b4b87659;
+                box-shadow: 0 0 0px 4px #b4b87659;
+                margin-bottom: 15px;
+
+                img{
+                    width: 100%;
+                    border-radius: 50%;
+                }
+            }
+            .fa-apple {
+                background-color: #d346bb;
+                -webkit-box-shadow: 0 0 0px 4px #d346bb88;
+                -moz-box-shadow: 0 0 0px 4px #d346bb88;
+                box-shadow: 0 0 0px 4px #d346bb88;
+            }
+            .fa-home {
+                background-color: #8f46d3;
+                -webkit-box-shadow: 0 0 0px 4px #8f46d367;
+                -moz-box-shadow: 0 0 0px 4px #8f46d367;
+                box-shadow: 0 0 0px 4px #8f46d367;
+            }
+            .fa-shopping-basket {
+                background-color: #46a6d3;
+                -webkit-box-shadow: 0 0 0px 4px #46a6d359;
+                -moz-box-shadow: 0 0 0px 4px #46a6d359;
+                box-shadow: 0 0 0px 4px #46a6d359;
+            }
+            .fa-briefcase {
+                background-color: #095775;
+                -webkit-box-shadow: 0 0 0px 4px#09567563;
+                -moz-box-shadow: 0 0 0px 4px#09567563;
+                box-shadow: 0 0 0px 4px#09567563;
+            }
+            .fa-car {
+                background-color: #539b51;
+                -webkit-box-shadow: 0 0 0px 4px #549b5169;
+                -moz-box-shadow: 0 0 0px 4px #549b5169;
+                box-shadow: 0 0 0px 4px #549b5169;
+            }
+            .fa-paw {
+                background-color: #d3ad46;
+                -webkit-box-shadow: 0 0 0px 4px #d3ad4675;
+                -moz-box-shadow: 0 0 0px 4px #d3ad4675;
+                box-shadow: 0 0 0px 4px #d3ad4675;
+            }
+            h5 {
+                color: $color-brand2;
+                font-weight: 700;
+                font-size: $font-h5;
+            }
+        }
+        .categories_list {
+            margin-top: 20px;
+            padding: 0 20px;
+            margin-bottom: 40px;
+            li {
+                display: flex;
+                justify-content: space-between;
+                color: $color-font;
+                padding-bottom: 20px;
+                align-items: center;
+                @media screen and(max-width:996px) {
+                    justify-content: space-around;
+                }
+                a {
+                    color: $color-font;
+                }
+
+                span{
+                    background-color: $color-brand;
+                    padding: 5px;
+                    border-radius: 50%;
+                    height: 35px;
+                    width: 35px;
+                    text-align: center;
+                    color: white;
+                }
+            }
+        }  
+        }
+       
+    }
+}

theme_classic_store/static/src/scss/pages/home/_cta.scss

@@ -0,0 +1,20 @@
+.ctaa{
+    background-image: linear-gradient(9deg, rgba(0, 0, 0, 0.548), 
+    rgba(0, 0, 0, 0.65)), url(./../images/call-to-action/cta-background.jpg);
+    text-align: center;
+padding: 100PX 0;
+background-size: cover;
+background-position: center;
+  .wrapper{
+      text-align: center !important;
+      color: $color-white;
+      width: 100%;
+      margin-bottom: 30px;
+  }
+
+  .ct_buttons{
+    display: flex;
+justify-content: center;
+
+  }
+}

theme_classic_store/static/src/scss/pages/home/_home.scss

@@ -0,0 +1,4 @@
+@import './search';
+@import './trending';
+@import './categories';
+@import './cta';

theme_classic_store/static/src/scss/pages/home/_trending.scss

@@ -0,0 +1,103 @@
+.trending{
+    margin-top: 90px;
+    // padding-bottom: 90px;
+    .top_heading{
+   margin-bottom: 60px;
+   position: relative;
+    h3{
+        color: $color-brand2;
+        font-weight: 700;
+        font-size: $font-sub-heading;
+        letter-spacing: 0.05em;
+        text-align: center;
+
+    }
+
+    p{
+        color: $color-font;
+        font-size: $font-p;
+        margin-top: 12px;
+    }
+
+
+    .bottom_line{
+        &:before{
+            content: " ";
+    display: block;
+    margin: 0 auto;
+    position: absolute;
+    bottom: -30px;
+    left: 0;
+    right: 0;
+    width: 127px;
+    height: 2px;
+    background-color: #e0e0e0;
+        }
+        &:after{
+            content: " ";
+    display: block;
+    margin: 0 auto;
+    position: absolute;
+    bottom: -30px;
+    left: 0;
+    right: 0;
+    width: 50px;
+    height: 4px;
+    background-color: $color-brand;
+        }
+    }
+ 
+  
+}
+.trending_body{
+padding-top: 40px;
+    .card{
+
+  
+        .card-body{
+            .card-title{
+                color: $color-brand2;
+                font-weight: 700;
+                letter-spacing: 0.05em;
+                font-size: $font-h5;
+            }
+            .list-group-item{
+                border: 0;
+                padding: 10px 10px 10px 0;
+                margin-bottom: 0 !important;
+              
+                margin-bottom: 10px;
+                a{
+                    color: $color-font;
+                    text-decoration: none;
+                }
+                span{
+                    padding-right: 10px;
+                }
+            }
+            .list-group-flush{
+                display: ruby;
+
+                @media screen and(max-width:768px) {
+                    display: block;
+                }
+            }
+
+            p{
+                color: $color-font;
+            }
+        }
+        .card-rating{
+            padding-left: 16px;
+padding-bottom: 20px;
+padding-top: 5px;
+            .card-link{
+                color: $color-brand;
+                span{
+                font-size: $font-p;
+            }
+        }
+    }
+    }
+}
+}

theme_classic_store/static/src/scss/style.scss

@@ -0,0 +1,13 @@
+//Google font
+// @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;500;600;700;800;900;1000&family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800;900&display=swap');
+
+
+//Global
+
+@import './variables';
+@import './normalize';
+@import './common';
+@import './components/components';
+@import './layout/layouts';
+@import './pages/pages';

theme_classic_store/views/classic_store_config_views.xml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- This record defines an action window for the "Classic Store Configuration" page.
+    It sets the name of the page, the model it will use, and the view mode (tree and form). -->
+    <record id="classic_store_config_action" model="ir.actions.act_window">
+        <field name="name">Classic Store Configuration</field>
+        <field name="type">ir.actions.act_window</field>
+        <field name="res_model">classic.store.config</field>
+        <field name="view_mode">tree,form</field>
+    </record>
+    <!--  This record defines the tree view for the "Classic Store Configuration" page. It sets the name, model,
+    and arch of the view, which includes a single field for the name. -->
+    <record id="classic_store_config_view_tree" model="ir.ui.view">
+        <field name="name">classic.store.config.view.tree</field>
+        <field name="model">classic.store.config</field>
+        <field name="arch" type="xml">
+            <tree create="0" delete="false">
+                <field name="name"/>
+            </tree>
+        </field>
+    </record>
+    <!-- This record defines the form view for the "Classic Store Configuration" page.
+    It sets the name, model, and arch of the view, which includes two groups: one for the price filter
+    with a single field for the max price, and one for trending products with a many2many_tags widget
+    for the trending product IDs. -->
+    <record id="classic_store_config_view_form" model="ir.ui.view">
+        <field name="name">classic.store.config.view.form</field>
+        <field name="model">classic.store.config</field>
+        <field name="arch" type="xml">
+            <form create="0" delete="false">
+                <sheet>
+                    <field name="name" invisible="1"/>
+                    <group>
+                        <group string="Price Filter">
+                            <field name="max_price" required="1"/>
+                        </group>
+                    </group>
+                    <group>
+                        <group string="Trending Products">
+                            <field name="trending_product_ids"
+                                   widget="many2many_tags"/>
+                        </group>
+                    </group>
+                </sheet>
+            </form>
+        </field>
+    </record>
+    <!-- Menu item for the "Classic Store" configuration page, which appears under the
+    "Website" global configuration menu. It sets the name, parent, sequence, and action for the menu item. -->
+    <menuitem id="classic_store_config_menu" name="Classic Store"
+              parent="website.menu_website_global_configuration"
+              sequence="15"
+              action="classic_store_config_action"/>
+</odoo>

theme_classic_store/views/http_routing_templates.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="classic_store_error_404" name="Classic Store 404"
+              inherit_id="http_routing.404" customize_show="True">
+        <!-- The template inherits from "http_routing.404" and customizes it to replace the content of a div element
+        with a custom error message and image. -->
+        <xpath expr="//div[@class='container']" position="replace">
+            <section class="form">
+                <div class="container">
+                    <div class="error">
+                        <div class="row">
+                            <div class="col-6 mx-auto">
+                                <div class="message">
+                                    <div class="wrapper_img">
+                                        <img src="theme_classic_store/static/src/images/404/404.png"/>
+                                    </div>
+                                    <div class="oops">Oops</div>
+                                    <p>
+                                        Something went wrong,we can't find the
+                                        page that you are looking for :(But
+                                        there
+                                        is a
+                                        lot more for you!
+                                    </p>
+                                    <a href="/" class="btn btn-primary">
+                                        Go Home
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </xpath>
+    </template>
+</odoo>

theme_classic_store/views/snippets/classic_store_aboutus_templates.xml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <template id="s_classic_store_about" name="About Us">
+        <!-- This XML code defines a template for the "About Us" page of a website.
+        Includes sections for a banner and an introduction with text and an image. -->
+        <section class="banner_about">
+            <div class="container">
+                <h3>About Us</h3>
+            </div>
+        </section>
+        <section class="about">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-6 col-12">
+                        <div class="about_img">
+                            <img src="/theme_classic_store/static/src/images/about/about.jpg"/>
+                        </div>
+                    </div>
+                    <div class="col-lg-6 col-12 mt-md-5">
+                        <div class="about_left">
+                            <h4>Introduction</h4>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur
+                                adipiscing elit. Nunc est justo, aliquam nec
+                                tempor fermentum, commodo et libero.
+                                Quisque et rutrum arcu. Vivamus dictum tincidunt
+                                magna id euismod. Nam sollicitudin mi
+                                quis orci lobortis feugiat.
+                            </p>
+                            <h4>How Can We Help</h4>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur
+                                adipiscing elit. Nunc est justo, aliquam nec
+                                tempor fermentum, commodo et libero. Quisque et
+                                rutrum arcu. Vivamus dictum tincidunt
+                                magna id euismod. Nam sollicitudin mi quis orci
+                                lobortis feugiat. Lorem ipsum dolor sit
+                                amet, consectetur adipiscing elit. Nunc est
+                                justo, aliquam nec tempor fermentum, commodo
+                                et libero. Quisque et rutrum arcu. Lorem ipsum
+                                dolor sit amet, consectetur adipiscing
+                                elit. Nunc est justo, aliquam nec tempor
+                                fermentum, commodo et l
+                                ibero. Quisque et rutrum arcu. Vivamus dictum
+                                tincidunt magna id euismod. Nam
+                                sollicitudin mi quis orci lobortis feugiat.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

theme_classic_store/views/snippets/classic_store_banner_templates.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <template id="s_classic_store_banner" name="Banner">
+        <!-- the template defines a banner section with a card element displaying a message
+        and a popular categories section with clickable buttons. -->
+        <section class="banner">
+            <div class="container">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Buy &amp; Sells Near You</h5>
+                        <p class="card-text">Join the millions who buy and sell
+                            from each other
+                            <br/>
+                            everyday in local communities around the world
+                        </p>
+                    </div>
+                </div>
+                <div class="populor text-center">
+                    <h4>POPULAR CATEGORIES</h4>
+                    <div class="populor-buttons">
+                        <a href="" class="btn btn-pop">
+                            <span class="fa fa-bed"/>
+                            Hotel
+                        </a>
+                        <a href="" class="btn btn-pop"><span
+                                class="fab fa-grav"/>Fitness
+                        </a>
+                        <a href="" class="btn btn-pop"><span
+                                class="fas fa-car-alt"/>Car
+                        </a>
+                        <a href="" class="btn btn-pop"><span
+                                class="fab fa-android"/>Gadgets
+                        </a>
+                        <a href="" class="btn btn-pop"><span
+                                class="fa fa-coffee"/>Cafe
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="oe_structure"/>
+        </section>
+    </template>
+</odoo>