diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..24ada33
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+vendor
+node_modules
+.DS_Store
+composer.lock
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000..6d95134
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,28 @@
+image: node:15.12-alpine3.13
+
+stages:
+  - test
+  - deploy
+
+test:
+  stage: test
+  script:
+  - cd website
+  - yarn install
+  - yarn build
+  rules:
+    - if: $CI_COMMIT_REF_NAME != $CI_DEFAULT_BRANCH
+
+pages:
+  stage: deploy
+  script:
+  - cd website
+  - yarn install
+  - yarn build
+  - mv ./build ../public
+  artifacts:
+    paths:
+    - public
+  rules:
+    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
+
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..b55a6aa
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,49 @@
+{
+  "version": "1.0.0",
+  "name": "badaso/comfree-theme",
+  "description": "Official free theme for commerce module system on badaso",
+  "keywords": [
+    "laravel",
+    "admin",
+    "panel",
+    "dashboard",
+    "pwa",
+    "generator",
+    "blog",
+    "badaso",
+    "news"
+  ],
+  "license": "proprietary",
+  "homepage": "https://badaso.uatech.co.id/",
+  "support": {
+    "issues": "https://github.com/uasoft-indonesia/badaso-comfree-theme/issues",
+    "discussion": "https://github.com/uasoft-indonesia/badaso-comfree-theme/discussions",
+    "source": "https://github.com/uasoft-indonesia/badaso-comfree-theme"
+  },
+  "type": "library",
+  "require": {
+    "badaso/core": "^2.9",
+    "badaso/content-module": "^2.1.1",
+    "badaso/commerce-module": "dev-main"
+
+  },
+  "authors": [
+    {
+      "name": "UASOFT",
+      "email": "hello@uatech.co.id"
+    }
+  ],
+  "minimum-stability": "alpha",
+  "autoload": {
+    "psr-4": {
+      "Uasoft\\Badaso\\Theme\\ComfreeTheme\\": "src/"
+    }
+  },
+  "extra": {
+    "laravel": {
+      "providers": [
+        "Uasoft\\Badaso\\Theme\\ComfreeTheme\\Providers\\ComfreeThemeServiceProvider"
+      ]
+    }
+  }
+}
diff --git a/src/ComfreeTheme.php b/src/ComfreeTheme.php
new file mode 100644
index 0000000..cfc681b
--- /dev/null
+++ b/src/ComfreeTheme.php
@@ -0,0 +1,7 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme;
+
+class ComfreeTheme
+{
+}
diff --git a/src/Commands/ComfreeThemeSetup.php b/src/Commands/ComfreeThemeSetup.php
new file mode 100644
index 0000000..eb2c137
--- /dev/null
+++ b/src/Commands/ComfreeThemeSetup.php
@@ -0,0 +1,145 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme\Commands;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\Artisan;
+use Illuminate\Support\Str;
+
+class ComfreeThemeSetup extends Command
+{
+    protected $file;
+    /**
+     * The console command name.
+     *
+     * @var string
+     */
+    protected $name = 'badaso-comfree-theme:setup';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Setup Badaso Comfree Theme';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->file = app('files');
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    public function handle()
+    {
+        $this->updatePackageJson();
+        $this->publishConfig();
+        $this->addingBadasoEnv();
+        $this->updateWebpackMix();
+    }
+
+    protected function publishConfig()
+    {
+        Artisan::call('vendor:publish', ['--tag' => 'BadasoComfreeTheme']);
+
+        $this->info('Badaso comfree theme provider published');
+    }
+
+    protected function checkExist($file, $search)
+    {
+        return $this->file->exists($file) && !Str::contains($this->file->get($file), $search);
+    }
+
+    protected function updateWebpackMix()
+    {
+        $mix_file = base_path('webpack.mix.js');
+        $search = 'Badaso Comfree Theme';
+
+        if ($this->checkExist($mix_file, $search)) {
+            $data =
+                <<<'EOT'
+
+        // Badaso Comfree Theme
+             mix.js("vendor/badaso/comfree-theme/src/resources/js/app.js", "public/js/comfree-theme.js")
+        .css("vendor/badaso/comfree-theme/src/resources/app/assets/css/style.css","public/css/comfree-theme.css",{},[
+        require("tailwindcss")('./tailwind-comfree.config.js'),
+        require("autoprefixer"),
+        ]
+        )
+        EOT;
+
+            $this->file->append($mix_file, $data);
+        }
+
+        $this->info('webpack.mix.js updated');
+    }
+
+    protected function envListUpload()
+    {
+        return [
+            'COMFREE_THEME_PREFIX' => 'comfree',
+        ];
+    }
+
+    protected function addingBadasoEnv()
+    {
+        try {
+            $env_path = base_path('.env');
+
+            $env_file = file_get_contents($env_path);
+            $arr_env_file = explode("\n", $env_file);
+
+            $env_will_adding = $this->envListUpload();
+
+            $new_env_adding = [];
+            foreach ($env_will_adding as $key_add_env => $val_add_env) {
+                $status_adding = true;
+                foreach ($arr_env_file as $key_env_file => $val_env_file) {
+                    $val_env_file = trim($val_env_file);
+                    if (substr($val_env_file, 0, 1) != '#' && $val_env_file != '' && strstr($val_env_file, $key_add_env)) {
+                        $status_adding = false;
+                        break;
+                    }
+                }
+                if ($status_adding) {
+                    $new_env_adding[] = "{$key_add_env}={$val_add_env}";
+                }
+            }
+
+            foreach ($new_env_adding as $index_env_add => $val_env_add) {
+                $arr_env_file[] = $val_env_add;
+            }
+
+            $env_file = join("\n", $arr_env_file);
+            file_put_contents($env_path, $env_file);
+
+            $this->info('Adding badaso env');
+        } catch (\Exception $e) {
+            $this->error('Failed adding badaso env '.$e->getMessage());
+        }
+    }
+
+    protected function updatePackageJson()
+    {
+        $package_json = file_get_contents(base_path('package.json'));
+        $decoded_json = json_decode($package_json, true);
+
+        $decoded_json['dependencies']['daisyui'] = '^4.6.0';
+        $decoded_json['dependencies']['alpinejs'] = '^3.13.5';
+        $decoded_json['dependencies']['tailwindcss'] = '^3.4.1';
+        $decoded_json['dependencies']['@tailwindcss/aspect-ratio'] = '^0.4.2';
+        $encoded_json = json_encode($decoded_json, JSON_PRETTY_PRINT);
+        file_put_contents(base_path('package.json'), $encoded_json);
+
+        $this->info('package.json updated');
+    }
+}
diff --git a/src/Config/badaso-comfree-theme.php b/src/Config/badaso-comfree-theme.php
new file mode 100644
index 0000000..85f7887
--- /dev/null
+++ b/src/Config/badaso-comfree-theme.php
@@ -0,0 +1,10 @@
+<?php
+
+return [
+    'comfree_theme_prefix' => env('COMFREE_THEME_PREFIX'),
+
+    /**
+     * Overriding controllers.
+     */
+    'controllers' => [],
+];
diff --git a/src/Controllers/Controller.php b/src/Controllers/Controller.php
new file mode 100644
index 0000000..5f0f505
--- /dev/null
+++ b/src/Controllers/Controller.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme\Controllers;
+
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Foundation\Bus\DispatchesJobs;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+use Illuminate\Routing\Controller as BaseController;
+
+class Controller extends BaseController
+{
+    use AuthorizesRequests;
+    use DispatchesJobs;
+    use ValidatesRequests;
+}
diff --git a/src/Controllers/DetailController.php b/src/Controllers/DetailController.php
new file mode 100644
index 0000000..9206f41
--- /dev/null
+++ b/src/Controllers/DetailController.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme\Controllers;
+
+use Exception;
+use Illuminate\Http\Request;
+
+use Uasoft\Badaso\Theme\ComfreeTheme\Helpers\Configurations;
+
+class DetailController extends Controller
+{
+    public function index()
+    {
+        return view('comfree-theme::pages.detail-page');
+    }
+}
diff --git a/src/Controllers/HomeController.php b/src/Controllers/HomeController.php
new file mode 100644
index 0000000..4fa442c
--- /dev/null
+++ b/src/Controllers/HomeController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme\Controllers;
+
+use Exception;
+use Illuminate\Http\Request;
+
+use Uasoft\Badaso\Theme\ComfreeTheme\Helpers\Configurations;
+
+class HomeController extends Controller
+{
+    public function index(){
+
+
+        return view('comfree-theme::pages.landing-page');
+    }
+
+
+}
diff --git a/src/Facades/ComfreeTheme.php b/src/Facades/ComfreeTheme.php
new file mode 100644
index 0000000..56f4cbf
--- /dev/null
+++ b/src/Facades/ComfreeTheme.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme\Facades;
+
+use Illuminate\Support\Facades\Facade;
+
+class ComfreeTheme extends Facade
+{
+    /**
+     * Get the registered name of the component.
+     *
+     * @return string
+     */
+    protected static function getFacadeAccessor()
+    {
+        return 'badaso-comfree-theme';
+    }
+}
diff --git a/src/Helpers/CaseConvert.php b/src/Helpers/CaseConvert.php
new file mode 100644
index 0000000..2a08fd4
--- /dev/null
+++ b/src/Helpers/CaseConvert.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme\Helpers;
+
+class CaseConvert
+{
+    public static function slugToCapitalize($string)
+    {
+        $modified_string = str_replace('-', ' ', $string);
+
+        return ucwords($modified_string);
+    }
+}
diff --git a/src/Helpers/Configurations.php b/src/Helpers/Configurations.php
new file mode 100644
index 0000000..06ae5ad
--- /dev/null
+++ b/src/Helpers/Configurations.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme\Helpers;
+
+use Uasoft\Badaso\Models\Configuration;
+
+class Configurations
+{
+    public static function index()
+    {
+        $configurations = Configuration::where('group', 'comfreeTheme')->get();
+        foreach ($configurations as $key => $config) {
+            if ($config->key == 'comfreeThemeSiteTitle') {
+                $site_title = $config->value;
+            }
+        }
+
+        $title = (object)[
+            "siteTitle" => $site_title
+        ];
+        return $title;
+    }
+}
diff --git a/src/Helpers/Route.php b/src/Helpers/Route.php
new file mode 100644
index 0000000..bffa1f6
--- /dev/null
+++ b/src/Helpers/Route.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme\Helpers;
+
+class Route
+{
+    public static function getController($key)
+    {
+        // get config 'controllers' from config/badaso-comfree-theme.php
+        $controllers = config('badaso-comfree-theme.controllers');
+
+        // if the key is not found, return $key
+        if (!isset($controllers[$key])) {
+            return 'Uasoft\\Badaso\\Theme\\ComfreeTheme\\Controllers\\'.$key;
+        }
+
+        // return the value of the key
+        return $controllers[$key];
+    }
+}
diff --git a/src/Images/comfree-img/Full-logo-badaso-1.png b/src/Images/comfree-img/Full-logo-badaso-1.png
new file mode 100644
index 0000000..63af743
Binary files /dev/null and b/src/Images/comfree-img/Full-logo-badaso-1.png differ
diff --git a/src/Images/comfree-img/dashboard.svg b/src/Images/comfree-img/dashboard.svg
new file mode 100644
index 0000000..80273e0
--- /dev/null
+++ b/src/Images/comfree-img/dashboard.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g>
+</g>
+	<path d="M17 11.5v0.5h-6.168v-1h5.152c-0.112-1.692-0.789-3.231-1.842-4.434l-0.806 0.806-0.707-0.707 0.802-0.802c-1.202-1.053-2.74-1.726-4.431-1.839v2.976h-1v-2.976c-1.691 0.113-3.229 0.786-4.43 1.839l0.796 0.796-0.707 0.707-0.8-0.8c-1.053 1.203-1.731 2.742-1.842 4.434h5.171v1h-6.188v-0.5c0-4.687 3.813-8.5 8.5-8.5s8.5 3.813 8.5 8.5zM10.5 11.5c0 1.103-0.897 2-2 2s-2-0.897-2-2c0-0.644 0.311-1.21 0.784-1.577l-2.082-3.63 0.867-0.497 2.141 3.733c0.095-0.014 0.19-0.029 0.29-0.029 1.103 0 2 0.897 2 2zM9.5 11.5c0-0.551-0.449-1-1-1s-1 0.449-1 1 0.449 1 1 1 1-0.449 1-1z" fill="#000000" />
+</svg>
diff --git a/src/Images/comfree-img/default-user.png b/src/Images/comfree-img/default-user.png
new file mode 100644
index 0000000..1a7962e
Binary files /dev/null and b/src/Images/comfree-img/default-user.png differ
diff --git a/src/Images/comfree-img/ecomhtml.svg b/src/Images/comfree-img/ecomhtml.svg
new file mode 100644
index 0000000..7b72aab
--- /dev/null
+++ b/src/Images/comfree-img/ecomhtml.svg
@@ -0,0 +1,9 @@
+<svg width="127" height="33" viewBox="0 0 127 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.64" d="M12.9307 24.4229C12.394 24.4229 11.8693 24.5821 11.4231 24.8803C10.9768 25.1784 10.629 25.6022 10.4236 26.0981C10.2182 26.5939 10.1645 27.1396 10.2692 27.666C10.3739 28.1924 10.6323 28.6759 11.0119 29.0555C11.3913 29.4349 11.8749 29.6934 12.4013 29.7981C12.9277 29.9028 13.4733 29.8491 13.9692 29.6437C14.4651 29.4383 14.8889 29.0905 15.1871 28.6442C15.4852 28.198 15.6444 27.6733 15.6444 27.1365C15.6444 26.4169 15.3585 25.7266 14.8496 25.2177C14.3407 24.7088 13.6504 24.4229 12.9307 24.4229Z" fill="#542DED"/>
+<path opacity="0.64" d="M23.7989 24.4229C23.2621 24.4229 22.7375 24.5821 22.2913 24.8803C21.845 25.1784 21.4972 25.6022 21.2918 26.0981C21.0864 26.5939 21.0326 27.1396 21.1373 27.666C21.242 28.1924 21.5005 28.6759 21.88 29.0555C22.2595 29.4349 22.7431 29.6934 23.2695 29.7981C23.7959 29.9028 24.3415 29.8491 24.8374 29.6437C25.3332 29.4383 25.757 29.0905 26.0552 28.6442C26.3534 28.198 26.5125 27.6733 26.5125 27.1365C26.5125 26.4169 26.2266 25.7266 25.7177 25.2177C25.2088 24.7088 24.5186 24.4229 23.7989 24.4229Z" fill="#542DED"/>
+<path d="M26.4584 5.42725H8.73804C8.5705 5.43305 8.41093 5.50072 8.29028 5.61721L11.004 17.4489C11.004 17.5438 11.004 17.6252 11.0989 17.7202C11.4153 18.1044 11.8132 18.4133 12.2638 18.6246C12.7144 18.8358 13.2065 18.944 13.7041 18.9413H23.7989C25.4008 18.9237 26.9318 18.2786 28.0632 17.1445C29.1947 16.0106 29.8363 14.4781 29.8505 12.8763V8.80577C29.8469 7.90849 29.4879 7.04917 28.8522 6.41597C28.2164 5.78276 27.3557 5.42725 26.4584 5.42725Z" fill="#542DED"/>
+<path opacity="0.8" d="M24.613 22.7811H15.3865C13.9552 22.7871 12.5649 22.3031 11.4467 21.4097C10.3285 20.5161 9.54983 19.2668 9.23998 17.8694L6.52634 5.88842C6.43542 5.48602 6.21227 5.12569 5.89253 4.86498C5.5728 4.60427 5.17492 4.45823 4.76245 4.45017H3.582C3.35169 4.45017 3.13082 4.35868 2.96797 4.19584C2.80511 4.03299 2.71362 3.81211 2.71362 3.5818C2.71362 3.35149 2.80511 3.13062 2.96797 2.96777C3.13082 2.80491 3.35169 2.71342 3.582 2.71342H4.76245C5.57741 2.70955 6.36913 2.98474 7.006 3.49324C7.64285 4.00174 8.08647 4.71292 8.26306 5.50851L10.9768 17.4894C11.2025 18.5004 11.7667 19.4039 12.5761 20.0504C13.3855 20.6969 14.3914 21.0476 15.4272 21.0444H24.6537C24.884 21.0444 25.1049 21.1358 25.2677 21.2987C25.4306 21.4615 25.522 21.6824 25.522 21.9127C25.522 22.143 25.4306 22.3639 25.2677 22.5268C25.1049 22.6896 24.884 22.7811 24.6537 22.7811H24.613Z" fill="#542DED"/>
+<path d="M46.9086 14.8162C45.8014 14.8162 44.9168 14.4743 44.2546 13.7905C43.5925 13.0958 43.2289 12.1514 43.1637 10.9574L43.1475 10.4038L43.1637 9.8665C43.2289 8.69419 43.5925 7.76068 44.2546 7.06599C44.9168 6.37129 45.8014 6.02393 46.9086 6.02393C48.1027 6.02393 49.0253 6.40385 49.6766 7.16368C50.3387 7.9235 50.6698 8.9547 50.6698 10.2572V10.5503C50.6698 10.6588 50.6317 10.7512 50.5558 10.8271C50.4907 10.8922 50.4038 10.9248 50.2953 10.9248H44.6454V11.0714C44.678 11.7769 44.8951 12.3794 45.2967 12.8787C45.6983 13.3779 46.2302 13.6276 46.8923 13.6276C47.4025 13.6276 47.815 13.5299 48.1298 13.3346C48.4554 13.1283 48.6996 12.9167 48.8625 12.6996C48.9602 12.5693 49.0361 12.4933 49.0904 12.4716C49.1447 12.439 49.2369 12.4228 49.3672 12.4228H50.0836C50.1813 12.4228 50.2627 12.4499 50.3278 12.5042C50.4038 12.5585 50.4418 12.629 50.4418 12.7158C50.4418 12.9546 50.2953 13.2423 50.0022 13.5788C49.7091 13.9153 49.2912 14.2083 48.7485 14.458C48.2166 14.6968 47.6033 14.8162 46.9086 14.8162ZM49.1881 9.81765V9.76881C49.1881 9.009 48.9819 8.39029 48.5694 7.91265C48.1569 7.43504 47.6033 7.19624 46.9086 7.19624C46.203 7.19624 45.6494 7.43504 45.2478 7.91265C44.8463 8.39029 44.6454 9.009 44.6454 9.76881V9.81765H49.1881ZM55.385 14.8162C54.2235 14.8162 53.3172 14.4906 52.6659 13.8393C52.0146 13.1772 51.6727 12.2545 51.6401 11.0714L51.6238 10.4201L51.6401 9.76881C51.6727 8.58567 52.0146 7.66842 52.6659 7.01714C53.3172 6.355 54.2235 6.02393 55.385 6.02393C56.1665 6.02393 56.8232 6.16504 57.3551 6.44727C57.8978 6.71863 58.2995 7.06056 58.56 7.47304C58.8313 7.88552 58.9778 8.29797 58.9996 8.71047C59.0104 8.80816 58.9724 8.89503 58.8856 8.97099C58.8096 9.04694 58.7228 9.08496 58.6251 9.08496H57.9087C57.8001 9.08496 57.7187 9.06322 57.6645 9.01983C57.6102 8.96553 57.5559 8.87329 57.5016 8.74304C57.3062 8.21118 57.0348 7.83667 56.6875 7.61957C56.351 7.39163 55.9223 7.27765 55.4013 7.27765C54.7174 7.27765 54.1746 7.48932 53.773 7.91265C53.3714 8.33599 53.1543 8.98181 53.1218 9.85022L53.1055 10.4201L53.1218 10.9899C53.1543 11.8583 53.3714 12.5042 53.773 12.9275C54.1746 13.3508 54.7174 13.5625 55.4013 13.5625C55.9331 13.5625 56.3673 13.454 56.7038 13.2369C57.0403 13.0089 57.3062 12.629 57.5016 12.0971C57.5559 11.9669 57.6102 11.88 57.6645 11.8366C57.7187 11.7823 57.8001 11.7552 57.9087 11.7552H58.6251C58.7228 11.7552 58.8096 11.7932 58.8856 11.8692C58.9724 11.9451 59.0104 12.032 58.9996 12.1297C58.9778 12.5313 58.8313 12.9383 58.56 13.3508C58.2995 13.7633 57.8978 14.1106 57.3551 14.3929C56.8232 14.6751 56.1665 14.8162 55.385 14.8162ZM63.7345 14.8162C62.5404 14.8162 61.6178 14.4798 60.9665 13.8067C60.3261 13.1337 59.9842 12.2382 59.9408 11.1202L59.9245 10.4201L59.9408 9.71996C59.9842 8.60195 60.3315 7.70642 60.9828 7.03342C61.6449 6.36043 62.5622 6.02393 63.7345 6.02393C64.9068 6.02393 65.8186 6.36043 66.4699 7.03342C67.132 7.70642 67.4847 8.60195 67.5282 9.71996C67.5499 9.95874 67.5608 10.1921 67.5608 10.4201C67.5608 10.648 67.5499 10.8814 67.5282 11.1202C67.4847 12.2382 67.1374 13.1337 66.4862 13.8067C65.8457 14.4798 64.9285 14.8162 63.7345 14.8162ZM63.7345 13.5951C64.4292 13.5951 64.9773 13.3779 65.379 12.9438C65.7914 12.4987 66.014 11.8637 66.0465 11.0388C66.0574 10.9303 66.0628 10.724 66.0628 10.4201C66.0628 10.1162 66.0574 9.90989 66.0465 9.80137C66.014 8.97644 65.7914 8.34681 65.379 7.91265C64.9773 7.46761 64.4292 7.24509 63.7345 7.24509C63.0397 7.24509 62.4861 7.46761 62.0737 7.91265C61.672 8.34681 61.455 8.97644 61.4224 9.80137L61.4062 10.4201L61.4224 11.0388C61.455 11.8637 61.672 12.4987 62.0737 12.9438C62.4861 13.3779 63.0397 13.5951 63.7345 13.5951ZM69.3398 14.6534C69.2312 14.6534 69.139 14.6208 69.063 14.5557C68.9979 14.4798 68.9653 14.3874 68.9653 14.2789V6.56124C68.9653 6.4527 68.9979 6.36586 69.063 6.30073C69.139 6.22475 69.2312 6.18675 69.3398 6.18675H70.0237C70.1322 6.18675 70.2191 6.22475 70.2842 6.30073C70.3493 6.36586 70.3819 6.4527 70.3819 6.56124V7.11483C70.968 6.38757 71.7604 6.02393 72.7591 6.02393C73.953 6.02393 74.7997 6.52325 75.2991 7.52188C75.5596 7.06599 75.9286 6.70235 76.4062 6.43099C76.8947 6.15962 77.4374 6.02393 78.0344 6.02393C78.9245 6.02393 79.6517 6.32786 80.2162 6.93573C80.7807 7.5436 81.0629 8.42285 81.0629 9.57342V14.2789C81.0629 14.3874 81.0249 14.4798 80.9489 14.5557C80.8838 14.6208 80.7969 14.6534 80.6884 14.6534H79.9883C79.8797 14.6534 79.7875 14.6208 79.7115 14.5557C79.6464 14.4798 79.6138 14.3874 79.6138 14.2789V9.71996C79.6138 8.85156 79.4347 8.23284 79.0765 7.86381C78.7183 7.48389 78.2461 7.29393 77.66 7.29393C77.1389 7.29393 76.6884 7.48932 76.3085 7.88009C75.9394 8.26003 75.755 8.87329 75.755 9.71996V14.2789C75.755 14.3874 75.7169 14.4798 75.641 14.5557C75.5759 14.6208 75.489 14.6534 75.3805 14.6534H74.6641C74.5555 14.6534 74.4632 14.6208 74.3873 14.5557C74.3221 14.4798 74.2896 14.3874 74.2896 14.2789V9.71996C74.2896 8.86247 74.0996 8.24375 73.7197 7.86381C73.3506 7.48389 72.8893 7.29393 72.3357 7.29393C71.8147 7.29393 71.3642 7.48389 70.9843 7.86381C70.6152 8.24375 70.4307 8.85701 70.4307 9.70368V14.2789C70.4307 14.3874 70.3927 14.4798 70.3167 14.5557C70.2516 14.6208 70.1648 14.6534 70.0562 14.6534H69.3398ZM83.1419 14.6534C83.0336 14.6534 82.9416 14.6208 82.8651 14.5557C82.8 14.4798 82.7674 14.3874 82.7674 14.2789V6.56124C82.7674 6.4527 82.8 6.36586 82.8651 6.30073C82.9416 6.22475 83.0336 6.18675 83.1419 6.18675H83.8257C83.9348 6.18675 84.0211 6.22475 84.0862 6.30073C84.1514 6.36586 84.1839 6.4527 84.1839 6.56124V7.11483C84.7701 6.38757 85.563 6.02393 86.5611 6.02393C87.7554 6.02393 88.6021 6.52325 89.1011 7.52188C89.3616 7.06599 89.7312 6.70235 90.2083 6.43099C90.6968 6.15962 91.2398 6.02393 91.8365 6.02393C92.7271 6.02393 93.4541 6.32786 94.0183 6.93573C94.5833 7.5436 94.865 8.42285 94.865 9.57342V14.2789C94.865 14.3874 94.8275 14.4798 94.751 14.5557C94.6859 14.6208 94.5996 14.6534 94.4905 14.6534H93.7903C93.6821 14.6534 93.5901 14.6208 93.5135 14.5557C93.4484 14.4798 93.4159 14.3874 93.4159 14.2789V9.71996C93.4159 8.85156 93.2367 8.23284 92.8785 7.86381C92.5203 7.48389 92.0482 7.29393 91.462 7.29393C90.941 7.29393 90.4908 7.48932 90.1106 7.88009C89.7418 8.26003 89.557 8.87329 89.557 9.71996V14.2789C89.557 14.3874 89.5196 14.4798 89.443 14.5557C89.3779 14.6208 89.2916 14.6534 89.1825 14.6534H88.4661C88.3578 14.6534 88.2658 14.6208 88.1893 14.5557C88.1242 14.4798 88.0916 14.3874 88.0916 14.2789V9.71996C88.0916 8.86247 87.9019 8.24375 87.5218 7.86381C87.153 7.48389 86.6914 7.29393 86.1378 7.29393C85.6168 7.29393 85.1666 7.48389 84.7864 7.86381C84.4176 8.24375 84.2328 8.85701 84.2328 9.70368V14.2789C84.2328 14.3874 84.1953 14.4798 84.1188 14.5557C84.0537 14.6208 83.9674 14.6534 83.8583 14.6534H83.1419ZM99.9238 14.8162C98.8166 14.8162 97.9317 14.4743 97.2698 13.7905C96.608 13.0958 96.244 12.1514 96.1789 10.9574L96.1626 10.4038L96.1789 9.8665C96.244 8.69419 96.608 7.76068 97.2698 7.06599C97.9317 6.37129 98.8166 6.02393 99.9238 6.02393C101.118 6.02393 102.04 6.40385 102.692 7.16368C103.354 7.9235 103.685 8.9547 103.685 10.2572V10.5503C103.685 10.6588 103.647 10.7512 103.571 10.8271C103.506 10.8922 103.419 10.9248 103.31 10.9248H97.6606V11.0714C97.6931 11.7769 97.9105 12.3794 98.3119 12.8787C98.7132 13.3779 99.2456 13.6276 99.9075 13.6276C100.418 13.6276 100.83 13.5299 101.145 13.3346C101.471 13.1283 101.715 12.9167 101.878 12.6996C101.975 12.5693 102.051 12.4933 102.106 12.4716C102.16 12.439 102.252 12.4228 102.382 12.4228H103.099C103.196 12.4228 103.278 12.4499 103.343 12.5042C103.419 12.5585 103.457 12.629 103.457 12.7158C103.457 12.9546 103.31 13.2423 103.017 13.5788C102.724 13.9153 102.307 14.2083 101.764 14.458C101.232 14.6968 100.618 14.8162 99.9238 14.8162ZM102.203 9.81765V9.76881C102.203 9.009 101.997 8.39029 101.585 7.91265C101.172 7.43504 100.618 7.19624 99.9238 7.19624C99.218 7.19624 98.6644 7.43504 98.263 7.91265C97.8617 8.39029 97.6606 9.009 97.6606 9.76881V9.81765H102.203ZM105.388 14.6534C105.28 14.6534 105.187 14.6208 105.111 14.5557C105.046 14.4798 105.014 14.3874 105.014 14.2789V6.57752C105.014 6.46898 105.046 6.37671 105.111 6.30073C105.187 6.22475 105.28 6.18675 105.388 6.18675H106.072C106.192 6.18675 106.284 6.22475 106.349 6.30073C106.424 6.36586 106.463 6.45812 106.463 6.57752V7.29393C106.908 6.55581 107.662 6.18675 108.726 6.18675H109.361C109.481 6.18675 109.573 6.21932 109.638 6.28445C109.703 6.34957 109.735 6.44184 109.735 6.56124V7.16368C109.735 7.27222 109.703 7.36449 109.638 7.44047C109.573 7.5056 109.481 7.53816 109.361 7.53816H108.433C107.836 7.53816 107.364 7.71184 107.016 8.05919C106.68 8.40657 106.512 8.87875 106.512 9.47573V14.2789C106.512 14.3874 106.473 14.4798 106.398 14.5557C106.322 14.6208 106.229 14.6534 106.121 14.6534H105.388ZM113.711 14.8162C112.551 14.8162 111.644 14.4906 110.992 13.8393C110.341 13.1772 109.999 12.2545 109.967 11.0714L109.95 10.4201L109.967 9.76881C109.999 8.58567 110.341 7.66842 110.992 7.01714C111.644 6.355 112.551 6.02393 113.711 6.02393C114.493 6.02393 115.15 6.16504 115.682 6.44727C116.225 6.71863 116.626 7.06056 116.886 7.47304C117.158 7.88552 117.305 8.29797 117.326 8.71047C117.337 8.80816 117.299 8.89503 117.212 8.97099C117.136 9.04694 117.049 9.08496 116.952 9.08496H116.235C116.127 9.08496 116.045 9.06322 115.991 9.01983C115.937 8.96553 115.883 8.87329 115.828 8.74304C115.633 8.21118 115.362 7.83667 115.014 7.61957C114.678 7.39163 114.249 7.27765 113.728 7.27765C113.044 7.27765 112.502 7.48932 112.1 7.91265C111.698 8.33599 111.481 8.98181 111.448 9.85022L111.432 10.4201L111.448 10.9899C111.481 11.8583 111.698 12.5042 112.1 12.9275C112.502 13.3508 113.044 13.5625 113.728 13.5625C114.26 13.5625 114.694 13.454 115.03 13.2369C115.367 13.0089 115.633 12.629 115.828 12.0971C115.883 11.9669 115.937 11.88 115.991 11.8366C116.045 11.7823 116.127 11.7552 116.235 11.7552H116.952C117.049 11.7552 117.136 11.7932 117.212 11.8692C117.299 11.9451 117.337 12.032 117.326 12.1297C117.305 12.5313 117.158 12.9383 116.886 13.3508C116.626 13.7633 116.225 14.1106 115.682 14.3929C115.15 14.6751 114.493 14.8162 113.711 14.8162ZM121.979 14.8162C120.872 14.8162 119.988 14.4743 119.325 13.7905C118.664 13.0958 118.3 12.1514 118.235 10.9574L118.218 10.4038L118.235 9.8665C118.3 8.69419 118.664 7.76068 119.325 7.06599C119.988 6.37129 120.872 6.02393 121.979 6.02393C123.174 6.02393 124.096 6.40385 124.747 7.16368C125.41 7.9235 125.741 8.9547 125.741 10.2572V10.5503C125.741 10.6588 125.703 10.7512 125.627 10.8271C125.562 10.8922 125.475 10.9248 125.366 10.9248H119.716V11.0714C119.749 11.7769 119.966 12.3794 120.368 12.8787C120.77 13.3779 121.301 13.6276 121.963 13.6276C122.474 13.6276 122.886 13.5299 123.201 13.3346C123.526 13.1283 123.77 12.9167 123.933 12.6996C124.031 12.5693 124.108 12.4933 124.161 12.4716C124.216 12.439 124.308 12.4228 124.438 12.4228H125.154C125.252 12.4228 125.334 12.4499 125.399 12.5042C125.475 12.5585 125.513 12.629 125.513 12.7158C125.513 12.9546 125.366 13.2423 125.073 13.5788C124.78 13.9153 124.362 14.2083 123.819 14.458C123.288 14.6968 122.675 14.8162 121.979 14.8162ZM124.259 9.81765V9.76881C124.259 9.009 124.053 8.39029 123.64 7.91265C123.228 7.43504 122.675 7.19624 121.979 7.19624C121.274 7.19624 120.721 7.43504 120.319 7.91265C119.917 8.39029 119.716 9.009 119.716 9.76881V9.81765H124.259Z" fill="#030303"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77.3396 17.9102H47.8284L42.3333 25.2371L47.8284 32.564H74.0831L77.3396 17.9102ZM78.9679 17.9102L75.7115 32.564H80.7995L86.2948 25.2371L80.7995 17.9102H78.9679Z" fill="#B6A4FB"/>
+<path d="M48.773 28.4933C48.7079 28.4933 48.6525 28.4705 48.607 28.4249C48.5614 28.3793 48.5386 28.324 48.5386 28.2588V21.8991C48.5386 21.8274 48.5581 21.7688 48.5972 21.7232C48.6428 21.6776 48.7014 21.6548 48.773 21.6548H49.6718C49.7434 21.6548 49.8021 21.6776 49.8476 21.7232C49.8932 21.7688 49.916 21.8274 49.916 21.8991V24.4098H52.7687V21.8991C52.7687 21.8274 52.7914 21.7688 52.837 21.7232C52.8826 21.6776 52.938 21.6548 53.0031 21.6548H53.9117C53.9833 21.6548 54.0387 21.6776 54.0777 21.7232C54.1233 21.7688 54.1461 21.8274 54.1461 21.8991V28.2588C54.1461 28.324 54.1233 28.3793 54.0777 28.4249C54.0387 28.4705 53.9833 28.4933 53.9117 28.4933H53.0031C52.938 28.4933 52.8826 28.4705 52.837 28.4249C52.7914 28.3793 52.7687 28.324 52.7687 28.2588V25.6504H49.916V28.2588C49.916 28.324 49.8932 28.3793 49.8476 28.4249C49.8021 28.4705 49.7434 28.4933 49.6718 28.4933H48.773ZM57.0228 28.4933C56.9577 28.4933 56.9023 28.4705 56.8567 28.4249C56.8112 28.3793 56.7884 28.324 56.7884 28.2588V22.876H54.9811C54.9159 22.876 54.8606 22.8532 54.815 22.8076C54.7694 22.762 54.7466 22.7034 54.7466 22.6318V21.8991C54.7466 21.8274 54.7661 21.7688 54.8052 21.7232C54.8508 21.6776 54.9094 21.6548 54.9811 21.6548H59.9731C60.0448 21.6548 60.1034 21.6776 60.149 21.7232C60.1946 21.7688 60.2174 21.8274 60.2174 21.8991V22.6318C60.2174 22.7034 60.1946 22.762 60.149 22.8076C60.1034 22.8532 60.0448 22.876 59.9731 22.876H58.1756V28.2588C58.1756 28.324 58.1528 28.3793 58.1072 28.4249C58.0681 28.4705 58.0128 28.4933 57.9411 28.4933H57.0228ZM61.0521 28.4933C60.987 28.4933 60.9317 28.4705 60.8861 28.4249C60.8405 28.3793 60.8177 28.324 60.8177 28.2588V21.8991C60.8177 21.8274 60.8372 21.7688 60.8763 21.7232C60.9219 21.6776 60.9805 21.6548 61.0521 21.6548H61.8435C61.9672 21.6548 62.0649 21.7167 62.1365 21.8404L64.022 25.3378L65.9075 21.8404C65.9791 21.7167 66.0768 21.6548 66.2005 21.6548H66.9821C67.0537 21.6548 67.1123 21.6776 67.1579 21.7232C67.2035 21.7688 67.2263 21.8274 67.2263 21.8991V28.2588C67.2263 28.3305 67.2035 28.3891 67.1579 28.4347C67.1123 28.4738 67.0537 28.4933 66.9821 28.4933H66.1419C66.0768 28.4933 66.0214 28.4705 65.9758 28.4249C65.9302 28.3793 65.9075 28.324 65.9075 28.2588V24.0581L64.5495 26.6371C64.4779 26.7804 64.3704 26.8521 64.2271 26.8521H63.8168C63.6801 26.8521 63.5694 26.7804 63.4847 26.6371L62.1268 24.0581V28.2588C62.1268 28.324 62.104 28.3793 62.0584 28.4249C62.0193 28.4705 61.9639 28.4933 61.8923 28.4933H61.0521ZM68.5893 28.4933C68.5241 28.4933 68.4688 28.4705 68.4232 28.4249C68.3776 28.3793 68.3548 28.324 68.3548 28.2588V21.8893C68.3548 21.8176 68.3776 21.7623 68.4232 21.7232C68.4688 21.6776 68.5241 21.6548 68.5893 21.6548H69.5076C69.5792 21.6548 69.6346 21.6776 69.6737 21.7232C69.7192 21.7623 69.742 21.8176 69.742 21.8893V27.321H72.8389C72.9105 27.321 72.9691 27.3438 73.0147 27.3894C73.0603 27.435 73.0831 27.4903 73.0831 27.5554V28.2588C73.0831 28.324 73.0603 28.3793 73.0147 28.4249C72.9691 28.4705 72.9105 28.4933 72.8389 28.4933H68.5893Z" fill="white"/>
+</svg>
diff --git a/src/Images/comfree-img/favicon.png b/src/Images/comfree-img/favicon.png
new file mode 100644
index 0000000..fe60d4d
Binary files /dev/null and b/src/Images/comfree-img/favicon.png differ
diff --git a/src/Images/comfree-img/full-logo-badaso.png b/src/Images/comfree-img/full-logo-badaso.png
new file mode 100644
index 0000000..c2e79b8
Binary files /dev/null and b/src/Images/comfree-img/full-logo-badaso.png differ
diff --git a/src/Images/comfree-img/tailwindcss.svg b/src/Images/comfree-img/tailwindcss.svg
new file mode 100644
index 0000000..a2ff6c6
--- /dev/null
+++ b/src/Images/comfree-img/tailwindcss.svg
@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Tailwind CSS icon</title><path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"/></svg>
\ No newline at end of file
diff --git a/src/Images/comfree-img/tailwindtemplates.svg b/src/Images/comfree-img/tailwindtemplates.svg
new file mode 100644
index 0000000..e8c34b1
--- /dev/null
+++ b/src/Images/comfree-img/tailwindtemplates.svg
@@ -0,0 +1,7 @@
+<svg width="127" height="44" viewBox="0 0 127 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.8653 0H1.70184C0.748812 0 0 0.748812 0 1.70184V26.0722C0 27.0253 0.748812 27.7741 1.70184 27.7741H41.8653C42.8183 27.7741 43.5671 27.0253 43.5671 26.0722V1.70184C43.5671 0.748812 42.8183 0 41.8653 0ZM40.1635 24.3704H3.4037V3.4037H40.1635V24.3704Z" fill="#0ED7B5"/>
+<path d="M37.9851 32.6753H5.58196C4.62892 32.6753 3.88013 33.4241 3.88013 34.3773C3.88013 35.3303 4.62892 36.0791 5.58196 36.0791H37.9851C38.9381 36.0791 39.6869 35.3303 39.6869 34.3773C39.6869 33.4241 38.9381 32.6753 37.9851 32.6753Z" fill="#0ED7B5"/>
+<path d="M37.9851 40.1636H5.58196C4.62892 40.1636 3.88013 40.9124 3.88013 41.8654C3.88013 42.8184 4.62892 43.5672 5.58196 43.5672H37.9851C38.9381 43.5672 39.6869 42.8184 39.6869 41.8654C39.6869 40.9124 38.9381 40.1636 37.9851 40.1636Z" fill="#0ED7B5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7836 6.12671C18.3345 6.12671 16.1789 7.79071 15.3166 11.1188C16.61 9.45475 18.119 8.83073 19.8435 9.24674C20.8274 9.48408 21.5307 10.1729 22.3092 10.9353C23.5773 12.1773 25.045 13.6148 28.2506 13.6148C31.6997 13.6148 33.8553 11.9508 34.7178 8.62272C33.4242 10.2868 31.9153 10.9107 30.1907 10.4948C29.2068 10.2574 28.5035 9.56865 27.7251 8.80617C26.457 7.56418 24.9893 6.12671 21.7836 6.12671ZM15.3166 13.6148C11.8675 13.6148 9.71185 15.2788 8.84961 18.6069C10.143 16.9428 11.652 16.3188 13.3765 16.7348C14.3605 16.9722 15.0637 17.661 15.8422 18.4234C17.1103 19.6654 18.5779 21.1029 21.7836 21.1029C25.2327 21.1029 27.3883 19.4389 28.2506 16.1108C26.9572 17.7748 25.4482 18.3989 23.7237 17.9829C22.7398 17.7455 22.0365 17.0567 21.2581 16.2943C19.9899 15.0523 18.5223 13.6148 15.3166 13.6148Z" fill="#0ED7B5"/>
+<path d="M57.3025 6.03905L57.0749 7.74593H54.1488V17.2719H51.9867V7.74593H48.9631V6.03905H57.3025ZM64.1865 14.9961C64.1865 15.3321 64.2353 15.5813 64.3328 15.7439C64.4412 15.8956 64.6092 16.0148 64.8368 16.1015L64.3979 17.4833C63.9102 17.4399 63.5092 17.3207 63.1949 17.1256C62.8915 16.9306 62.6585 16.6325 62.4959 16.2316C62.2033 16.6651 61.8348 16.9902 61.3905 17.2069C60.957 17.4128 60.4693 17.5158 59.9275 17.5158C59.0713 17.5158 58.394 17.2719 57.8955 16.7843C57.3969 16.2966 57.1477 15.6572 57.1477 14.8661C57.1477 13.9341 57.4836 13.2242 58.1556 12.7365C58.8383 12.238 59.8083 11.9888 61.0654 11.9888H62.1383V11.5011C62.1383 10.9484 62.0082 10.5636 61.7481 10.3469C61.4989 10.1193 61.0925 10.0055 60.5289 10.0055C59.9004 10.0055 59.1418 10.1572 58.2531 10.4607L57.7654 9.04641C58.8383 8.63459 59.8787 8.42869 60.8866 8.42869C63.0865 8.42869 64.1865 9.41488 64.1865 11.3873V14.9961ZM60.4802 16.004C61.1846 16.004 61.7373 15.6518 62.1383 14.9473V13.2079H61.2767C59.9329 13.2079 59.261 13.7065 59.261 14.7035C59.261 15.1153 59.3639 15.435 59.5698 15.6626C59.7757 15.8902 60.0792 16.004 60.4802 16.004ZM68.7853 8.67253V17.2719H66.7045V8.67253H68.7853ZM67.7286 4.31592C68.1188 4.31592 68.4331 4.44055 68.6715 4.68981C68.9208 4.92823 69.0454 5.22625 69.0454 5.58389C69.0454 5.94152 68.9208 6.23954 68.6715 6.47797C68.4331 6.71639 68.1188 6.8356 67.7286 6.8356C67.3493 6.8356 67.0351 6.71639 66.7858 6.47797C66.5474 6.23954 66.4282 5.94152 66.4282 5.58389C66.4282 5.22625 66.5474 4.92823 66.7858 4.68981C67.0351 4.44055 67.3493 4.31592 67.7286 4.31592ZM73.3244 17.5158C72.6634 17.5158 72.1432 17.3261 71.7639 16.9468C71.3954 16.5567 71.2112 16.0094 71.2112 15.305V5.22625L73.2919 4.99867V15.2399C73.2919 15.6409 73.4545 15.8414 73.7796 15.8414C73.9422 15.8414 74.1047 15.8143 74.2673 15.7601L74.7062 17.2232C74.2727 17.4183 73.8121 17.5158 73.3244 17.5158ZM86.588 8.67253L84.7185 17.2719H82.1176L80.8171 10.5257L79.4841 17.2719H76.9319L75.03 8.67253H77.1107L78.3137 15.7439L79.8092 8.67253H81.9388L83.3043 15.7439L84.5885 8.67253H86.588ZM90.1054 8.67253V17.2719H88.0246V8.67253H90.1054ZM89.0487 4.31592C89.4389 4.31592 89.7532 4.44055 89.9916 4.68981C90.2408 4.92823 90.3655 5.22625 90.3655 5.58389C90.3655 5.94152 90.2408 6.23954 89.9916 6.47797C89.7532 6.71639 89.4389 6.8356 89.0487 6.8356C88.6694 6.8356 88.3551 6.71639 88.1059 6.47797C87.8675 6.23954 87.7483 5.94152 87.7483 5.58389C87.7483 5.22625 87.8675 4.92823 88.1059 4.68981C88.3551 4.44055 88.6694 4.31592 89.0487 4.31592ZM97.1967 8.42869C97.9662 8.42869 98.5622 8.66169 98.9849 9.12769C99.4184 9.58286 99.6351 10.2223 99.6351 11.0459V17.2719H97.5543V11.371C97.5543 10.8617 97.4622 10.504 97.278 10.2981C97.1046 10.0922 96.8445 9.98926 96.4977 9.98926C96.1401 9.98926 95.8149 10.1031 95.5223 10.3306C95.2406 10.5474 94.9642 10.8671 94.6933 11.2897V17.2719H92.6125V8.67253H94.4169L94.5795 9.79419C95.2839 8.88385 96.1563 8.42869 97.1967 8.42869ZM109.292 5.22625V17.2719H107.455L107.309 16.1828C107.038 16.5946 106.691 16.9197 106.268 17.1582C105.856 17.3966 105.385 17.5158 104.854 17.5158C103.803 17.5158 102.995 17.1094 102.432 16.2966C101.868 15.4838 101.587 14.3784 101.587 12.9804C101.587 12.1025 101.727 11.3223 102.009 10.6395C102.291 9.94591 102.692 9.40405 103.212 9.0139C103.743 8.62376 104.355 8.42869 105.049 8.42869C105.873 8.42869 106.593 8.73755 107.211 9.35528V4.99867L109.292 5.22625ZM105.439 15.939C105.808 15.939 106.133 15.8523 106.415 15.6789C106.696 15.4946 106.962 15.2129 107.211 14.8335V10.8996C106.962 10.5962 106.707 10.3686 106.447 10.2168C106.198 10.0651 105.905 9.98926 105.569 9.98926C105.017 9.98926 104.578 10.2385 104.252 10.737C103.938 11.2247 103.781 11.9671 103.781 12.9641C103.781 14.0262 103.922 14.7902 104.204 15.2562C104.485 15.7114 104.897 15.939 105.439 15.939ZM57.3025 25.6817L57.0749 27.3886H54.1488V36.9146H51.9867V27.3886H48.9631V25.6817H57.3025ZM64.806 32.4117C64.806 32.5201 64.7897 32.8018 64.7572 33.257H59.3602C59.4252 34.0915 59.642 34.6875 60.0104 35.0452C60.3789 35.4028 60.8666 35.5816 61.4735 35.5816C61.8528 35.5816 62.2104 35.522 62.5464 35.4028C62.8823 35.2728 63.24 35.0777 63.6193 34.8176L64.4808 36.0043C63.5272 36.7737 62.4651 37.1585 61.2947 37.1585C59.9833 37.1585 58.9701 36.7575 58.2548 35.9555C57.5504 35.1535 57.1982 34.059 57.1982 32.6718C57.1982 31.794 57.3499 31.0083 57.6533 30.3147C57.9568 29.6103 58.3957 29.063 58.9701 28.6728C59.5444 28.2718 60.2272 28.0714 61.0183 28.0714C62.2213 28.0714 63.1533 28.4561 63.8143 29.2255C64.4754 29.9841 64.806 31.0462 64.806 32.4117ZM62.7414 31.8102C62.7414 30.3038 62.1833 29.5506 61.0671 29.5506C60.5577 29.5506 60.1567 29.7403 59.8641 30.1196C59.5824 30.4881 59.4144 31.0841 59.3602 31.9078H62.7414V31.8102ZM75.7923 28.0714C76.4859 28.0714 77.0386 28.3098 77.4504 28.7866C77.8622 29.2526 78.0681 29.8866 78.0681 30.6886V36.9146H75.9874V31.0137C75.9874 30.0925 75.6731 29.6319 75.0445 29.6319C74.7086 29.6319 74.416 29.7403 74.1667 29.957C73.9283 30.163 73.679 30.4881 73.4189 30.9324V36.9146H71.3382V31.0137C71.3382 30.0925 71.0239 29.6319 70.3953 29.6319C70.0485 29.6319 69.7505 29.7403 69.5012 29.957C69.2628 30.163 69.0135 30.4881 68.7535 30.9324V36.9146H66.6727V28.3152H68.4771L68.6397 29.4369C69.2899 28.5265 70.119 28.0714 71.1268 28.0714C71.6254 28.0714 72.0534 28.2014 72.4111 28.4615C72.7795 28.7108 73.045 29.063 73.2076 29.5181C73.5544 29.0521 73.9337 28.6945 74.3455 28.4452C74.7682 28.196 75.2504 28.0714 75.7923 28.0714ZM84.938 28.0714C86.0217 28.0714 86.8237 28.4669 87.3439 29.258C87.8641 30.0492 88.1242 31.16 88.1242 32.5905C88.1242 33.4792 87.9887 34.2703 87.7178 34.9639C87.4577 35.6466 87.0675 36.1831 86.5473 36.5732C86.038 36.9634 85.4311 37.1585 84.7267 37.1585C83.8163 37.1585 83.0956 36.8442 82.5646 36.2156V40.2308L80.4839 40.4584V28.3152H82.3045L82.4183 29.3718C82.7543 28.9383 83.139 28.6132 83.5725 28.3965C84.006 28.1797 84.4612 28.0714 84.938 28.0714ZM84.1415 35.5654C85.3444 35.5654 85.9459 34.5792 85.9459 32.6068C85.9459 31.5556 85.8104 30.7969 85.5395 30.3309C85.2685 29.8649 84.8621 29.6319 84.3203 29.6319C83.9735 29.6319 83.6484 29.7403 83.3449 29.957C83.0415 30.163 82.7814 30.4447 82.5646 30.8024V34.6713C82.9656 35.2673 83.4912 35.5654 84.1415 35.5654ZM92.1997 37.1585C91.5386 37.1585 91.0184 36.9688 90.6391 36.5895C90.2706 36.1994 90.0864 35.6521 90.0864 34.9476V24.8689L92.1672 24.6413V34.8826C92.1672 35.2836 92.3297 35.4841 92.6549 35.4841C92.8174 35.4841 92.98 35.457 93.1425 35.4028L93.5814 36.8658C93.148 37.0609 92.6874 37.1585 92.1997 37.1585ZM101.239 34.6388C101.239 34.9747 101.287 35.224 101.385 35.3865C101.493 35.5383 101.661 35.6575 101.889 35.7442L101.45 37.1259C100.962 37.0826 100.561 36.9634 100.247 36.7683C99.9436 36.5732 99.7106 36.2752 99.5481 35.8742C99.2555 36.3077 98.887 36.6328 98.4427 36.8496C98.0092 37.0555 97.5215 37.1585 96.9796 37.1585C96.1235 37.1585 95.4461 36.9146 94.9476 36.4269C94.4491 35.9393 94.1998 35.2999 94.1998 34.5087C94.1998 33.5767 94.5358 32.8669 95.2077 32.3792C95.8905 31.8807 96.8604 31.6314 98.1175 31.6314H99.1904V31.1437C99.1904 30.591 99.0604 30.2063 98.8003 29.9896C98.551 29.762 98.1446 29.6482 97.5811 29.6482C96.9525 29.6482 96.1939 29.7999 95.3053 30.1034L94.8176 28.6891C95.8905 28.2773 96.9309 28.0714 97.9387 28.0714C100.139 28.0714 101.239 29.0575 101.239 31.0299V34.6388ZM97.5323 35.6466C98.2368 35.6466 98.7895 35.2944 99.1904 34.59V32.8506H98.3289C96.985 32.8506 96.3131 33.3491 96.3131 34.3462C96.3131 34.758 96.4161 35.0777 96.622 35.3053C96.8279 35.5329 97.1314 35.6466 97.5323 35.6466ZM108.682 36.5082C108.379 36.725 108.037 36.8875 107.658 36.9959C107.29 37.1043 106.91 37.1585 106.52 37.1585C105.675 37.1476 105.03 36.9092 104.586 36.4432C104.152 35.9663 103.935 35.2673 103.935 34.3462V29.8107H102.586V28.3152H103.935V26.4132L106.016 26.1694V28.3152H108.016L107.804 29.8107H106.016V34.2974C106.016 34.7201 106.087 35.0235 106.228 35.2077C106.379 35.392 106.612 35.4841 106.927 35.4841C107.241 35.4841 107.582 35.3811 107.951 35.1752L108.682 36.5082ZM116.638 32.4117C116.638 32.5201 116.622 32.8018 116.589 33.257H111.192C111.257 34.0915 111.474 34.6875 111.842 35.0452C112.211 35.4028 112.698 35.5816 113.305 35.5816C113.685 35.5816 114.042 35.522 114.378 35.4028C114.714 35.2728 115.072 35.0777 115.451 34.8176L116.313 36.0043C115.359 36.7737 114.297 37.1585 113.127 37.1585C111.815 37.1585 110.802 36.7575 110.087 35.9555C109.382 35.1535 109.03 34.059 109.03 32.6718C109.03 31.794 109.182 31.0083 109.485 30.3147C109.789 29.6103 110.228 29.063 110.802 28.6728C111.376 28.2718 112.059 28.0714 112.85 28.0714C114.053 28.0714 114.985 28.4561 115.646 29.2255C116.307 29.9841 116.638 31.0462 116.638 32.4117ZM114.573 31.8102C114.573 30.3038 114.015 29.5506 112.899 29.5506C112.39 29.5506 111.989 29.7403 111.696 30.1196C111.414 30.4881 111.246 31.0841 111.192 31.9078H114.573V31.8102ZM121.219 28.0714C122.379 28.0714 123.398 28.4127 124.275 29.0955L123.463 30.3147C122.726 29.8487 122.005 29.6157 121.301 29.6157C120.889 29.6157 120.569 29.6969 120.342 29.8595C120.114 30.0112 120 30.2171 120 30.4772C120 30.6723 120.049 30.8349 120.146 30.9649C120.244 31.095 120.417 31.2196 120.667 31.3388C120.927 31.4472 121.306 31.5718 121.805 31.7127C122.737 31.962 123.425 32.2925 123.869 32.7043C124.324 33.1161 124.552 33.6905 124.552 34.4274C124.552 35.2836 124.205 35.9555 123.511 36.4432C122.818 36.92 121.956 37.1585 120.927 37.1585C120.222 37.1585 119.577 37.0501 118.992 36.8333C118.418 36.6166 117.919 36.3186 117.497 35.9393L118.537 34.7688C119.285 35.3324 120.065 35.6141 120.878 35.6141C121.344 35.6141 121.712 35.522 121.983 35.3378C122.265 35.1535 122.406 34.8989 122.406 34.5737C122.406 34.3245 122.352 34.1294 122.243 33.9885C122.146 33.8368 121.962 33.7068 121.691 33.5984C121.431 33.4792 121.019 33.3383 120.455 33.1757C119.577 32.9373 118.933 32.6068 118.521 32.1841C118.109 31.7506 117.903 31.2142 117.903 30.5748C117.903 30.0979 118.039 29.6699 118.31 29.2905C118.591 28.9112 118.981 28.6132 119.48 28.3965C119.989 28.1797 120.569 28.0714 121.219 28.0714Z" fill="black"/>
+</svg>
diff --git a/src/Providers/ComfreeThemeServiceProvider.php b/src/Providers/ComfreeThemeServiceProvider.php
new file mode 100644
index 0000000..2fe7bd1
--- /dev/null
+++ b/src/Providers/ComfreeThemeServiceProvider.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Uasoft\Badaso\Theme\ComfreeTheme\Providers;
+
+use Illuminate\Foundation\AliasLoader;
+use Illuminate\Support\ServiceProvider;
+use Uasoft\Badaso\Theme\ComfreeTheme\Commands\ComfreeThemeSetup;
+use Uasoft\Badaso\Theme\ComfreeTheme\Facades\ComfreeTheme as FacadesComfreeTheme;
+use Uasoft\Badaso\Theme\ComfreeTheme\ComfreeTheme;
+
+class ComfreeThemeServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $loader = AliasLoader::getInstance();
+        $loader->alias('ComfreeTheme', FacadesComfreeTheme::class);
+
+        $this->app->singleton('badaso-comfree-theme', function () {
+            return new ComfreeTheme();
+        });
+
+        $this->loadTranslationsFrom(__DIR__.'/../resources/lang', 'badaso-comfree');
+        $this->loadViewsFrom(__DIR__.'/../resources/views', 'comfree-theme');
+        $this->loadRoutesFrom(__DIR__.'/../Routes/web.php');
+        $this->loadRoutesFrom(__DIR__ . '/../Routes/api.php');
+
+
+        $this->publishes([
+            __DIR__.'/../Seeder'                       => database_path('seeders/Badaso/Commerce/Theme/ComfreeTheme'),
+            __DIR__.'/../Config/badaso-comfree-theme.php' => config_path('badaso-comfree-theme.php'),
+            __DIR__.'/../Images/comfree-img/' => storage_path('app/public/photos/1'),
+            __DIR__.'/../resources/customization/'     => resource_path('js/badaso/theme/comfree-theme/'),
+            __DIR__ . '/../Tailwind/'                      => base_path(),
+        ], 'BadasoComfreeTheme');
+
+        $this->publishes([
+            __DIR__.'/../resources/views' => resource_path('views/vendor/uasoft-indonesia/comfree-theme'),
+        ], 'BadasoComfreeThemeViews');
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        $this->registerConsoleCommands();
+    }
+
+    /**
+     * Register the commands accessible from the Console.
+     */
+    private function registerConsoleCommands()
+    {
+        $this->commands(ComfreeThemeSetup::class);
+    }
+}
diff --git a/src/Routes/api.php b/src/Routes/api.php
new file mode 100644
index 0000000..3d84896
--- /dev/null
+++ b/src/Routes/api.php
@@ -0,0 +1,20 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use Uasoft\Badaso\Middleware\ApiRequest;
+use Uasoft\Badaso\Middleware\BadasoCheckPermissions;
+use Uasoft\Badaso\Theme\ComfreeTheme\Helpers\Route as HelpersRoute;
+use Uasoft\Badaso\Theme\ComfreeTheme\Controllers\HomeController;
+
+$api_route_prefix = \config('badaso.api_route_prefix');
+
+Route::group(['prefix' => $api_route_prefix, 'as' => 'badaso.', 'middleware' => [ApiRequest::class]], function () {
+    Route::group(['prefix' => 'theme/comfree/v1'], function () {
+        Route::group(['prefix' => 'comfree'], function (){
+
+        });
+    });
+});
+
+
+
diff --git a/src/Routes/web.php b/src/Routes/web.php
new file mode 100644
index 0000000..5883fd5
--- /dev/null
+++ b/src/Routes/web.php
@@ -0,0 +1,16 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use Uasoft\Badaso\Theme\ComfreeTheme\Controllers\DetailController;
+use Uasoft\Badaso\Theme\ComfreeTheme\Controllers\HomeController;
+
+$comfree_route_prefix = config('badaso-comfree-theme.comfree_theme_prefix');
+
+Route::prefix($comfree_route_prefix)
+    ->as('badaso.comfree-theme.')
+    ->group(function () {
+    Route::get('/', [HomeController::class, 'index'])->name('home');
+    Route::get('/product-detail', [DetailController::class, 'index'])->name('product-detail');
+
+    });
+
diff --git a/src/Seeder/BadasoComfreeThemeSeeder.php b/src/Seeder/BadasoComfreeThemeSeeder.php
new file mode 100644
index 0000000..bed6bbe
--- /dev/null
+++ b/src/Seeder/BadasoComfreeThemeSeeder.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Database\Seeders\Badaso\Commerce\Theme\ComfreeTheme;
+
+use Illuminate\Database\Seeder;
+
+class BadasoComfreeThemeSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $this->call(ComfreeThemeMenusSeeder::class);
+        $this->call(ComfreeThemeFixedMenuItemSeeder::class);
+        $this->call(ComfreeThemePermissionsSeeder::class);
+        $this->call(ComfreeThemeContentsSeeder::class);
+        $this->call(ComfreeThemeConfigurationsSeeder::class);
+    }
+}
diff --git a/src/Seeder/ComfreeThemeConfigurationsSeeder.php b/src/Seeder/ComfreeThemeConfigurationsSeeder.php
new file mode 100644
index 0000000..ac9846e
--- /dev/null
+++ b/src/Seeder/ComfreeThemeConfigurationsSeeder.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace Database\Seeders\Badaso\Commerce\Theme\ComfreeTheme;
+
+use Exception;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Uasoft\Badaso\Models\Configuration;
+
+class ComfreeThemeConfigurationsSeeder extends Seeder
+{
+    /**
+     * Auto generated seed file.
+     *
+     * @throws Exception
+     *
+     * @return void
+     */
+    public function run()
+    {
+        DB::beginTransaction();
+
+        try {
+            $settings = [
+                0 => [
+                    'key'          => 'comfreeThemeSiteTitle',
+                    'display_name' => 'Site Title',
+                    'value'        => 'Comfree Theme',
+                    'details'      => '',
+                    'type'         => 'text',
+                    'order'        => 1,
+                    'group'        => 'comfreeTheme',
+                    'can_delete'   => 0,
+                ],
+                1 => [
+                    'key'          => 'comfreeThemeFavicon',
+                    'display_name' => 'Favicon Website',
+                    'value'        => 'photos/1/favicon.png',
+                    'details'      => '',
+                    'type'         => 'upload_image',
+                    'order'        => 2,
+                    'group'        => 'comfreeTheme',
+                    'can_delete'   => 0,
+                ],
+                2 => [
+                    'key'          => 'comfreeThemeNavbarIcon',
+                    'display_name' => 'Navbar Icon Theme',
+                    'value'        => 'photos/1/full-logo-badaso.png',
+                    'details'      => '',
+                    'type'         => 'upload_image',
+                    'order'        => 3,
+                    'group'        => 'comfreeTheme',
+                    'can_delete'   => 0,
+                ],
+
+            ];
+
+            foreach ($settings as $key => $value) {
+                Configuration::where('key', $value['key'])->delete();
+                Configuration::create($value);
+            }
+
+            DB::commit();
+        } catch (Exception $e) {
+            throw new Exception('Exception occur '.$e);
+            DB::rollBack();
+        }
+    }
+}
diff --git a/src/Seeder/ComfreeThemeContentsSeeder.php b/src/Seeder/ComfreeThemeContentsSeeder.php
new file mode 100644
index 0000000..9654869
--- /dev/null
+++ b/src/Seeder/ComfreeThemeContentsSeeder.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace Database\Seeders\Badaso\Commerce\Theme\ComfreeTheme;
+
+use Exception;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Uasoft\Badaso\Module\Content\Models\Content;
+
+class ComfreeThemeContentsSeeder extends Seeder
+{
+    /**
+     * Auto generated seed file
+     *
+     * @return void
+     *
+     * @throws Exception
+     */
+    public function run()
+    {
+        \DB::beginTransaction();
+        try {
+            $contents = [
+                0 => [
+                    'slug' => 'comfree-theme',
+                    'label' => 'Comfree Theme',
+                    'value' =>
+                    '{}',
+                    'created_at' => '2024-01-30 06:16:40',
+                    'updated_at' => '2024-01-31 06:25:22',
+                ],
+            ];
+
+
+
+            foreach ($contents as $key => $content) {
+                Content::where('slug', $content['slug'])->delete();
+                Content::create($content);
+            }
+
+            DB::commit();
+        } catch (Exception $e) {
+            \DB::rollBack();
+
+            throw new Exception('Exception occur ' . $e);
+        }
+    }
+}
diff --git a/src/Seeder/ComfreeThemeFixedMenuItemSeeder.php b/src/Seeder/ComfreeThemeFixedMenuItemSeeder.php
new file mode 100644
index 0000000..d74cf4d
--- /dev/null
+++ b/src/Seeder/ComfreeThemeFixedMenuItemSeeder.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace Database\Seeders\Badaso\Commerce\Theme\ComfreeTheme;
+
+use Exception;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Uasoft\Badaso\Models\Menu;
+use Uasoft\Badaso\Models\MenuItem;
+
+class ComfreeThemeFixedMenuItemSeeder extends Seeder
+{
+    /**
+     * Auto generated seed file.
+     *
+     * @throws Exception
+     *
+     * @return void
+     */
+    public function run()
+    {
+        DB::beginTransaction();
+
+        try {
+            $menu_id = Menu::where('key', 'comfree-theme')->firstOrFail()->id;
+            $menu_items = [
+                0 => [
+                    'menu_id'     => $menu_id,
+                    'title'       => 'Configuration',
+                    'url'         => '/comfree-theme-configuration',
+                    'target'      => '_self',
+                    'icon_class'  => 'settings',
+                    'color'       => '',
+                    'parent_id'   => null,
+                    'order'       => 1,
+                    'permissions' => 'browse_comfree_theme_configuration',
+                ],
+            ];
+
+            $new_menu_items = [];
+            foreach ($menu_items as $key => $value) {
+                $menu_item = MenuItem::where('menu_id', $value['menu_id'])
+                        ->where('url', $value['url'])
+                        ->first();
+
+                if (isset($menu_item)) {
+                    continue;
+                }
+
+                MenuItem::create($value);
+            }
+        } catch (Exception $e) {
+            throw new Exception('Exception occur '.$e);
+            DB::rollBack();
+        }
+
+        DB::commit();
+    }
+}
diff --git a/src/Seeder/ComfreeThemeMenusSeeder.php b/src/Seeder/ComfreeThemeMenusSeeder.php
new file mode 100644
index 0000000..0596902
--- /dev/null
+++ b/src/Seeder/ComfreeThemeMenusSeeder.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace Database\Seeders\Badaso\Commerce\Theme\ComfreeTheme;
+
+use Exception;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Uasoft\Badaso\Models\Menu;
+
+class ComfreeThemeMenusSeeder extends Seeder
+{
+    /**
+     * Auto generated seed file.
+     *
+     * @throws Exception
+     *
+     * @return void
+     */
+    public function run()
+    {
+        DB::beginTransaction();
+
+        try {
+            $menus = [
+                0 => [
+                    'key'          => 'comfree-theme',
+                    'display_name' => 'Comfree Theme',
+                ],
+            ];
+
+            $new_menus = [];
+            foreach ($menus as $key => $value) {
+                $menu = Menu::where('key', $value['key'])->first();
+
+                if (isset($menu)) {
+                    continue;
+                }
+                Menu::create($value);
+            }
+        } catch (Exception $e) {
+            throw new Exception('Exception occur '.$e);
+            DB::rollBack();
+        }
+
+        DB::commit();
+    }
+}
diff --git a/src/Seeder/ComfreeThemePermissionsSeeder.php b/src/Seeder/ComfreeThemePermissionsSeeder.php
new file mode 100644
index 0000000..1752f05
--- /dev/null
+++ b/src/Seeder/ComfreeThemePermissionsSeeder.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Database\Seeders\Badaso\Commerce\Theme\ComfreeTheme;
+
+use Illuminate\Database\Seeder;
+use Uasoft\Badaso\Models\Permission;
+use Uasoft\Badaso\Models\Role;
+
+class ComfreeThemePermissionsSeeder extends Seeder
+{
+    /**
+     * Auto generated seed file.
+     */
+    public function run()
+    {
+        $keys = [
+            'browse_comfree_theme_configuration',
+            'edit_comfree_theme_configuration',
+        ];
+
+        $administrator = Role::where('name', 'administrator')->firstOrFail();
+
+        foreach ($keys as $key) {
+            $permission = Permission::firstOrCreate([
+                'key'        => $key,
+                'table_name' => null,
+            ]);
+
+            $administrator->permissions()->attach($permission->id);
+        }
+    }
+}
diff --git a/src/Tailwind/tailwind-comfree.config.js b/src/Tailwind/tailwind-comfree.config.js
new file mode 100644
index 0000000..12dcb25
--- /dev/null
+++ b/src/Tailwind/tailwind-comfree.config.js
@@ -0,0 +1,48 @@
+module.exports = {
+  purge: ["./vendor/badaso/comfree-theme/src/resources/**/*.php"],
+  content: [],
+
+  plugins: [require("daisyui"), require("@tailwindcss/aspect-ratio")],
+  daisyui: {
+    themes: ["light", "cupcake"],
+  },
+  theme: {
+    extend: {
+      fontFamily: {
+        karla: "'Karla' , serif",
+        inter: "'Inter', sans-serif",
+      },
+      fontSize: {
+        s: ["12px", "14px"],
+        sm: ["14px", "20px"],
+        base: ["16px", "24px"],
+        lg: ["24px", "29px"],
+        xl: ["32px", "38px"],
+      },
+
+      colors: {
+        primary: "#06bbd3",
+        gray: {
+          800: "#1f2937",
+        },
+      },
+    },
+  },
+  container: {
+    center: false,
+    screens: {
+      DEFAULT: "80%",
+      sm: "360px",
+      md: "768px",
+      lg: "1024px",
+      lx: "1200px",
+    },
+  },
+  variants: {
+    extend: {
+      brightness: ["hover", "focus"],
+      userSelect: ["responsive", "disabled"],
+      visibility: ["responsive", "hover", "group-hover"],
+    },
+  },
+};
diff --git a/src/resources/app/assets/css/style.css b/src/resources/app/assets/css/style.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/resources/app/assets/css/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/resources/customization/pages/readme.md b/src/resources/customization/pages/readme.md
new file mode 100644
index 0000000..c1b098d
--- /dev/null
+++ b/src/resources/customization/pages/readme.md
@@ -0,0 +1 @@
+## Override Postfree Theme Pages
diff --git a/src/resources/js/api/index.js b/src/resources/js/api/index.js
new file mode 100644
index 0000000..56004c9
--- /dev/null
+++ b/src/resources/js/api/index.js
@@ -0,0 +1 @@
+export default {}
\ No newline at end of file
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
new file mode 100644
index 0000000..ad204ba
--- /dev/null
+++ b/src/resources/js/app.js
@@ -0,0 +1,5 @@
+import Alpine from "alpinejs";
+
+
+window.Alpine = Alpine;
+Alpine.start();
diff --git a/src/resources/js/components/index.js b/src/resources/js/components/index.js
new file mode 100644
index 0000000..56004c9
--- /dev/null
+++ b/src/resources/js/components/index.js
@@ -0,0 +1 @@
+export default {}
\ No newline at end of file
diff --git a/src/resources/js/lang/index.js b/src/resources/js/lang/index.js
new file mode 100644
index 0000000..7355b1c
--- /dev/null
+++ b/src/resources/js/lang/index.js
@@ -0,0 +1,40 @@
+import _ from "lodash";
+
+let exported = {};
+let languages = [];
+
+// DYNAMIC IMPORT BADASO LANG
+try {
+  const modules = require.context("./modules", false, /\.js$/); //
+  modules.keys().forEach((fileName) => {
+    let property = fileName
+      .replace("./", "")
+      .replace(".js", "")
+      .replace(/([a-z])([A-Z])/g, "$1-$2") // get all lowercase letters that are near to uppercase ones
+      .replace(/[\s_]+/g, "-") // replace all spaces and low dash
+      .replace(/^\.\/_/, "")
+      .replace(/\.\w+$/, "")
+      .split("-")
+      .map((word, index) => {
+        if (index > 0) {
+          return word.charAt(0).toUpperCase() + word.slice(1);
+        } else {
+          return word;
+        }
+      })
+      .join("");
+
+    languages.push({
+      label: modules(fileName).label,
+      key: property,
+    });
+    exported[property] = modules(fileName).default;
+  });
+} catch (error) {
+  console.info("Failed to load badaso languages", error);
+}
+
+export default {
+  languages,
+  i18n: exported,
+};
\ No newline at end of file
diff --git a/src/resources/js/lang/modules/en.js b/src/resources/js/lang/modules/en.js
new file mode 100644
index 0000000..7a7315b
--- /dev/null
+++ b/src/resources/js/lang/modules/en.js
@@ -0,0 +1,3 @@
+export const label = "English";
+
+export default {}
\ No newline at end of file
diff --git a/src/resources/js/lang/modules/id.js b/src/resources/js/lang/modules/id.js
new file mode 100644
index 0000000..1e15d91
--- /dev/null
+++ b/src/resources/js/lang/modules/id.js
@@ -0,0 +1,3 @@
+export const label = "Indonesia";
+
+export default {}
\ No newline at end of file
diff --git a/src/resources/js/pages/configuration/browse.vue b/src/resources/js/pages/configuration/browse.vue
new file mode 100644
index 0000000..aca9334
--- /dev/null
+++ b/src/resources/js/pages/configuration/browse.vue
@@ -0,0 +1,409 @@
+<template>
+  <div>
+    <badaso-breadcrumb-row />
+    <vs-row
+      v-if="$helper.isAllowed('browse_comfree_theme_configuration') && groupList.length > 0"
+    >
+      <vs-col vs-lg="12">
+        <vs-card>
+          <vs-tabs :color="adminPanelHeaderFontColor">
+            <vs-tab
+              v-for="(group, index) in groupList"
+              :key="index"
+              :label="group.label"
+            >
+              <vs-row
+                class="site-management__container"
+                v-for="(config, index) in filterConfigurations('comfreeTheme')"
+                :key="index"
+              >
+                <badaso-text
+                  v-if="config.type === 'text'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-text>
+                <badaso-email
+                  v-if="config.type === 'email'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-email>
+                <badaso-password
+                  v-if="config.type === 'password'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-password>
+                <badaso-textarea
+                  v-if="config.type === 'textarea'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-textarea>
+                <badaso-checkbox
+                  v-if="config.type === 'checkbox'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                  :items="config.details.items"
+                ></badaso-checkbox>
+                <badaso-search
+                  v-if="config.type === 'search'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-search>
+                <badaso-number
+                  v-if="config.type === 'number'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-number>
+                <badaso-url
+                  v-if="config.type === 'url'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-url>
+                <badaso-time
+                  v-if="config.type === 'time'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-time>
+                <badaso-date
+                  v-if="config.type === 'date'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-date>
+                <badaso-datetime
+                  v-if="config.type === 'datetime'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                ></badaso-datetime>
+                <badaso-select
+                  v-if="config.type === 'select'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                  :items="config.details.items"
+                ></badaso-select>
+                <badaso-radio
+                  v-if="config.type === 'radio'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                  :items="config.details.items"
+                ></badaso-radio>
+                <badaso-switch
+                  v-if="config.type === 'switch'"
+                  :label="config.displayName"
+                  size="10"
+                  v-model="config.value"
+                ></badaso-switch>
+                <badaso-slider
+                  v-if="config.type === 'slider'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  size="10"
+                  v-model="config.value"
+                ></badaso-slider>
+                <badaso-editor
+                  v-if="config.type === 'editor'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  size="10"
+                  v-model="config.value"
+                ></badaso-editor>
+                <badaso-tags
+                  v-if="config.type === 'tags'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  size="10"
+                  v-model="config.value"
+                ></badaso-tags>
+                <badaso-hidden
+                  v-if="config.type === 'hidden'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                ></badaso-hidden>
+
+                <badaso-select-multiple
+                  v-if="config.type === 'select_multiple'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  v-model="config.value"
+                  size="10"
+                  :items="config.details.items"
+                ></badaso-select-multiple>
+                <badaso-upload-image
+                  v-if="config.type === 'upload_image'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  size="10"
+                  :private-only="config.details !== null && config.details.type === 'private-only'"
+                  :shares-only="config.details !== null && config.details.type === 'shares-only'"
+                  v-model="config.value"
+                ></badaso-upload-image>
+                <badaso-upload-file
+                  v-if="config.type === 'upload_file'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  size="10"
+                  :private-only="config.details !== null && config.details.type === 'private-only'"
+                  :shares-only="config.details !== null && config.details.type === 'shares-only'"
+                  v-model="config.value"
+                ></badaso-upload-file>
+                <badaso-color-picker
+                  v-if="config.type === 'color_picker'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  size="10"
+                  v-model="config.value"
+                ></badaso-color-picker>
+
+                <badaso-upload-image-multiple
+                  v-if="config.type === 'upload_image_multiple'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  size="10"
+                  :private-only="config.details !== null && config.details.type === 'private-only'"
+                  :shares-only="config.details !== null && config.details.type === 'shares-only'"
+                  v-model="config.value"
+                ></badaso-upload-image-multiple>
+                <badaso-upload-file-multiple
+                  v-if="config.type === 'upload_file_multiple'"
+                  :label="config.displayName"
+                  :placeholder="config.value"
+                  :private-only="config.details !== null && config.details.type === 'private-only'"
+                  :shares-only="config.details !== null && config.details.type === 'shares-only'"
+                  size="10"
+                  v-model="config.value"
+                ></badaso-upload-file-multiple>
+
+                <vs-col vs-lg="2">
+                  <br />
+                  <vs-button
+                    color="danger"
+                    type="relief"
+                    @click.stop
+                    @click="openConfirm(config.id)"
+                    v-if="
+                      $helper.isAllowed('delete_configurations') &&
+                        config.canDelete
+                    "
+                    ><vs-icon icon="delete"></vs-icon>
+                  </vs-button>
+                </vs-col>
+              </vs-row>
+            </vs-tab>
+          </vs-tabs>
+        </vs-card>
+      </vs-col>
+      <vs-col vs-lg="12">
+        <vs-card class="action-card">
+          <vs-row>
+            <vs-col vs-lg="12">
+              <vs-button
+                color="primary"
+                type="relief"
+                @click="submitMultipleEdit"
+              >
+                <vs-icon icon="save"></vs-icon> {{ $t("site.edit.multiple") }}
+              </vs-button>
+            </vs-col>
+          </vs-row>
+        </vs-card>
+      </vs-col>
+    </vs-row>
+  </div>
+</template>
+<script>
+import _ from "lodash";
+
+export default {
+  name: "comfreeThemeConfigurationBrowse",
+  components: {},
+  data: () => ({
+    configurations: [],
+    willDeleteConfigurationId: null,
+  }),
+  computed: {
+    groupList: {
+      get() {
+        return [
+          {
+            label: 'Comfree Theme Configuration',
+            value: 'comfreeTheme'
+          }
+        ]
+      },
+    },
+    adminPanelHeaderFontColor: {
+      get() {
+        return "#06bbd3";
+      },
+    },
+  },
+  mounted() {
+    this.getConfigurationList();
+  },
+  methods: {
+    openConfirm(id) {
+      this.willDeleteConfigurationId = id;
+      this.$vs.dialog({
+        type: "confirm",
+        color: "danger",
+        title: this.$t("action.delete.title"),
+        text: this.$t("action.delete.text"),
+        accept: this.deleteConfiguration,
+        acceptText: this.$t("action.delete.accept"),
+        cancelText: this.$t("action.delete.cancel"),
+        cancel: () => {
+          this.willDeleteConfigurationId = null;
+        },
+      });
+    },
+    acceptAlert(color) {
+      this.$vs.notify({
+        color: "danger",
+        title: this.$t("site.deletedImage.title"),
+        text: this.$t("site.deletedImage.text"),
+      });
+    },
+    getConfigurationList() {
+      this.$openLoader();
+      this.$api.badasoConfiguration
+        .browse()
+        .then((response) => {
+          this.$closeLoader();
+          let configurations = response.data.configurations.map((data) => {
+            try {
+              data.details = JSON.parse(data.details);
+              if (data.type === "hidden") {
+                data.value = data.details.value ? data.details.value : "";
+              }
+              if (data.type === "switch") {
+                data.value = data.value == "1" ? true : false;
+              }
+              const typeRequiredItems = [
+                "checkbox",
+                "radio",
+                "select",
+                "select_multiple",
+              ];
+              if (typeRequiredItems.includes(data.type)) {
+                if (!data.details || !data.details.items) {
+                  data.details = {};
+                  data.details.items = [];
+                  this.$vs.notify({
+                    title: this.$t("alert.danger"),
+                    text:
+                      "Invalid options for Checkbox, Radio, Select, Select-multiple.",
+                    color: "danger",
+                  });
+                }
+              }
+            } catch (error) {}
+            return data;
+          });
+          this.configurations = JSON.parse(JSON.stringify(configurations));
+        })
+        .catch((error) => {
+          this.$closeLoader();
+          this.$vs.notify({
+            title: this.$t("alert.danger"),
+            text: error.message,
+            color: "danger",
+          });
+        });
+    },
+    filterConfigurations(group) {
+      return _.filter(this.configurations, ["group", group]);
+    },
+    deleteConfiguration() {
+      this.$openLoader();
+      this.$api.badasoConfiguration
+        .delete({
+          id: this.willDeleteConfigurationId,
+        })
+        .then((response) => {
+          this.$closeLoader();
+          this.getConfigurationList();
+          this.$store.commit("badaso/FETCH_MENU");
+        })
+        .catch((error) => {
+          this.$closeLoader();
+          this.$vs.notify({
+            title: this.$t("alert.danger"),
+            text: error.message,
+            color: "danger",
+          });
+        });
+    },
+    submitForm(config) {
+      this.$openLoader();
+      this.$api.badasoConfiguration
+        .edit(this.$caseConvert.snake(config))
+        .then((response) => {
+          this.$closeLoader();
+          this.getConfigurationList();
+          this.$store.commit("badaso/FETCH_CONFIGURATION");
+          this.$vs.notify({
+            title: this.$t("alert.success"),
+            text: this.$t("site.configUpdated"),
+            color: "success",
+          });
+        })
+        .catch((error) => {
+          this.$closeLoader();
+          this.$vs.notify({
+            title: this.$t("alert.danger"),
+            text: error.message,
+            color: "danger",
+          });
+        });
+    },
+    submitMultipleEdit() {
+      this.$openLoader();
+      this.$api.badasoConfiguration
+        .editMultiple({ configurations: this.configurations })
+        .then((response) => {
+          this.$closeLoader();
+          this.getConfigurationList();
+          this.$store.commit("badaso/FETCH_CONFIGURATION");
+          this.$vs.notify({
+            title: this.$t("alert.success"),
+            text: this.$t("site.configUpdated"),
+            color: "success",
+          });
+        })
+        .catch((error) => {
+          this.$closeLoader();
+          this.$vs.notify({
+            title: this.$t("alert.danger"),
+            text: error.message,
+            color: "danger",
+          });
+        });
+    },
+  },
+};
+</script>
diff --git a/src/resources/js/pages/index.vue b/src/resources/js/pages/index.vue
new file mode 100644
index 0000000..e0eb19d
--- /dev/null
+++ b/src/resources/js/pages/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <component
+    v-if="globalComponentList[defaultComponent]"
+    v-bind:is="globalComponentList[defaultComponent]"
+  ></component>
+  <component v-else v-bind:is="defaultComponent"></component>
+</template>
+
+<script>
+import ComfreeThemeConfigurationBrowse from "./configuration/browse";
+
+export default {
+  components: {
+    ComfreeThemeConfigurationBrowse,
+  },
+  name: "ComfreeEntryIndex",
+  data: () => ({
+    globalComponentList: {},
+    defaultComponent: null,
+  }),
+  mounted() {
+    const routeName = this.$route.name;
+    const componentName = this.$caseConvert.kebab(routeName);
+    const slug = this.$route.params ? this.$route.params.slug : "";
+
+    this.globalComponentList = this.constructor.superOptions.components;
+
+    this.defaultComponent = componentName;
+  },
+  methods: {},
+};
+</script>
diff --git a/src/resources/js/router/excludeRouter.js b/src/resources/js/router/excludeRouter.js
new file mode 100644
index 0000000..f5e0e7b
--- /dev/null
+++ b/src/resources/js/router/excludeRouter.js
@@ -0,0 +1,3 @@
+export default [
+  'ComfreeThemeConfigurationBrowse',
+]
diff --git a/src/resources/js/router/routes.js b/src/resources/js/router/routes.js
new file mode 100644
index 0000000..f8b9aa5
--- /dev/null
+++ b/src/resources/js/router/routes.js
@@ -0,0 +1,17 @@
+import Pages from "./../pages/index.vue";
+
+let prefix = process.env.MIX_ADMIN_PANEL_ROUTE_PREFIX
+  ? "/" + process.env.MIX_ADMIN_PANEL_ROUTE_PREFIX
+  : "/badaso-dashboard";
+
+export default [
+  {
+    path: prefix + "/comfree-theme-configuration",
+    name: "ComfreeThemeConfigurationBrowse",
+    component: Pages,
+    meta: {
+      title: "Comfree Theme Configuration",
+      useComponent: "AdminContainer"
+    },
+  },
+];
diff --git a/src/resources/js/store/badaso.js b/src/resources/js/store/badaso.js
new file mode 100644
index 0000000..4a16480
--- /dev/null
+++ b/src/resources/js/store/badaso.js
@@ -0,0 +1,10 @@
+import createPersistedState from "vuex-persistedstate";
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {},
+  getters: {},
+  plugins: [createPersistedState()],
+};
diff --git a/src/resources/views/components/comfree-card-carousel.blade.php b/src/resources/views/components/comfree-card-carousel.blade.php
new file mode 100644
index 0000000..a0f13ac
--- /dev/null
+++ b/src/resources/views/components/comfree-card-carousel.blade.php
@@ -0,0 +1,151 @@
+  <div class="container mx-auto w-full max-w-[1150px]">
+      <div class="flex mt-10 mx-4">
+          <div class="carousel rounded gap-4 w-full">
+              <div class="carousel-item w-60 h-full">
+                  <div
+                      class="flex flex-col rounded cursor-pointer transition ease-in-out delay-150  hover:shadow-xl duration-400 border relative">
+                      <div class="flex h-3/4">
+                          <figure><img
+                                  src="https://demo.saudagarwp.com/wp-content/uploads/sites/2/2019/01/bag-navy-3-300x300.webp"
+                                  class="h-full w-full" alt="Shoes" /></figure>
+                      </div>
+                      <div class="flex flex-col h-1/2 p-4">
+                          <div class="flex justify-center">
+                              <span class="font-bold text-sm text-center"> Waxed Canvas Messenger Bag </span>
+                          </div>
+                          <div class="flex justify-center">
+                              <span class="text-sm text-center text-gray-400">Rp 50.000</span>
+                          </div>
+                      </div>
+                      <div class="absolute top-52 w-full">
+                          <div
+                              class="flex justify-center bg-sky-500 hover:-translate-y-1 w-full rounded-none text-white items-center text-sm h-8">
+                              Beli sekarang
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div class="carousel-item w-60 h-full">
+                  <div
+                      class="flex flex-col rounded cursor-pointer transition ease-in-out delay-150  hover:shadow-xl duration-400 border relative">
+                      <div class="flex h-3/4">
+                          <figure><img
+                                  src="	https://demo.saudagarwp.com/wp-content/uploads/sites/2/2019/01/and-then-3-300x300.webp"
+                                  class="h-full w-full" alt="Shoes" /></figure>
+                      </div>
+                      <div class="flex flex-col h-1/2 p-4">
+                          <div class="flex justify-center">
+                              <span class="font-bold text-sm text-center"> And Then I Woke Up </span>
+                          </div>
+                          <div class="flex justify-center">
+                              <span class="text-sm text-center text-gray-400">Rp 50.000</span>
+                          </div>
+                      </div>
+                      <div class="absolute top-52 w-full">
+                          <div
+                              class="flex justify-center bg-sky-500 hover:-translate-y-1 w-full rounded-none text-white items-center text-sm h-8">
+                              Beli sekarang
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div class="carousel-item w-60 h-full">
+                  <div
+                      class="flex flex-col rounded cursor-pointer transition ease-in-out delay-150  hover:shadow-xl duration-400 border relative">
+                      <div class="flex h-3/4">
+                          <figure><img
+                                  src="https://demo.saudagarwp.com/wp-content/uploads/sites/2/2019/01/do-what-1-300x300.webp"
+                                  class="h-full w-full" alt="Shoes" /></figure>
+                      </div>
+                      <div class="flex flex-col h-1/2 p-4">
+                          <div class="flex justify-center">
+                              <span class="font-bold text-sm text-center"> Do What You Love </span>
+                          </div>
+                          <div class="flex justify-center">
+                              <span class="text-sm text-center text-gray-400">Rp 50.000</span>
+                          </div>
+                      </div>
+                      <div class="absolute top-52 w-full">
+                          <div
+                              class="flex justify-center bg-sky-500 hover:-translate-y-1 w-full rounded-none text-white items-center text-sm h-8">
+                              Beli sekarang
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div class="carousel-item w-60 h-full">
+                  <div
+                      class="flex flex-col rounded cursor-pointer transition ease-in-out delay-150  hover:shadow-xl duration-400 border relative">
+                      <div class="flex h-3/4">
+                          <figure><img
+                                  src="https://demo.saudagarwp.com/wp-content/uploads/sites/2/2019/01/lookbook-1-300x300.webp"
+                                  class="h-full w-full" alt="Shoes" /></figure>
+                      </div>
+                      <div class="flex flex-col h-1/2 p-4">
+                          <div class="flex justify-center">
+                              <span class="font-bold text-sm text-center"> Premium Ampersand Crewneck </span>
+                          </div>
+                          <div class="flex justify-center">
+                              <span class="text-sm text-center text-gray-400">Rp 50.000</span>
+                          </div>
+                      </div>
+                      <div class="absolute top-52 w-full">
+                          <div
+                              class="flex justify-center bg-sky-500 hover:-translate-y-1 w-full rounded-none text-white items-center text-sm h-8">
+                              Beli sekarang
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div class="carousel-item w-60 h-full">
+                  <div
+                      class="flex flex-col rounded cursor-pointer transition ease-in-out delay-150  hover:shadow-xl duration-400 border relative">
+                      <div class="flex h-3/4">
+                          <figure><img
+                                  src="https://demo.saudagarwp.com/wp-content/uploads/sites/2/2019/01/do-what-1-300x300.webp"
+                                  class="h-full w-full" alt="Shoes" /></figure>
+                      </div>
+                      <div class="flex flex-col h-1/2 p-4">
+                          <div class="flex justify-center">
+                              <span class="font-bold text-sm text-center"> Do What You Love </span>
+                          </div>
+                          <div class="flex justify-center">
+                              <span class="text-sm text-center text-gray-400">Rp 50.000</span>
+                          </div>
+                      </div>
+                      <div class="absolute top-52 w-full">
+                          <div
+                              class="flex justify-center bg-sky-500 hover:-translate-y-1 w-full rounded-none text-white items-center text-sm h-8">
+                              Beli sekarang
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div class="carousel-item w-60 h-full">
+                  <div
+                      class="flex flex-col rounded cursor-pointer transition ease-in-out delay-150  hover:shadow-xl duration-400 border relative">
+                      <div class="flex h-3/4">
+                          <figure><img
+                                  src="https://demo.saudagarwp.com/wp-content/uploads/sites/2/2019/01/lookbook-1-300x300.webp"
+                                  class="h-full w-full" alt="Shoes" /></figure>
+                      </div>
+                      <div class="flex flex-col h-1/2 p-4">
+                          <div class="flex justify-center">
+                              <span class="font-bold text-sm text-center"> Premium Ampersand Crewneck </span>
+                          </div>
+                          <div class="flex justify-center">
+                              <span class="text-sm text-center text-gray-400">Rp 50.000</span>
+                          </div>
+                      </div>
+                      <div class="absolute top-52 w-full">
+                          <div
+                              class="flex justify-center bg-sky-500 hover:-translate-y-1 w-full rounded-none text-white items-center text-sm h-8">
+                              Beli sekarang
+                          </div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+  </div>
diff --git a/src/resources/views/components/comfree-card.blade.php b/src/resources/views/components/comfree-card.blade.php
new file mode 100644
index 0000000..25b7538
--- /dev/null
+++ b/src/resources/views/components/comfree-card.blade.php
@@ -0,0 +1,27 @@
+  <div class="container mx-auto w-full max-w-[1150px]">
+      <div class="grid grid-cols-4 gap-6 mt-10 mx-4">
+          <div
+              class="flex flex-col rounded h-80 w-60 cursor-pointer transition ease-in-out delay-150  hover:shadow-xl duration-400 border relative">
+              <div class="flex h-3/4">
+                  <figure><img
+                          src="https://demo.saudagarwp.com/wp-content/uploads/sites/2/2019/01/bag-navy-3-300x300.webp"
+                          class="h-full w-full" alt="Shoes" /></figure>
+              </div>
+              <div class="flex flex-col h-1/2 p-4">
+                  <div class="flex justify-center">
+                      <span class="font-bold text-md text-center">Waxed</span>
+                  </div>
+                  <div class="flex justify-center">
+                      <span class="font-bold text-md text-center">Rp 50.000</span>
+                  </div>
+              </div>
+              <div class="absolute top-52 w-full">
+                  <div
+                      class="flex justify-center bg-sky-500 hover:-translate-y-1 w-full rounded-none text-white items-center text-sm h-8">
+                      Beli sekarang
+                  </div>
+              </div>
+          </div>
+      </div>
+
+  </div>
diff --git a/src/resources/views/components/comfree-footer.blade.php b/src/resources/views/components/comfree-footer.blade.php
new file mode 100644
index 0000000..5e11ead
--- /dev/null
+++ b/src/resources/views/components/comfree-footer.blade.php
@@ -0,0 +1,110 @@
+  <div class="bg-black mt-10">
+      <footer class="text-gray-500">
+          <div class="container mx-auto w-full max-w-[1150px]">
+              <div class="flex flex-row py-8 justify-between gap-4 mx-4">
+                  <div class="flex flex-col w-1/2 space-y-2">
+                      <h4 class="footer-title font-bold text-white text-base">Comfree Theme</h4>
+                      <div class="w-3/4">
+                          <span class="text-sm">Comfree Theme merupakan tema toko online yang dibuat khusus untuk
+                              Commerce Module</span>
+                      </div>
+                      <div class="flex flex-row items-center gap-6">
+                          <div class="w-4 h-4">
+                              <a href="#">
+                                  <svg class="h-6 w-6 text-gray-500" viewBox="0 0 24 24" fill="none"
+                                      stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                      stroke-linejoin="round">
+                                      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+                                  </svg>
+                              </a>
+                          </div>
+                          <div class="w-4 h-4">
+                              <a href="#">
+                                  <svg class="h-6 w-6 text-gray-500" width="24" height="24" viewBox="0 0 24 24"
+                                      stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                      stroke-linejoin="round">
+                                      <path stroke="none" d="M0 0h24v24H0z" />
+                                      <rect x="4" y="4" width="16" height="16" rx="4" />
+                                      <circle cx="12" cy="12" r="3" />
+                                      <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
+                                  </svg>
+                              </a>
+                          </div>
+                          <div class="w-4 h-4">
+                              <a href="#">
+                                  <svg class="h-6 w-6 text-gray-500" viewBox="0 0 24 24" fill="none"
+                                      stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                      stroke-linejoin="round">
+                                      <path
+                                          d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
+                                      <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
+                                  </svg>
+                              </a>
+                          </div>
+                          <div class="w-4 h-4">
+                              <a href="#">
+                                  <svg class="h-6 w-6 text-gray-500" width="24" height="24" viewBox="0 0 24 24"
+                                      stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                      stroke-linejoin="round">
+                                      <path stroke="none" d="M0 0h24v24H0z" />
+                                      <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+                                      <path
+                                          d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                                      <circle cx="11" cy="16" r="1" />
+                                      <polyline points="12 16 12 11 14 12" />
+                                  </svg>
+                              </a>
+                          </div>
+                      </div>
+
+
+                  </div>
+                  <div class="flex flex-grow w-1/2 justify-between">
+                      <div class="flex flex-col w-1/2 space-y-2">
+                          <h4 class="footer-title font-bold text-white text-base">Link Penting</h4>
+                          <a class="link link-hover text-sm">Konfirmasi Pembayaran</a>
+                          <a class="link link-hover text-sm">Pembayaran & Pengiriman</a>
+                          <a class="link link-hover text-sm">Syarat & Ketentuan</a>
+                      </div>
+                      <div class="flex flex-col w-1/2 space-y-2">
+                          <h4 class="footer-title font-bold text-white text-base">Market Place</h4>
+                          <div class="flex flex-row gap-2">
+                              <div class="h-12 w-12">
+                                  <a href="https://www.tokopedia.com">
+                                      <img src="https://demo.saudagarwp.com/wp-content/themes/saudagarwp/assets/img/marketplace-tokopedia.webp"
+                                          class="rounded-md" alt="">
+                                  </a>
+                              </div>
+                              <div class="h-12 w-12">
+                                  <a href="https://www.lazada.co.id">
+                                      <img src="https://demo.saudagarwp.com/wp-content/themes/saudagarwp/assets/img/marketplace-lazada.webp"
+                                          class="rounded-md" alt="">
+                                  </a>
+                              </div>
+                              <div class="h-12 w-12">
+                                  <a href="https://shopee.co.id">
+                                      <img src="https://demo.saudagarwp.com/wp-content/themes/saudagarwp/assets/img/marketplace-shopee.webp"
+                                          class="rounded-md" alt="">
+                                  </a>
+                              </div>
+                              <div class="h-12 w-12">
+                                  <a href="https://www.tiktok.com">
+                                      <img src="https://demo.saudagarwp.com/wp-content/themes/saudagarwp/assets/img/marketplace-tiktok.webp"
+                                          class="rounded-md" alt="">
+                                  </a>
+                              </div>
+                          </div>
+                      </div>
+
+                  </div>
+              </div>
+          </div>
+          <div class="border-t border-slate-700"></div>
+          <div class="container mx-auto w-full max-w-[1150px]">
+              <div class="flex py-4 mx-4">
+                  <span class="text-sm">@Copyright Uasoft 2024. All Rights Reserved</span>
+              </div>
+          </div>
+      </footer>
+
+  </div>
diff --git a/src/resources/views/components/comfree-header.blade.php b/src/resources/views/components/comfree-header.blade.php
new file mode 100644
index 0000000..a84dc9f
--- /dev/null
+++ b/src/resources/views/components/comfree-header.blade.php
@@ -0,0 +1,12 @@
+<meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link id="favicon" rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    {{-- <title>@yield('title')</title> --}}
+    <title>Comfree Theme</title>
+    <link href="{{ mix('css/comfree-theme.css') }}" rel="stylesheet">
+    <script src="{{ mix('js/comfree-theme.js') }}" defer></script>
+    <script src="http://maps.googleapis.com/maps/api/js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
diff --git a/src/resources/views/components/comfree-navbar.blade.php b/src/resources/views/components/comfree-navbar.blade.php
new file mode 100644
index 0000000..9117229
--- /dev/null
+++ b/src/resources/views/components/comfree-navbar.blade.php
@@ -0,0 +1,44 @@
+  <div class="sticky top-0 z-30 bg-white shadow-lg">
+      <div class="container mx-auto  w-full max-w-[1150px]">
+          <div class="navbar">
+              <div class="flex flex-row justify-between w-full flex-nowrap">
+                  <div class="flex items-center font-bold text-lg w-1/3">
+                      <div class="max-w-[150px] lg:w-[184px]">
+                          <a href="https://badaso-docs.uatech.co.id/"><img src="/storage/photos/1/full-logo-badaso.png"
+                                  class="w-full h-[39px] object-cover" alt=""></a>
+                      </div>
+                  </div>
+                  <div class="flex flex-nowrap w-1/3">
+                      <ul class="menu menu-horizontal px-1">
+                          <li><a>Katalog</a></li>
+                          <li>
+                              <details>
+                                  <summary>Kategori</summary>
+                                  <ul class="p-2">
+                                      <li><a>Submenu 1</a></li>
+                                      <li><a>Submenu 2</a></li>
+                                  </ul>
+                              </details>
+                          </li>
+                           <li>
+                              <details>
+                                  <summary>Tipe Produk</summary>
+                                  <ul class="p-2">
+                                      <li><a>Submenu 1</a></li>
+                                      <li><a>Submenu 2</a></li>
+                                  </ul>
+                              </details>
+                          </li>
+                          <li><a>Blog</a></li>
+                      </ul>
+                  </div>
+                  <div class="flex justify-end items-center w-1/3">
+                      <div class="w-6 rounded-full">
+                          <img alt="Tailwind CSS Navbar component" src="/storage/photos/1/default-user.png" />
+                      </div>
+                  </div>
+              </div>
+
+          </div>
+      </div>
+  </div>
diff --git a/src/resources/views/layout/index.blade.php b/src/resources/views/layout/index.blade.php
new file mode 100644
index 0000000..80a883c
--- /dev/null
+++ b/src/resources/views/layout/index.blade.php
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-theme="light" class="scroll-smooth">
+
+<head>
+    @include('comfree-theme::components.comfree-header')
+</head>
+
+<body>
+    @include('comfree-theme::components.comfree-navbar')
+    {{-- main content --}}
+    @yield('mainContent')
+
+    {{-- footer --}}
+    @include('comfree-theme::components.comfree-footer')
+</body>
+
+</html>
diff --git a/src/resources/views/pages/detail-page.blade.php b/src/resources/views/pages/detail-page.blade.php
new file mode 100644
index 0000000..4eea5d8
--- /dev/null
+++ b/src/resources/views/pages/detail-page.blade.php
@@ -0,0 +1,65 @@
+@extends('comfree-theme::layout.index')
+@section('title')
+@endsection
+@section('mainContent')
+    <div class="container mx-auto w-full max-w-[1150px]">
+        <div class="grid grid-cols-2 mt-10 mx-4">
+            <div class="w-full ">
+                <figure><img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
+                        class="w-10/12 h-96 rounded-lg" alt="Shoes" />
+                </figure>
+            </div>
+            <div class="flex flex-col space-y-4">
+                <div class="">
+                    <span class="font-bold text-lg">Do What You Love</span>
+                </div>
+                <div>
+                    <span class="text-md">Rp 500.000</span>
+                </div>
+                <div>
+                    <span class="text-sm text-gray-400">Kaos dengan desain menarik dan nyaman digunakan. Dibuat khusus untuk
+                        Anda yang ingin tampil menarik dengan kesan simple dan modern</span>
+                </div>
+                <div>
+                    <button class="btn btn-wide bg-green-400 text-white rounded hover:text-black">Beli Sekarang</button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="border-t border-gray-200 mt-10 mb-5"></div>
+    <div class="container mx-auto w-full max-w-[1150px]">
+        <div class="flex flex-col space-y-2 mx-4">
+            <div class="flex justify-center">
+                <span class="font-bold">Deskripsi</span>
+            </div>
+
+            <div class="overflow-x-auto">
+                <table class="table">
+                    <tbody>
+                        <!-- row 1 -->
+                        <tr>
+                            <td class="text-gray-500 font-bold">Berat</td>
+                            <td>Quality Control Specialist</td>
+                        </tr>
+                        <!-- row 2 -->
+                        <tr>
+                            <td class="text-gray-500 font-bold">SKU</td>
+                            <td>Desktop Support Technician</td>
+                        </tr>
+                        <!-- row 3 -->
+                        <tr>
+                            <td class="text-gray-500 font-bold">Kategori</td>
+                            <td>Tax Accountant</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <div>
+                <span class="text-gray-400 text-sm">Ugmonk merupakan brand yang fokus pada kualitas dan desain yang menarik, memberikan Anda identitas unik dari lainnya.</span>
+            </div>
+        </div>
+
+    </div>
+@endsection
diff --git a/src/resources/views/pages/landing-page.blade.php b/src/resources/views/pages/landing-page.blade.php
new file mode 100644
index 0000000..4730163
--- /dev/null
+++ b/src/resources/views/pages/landing-page.blade.php
@@ -0,0 +1,8 @@
+@extends('comfree-theme::layout.index')
+@section('title')
+    {{-- {{ $title }} --}}
+@endsection
+@section('mainContent')
+    @include('comfree-theme::components.comfree-card-carousel')
+    @include('comfree-theme::components.comfree-card')
+@endsection