feat：模板

app/Helpers/SiteCache.php

@@ -0,0 +1,137 @@
+<?php
+
+namespace App\Helpers;
+
+use Illuminate\Support\Facades\Cache;
+use App\Models\DistAdminDistributor;
+
+class SiteCache
+{
+    /**
+     * 获取或缓存商店信息
+     *
+     * @param string|null $domain
+     * @param int $seconds 缓存时间（秒）
+     * @return Dist|null
+     */
+    public static function getDist(?string $domain = null, int $seconds = 600): ?string
+    {
+        if (is_null($domain)) {
+            return null; // 如果未传入域名，返回 null
+        }
+
+        return Cache::tags([$domain, 'dist'])->remember("dist_{$domain}", $seconds, function () use ($domain) {
+            return DistAdminDistributor::where('custom_domain', $domain)
+                ->orWhere('secondary_domain', $domain)
+                ->first();
+        });
+    }
+
+    /**
+     * 清除商店信息缓存
+     *
+     * @param string|null $domain
+     * @return void
+     */
+    public static function clearDistCache(?string $domain = null): void
+    {
+        if (is_null($domain)) {
+            return; // 如果未传入域名，不执行清除操作
+        }
+
+        Cache::tags([$domain, 'dist'])->forget("dist_{$domain}");
+    }
+
+    /**
+     * 获取或缓存商品信息
+     *
+     * @param string|null $domain
+     * @param int|null $productId
+     * @param int $seconds 缓存时间（秒）
+     * @return Product|null
+     */
+    public static function getProduct(?string $domain = null, ?int $productId = null, int $seconds = 600): ?Product
+    {
+        if (is_null($domain) || is_null($productId)) {
+            return null; // 如果未传入 domain 或 productId，返回 null
+        }
+
+        return Cache::tags([$domain, 'product'])->remember("product_{$productId}", $seconds, function () use ($productId) {
+            return Product::find($productId);
+        });
+    }
+
+    /**
+     * 清除商品信息缓存
+     *
+     * @param string|null $domain
+     * @param int|null $productId
+     * @return void
+     */
+    public static function clearProductCache(?string $domain = null, ?int $productId = null): void
+    {
+        if (is_null($domain) || is_null($productId)) {
+            return; // 如果未传入 domain 或 productId，不执行清除操作
+        }
+
+        Cache::tags([$domain, 'product'])->forget("product_{$productId}");
+    }
+
+    /**
+     * 获取或缓存文章信息
+     *
+     * @param string|null $domain
+     * @param int|null $articleId
+     * @param int $seconds 缓存时间（秒）
+     * @return Article|null
+     */
+    public static function getArticle(?string $domain = null, ?int $articleId = null, int $seconds = 600): ?Article
+    {
+        if (is_null($domain) || is_null($articleId)) {
+            return null; // 如果未传入 domain 或 articleId，返回 null
+        }
+
+        return Cache::tags([$domain, 'article'])->remember("article_{$articleId}", $seconds, function () use ($articleId) {
+            return Article::find($articleId);
+        });
+    }
+
+    /**
+     * 清除文章信息缓存
+     *
+     * @param string|null $domain
+     * @param int|null $articleId
+     * @return void
+     */
+    public static function clearArticleCache(?string $domain = null, ?int $articleId = null): void
+    {
+        if (is_null($domain) || is_null($articleId)) {
+            return; // 如果未传入 domain 或 articleId，不执行清除操作
+        }
+
+        Cache::tags([$domain, 'article'])->forget("article_{$articleId}");
+    }
+
+    /**
+     * 清除某一域名下的所有缓存
+     *
+     * @param string $domain
+     * @return void
+     */
+    public static function clearAllDomainCache(string $domain): void
+    {
+        Cache::tags([$domain])->flush(); // 清除该域名标签下的所有缓存
+    }
+
+    /**
+     * 清除某一域名下特定类型的缓存
+     *
+     * @param string $domain
+     * @param string $type
+     * @return void
+     */
+    public static function clearSpecificTypeCache(string $domain, string $type): void
+    {
+        Cache::tags([$domain, $type])->flush(); // 清除该域名下特定类型的缓存
+    }
+}

app/Helpers/helpers.php

@@ -0,0 +1,24 @@
+<?php
+
+// 检查是否已存在此函数，避免重复定义
+if (!function_exists('getDomain')) {
+    /**
+     * 获取当前请求的完整域名（包括协议）
+     *
+     * @return string
+     */
+    function getDomain() {
+        return request()->getSchemeAndHttpHost();
+    }
+}
+
+if (!function_exists('getHost')) {
+    /**
+     * 获取当前请求的主机名
+     *
+     * @return string
+     */
+    function getHost() {
+        return request()->getHost();
+    }
+}

app/Http/Controllers/HomeController.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Services\LiquidRenderer;
+use Illuminate\Http\Request;
+
+class HomeController extends Controller
+{
+    function __construct()
+    {
+
+    }
+
+
+    public function index()
+    {
+
+        //模板支持多级目录，需要目录符号
+        $output = LiquidRenderer::render('home.liquid', [
+            'demo_title' => 'Liquid Template',
+        ]);
+
+        return response($output);
+
+    }
+}

app/Http/Kernel.php

@@ -21,6 +21,7 @@ class Kernel extends HttpKernel
         \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
         \App\Http\Middleware\TrimStrings::class,
         \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
+        \App\Http\Middleware\LoadDistData::class,   //读取分销商信息
     ];
 
     /**

app/Http/Middleware/LoadDistData.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+use App\Helpers\SiteCache;
+/**
+ * Class LoadDistData 用中间件来获取distm网店信息
+ */
+class LoadDistData
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+
+
+        // 获取请求的域名
+        $domain = getHost();
+
+
+        // 先检查 custom_domain，如果没有找到，再检查 secondary_domain
+        $dist=SiteCache::getDist($domain);
+
+        // 如果找不到匹配的数据，直接返回404响应
+        if (!$dist) {
+            abort(404, 'site not found.');
+        }
+
+        // 将找到的 dist 数据添加到请求中，方便后续使用
+        $request->attributes->set('dist', $dist);
+
+        //保存到共享地方供其它地方用
+
+        return $next($request);
+    }
+}

app/Providers/AppServiceProvider.php

@@ -11,7 +11,9 @@ class AppServiceProvider extends ServiceProvider
      */
     public function register(): void
     {
-        //
+        //添加自定义辅助函数
+        require_once __DIR__ . '/../Helpers/helpers.php';
+
     }
 
     /**

app/Services/LiquidFilters/Filters.php

@@ -0,0 +1,57 @@
+<?php
+namespace App\Services\LiquidFilters;
+
+/**
+ * 自定义 Liquid 过滤器
+ */
+class Filters
+{
+    // 获取完整的资产 URL
+    public static function assetUrl(string $input): string
+    {
+        $assetBaseUrl = config('asset_base_url');
+        return $assetBaseUrl . ltrim($input, '/');
+    }
+
+    // 获取完整的字体 URL
+    public static function fontUrl(string $input): string
+    {
+        $fontBaseUrl = config('font_base_url');
+        return $fontBaseUrl . ltrim($input, '/');
+    }
+
+    // 获取完整的图片 URL
+    public static function imageUrl(string $input): string
+    {
+        $imageBaseUrl = config('image_base_url');
+        return $imageBaseUrl . ltrim($input, '/');
+    }
+
+    // 生成 CSS 链接标签
+    public static function stylesheetTag(string $input): string
+    {
+        $cssUrl = self::assetUrl($input); // 使用 assetUrl 拼接 CSS 完整 URL
+        return '<link rel="stylesheet" href="' . htmlspecialchars($cssUrl, ENT_QUOTES) . '">';
+    }
+
+    // 生成 JavaScript 脚本标签
+    public static function scriptTag(string $input): string
+    {
+        $scriptUrl = self::assetUrl($input); // 使用 assetUrl 拼接 JavaScript 完整 URL
+        return '<script src="' . htmlspecialchars($scriptUrl, ENT_QUOTES) . '"></script>';
+    }
+
+    // 生成 img 标签
+    public static function imageTag(string $input, string $alt = '', array $attributes = []): string
+    {
+        $imageUrl = self::imageUrl($input);
+        $attrString = '';
+
+        foreach ($attributes as $key => $value) {
+            $attrString .= ' ' . htmlspecialchars($key, ENT_QUOTES) . '="' . htmlspecialchars($value, ENT_QUOTES) . '"';
+        }
+
+        return '<img src="' . htmlspecialchars($imageUrl, ENT_QUOTES) . '" alt="' . htmlspecialchars($alt, ENT_QUOTES) . '"' . $attrString . '>';
+    }
+
+}

app/Services/LiquidRenderer.php

@@ -2,60 +2,82 @@
 
 namespace App\Services;
 
+use App\Services\LiquidTags\LiquidTagProduct;
+use App\Services\LiquidTags\LiquidTagVideo;
+use Liquid\Liquid;
 use Liquid\Template;
 use Liquid\Cache\File as FileCache;
-use Illuminate\Support\Facades\File;
+
+
+use App\Services\LiquidTags\LiquidTagPage;  // 添加对自定义标签的引用
+
+
+use App\Services\LiquidFilters\Filters;
+use App\Helpers\SiteCache;
 
 class LiquidRenderer
 {
-    protected static $baseTemplatePath;
+    protected static ?string $baseTemplatePath = null;
 
+    // 渲染 Liquid 模板
     public static function render(string $templateName, array $data = []): string
     {
-        // 初始化基础模板路径（仅在首次调用时）
-        if (!self::$baseTemplatePath) {
-            self::$baseTemplatePath = config('liquid.template_path');
-        }
-
+        self::initializeLiquidSettings();
+        self::initializeBaseTemplatePath();
 
-        // 查找模板文件
-        $templatePath = self::findTemplate($templateName);
+        $template = self::createTemplateInstance();
 
-        if (!$templatePath) {
-            throw new \Exception("Template not found: {$templateName}");
-        }
+        $template->registerTag('page', LiquidTagPage::class);
+        $template->registerTag('product', LiquidTagProduct::class);
+        $template->registerTag('video', LiquidTagVideo::class);
+        $template->registerTag('contact', LiquidTagContactUs::class);
+        $template->registerFilter(Filters::class);
 
-        // 读取 Liquid 模板文件内容
-        $templateContent = File::get($templatePath);
 
-        // 创建并解析模板
-        $template = new Template();
-        $template->setCache(new FileCache(['cache_dir' => storage_path('framework/cache/data')]));
-        $template->parse($templateContent);
+        try {
+            $parsedTemplate = $template->parseFile($templateName);
+        } catch (\Exception $e) {
+            throw new \RuntimeException("Template not found: {$templateName}", 0, $e);
+        }
 
-        // 渲染模板并返回结果
-        return $template->render($data);
+        return $parsedTemplate->render($data);
     }
 
-    protected static function findTemplate(string $templateName): ?string
+
+    // 初始化基础模板路径
+    private static function initializeBaseTemplatePath(): void
     {
-        // 如果模板名没有以 .liquid 结尾，则添加 .liquid 扩展名
-        if (pathinfo($templateName, PATHINFO_EXTENSION) !== 'liquid') {
-            $templateName .= '.liquid';
-        }
+        // 获取请求的域名
+        $domain = getHost();
 
-        // 处理模板名中的 . 号，将其转换为目录分隔符（不包括扩展名）
-        $templateNameWithoutExtension = pathinfo($templateName, PATHINFO_FILENAME);
-        $templatePathSegments = explode('.', $templateNameWithoutExtension);
-        $relativePath = implode(DIRECTORY_SEPARATOR, $templatePathSegments) . '.liquid';
+        // 获取分销
+        $dist=SiteCache::getDist($domain);
 
-        // 构建预期的模板路径
-        $expectedPath = self::$baseTemplatePath . DIRECTORY_SEPARATOR . $relativePath;
+        // 使用默认值的函数封装，避免重复逻辑
+        $template_dist_id = $dist['id'] ?? trim(config('liquid.template_dist_id'));
+        $template_name = $dist['template_name'] ?? trim(config('liquid.template_name'));
 
-        if (File::exists($expectedPath)) {
-            return $expectedPath;
+        if (self::$baseTemplatePath === null) {
+            self::$baseTemplatePath = rtrim(config('liquid.template_path'), '/') . '/' .
+                trim($template_dist_id). '/' .
+                ltrim($template_name, '/');
         }
+    }
 
-        return null;
+    // 创建模板实例
+    private static function createTemplateInstance(): Template
+    {
+        $template = new Template(self::$baseTemplatePath);
+        //$template->setCache(new FileCache(['cache_dir' => storage_path('framework/cache/data')]));
+        return $template;
+    }
+
+    // 设置 Liquid 渲染的全局配置
+    private static function initializeLiquidSettings(): void
+    {
+        Liquid::set('INCLUDE_SUFFIX', '');
+        Liquid::set('INCLUDE_PREFIX', '');
+        Liquid::set('INCLUDE_ALLOW_EXT', true);
+        Liquid::set('ESCAPE_BY_DEFAULT', true);
     }
 }

app/Services/LiquidTags/LiquidTagContactUs.php

@@ -0,0 +1,32 @@
+<?php
+namespace App\Services\LiquidTags;
+
+class LiquidTagContactUs
+{
+    private $email;
+
+    // 构造函数用于解析传入的参数
+    public function __construct($markup, array &$tokens, $file_system = null)
+    {
+        // 正则表达式解析传入的参数，例如 `{% contact_us email="contact@example.com" %}`
+        $syntax = '/email="([^"]+)"/';
+        if (preg_match($syntax, $markup, $matches)) {
+            $this->email = $matches[1];
+        } else {
+            // 如果参数解析失败，可以抛出一个异常或设置默认值
+            $this->email = '';
+        }
+    }
+
+    // render 方法执行逻辑并返回渲染结果
+    public function render(&$context)
+    {
+        // 根据 email 生成渲染结果
+        if ($this->email) {
+            return "<p>Contact: <a href='mailto:{$this->email}'>{$this->email}</a></p>";
+        }
+
+        // 如果参数不完整，返回默认消息
+        return '<p>not found</p>';
+    }
+}

app/Services/LiquidTags/LiquidTagPage.php

@@ -0,0 +1,32 @@
+<?php
+namespace App\Services\LiquidTags;
+
+class LiquidTagPage
+{
+    private $articleId;
+
+    // 构造函数用于解析传入的参数
+    public function __construct($markup, array &$tokens, $file_system = null)
+    {
+        // 正则表达式解析传入的文章 ID，例如 `{% page 1 %}`\
+        $this->articleId= $markup;
+//        $syntax = '/(\d+)/';
+//        if (preg_match($syntax, $markup, $matches)) {
+//            $this->articleId = (int)$matches[1];
+//
+//        }
+    }
+
+    // render 方法执行逻辑并返回渲染结果
+    public function render(&$context)
+    {
+        if ($this->articleId) {
+
+                return $this->articleId;
+
+        }
+
+        // 如果文章不存在，则返回空
+        return '<p>文章不存在。</p>';
+    }
+}

app/Services/LiquidTags/LiquidTagProduct.php

@@ -0,0 +1,117 @@
+<?php
+namespace App\Services\LiquidTags;
+
+use App\Models\DistProduct;
+use Liquid\AbstractBlock;
+use Liquid\template;
+use Liquid\Context;
+use App\Services\LiquidRenderer;
+
+
+// 使用你的 DistProduct 模型
+
+class LiquidTagProduct extends AbstractBlock
+{
+    private $mode;
+    private $productId;
+    private $quantity;
+    private $limit;
+    private $categoryId;
+
+    private $templateFile;
+
+    // 构造函数用于解析传入的参数
+    public function __construct($markup, array &$tokens, $file_system = null)
+    {
+
+        // 初始化默认值
+        $this->mode = 'single';
+        $this->productId = 0;
+        $this->quantity = 0;
+        $this->limit = 10;
+        $this->categoryId = 0;
+        $this->templateFile = null;
+
+        // 正则表达式解析传入的参数
+        $syntax = '/(\w+)=("[^"]*"|\'[^\']*\'|\d+)/';
+
+        if (preg_match_all($syntax, $markup, $matches, PREG_SET_ORDER)) {
+
+            foreach ($matches as $match) {
+                $key = $match[1];
+                $value = trim($match[2], '"\''); // 同时去除双引号和单引号
+
+                switch ($key) {
+                    case 'mode':
+                        $this->mode = $value;
+                        break;
+                    case 'id':
+                        $this->productId = (int)$value;
+                        break;
+                    case 'quantity':
+                        $this->quantity = (int)$value;
+                        break;
+                    case 'limit':
+                        $this->limit = (int)$value;
+                        break;
+                    case 'category_id':
+                        $this->categoryId = (int)$value;
+                        break;
+                    case 'template':
+                        $this->templateFile = $value;
+                        break;
+                }
+            }
+        }
+    }
+
+    // render 方法执行逻辑并返回渲染结果
+    public function render($context)
+    {
+        if ($this->mode === 'list') {
+            return $this->renderList();
+        } elseif ($this->mode === 'single') {
+            return $this->renderSingle();
+        }
+
+        // 如果模式不正确，返回空字符串
+        return '';
+    }
+
+    private function renderList()
+    {
+        // 从数据库获取产品列表
+        $products = DistProduct::getProducts($this->categoryId, $this->limit);
+
+        if ($products->count() > 0) {
+            return $this->renderTemplate(['products' => $products->toArray()]);
+        }
+
+        // 如果没有产品，返回空字符串
+        return '';
+    }
+
+    private function renderSingle()
+    {
+        // 从数据库获取单个产品信息
+        $product = DistProduct::getProduct($this->productId);
+
+        if ($product && $this->quantity > 0) {
+            return $this->renderTemplate(['product' => $product->toArray()]);
+        }
+
+        // 如果产品不存在或参数不完整，返回空字符串
+        return '';
+    }
+
+    private function renderTemplate(array $data)
+    {
+
+        if (!$this->templateFile) {
+            return ''; // 如果未提供模板文件，返回空字符串
+        }
+        return LiquidRenderer::render($this->templateFile,$data);
+
+
+    }
+}

app/Services/LiquidTags/LiquidTagVideo.php

@@ -0,0 +1,32 @@
+<?php
+namespace App\Services\LiquidTags;
+
+class LiquidTagVideo
+{
+    private $videoId;
+
+    // 构造函数用于解析传入的参数
+    public function __construct($markup, array &$tokens, $file_system = null)
+    {
+        // 正则表达式解析传入的参数，例如 `{% video id=456 %}`
+        $syntax = '/id=(\d+)/';
+        if (preg_match($syntax, $markup, $matches)) {
+            $this->videoId = (int)$matches[1];
+        } else {
+            // 如果参数解析失败，可以抛出一个异常或设置默认值
+            $this->videoId = 0;
+        }
+    }
+
+    // render 方法执行逻辑并返回渲染结果
+    public function render(&$context)
+    {
+        // 根据 videoId 生成渲染结果
+        if ($this->videoId > 0) {
+            return "<p>Video ID: {$this->videoId}</p>";
+        }
+
+        // 如果参数不完整，返回默认消息
+        return '<p>not found</p>';
+    }
+}

config/cache.php

@@ -15,7 +15,7 @@ return [
     |
     */
 
-    'default' => env('CACHE_DRIVER', 'file'),
+    'default' => env('CACHE_DRIVER', 'redis'),
 
     /*
     |--------------------------------------------------------------------------

config/liquid.php

@@ -1,5 +1,21 @@
 <?php
 
 return [
+    // 模板目录路径
     'template_path' => resource_path('views/liquid'),
+
+    // 模板名称，可在 .env 中配置
+    'template_name' => env('TEMPLATE_NAME', 'demo'),
+
+    // 默认模板的 dist ID，支持通过 .env 文件配置
+    'template_dist_id' => env('TEMPLATE_DIST_ID', 1),
+
+    // 资产的基础 URL
+    'asset_base_url' => env('ASSET_BASE_URL', 'https://example.com/assets/'),
+
+    // 字体的基础 URL
+    'font_base_url' => env('FONT_BASE_URL', 'https://example.com/fonts/'),
+
+    // 图片的基础 URL
+    'image_base_url' => env('IMAGE_BASE_URL', 'https://example.com/images/'),
 ];

resources/views/liquid/1/demo/__product_list_1.liquid

@@ -0,0 +1,40 @@
+<div class="row cols-xs-space cols-sm-space cols-md-space">
+{% for item in products %}
+    {% comment %}{{ item.title }} - {{ item.sku }}{% endcomment %}
+
+    <div class="col-lg-4">
+        <div class="block product no-border z-depth-2-top z-depth-2--hover">
+            <div class="block-image">
+                <a href="#">
+                    <img src="static/picture/img-1.png" class="img-center">
+                </a>
+                <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+            </div>
+
+            <div class="block-body text-center">
+                <h3 class="heading heading-5 strong-600 text-capitalize">
+                    <a href="#">
+                        {{ item.title }} - {{ item.sku }}
+                    </a>
+                </h3>
+                <p class="product-description">
+                    {{ item.content }}
+                </p>
+                <div class="product-colors mt-2">
+                    <div class="color-switch float-wrapper">
+                        <a href="#" class="bg-purple"></a>
+                        <a href="#" class="bg-pink"></a>
+                        <a href="#" class="bg-blue"></a>
+                    </div>
+                </div>
+                <div class="product-buttons mt-4">
+                    <a href="#" class="btn  btn-gray-dark btn-circle px-4">
+                        Explore
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endfor %}
+</div>
+

resources/views/liquid/1/demo/_footer.liquid

@@ -0,0 +1,111 @@
+<!-- _footer.template -->
+<footer id="footer" class="footer">
+    <div class="footer-top">
+        <div class="container">
+            <div class="row cols-xs-space cols-sm-space cols-md-space">
+                <div class="col-lg-5">
+                    <div class="col">
+                        <img src="static/images/logo_white.svg" class="" alt="Boomerang" style="height: 50px;">
+                        <span class="clearfix"></span>
+                        {% comment %}<span class="heading heading-sm c-gray-light strong-400">Mietubl</span>{% endcomment %}
+                        <p class="mt-3">
+                            Mobile Phone Accessories Wholesale supplier.
+                        </p>
+
+                        <div class="copyright mt-4">
+                            <p>
+                                Copyright &copy; 2024                                <a href="" target="_blank">
+                                    <strong>Mietubl</strong>
+                                </a> -
+                                All rights reserved
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-2">
+                    <div class="col">
+                        <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
+                            Support
+                        </h4>
+
+                        <ul class="footer-links">
+                            <li><a href="#" title="Help center">Help center</a></li>
+                            <li><a href="#" title="Discussions">Discussions</a></li>
+                            <li><a href="#" title="Contact support">Contact</a></li>
+                            <li><a href="#" title="Blog">Blog</a></li>
+                            <li><a href="#" title="Jobs">FAQ</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="col-lg-2">
+                    <div class="col">
+                        <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
+                            Company
+                        </h4>
+
+                        <ul class="footer-links">
+                            <li>
+                                <a href="#" title="Home">
+                                    Home
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" title="About us">
+                                    About us
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" title="Services">
+                                    Services
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" title="Blog">
+                                    Blog
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" title="Contact">
+                                    Contact
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="col">
+                        <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
+                            Get in touch
+                        </h4>
+
+                        <ul class="social-media social-media--style-1-v4">
+                            <li>
+                                <a href="#" class="facebook" target="_blank" data-toggle="tooltip" data-original-title="Facebook">
+                                    <i class="fa fa-facebook"></i>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="instagram" target="_blank" data-toggle="tooltip" data-original-title="Instagram">
+                                    <i class="fa fa-instagram"></i>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="dribbble" target="_blank" data-toggle="tooltip" data-original-title="Dribbble">
+                                    <i class="fa fa-dribbble"></i>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="dribbble" target="_blank" data-toggle="tooltip" data-original-title="Github">
+                                    <i class="fa fa-github"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>

resources/views/liquid/1/demo/_footer_js.liquid

@@ -0,0 +1,62 @@
+<!-- _footer_js.template -->
+
+<!-- SCRIPTS -->
+<!-- Core -->
+<script src="static/js/jquery.min.js"></script>
+<script src="static/js/popper.min.js"></script>
+<script src="static/js/bootstrap.min.js"></script>
+<script src="static/js/slidebar.js"></script>
+<script src="static/js/classie.js"></script>
+
+<!-- Bootstrap Extensions -->
+<script src="static/js/bootstrap-growl.min.js"></script>
+<script src="static/js/scrollpos-styler.js"></script>
+
+<!-- Plugins: Sorted A-Z -->
+<script src="static/js/adaptive-backgrounds.js"></script>
+<script src="static/js/jquery.countdown.min.js"></script>
+<script src="static/js/dropzone.min.js"></script>
+<script src="static/js/jquery.easypiechart.min.js"></script>
+<script src="static/js/jquery.fancybox.min.js"></script>
+<script src="static/js/flatpickr.min.js"></script>
+<script src="static/js/flip.min.js"></script>
+<script src="static/js/footer-reveal.min.js"></script>
+<script src="static/js/jquery.gradientify.min.js"></script>
+<script src="static/js/headroom.min.js"></script>
+<script src="static/js/jquery.headroom.min.js"></script>
+<script src="static/js/input-mask.min.js"></script>
+<script src="static/js/instafeed.js"></script>
+<script src="static/js/jquery.countto.js"></script>
+<script src="static/js/nouislider.min.js"></script>
+<script src="static/js/paraxify.min.js"></script>
+<script src="static/js/select2.min.js"></script>
+<script src="static/js/sticky-kit.min.js"></script>
+<script src="static/js/swiper.min.js"></script>
+<script src="static/js/autosize.min.js"></script>
+<script src="static/js/typeahead.bundle.min.js"></script>
+<script src="static/js/typed.min.js"></script>
+<script src="static/js/vide.min.js"></script>
+<script src="static/js/viewportchecker.min.js"></script>
+<script src="static/js/wow.min.js"></script>
+
+<!-- Isotope -->
+<script src="static/js/isotope.min.js"></script>
+<script src="static/js/imagesloaded.pkgd.min.js"></script>
+
+<!-- RS5.0 Core JS Files -->
+<script src="static/js/jquery.themepunch.tools.min.js"></script>
+<script src="static/js/jquery.themepunch.revolution.min.js"></script>
+<script src="static/js/revolution-slider-shop-electronics.js"></script>
+
+<script src="static/js/revolution.extension.actions.min.js"></script>
+<script src="static/js/revolution.extension.carousel.min.js"></script>
+<script src="static/js/revolution.extension.kenburn.min.js"></script>
+<script src="static/js/revolution.extension.layeranimation.min.js"></script>
+<script src="static/js/revolution.extension.migration.min.js"></script>
+<script src="static/js/revolution.extension.navigation.min.js"></script>
+<script src="static/js/revolution.extension.parallax.min.js"></script>
+<script src="static/js/revolution.extension.slideanims.min.js"></script>
+<script src="static/js/revolution.extension.video.min.js"></script>
+
+<!-- App JS -->
+<script src="static/js/main.min.js"></script>

resources/views/liquid/1/demo/_header.liquid

@@ -0,0 +1,717 @@
+<!-- _header.template -->
+
+<div class="header">
+    <!-- Top Bar -->
+    <div class="top-navbar">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+            	<span class="aux-text d-none d-md-inline-block">
+                    <ul class="inline-links inline-links--style-1">
+                        <li class="d-none d-lg-inline-block">
+						Mobile Phone Accessories Wholesale supplier - Mietubl      </li>
+                        <li>
+                            <i class="fa fa-envelope"></i>
+                            <a href="#">support@Mietubl.com</a>
+                        </li>
+                    </ul>
+                </span>
+                </div>
+
+                <div class="col-md-6">
+                    <nav class="top-navbar-menu">
+                        <ul class="top-menu">
+                            {% comment %}<li><a href="#">Sign in</a></li>{% endcomment %}
+                            {% comment %}<li><a href="#">Create account</a></li>{% endcomment %}
+                            {% comment %}<li><a href="#" data-toggle="global-search"><i class="fa fa-search"></i></a></li>{% endcomment %}
+                            {% comment %}<li class="dropdown">{% endcomment %}
+                            {% comment %}<a href="#">{% endcomment %}
+                            {% comment %}<i class="fa fa-shopping-cart"></i>{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}<ul class="sub-menu">{% endcomment %}
+                            {% comment %}<li>{% endcomment %}
+                            {% comment %}<div class="dropdown-cart px-0">{% endcomment %}
+                            {% comment %}<div class="dc-header">{% endcomment %}
+                            {% comment %}<h3 class="heading heading-6 strong-600">Cart</h3>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}<div class="dc-item">{% endcomment %}
+                            {% comment %}<div class="d-flex align-items-center">{% endcomment %}
+                            {% comment %}<div class="dc-image">{% endcomment %}
+                            {% comment %}<a href="#">{% endcomment %}
+                            {% comment %}<img src="static/picture/img-1a.png" class="img-fluid" alt="">{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}<div class="dc-content">{% endcomment %}
+                            {% comment %}<span class="d-block dc-product-name text-capitalize strong-600 mb-1">{% endcomment %}
+                            {% comment %}<a href="#">{% endcomment %}
+                            {% comment %}Wood phone case{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}</span>{% endcomment %}
+                            {% comment %}{% endcomment %}
+                            {% comment %}<span class="dc-quantity">x2</span>{% endcomment %}
+                            {% comment %}<span class="dc-price">$50.00</span>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}<div class="dc-actions">{% endcomment %}
+                            {% comment %}<button>{% endcomment %}
+                            {% comment %}<i class="ion-close"></i>{% endcomment %}
+                            {% comment %}</button>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}{% endcomment %}
+                            {% comment %}<div class="dc-item">{% endcomment %}
+                            {% comment %}<div class="d-flex align-items-center">{% endcomment %}
+                            {% comment %}<div class="dc-image">{% endcomment %}
+                            {% comment %}<a href="#">{% endcomment %}
+                            {% comment %}<img src="static/picture/img-2a.png" class="img-fluid" alt="">{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}<div class="dc-content">{% endcomment %}
+                            {% comment %}<span class="d-block dc-product-name text-capitalize strong-600 mb-1">{% endcomment %}
+                            {% comment %}<a href="#">{% endcomment %}
+                            {% comment %}Leather bag{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}</span>{% endcomment %}
+                            {% comment %}{% endcomment %}
+                            {% comment %}<span class="dc-quantity">x1</span>{% endcomment %}
+                            {% comment %}<span class="dc-price">$250.00</span>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}<div class="dc-actions">{% endcomment %}
+                            {% comment %}<button>{% endcomment %}
+                            {% comment %}<i class="ion-close"></i>{% endcomment %}
+                            {% comment %}</button>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}{% endcomment %}
+                            {% comment %}<div class="dc-item">{% endcomment %}
+                            {% comment %}<div class="d-flex align-items-center">{% endcomment %}
+                            {% comment %}<div class="dc-image">{% endcomment %}
+                            {% comment %}<a href="#">{% endcomment %}
+                            {% comment %}<img src="static/picture/img-3a.png" class="img-fluid" alt="">{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}<div class="dc-content">{% endcomment %}
+                            {% comment %}<span class="d-block dc-product-name text-capitalize strong-600 mb-1">{% endcomment %}
+                            {% comment %}<a href="#">{% endcomment %}
+                            {% comment %}Brown leather wallet{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}</span>{% endcomment %}
+                            {% comment %}{% endcomment %}
+                            {% comment %}<span class="dc-quantity">x1</span>{% endcomment %}
+                            {% comment %}<span class="dc-price">$99.00</span>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}<div class="dc-actions">{% endcomment %}
+                            {% comment %}<button>{% endcomment %}
+                            {% comment %}<i class="ion-close"></i>{% endcomment %}
+                            {% comment %}</button>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}<div class="dc-item py-4">{% endcomment %}
+                            {% comment %}<span class="subtotal-text">Subtotal</span>{% endcomment %}
+                            {% comment %}<span class="subtotal-amount">$450.00</span>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}<div class="py-4 text-center">{% endcomment %}
+                            {% comment %}<ul class="inline-links inline-links--style-3">{% endcomment %}
+                            {% comment %}<li class="pr-3">{% endcomment %}
+                            {% comment %}<a href="#" class="link link--style-2 text-capitalize">{% endcomment %}
+                            {% comment %}<i class="ion-person"></i> My account{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}<li class="pr-3">{% endcomment %}
+                            {% comment %}<a href="#" class="link link--style-1 text-capitalize">{% endcomment %}
+                            {% comment %}<i class="ion-bag"></i> View cart{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}<li>{% endcomment %}
+                            {% comment %}<a href="#" class="link link--style-1 text-capitalize">{% endcomment %}
+                            {% comment %}<i class="ion-forward"></i> Checkout{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}</ul>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}</div>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}</ul>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}<li class="aux-languages dropdown">{% endcomment %}
+                            {% comment %}<a href="#">{% endcomment %}
+                            {% comment %}<img src="static/picture/ro.png">{% endcomment %}
+                            {% comment %}</a>{% endcomment %}
+                            {% comment %}<ul id="auxLanguages" class="sub-menu">{% endcomment %}
+                            {% comment %}<li>{% endcomment %}
+                            {% comment %}<a href="#"><span class="language">German</span></a>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}<li>{% endcomment %}
+                            {% comment %}<span class="language language-active">English</span>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}<li>{% endcomment %}
+                            {% comment %}<a href="#"><span class="language">Greek</span></a>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}<li>{% endcomment %}
+                            {% comment %}<a href="#"><span class="language">Spanish</span></a>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}</ul>{% endcomment %}
+                            {% comment %}</li>{% endcomment %}
+                            {% comment %}<li><a href="#" class="btn-st-trigger" data-effect="st-effect-1"><i class="fa fa-ellipsis-h"></i></a></li>{% endcomment %}
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Global Search -->
+    <section id="sctGlobalSearch" class="global-search global-search-overlay">
+        <div class="container">
+            <div class="global-search-backdrop mask-dark--style-2"></div>
+
+            <!-- Search form -->
+            <form class="form-horizontal form-global-search z-depth-2-top" role="form">
+                <div class="px-4">
+                    <div class="row">
+                        <div class="col-12">
+                            <input type="text" class="search-input" placeholder="Type and hit enter ...">
+                        </div>
+                    </div>
+                </div>
+                <a href="#" class="close-search" data-toggle="global-search" title="Close search bar"></a>
+            </form>
+        </div>
+    </section>
+
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar--bold navbar--style-2 navbar-light bg-default  navbar--shadow">
+        <div class="container navbar-container">
+            <!-- Brand/Logo -->
+            <a class="navbar-brand" href="/">
+                <img src="static/images/logo.svg" class="" alt="Boomerang" style="height: 50px;">
+            </a>
+
+            <div class="d-inline-block">
+                <!-- Navbar toggler  -->
+                <button class="navbar-toggler hamburger hamburger-js hamburger--spring" type="button" data-toggle="collapse" data-target="#navbar_main" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="hamburger-box">
+                        <span class="hamburger-inner"></span>
+                    </span>
+                </button>
+            </div>
+
+            <div class="collapse navbar-collapse align-items-center justify-content-center" id="navbar_main">
+                <!-- Navbar search - For small resolutions -->
+                <div class="navbar-search-widget b-xs-bottom py-3 d-lg-none d-none">
+                    <form class="" role="form">
+                        <div class="input-group input-group-lg">
+                            <input type="text" class="form-control" placeholder="Search for...">
+                            <span class="input-group-btn">
+                <button class="btn btn-base-3" type="button">Go!</button>
+                </span>
+                        </div>
+                    </form>
+                </div>
+
+                <!-- Navbar links -->
+                <ul class="navbar-nav">
+                    <li class="nav-item dropdown megamenu">
+                        <a class="nav-link" href="/">
+                            Home
+                        </a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Products
+                        </a>
+
+                        <div class="dropdown-menu dropdown-menu-xl py-0 px-0 overflow--hidden" aria-labelledby="navbar_1_dropdown_1">
+                            <div class="list-group rounded">
+                                <a href="../../pages-home.html" class="list-group-item list-group-item-action d-flex align-items-center">
+                                    <div class="list-group-content">
+                                        <div class="list-group-heading heading heading-6 mb-1">Home pages</div>
+                                        <p class="text-sm mb-0">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
+                                    </div>
+                                </a>
+                                <a href="../../pages-inner.html" class="list-group-item list-group-item-action d-flex align-items-center">
+                                    <div class="list-group-content">
+                                        <div class="list-group-heading heading heading-6 mb-1">Inner pages</div>
+                                        <p class="text-sm mb-0">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
+                                    </div>
+                                </a>
+                                <a href="../../pages-profile.html" class="list-group-item list-group-item-action d-flex align-items-center">
+                                    <div class="list-group-content">
+                                        <div class="list-group-heading heading heading-6 mb-1">Profile pages</div>
+                                        <p class="text-sm mb-0">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
+                                    </div>
+                                </a>
+                                <a href="../../pages-blog.html" class="list-group-item list-group-item-action d-flex align-items-center">
+                                    <div class="list-group-content">
+                                        <div class="list-group-heading heading heading-6 mb-1">Blog pages</div>
+                                        <p class="text-sm mb-0">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
+                                    </div>
+                                </a>
+                                <a href="../../pages-shop.html" class="list-group-item list-group-item-action d-flex align-items-center">
+                                    <div class="list-group-content">
+                                        <div class="list-group-heading heading heading-6 mb-1">Shop pages</div>
+                                        <p class="text-sm mb-0">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
+                                    </div>
+                                </a>
+                                <a href="../../pages-real-estate.html" class="list-group-item list-group-item-action d-flex align-items-center">
+                                    <div class="list-group-content">
+                                        <div class="list-group-heading heading heading-6 mb-1">Real estate pages</div>
+                                        <p class="text-sm mb-0">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="nav-item dropdown megamenu">
+                        <a class="nav-link" href="../../demos.html">
+                            About Us
+                        </a>
+                    </li>
+                    <li class="nav-item dropdown megamenu">
+                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Support
+                        </a>
+
+                        <div class="dropdown-menu">
+                            <div class="mega-dropdown-menu row row-no-padding">
+                                <div class="mega-dropdown-col mega-dropdown-col-cover mega-dropdown-col-cover--left col-lg-5 d-none d-lg-block d-xl-block" style="background-image: url(static/images/img-14-1000x900.jpg); background-position: center center;">
+                                    <span class="mask mask-base-1--style-1 alpha-8"></span>
+                                    <div class="mega-dropdown-col-inner d-flex align-items-center no-padding">
+                                        <div class="col">
+                                            <div class="row align-items-center">
+                                                <div class="col-12">
+                                                    <div class="px-4">
+                                                        <h2 class="heading heading-2 strong-600 c-white">
+                                                            Documentation and Shortcodes
+                                                        </h2>
+                                                        <p class="strong-300 c-white mt-4">
+                                                            Get started fast and easy with Boomerang using the documentation and shortcode examples. No matter
+                                                            you are a developer or new to web design, you will
+                                                            find our theme very easy to customize with
+                                                            an intuitive HTML markup.
+                                                        </p>
+                                                        <div class="btn-container mt-5">
+                                                            <a href="../../documentation/getting-started/introduction.html" target="_blank" class="btn btn-styled btn-white btn-outline btn-circle">Read the Docs</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-4 col-lg-2 ml-lg-auto">
+                                    <ul class="megadropdown-links">
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/alerts.html">
+                                                Alerts
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/badges.html">
+                                                Badges
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/buttons.html">
+                                                Buttons
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/cards.html">
+                                                Cards
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/collapse.html">
+                                                Collapse
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/countdown.html">
+                                                Countdown
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/dropdown.html">
+                                                Dropdowns
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/forms.html">
+                                                Forms
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/instagram.html">
+                                                Instagram
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/lightbox.html">
+                                                Lightbox
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/maps.html">
+                                                Maps
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/masonry.html">
+                                                Masonry
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+
+                                <div class="col-md-4 col-lg-2">
+                                    <ul class="megadropdown-links">
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/pagination.html">
+                                                Pagination
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/progress.html">
+                                                Progress bars
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/recaptcha.html">
+                                                Recaptcha
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/content/titles.html">
+                                                Section titles
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/forms.html#ex_component_sliders">
+                                                Sliders
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/tabs.html">
+                                                Tabs
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/typed-animations.html">
+                                                Typed animations
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/headers.html">
+                                                Headers
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../html/default/sliders/boomerang-slider/index.html">
+                                                Boomerang slider
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../html/default/sliders/revolution-slider/index.html">
+                                                Revolution slider
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/footers.html">
+                                                Footers
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/hero.html">
+                                                Hero blocks
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+
+                                <div class="col-md-4 col-lg-2">
+                                    <ul class="megadropdown-links">
+
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/icon.html">
+                                                Icon blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/jobs.html">
+                                                Job blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/pricing.html">
+                                                Pricing blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/product.html">
+                                                Product blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/real-estate.html">
+                                                Real-Estate blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/team.html">
+                                                Team blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/testimonials.html">
+                                                Testimonial blocks
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/comments.html">
+                                                Comment blocks
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="nav-item dropdown megamenu">
+                        <a class="nav-link" href="../../demos.html">
+                            Posts
+                        </a>
+                    </li>
+                    <li class="nav-item dropdown megamenu">
+                        <a class="nav-link" href="../../demos.html">
+                            Contact
+                        </a>
+                    </li>
+                    <li class="nav-item dropdown megamenu">
+                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Components
+                        </a>
+
+                        <div class="dropdown-menu">
+                            <div class="mega-dropdown-menu row row-no-padding">
+                                <div class="mega-dropdown-col mega-dropdown-col-cover mega-dropdown-col-cover--left col-lg-5 d-none d-lg-block d-xl-block" style="background-image: url(static/images/img-14-1000x900.jpg); background-position: center center;">
+                                    <span class="mask mask-base-1--style-1 alpha-8"></span>
+                                    <div class="mega-dropdown-col-inner d-flex align-items-center no-padding">
+                                        <div class="col">
+                                            <div class="row align-items-center">
+                                                <div class="col-12">
+                                                    <div class="px-4">
+                                                        <h2 class="heading heading-2 strong-600 c-white">
+                                                            Documentation and Shortcodes
+                                                        </h2>
+                                                        <p class="strong-300 c-white mt-4">
+                                                            Get started fast and easy with Boomerang using the documentation and shortcode examples. No matter
+                                                            you are a developer or new to web design, you will
+                                                            find our theme very easy to customize with
+                                                            an intuitive HTML markup.
+                                                        </p>
+                                                        <div class="btn-container mt-5">
+                                                            <a href="../../documentation/getting-started/introduction.html" target="_blank" class="btn btn-styled btn-white btn-outline btn-circle">Read the Docs</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-4 col-lg-2 ml-lg-auto">
+                                    <ul class="megadropdown-links">
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/alerts.html">
+                                                Alerts
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/badges.html">
+                                                Badges
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/buttons.html">
+                                                Buttons
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/cards.html">
+                                                Cards
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/collapse.html">
+                                                Collapse
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/countdown.html">
+                                                Countdown
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/dropdown.html">
+                                                Dropdowns
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/forms.html">
+                                                Forms
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/instagram.html">
+                                                Instagram
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/lightbox.html">
+                                                Lightbox
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/maps.html">
+                                                Maps
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/masonry.html">
+                                                Masonry
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+
+                                <div class="col-md-4 col-lg-2">
+                                    <ul class="megadropdown-links">
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/pagination.html">
+                                                Pagination
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/progress.html">
+                                                Progress bars
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/recaptcha.html">
+                                                Recaptcha
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/content/titles.html">
+                                                Section titles
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/forms.html#ex_component_sliders">
+                                                Sliders
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/tabs.html">
+                                                Tabs
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/components/typed-animations.html">
+                                                Typed animations
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/headers.html">
+                                                Headers
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../html/default/sliders/boomerang-slider/index.html">
+                                                Boomerang slider
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../html/default/sliders/revolution-slider/index.html">
+                                                Revolution slider
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/footers.html">
+                                                Footers
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/hero.html">
+                                                Hero blocks
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+
+                                <div class="col-md-4 col-lg-2">
+                                    <ul class="megadropdown-links">
+
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/icon.html">
+                                                Icon blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/jobs.html">
+                                                Job blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/pricing.html">
+                                                Pricing blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/product.html">
+                                                Product blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/real-estate.html">
+                                                Real-Estate blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/team.html">
+                                                Team blocks
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/testimonials.html">
+                                                Testimonial blocks
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a class="dropdown-item" href="../../documentation/blocks/comments.html">
+                                                Comment blocks
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+
+
+            </div>
+
+
+
+        </div>
+    </nav>
+</div>

resources/views/liquid/1/demo/_header_css.liquid

@@ -0,0 +1,40 @@
+<!-- _header_css.template -->
+
+<!-- Bootstrap -->
+<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css">
+
+<!-- Fonts -->
+<link href="static/css/af9117b70d024d9bab98a2f93152186d.css" rel="stylesheet">
+
+<!-- Plugins -->
+<link rel="stylesheet" href="static/css/swiper.min.css">
+<link rel="stylesheet" href="static/css/hamburgers.min.css" type="text/css">
+<link rel="stylesheet" href="static/css/animate.min.css" type="text/css">
+<link rel="stylesheet" href="static/css/jquery.fancybox.min.css">
+
+<!-- Icons -->
+<link rel="stylesheet" href="static/css/font-awesome.min.css" type="text/css">
+<link rel="stylesheet" href="static/css/ionicons.min.css" type="text/css">
+<link rel="stylesheet" href="static/css/line-icons.css" type="text/css">
+<link rel="stylesheet" href="static/css/line-icons-pro.css" type="text/css">
+
+<!-- Linea Icons -->
+<link rel="stylesheet" href="static/css/linea-icons.css" type="text/css">
+<link rel="stylesheet" href="static/css/linea-icons_1.css" type="text/css">
+<link rel="stylesheet" href="static/css/linea-icons_2.css" type="text/css">
+<link rel="stylesheet" href="static/css/linea-icons_3.css" type="text/css">
+
+<!-- Global style (main) -->
+<link id="stylesheet" type="text/css" href="static/css/main.min.css" rel="stylesheet" media="screen">
+
+{% comment %}<!-- Custom style - Remove if not necessary -->{% endcomment %}
+{% comment %}<link type="text/css" href="../../assets/css/custom-style.css" rel="stylesheet">{% endcomment %}
+
+<!-- Favicon -->
+<link href="static/images/favicon.png" rel="icon" type="image/png">
+
+
+<!-- RS5.0 -->
+<link rel="stylesheet" href="static/css/settings.css">
+<link rel="stylesheet" href="static/css/layers.css">
+<link rel="stylesheet" href="static/css/navigation.css">

resources/views/liquid/1/demo/home.liquid

@@ -0,0 +1,790 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta name="description" content="">
+<meta name="keywords" content="">
+<meta name="author" content="Mietubl">
+<title>Mobile Phone Accessories Wholesale supplier - Mietubl</title>
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+
+                    <!-- REVOLUTION SLIDER -->
+                    <div id="rev_slider_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="image-hero39" data-source="gallery">
+<!-- START REVOLUTION SLIDER 5.3.0.2 fullwidth mode -->
+	<div id="rev_slider_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.3.0.2" >
+		<ul>
+			<li data-index="rs-1" data-transition="slidevertical" data-slotamount="1" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="1500"  data-thumb="../../images/slider/concept-1-100x50.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
+				<!-- MAIN IMAGE -->
+				<img src="static/picture/iphone-1.jpg"  alt=""  data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
+
+				<!-- LAYER NR. 2 -->
+				<div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-1-layer-2"
+					data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+					data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
+					data-fontsize="['16','16','16','16']"
+					data-lineheight="['16','16','16','16']"
+					data-width="[300, 300, 300, 300]"
+					data-height="none"
+					data-whitespace="nowrap"
+					data-type="text"
+					data-responsive_offset="on"
+					data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+					data-textAlign="['left','left','left','left']"
+					data-paddingtop="[0,0,0,0]"
+					data-paddingright="[0,0,0,0]"
+					data-paddingbottom="[0,0,0,0]"
+					data-paddingleft="[0,0,0,0]"
+					style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+					<span class="text-uppercase strong-400">No more waiting</span>
+
+				</div>
+
+				<div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-1-layer-3"
+					data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+					data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
+					data-fontsize="['40','40','40','40']"
+					data-lineheight="['50','40','40','40']"
+					data-width="[300, 300, 300, 300]"
+					data-height="none"
+					data-whitespace="nowrap"
+					data-type="text"
+					data-responsive_offset="on"
+					data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+					data-textAlign="['left','left','left','left']"
+					data-paddingtop="[0,0,0,0]"
+					data-paddingright="[0,0,0,0]"
+					data-paddingbottom="[0,0,0,0]"
+					data-paddingleft="[0,0,0,0]"
+					style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+					<span class="strong-400">
+						Say hello to
+					</span>
+					<br>
+					<span class="strong-600">
+						the new Phone X
+					</span>
+
+				</div>
+
+				<!-- LAYER NR. 5 -->
+				<div class="tp-caption" id="slide-1-layer-5"
+					data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+					data-y="['middle','middle','middle','middle']" data-voffset="['180','180','180','180']"
+					data-fontsize="['40','40','40','40']"
+					data-lineheight="['50','50','50','50']"
+					data-width="[300, 300, 300, 300]"
+					data-height="none"
+					data-whitespace="nowrap"
+					data-type="text"
+					data-responsive_offset="on"
+					data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+					data-textAlign="['left','left','left','left']"
+					data-paddingtop="[0,0,0,0]"
+					data-paddingright="[0,0,0,0]"
+					data-paddingbottom="[0,0,0,0]"
+					data-paddingleft="[0,0,0,0]"
+					style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+					<a href="#" class="btn btn-base-1 btn-circle">Buy now</a>
+
+				</div>
+			</li>
+
+			<!-- SLIDE 2 -->
+			<li data-index="rs-2" data-transition="slidevertical" data-slotamount="1" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="1500"  data-thumb="../../images/slider/concept-1-100x50.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
+				<!-- MAIN IMAGE -->
+				<img src="static/picture/macbook-1.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
+
+				<!-- LAYER NR. 2 -->
+				<div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-2-layer-2"
+					data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+					data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
+					data-fontsize="['16','16','16','16']"
+					data-lineheight="['16','16','16','16']"
+					data-width="[300, 300, 300, 300]"
+					data-height="none"
+					data-whitespace="nowrap"
+					data-type="text"
+					data-responsive_offset="on"
+					data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+					data-textAlign="['left','left','left','left']"
+					data-paddingtop="[0,0,0,0]"
+					data-paddingright="[0,0,0,0]"
+					data-paddingbottom="[0,0,0,0]"
+					data-paddingleft="[0,0,0,0]"
+					style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+					<span class="text-uppercase strong-400">It's here</span>
+
+				</div>
+
+				<div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-2-layer-3"
+					data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+					data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
+					data-fontsize="['40','40','40','40']"
+					data-lineheight="['50','40','40','40']"
+					data-width="[300, 300, 300, 300]"
+					data-height="none"
+					data-whitespace="nowrap"
+					data-type="text"
+					data-responsive_offset="on"
+					data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+					data-textAlign="['left','left','left','left']"
+					data-paddingtop="[0,0,0,0]"
+					data-paddingright="[0,0,0,0]"
+					data-paddingbottom="[0,0,0,0]"
+					data-paddingleft="[0,0,0,0]"
+					style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+					<span class="strong-400">
+						Introducing
+					</span>
+					<br>
+					<span class="strong-600">
+						the new Macbook Pro
+					</span>
+
+				</div>
+
+				<!-- LAYER NR. 5 -->
+				<div class="tp-caption" id="slide-2-layer-5"
+					data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+					data-y="['middle','middle','middle','middle']" data-voffset="['180','180','180','180']"
+					data-fontsize="['40','40','40','40']"
+					data-lineheight="['50','50','50','50']"
+					data-width="[300, 300, 300, 300]"
+					data-height="none"
+					data-whitespace="nowrap"
+					data-type="text"
+					data-responsive_offset="on"
+					data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+					data-textAlign="['left','left','left','left']"
+					data-paddingtop="[0,0,0,0]"
+					data-paddingright="[0,0,0,0]"
+					data-paddingbottom="[0,0,0,0]"
+					data-paddingleft="[0,0,0,0]"
+					style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+					<a href="#" class="btn btn-base-1 btn-circle">Buy now</a>
+
+				</div>
+			</li>
+		</ul>
+		<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
+	</div>
+</div><!-- END REVOLUTION SLIDER -->
+
+                    <section class="slice sct-color-2">
+                        <div class="container">
+                            <div class="section-title section-title--style-1 text-center">
+                                <h3 class="section-title-inner heading-3 strong-600 text-capitalize">
+                                    <span>Featured products</span>
+                                </h3>
+                            </div>
+
+                           {% product  mode="list" limit=3 template='__product_list_1.liquid' %}
+
+                        </div>
+                    </section>
+
+                    <section class="slice sct-color-2">
+                        <div class="container">
+                            <div class="row align-items-end pb-100">
+                                <div class="col-lg-8 order-lg-2">
+                                    <div class="block block-image-holder">
+                                        <div class="block-image">
+                                            <img src="static/picture/img-promo-wide-2.jpg" class="img-fluid">
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-4 order-lg-1">
+                                    <div class="feature feature--boxed-border floating-content floating-content--2 float--right mb--100 feature--bg-1 z-depth-2-top">
+                                        <div class="py-4 px-3">
+                                            <h2 class="heading heading-3 strong-600">
+                                                Listening to Music
+                                            </h2>
+                                            <span class="clearfix"></span>
+                                            <p class="mt-4 line-height-1_8">
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+                                            </p>
+
+                                            <div class="btn-container mt-4">
+                                                <a href="#" class="btn btn-lg btn-gray-dark btn-circle px-4">Explore</a>
+                                                <a href="#" class="btn btn-lg btn-base-1 btn-circle btn-icon-left px-4">
+                                                    <i class="icon ion-bag"></i> Buy now
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section class="slice sct-color-2">
+                        <div class="container">
+                            <div class="row align-items-start">
+                                <div class="col-lg-8">
+                                    <div class="block block-image-holder">
+                                        <div class="block-image">
+                                            <img src="static/picture/img-promo-wide-1.jpg" class="img-fluid">
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-4">
+                                    <div class="feature feature--boxed-border floating-content floating-content--2 float--left top-0 mt--100 feature--bg-1 z-depth-2-top">
+                                        <div class="py-4 px-3">
+                                            <h2 class="heading heading-3 strong-600">
+                                                Dreaming in Colors
+                                            </h2>
+                                            <span class="clearfix"></span>
+                                            <p class="mt-4 line-height-1_8">
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+                                            </p>
+
+                                            <div class="btn-container mt-4">
+                                                <a href="#" class="btn btn-lg btn-gray-dark btn-circle px-4">Explore</a>
+                                                <a href="#" class="btn btn-lg btn-base-1 btn-circle btn-icon-left px-4">
+                                                    <i class="icon ion-bag"></i> Buy now
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section class="slice sct-color-2">
+                        <div class="container">
+                            <div class="section-title section-title--style-1 text-center">
+                                <h3 class="section-title-inner heading-3 strong-600 text-capitalize">
+                                    <span>Popular products</span>
+                                </h3>
+                            </div>
+
+                            <div class="row cols-xs-space cols-sm-space cols-md-space">
+                                <div class="col-lg-3">
+                                    <div class="block product no-border z-depth-2-top z-depth-2--hover">
+                                        <div class="block-image">
+                                            <a href="#">
+                                                <img src="static/picture/img-1.png" class="img-center">
+                                            </a>
+                                            <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+                                        </div>
+
+                                        <div class="block-body text-center">
+                                            <h3 class="heading heading-5 strong-600 text-capitalize">
+                                                <a href="#">
+                                                    Google Home Base
+                                                </a>
+                                            </h3>
+                                            <p class="product-description">
+                                                2.8GHz Processor 1TB Storage 16GB DDR
+                                            </p>
+                                            <div class="product-colors mt-2">
+                                                <div class="color-switch float-wrapper">
+                                                    <a href="#" class="bg-purple"></a>
+                                                    <a href="#" class="bg-pink"></a>
+                                                    <a href="#" class="bg-blue"></a>
+                                                </div>
+                                            </div>
+                                            <div class="product-buttons mt-4">
+                                                <div class="row align-items-center">
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
+                                                            <i class="ion-ios-heart"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
+                                                            <i class="ion-ios-browsers-outline"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-8">
+                                                        <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                            <i class="icon ion-android-cart"></i>Add to cart
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-3">
+                                    <div class="block product no-border z-depth-2-top z-depth-2--hover">
+                                        <div class="block-image">
+                                            <a href="#">
+                                                <img src="static/picture/img-2.png" class="img-center">
+                                            </a>
+                                            <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+                                        </div>
+
+                                        <div class="block-body text-center">
+                                            <h3 class="heading heading-5 strong-600 text-capitalize">
+                                                <a href="#">
+                                                    Google Home
+                                                </a>
+                                            </h3>
+                                            <p class="product-description">
+                                                2.8GHz Processor 1TB Storage 16GB DDR
+                                            </p>
+                                            <div class="product-colors mt-2">
+                                                <div class="color-switch float-wrapper">
+                                                    <a href="#" class="bg-purple"></a>
+                                                    <a href="#" class="bg-pink"></a>
+                                                    <a href="#" class="bg-blue"></a>
+                                                </div>
+                                            </div>
+                                            <div class="product-buttons mt-4">
+                                                <div class="row align-items-center">
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
+                                                            <i class="ion-ios-heart"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
+                                                            <i class="ion-ios-browsers-outline"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-8">
+                                                        <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                            <i class="icon ion-android-cart"></i>Add to cart
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-3">
+                                    <div class="block product no-border z-depth-2-top z-depth-2--hover">
+                                        <div class="block-image">
+                                            <a href="#">
+                                                <img src="static/picture/img-3.png" class="img-center">
+                                            </a>
+                                            <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+                                        </div>
+
+                                        <div class="block-body text-center">
+                                            <h3 class="heading heading-5 strong-600 text-capitalize">
+                                                <a href="#">
+                                                    Libratone Q Adapt
+                                                </a>
+                                            </h3>
+                                            <p class="product-description">
+                                                2.8GHz Processor 1TB Storage 16GB DDR
+                                            </p>
+                                            <div class="product-colors mt-2">
+                                                <div class="color-switch float-wrapper">
+                                                    <a href="#" class="bg-purple"></a>
+                                                    <a href="#" class="bg-pink"></a>
+                                                    <a href="#" class="bg-blue"></a>
+                                                </div>
+                                            </div>
+                                            <div class="product-buttons mt-4">
+                                                <div class="row align-items-center">
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
+                                                            <i class="ion-ios-heart"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
+                                                            <i class="ion-ios-browsers-outline"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-8">
+                                                        <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                            <i class="icon ion-android-cart"></i>Add to cart
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-3">
+                                    <div class="block product no-border z-depth-2-top z-depth-2--hover">
+                                        <div class="block-image">
+                                            <a href="#">
+                                                <img src="static/picture/img-3.png" class="img-center">
+                                            </a>
+                                            <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+                                        </div>
+
+                                        <div class="block-body text-center">
+                                            <h3 class="heading heading-5 strong-600 text-capitalize">
+                                                <a href="#">
+                                                    Libratone Q Adapt
+                                                </a>
+                                            </h3>
+                                            <p class="product-description">
+                                                2.8GHz Processor 1TB Storage 16GB DDR
+                                            </p>
+                                            <div class="product-colors mt-2">
+                                                <div class="color-switch float-wrapper">
+                                                    <a href="#" class="bg-purple"></a>
+                                                    <a href="#" class="bg-pink"></a>
+                                                    <a href="#" class="bg-blue"></a>
+                                                </div>
+                                            </div>
+                                            <div class="product-buttons mt-4">
+                                                <div class="row align-items-center">
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
+                                                            <i class="ion-ios-heart"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
+                                                            <i class="ion-ios-browsers-outline"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-8">
+                                                        <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                            <i class="icon ion-android-cart"></i>Add to cart
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section class="slice-lg has-bg-cover bg-size-cover" style="background-image: url(static/images/img-slider-1.jpg);">
+                        <div class="mask mask-base-1--style-1"></div>
+                        <div class="container">
+                            <div class="row justify-content-center">
+                                <div class="col-6 text-center">
+                                    <h2 class="heading heading-1 strong-600 c-white">
+                                        Join the biggest sales of the year
+                                    </h2>
+                                    <p class="c-white trong-300 mt-4">
+                                        Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. There is only that moment, and the incredible certainty that everything under the sun has been written by one hand only.
+                                    </p>
+
+                                    <div class="btn-container mt-5">
+                                        <a href="#" class="btn btn-styled btn-white btn-outline btn-circle px-5">Learn more</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="row align-items-center">
+                                <div class="col-lg-6 ml-lg-auto order-lg-2">
+                                    <img src="static/picture/img-product-lg-1.jpg" class="img-fluid">
+                                </div>
+
+                                <div class="col-lg-5 order-lg-1">
+                                    <div class="">
+                                        <h3 class="heading heading-2 strong-600">The most beautiful colors you've ever seen</h3>
+
+                                        <p class=" c-gray-light mt-4">
+                                            There is only that moment, and the incredible certainty that everything under the sun has been written by one hand only.
+                                        </p>
+
+                                        <div class="btn-container mt-5">
+                                            <a href="#" class="btn btn-base-1 btn-circle btn-icon-left px-4" data-scroll-to="#scrollToSection">
+                                                <i class="icon ion-android-cart"></i> Add to cart
+                                            </a>
+                                            <a href="#" class="btn btn-base-3 btn-circle btn-icon-left px-4" data-scroll-to="#scrollToSection">
+                                                Learn more
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section class="slice sct-color-2">
+                        <div class="container">
+                            <div class="section-title section-title--style-1 text-center">
+                                <h3 class="section-title-inner heading-3 strong-600 text-capitalize">
+                                    <span>Suggested products</span>
+                                </h3>
+                            </div>
+
+                            <div class="row cols-xs-space cols-sm-space cols-md-space">
+                                <div class="col-lg-3">
+                                    <div class="block product no-border z-depth-2-top z-depth-2--hover">
+                                        <div class="block-image">
+                                            <a href="#">
+                                                <img src="static/picture/img-1.png" class="img-center">
+                                            </a>
+                                            <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+                                        </div>
+
+                                        <div class="block-body text-center">
+                                            <h3 class="heading heading-5 strong-600 text-capitalize">
+                                                <a href="#">
+                                                    Google Home Base
+                                                </a>
+                                            </h3>
+                                            <p class="product-description">
+                                                2.8GHz Processor 1TB Storage 16GB DDR
+                                            </p>
+                                            <div class="product-colors mt-2">
+                                                <div class="color-switch float-wrapper">
+                                                    <a href="#" class="bg-purple"></a>
+                                                    <a href="#" class="bg-pink"></a>
+                                                    <a href="#" class="bg-blue"></a>
+                                                </div>
+                                            </div>
+                                            <div class="product-buttons mt-4">
+                                                <div class="row align-items-center">
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
+                                                            <i class="ion-ios-heart"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
+                                                            <i class="ion-ios-browsers-outline"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-8">
+                                                        <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                            <i class="icon ion-android-cart"></i>Add to cart
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-3">
+                                    <div class="block product no-border z-depth-2-top z-depth-2--hover">
+                                        <div class="block-image">
+                                            <a href="#">
+                                                <img src="static/picture/img-2.png" class="img-center">
+                                            </a>
+                                            <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+                                        </div>
+
+                                        <div class="block-body text-center">
+                                            <h3 class="heading heading-5 strong-600 text-capitalize">
+                                                <a href="#">
+                                                    Google Home
+                                                </a>
+                                            </h3>
+                                            <p class="product-description">
+                                                2.8GHz Processor 1TB Storage 16GB DDR
+                                            </p>
+                                            <div class="product-colors mt-2">
+                                                <div class="color-switch float-wrapper">
+                                                    <a href="#" class="bg-purple"></a>
+                                                    <a href="#" class="bg-pink"></a>
+                                                    <a href="#" class="bg-blue"></a>
+                                                </div>
+                                            </div>
+                                            <div class="product-buttons mt-4">
+                                                <div class="row align-items-center">
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
+                                                            <i class="ion-ios-heart"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
+                                                            <i class="ion-ios-browsers-outline"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-8">
+                                                        <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                            <i class="icon ion-android-cart"></i>Add to cart
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-3">
+                                    <div class="block product no-border z-depth-2-top z-depth-2--hover">
+                                        <div class="block-image">
+                                            <a href="#">
+                                                <img src="static/picture/img-3.png" class="img-center">
+                                            </a>
+                                            <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+                                        </div>
+
+                                        <div class="block-body text-center">
+                                            <h3 class="heading heading-5 strong-600 text-capitalize">
+                                                <a href="#">
+                                                    Libratone Q Adapt
+                                                </a>
+                                            </h3>
+                                            <p class="product-description">
+                                                2.8GHz Processor 1TB Storage 16GB DDR
+                                            </p>
+                                            <div class="product-colors mt-2">
+                                                <div class="color-switch float-wrapper">
+                                                    <a href="#" class="bg-purple"></a>
+                                                    <a href="#" class="bg-pink"></a>
+                                                    <a href="#" class="bg-blue"></a>
+                                                </div>
+                                            </div>
+                                            <div class="product-buttons mt-4">
+                                                <div class="row align-items-center">
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
+                                                            <i class="ion-ios-heart"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
+                                                            <i class="ion-ios-browsers-outline"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-8">
+                                                        <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                            <i class="icon ion-android-cart"></i>Add to cart
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-3">
+                                    <div class="block product no-border z-depth-2-top z-depth-2--hover">
+                                        <div class="block-image">
+                                            <a href="#">
+                                                <img src="static/picture/img-3.png" class="img-center">
+                                            </a>
+                                            <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+                                        </div>
+
+                                        <div class="block-body text-center">
+                                            <h3 class="heading heading-5 strong-600 text-capitalize">
+                                                <a href="#">
+                                                    Libratone Q Adapt
+                                                </a>
+                                            </h3>
+                                            <p class="product-description">
+                                                2.8GHz Processor 1TB Storage 16GB DDR
+                                            </p>
+                                            <div class="product-colors mt-2">
+                                                <div class="color-switch float-wrapper">
+                                                    <a href="#" class="bg-purple"></a>
+                                                    <a href="#" class="bg-pink"></a>
+                                                    <a href="#" class="bg-blue"></a>
+                                                </div>
+                                            </div>
+                                            <div class="product-buttons mt-4">
+                                                <div class="row align-items-center">
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
+                                                            <i class="ion-ios-heart"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-2">
+                                                        <button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
+                                                            <i class="ion-ios-browsers-outline"></i>
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-8">
+                                                        <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                            <i class="icon ion-android-cart"></i>Add to cart
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section class="slice-sm bg-base-1">
+                        <div class="container sct-inner">
+                            <div class="row cols-xs-space cols-sm-space cols-md-space">
+                                <div class="col-lg-4 b-lg-right b-inverse">
+                                    <div class="px-3 py-3 text-lg-center">
+                                        <h3 class="heading heading-sm c-base-text-1 strong-600 text-uppercase ls-1">Free shipping in 48/72H</h3>
+                                        <p class="c-white alpha-8 line-height-1_6">
+                                            Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-4 b-lg-right b-inverse">
+                                    <div class="px-3 py-3 text-lg-center">
+                                        <h3 class="heading heading-sm c-base-text-1 strong-600 text-uppercase ls-1">Free returns</h3>
+                                        <p class="c-white alpha-8 line-height-1_6">
+                                            Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-4">
+                                    <div class="px-3 py-3 text-lg-center">
+                                        <h3 class="heading heading-sm c-base-text-1 strong-600 text-uppercase ls-1">Secure payment</h3>
+                                        <ul class="inline-links mt-2">
+                                            <li>
+                                                <img src="static/picture/visa.png" width="30" class="img-grayscale">
+                                            </li>
+                                            <li>
+                                                <img src="static/picture/mastercard.png" width="30" class="img-grayscale">
+                                            </li>
+                                            <li>
+                                                <img src="static/picture/maestro.png" width="30" class="img-grayscale">
+                                            </li>
+                                            <li>
+                                                <img src="static/picture/paypal.png" width="30" class="img-grayscale">
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

routes/web.php

@@ -2,7 +2,13 @@
 
 use Illuminate\Support\Facades\Route;
 
+use App\Http\Controllers\HomeController;
+use App\Http\Controllers\ProductController;
+use App\Http\Controllers\PageController;
+use App\Http\Controllers\ContactController;
+use App\Http\Controllers\VideoController;
 use App\Http\Controllers\DemoController;
+
 /*
 |--------------------------------------------------------------------------
 | Web Routes
@@ -13,9 +19,32 @@ use App\Http\Controllers\DemoController;
 | be assigned to the "web" middleware group. Make something great!
 |
 */
+Route::get('/demo', [DemoController::class, 'index'])->name('demo');
+
+
+// 主页
+Route::get('/', [HomeController::class, 'index'])->name('home');
+
+// 产品路由
+Route::prefix('products')->group(function () {
+    Route::get('/', [ProductController::class, 'index'])->name('products.index');
+    Route::get('/{id}', [ProductController::class, 'show'])->name('products.show');
+});
+
+// 视频路由
+Route::prefix('videos')->group(function () {
+    Route::get('/', [VideoController::class, 'index'])->name('videos.index');
+    Route::get('/{id}', [VideoController::class, 'show'])->name('videos.show');
+});
 
-Route::get('/', function () {
-    return view('welcome');
+// 文章路由
+Route::prefix('page')->group(function () {
+    Route::get('/', [PageController::class, 'list'])->name('page.list'); // 页面列表页
+    Route::get('/{slug}', [PageController::class, 'detail'])->name('page.detail'); // 页面详情页
 });
 
-Route::get('/demo', [DemoController::class, 'index']);
+// 询盘路由
+Route::prefix('contact')->group(function () {
+    Route::get('/', [ContactController::class, 'create'])->name('contact.create');
+    Route::post('/', [ContactController::class, 'store'])->name('contact.store');
+});