<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content=""/>

  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="X5r/SWQXMKc2/T8zaRxwT1boPq41HbcVBv/tah2qntosMzpIPJsYDv6DI5SFUpUx9qwLAIwNJPX2Uw0VqgYoYQ==" />
  <meta name="csp-nonce" />

    <meta property="og:title" content="Home" />
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.webase.com/" />
<meta property="og:image" content="https://www.webase.com/images/teamwork/building-whiteboard.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@WebaseHQ" />
<meta name="twitter:title" content="Home" />
<meta name="twitter:image" content="https://www.webase.com/images/teamwork/building-whiteboard.png" />

    <!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({
        'gtm.start':
            new Date().getTime(), event: 'gtm.js'
    });
    var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
    j.async = true;
    j.src =
        'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
    f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-N2LWMFH');</script>
<!-- End Google Tag Manager -->


    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,900" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>

  <link rel="stylesheet" media="all" href="/assets/websites-76a5b8a5ffd6f5a3625a8e8b56b561eb1994ddc7e38b0fdcfb660d8d103a760b.css" />
  <link rel="stylesheet" media="all" href="/assets/pattern-bc1ea385f13c39ea420ae8792f5b33600479cd31688d6ec65114bb5e7cedf0a7.css" />

    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900" rel="stylesheet">

    <style>
        body {
            font-family: 'Inter';
            font-weight: 400
        }

        h1, h2, h3, h4, h5 {
            font-family: 'Lato';
            font-weight: 900
        }
    </style>


</head>

<body class="text-font">

  <div>
    <nav class="flex justify-between items-center w-full px-5 py-2">
        <a href="/" class="ml-2 font-extrabold text-purple-600 text-3xl">WeBase</a>








      <a href="#slideOutNav" class="md:hidden" data-bs-toggle="offcanvas">
  <i class="fas fa-bars"></i>
</a>







      <ul class="hidden md:flex">
      <li class="mx-1">
</li>







      <li class="mx-1">
        <a href="/users/register" class="border rounded-lg border-purple-300 hover:border-purple-300 text-purple-100 bg-purple-600 hover:text-purple-100 hover:bg-purple-500 p-2 px-5">Sign Up</a>








</li>







</ul>







</nav>

  <div class="flex flex-col">
      <div class="flex w-full items-center flex-col sm:py-48 py-20 md:px-40 text-white bg-gradient-to-r from-purple-600 via-fuchsia-600 to-pink-600">
      
  <h1 class="tracking-tight font-extrabold text-center mb-8 sm:text-6xl text-5xl" style="font-family: 'Lato'; font-weight: 900">
    Create a gorgeous website in record time, no code required.
  </h1>








        <a href="/app" class="p-2 rounded-lg text-2xl font-semibold px-8 bg-green-500 text-white">Get Started</a>








</div>







      <div class="flex w-full flex-col items-center py-10 text-slate-700 bg-white">
      
  <h1 class="tracking-tight mb-8 text-center font-extrabold text-5xl" style="font-family: 'Lato'; font-weight: 900">
    Everything you need...
  </h1>








      <div class="flex flex-row w-full justify-center flex-wrap items-stretch">
      <div class="flex flex-col w-full p-10 border border-zinc-100 shadow-lg md:w-1/4 mx-3 my-2">
      <div class="flex flex-row items-center justify-center bg-purple-500 border-purple-500 h-14 w-14 rounded-xl shadow-md shadow-gray-400">
      <i class="text-white text-3xl fas fa-paint-brush"></i>







</div>







      
  <h1 class="tracking-tight my-4 font-bold text-3xl" style="font-family: 'Lato'; font-weight: 900">
    Themes
  </h1>








      <div class="">
  Select colors and fonts to fully capture the brand of your business.  We get you started with a library of themes already created for you!
</div>







</div>







      <div class="flex flex-col w-full p-10 border border-zinc-100 shadow-lg md:w-1/4 mx-3 my-2">
      <div class="flex flex-row items-center justify-center h-14 w-14 rounded-xl shadow-md shadow-gray-400 bg-green-500">
      <i class="fas fa-cubes text-white text-3xl"></i>







</div>







      
  <h1 class="tracking-tight my-4 font-bold text-3xl" style="font-family: 'Lato'; font-weight: 900">
    Components
  </h1>








      <div class="">
  Easily create reusable components that you can add anywhere on your site. Or use one of our many pre-built components!
</div>







</div>







      <div class="flex flex-col w-full p-10 border border-zinc-100 shadow-lg md:w-1/4 mx-3 my-2">
      <div class="flex flex-row items-center justify-center h-14 w-14 rounded-xl shadow-md shadow-gray-400 bg-rose-500">
      <i class="text-white text-3xl far fa-newspaper"></i>







</div>







      
  <h1 class="tracking-tight my-4 font-bold text-3xl" style="font-family: 'Lato'; font-weight: 900">
    Websites
  </h1>








      <div class="">
  When you are ready to launch you can deploy to a global CDN directly from WeBase or download the code and take it with you.
</div>







</div>







</div>







</div>







      <div class="flex w-full flex-col py-10 px-8 items-center md:px-60 text-purple-600 bg-purple-100">
      
  <h1 class="tracking-tight font-extrabold text-5xl" style="font-family: 'Lato'; font-weight: 900">
    What&#39;s your style?
  </h1>








      
<div class="text-2xl font-medium my-3">
  Use WeBase themes to customize your colors and fonts.
</div>







      <div class="flex flex-row flex-wrap w-full items-center justify-center my-12">
      <div class="flex flex-col w-full md:w-1/2 items-center justify-center">
      
  <h1 class="tracking-tight sm:mb-0 mb-12 text-3xl font-extrabold" style="font-family: 'Lato'; font-weight: 900">
    Pick a theme and an accent color and WeBase will auto-generate a theme for you.
  </h1>








</div>







      <div class="flex flex-col w-full md:w-1/3 mx-4">
      <img class="w-full object-cover rotate-12" src="https://www.webase.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbk1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--b9510ed03f69df6fffbe615392a09e102ecbae58/webase-theme-preview.png">







</div>







</div>







      <div class="flex flex-wrap w-full items-center justify-center my-14 flex-row-reverse">
      <div class="flex flex-col w-full md:w-1/2 items-center justify-center">
      
  <h1 class="tracking-tight sm:mb-0 mb-12 text-3xl font-extrabold md:ml-8" style="font-family: 'Lato'; font-weight: 900">
    Then customize the theme to make it your own!!  Want gradients?  We got &#39;em!
  </h1>








</div>







      <div class="flex flex-col w-full md:w-1/3 mx-4 text-purple-600 bg-purple-100">
      <img class="w-full object-cover -rotate-12" src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBblFLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--db00667082049efdbbda61fcbced9f1bc7687c74/webase-bg-editor.png">







</div>







</div>







      
  <h1 class="tracking-tight text-center mb-10 text-3xl font-bold" style="font-family: 'Lato'; font-weight: 900">
    We can show you more but why don&#39;t you just try it yourself!
  </h1>








        <a href="/app" class="p-2 border rounded-lg border-purple-300 hover:border-purple-300 bg-purple-600 hover:bg-purple-500 text-2xl font-semibold px-8 text-purple-50">Get Started</a>








</div>







      <div class="flex w-full flex-col py-10 md:px-24 px-8 items-center text-slate-600 bg-white">
      
  <h1 class="tracking-tight mb-5 font-extrabold text-4xl" style="font-family: 'Lato'; font-weight: 900">
    How components work
  </h1>








      <div class="flex flex-row flex-wrap w-full justify-center items-stretch">
      <div class="flex flex-col w-full p-4 border border-zinc-200 m-2 border-solid sm:w-1/4">
      
  <h1 class="tracking-tight text-purple-500 font-semibold text-3xl" style="font-family: 'Lato'; font-weight: 900">
    Start small
  </h1>








      
<div class="my-4">
  Create a new component but don&#39;t worry about building a whole site at once. Below is a component that contains a few social media icons.  It is built to be reused by anyone wanting to add socials to a site.
</div>







      <div class="flex flex-row w-full p-2 border-2 border-dashed">
      
    <a href="#" class="mx-1 inline-flex justify-center items-center w-10 h-10 rounded text-blue-500 rounded-full bg-blue-100">

      <i class="fab fa-facebook"></i>








  </a>








      
    <a href="#" class="mx-1 inline-flex justify-center items-center w-10 h-10 rounded text-blue-500 rounded-full bg-blue-100">

      <i class="fab fa-instagram"></i>








  </a>








      
    <a href="#" class="mx-1 inline-flex justify-center items-center w-10 h-10 rounded text-blue-500 rounded-full bg-blue-100">

      <i class="fab fa-twitter"></i>








  </a>








      
    <a href="#" class="mx-1 inline-flex justify-center items-center w-10 h-10 rounded text-blue-500 rounded-full bg-blue-100">

      <i class="fab fa-youtube"></i>








  </a>








</div>







</div>







      <div class="flex flex-col w-full p-4 border border-zinc-200 m-2 border-solid sm:w-1/4">
      
  <h1 class="tracking-tight text-purple-500 font-semibold text-3xl" style="font-family: 'Lato'; font-weight: 900">
    Reuse 
  </h1>








      
<div class="my-4">
  Next create a higher-level component that imports the social media links. Add some text and now you can see the power of WeBase.  This reuse makes building sites blazingly fast!
</div>







      <div class="flex flex-col w-full p-3 border-dashed border-2">
      
  <h1 class="tracking-tight text-2xl" style="font-family: 'Lato'; font-weight: 900">
    WeBase
  </h1>








      <div class="">
  Get there faster!
</div>







      <div class="flex flex-row w-full mt-5">
      
    <a href="#" class="mx-1 inline-flex justify-center items-center w-10 h-10 rounded text-blue-500 rounded-full bg-blue-100">

      <i class="fab fa-facebook"></i>








  </a>








      
    <a href="#" class="mx-1 inline-flex justify-center items-center w-10 h-10 rounded text-blue-500 rounded-full bg-blue-100">

      <i class="fab fa-instagram"></i>








  </a>








      
    <a href="#" class="mx-1 inline-flex justify-center items-center w-10 h-10 rounded text-blue-500 rounded-full bg-blue-100">

      <i class="fab fa-twitter"></i>








  </a>








      
    <a href="#" class="mx-1 inline-flex justify-center items-center w-10 h-10 rounded text-blue-500 rounded-full bg-blue-100">

      <i class="fab fa-youtube"></i>








  </a>








</div>







</div>







</div>







      <div class="flex flex-col w-full p-4 border border-zinc-200 m-2 border-solid sm:w-1/4">
      
  <h1 class="tracking-tight text-purple-500 font-semibold text-3xl" style="font-family: 'Lato'; font-weight: 900">
    Copy
  </h1>








      
<div class="my-4">
  Unlike in school, copying is encouraged on WeBase!  Each of the links section in the footer of this site is just a component that was copied using the copy button in the toolbar of the editor.  This process makes it even faster to build with WeBase.
</div>







      <div class="flex flex-row w-full items-center justify-center p-3 border-dashed border-2">
      <i class="far fa-copy text-6xl"></i>







      <i class="text-6xl mx-5 fas fa-paste"></i>







</div>







</div>







</div>







      
<div class="mt-5 text-xl font-medium text-slate-600">
  Plus you get access to our full component library to help you move faster.  We are also happy to build new ones for you... just let us know!
</div>







        <a href="/components" class="p-2 border rounded-lg border-purple-300 hover:border-purple-300 bg-purple-600 hover:bg-purple-500 text-2xl font-semibold px-8 text-purple-50 mt-5">Explore Components</a>








</div>







      <div class="flex w-full items-center flex-col pt-20 pb-5 md:px-40 text-slate-600 bg-white">
      
  <h1 class="tracking-tight font-extrabold text-center text-5xl px-5" style="font-family: 'Lato'; font-weight: 900">
    Bring it all together to build gorgeous websites with lightning speed! ⚡️
  </h1>








      <div class="flex flex-col w-full my-12 p-10">
      <img class="w-full object-cover rounded-xl border-solid border" src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbmNLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--542d300e8176527405e456916b3650219c14f1e6/WebsiteBuilder.gif">







</div>







</div>







      <div class="flex flex-col w-full py-10 items-center justify-center px-5 md:px-40 text-slate-600 bg-white">
      
  <h1 class="tracking-tight font-extrabold text-center w-fit text-5xl" style="font-family: 'Lato'; font-weight: 900">
    Deploy to a global network
  </h1>








      <div class="flex flex-row flex-wrap w-full sm:px-20 py-10 mt-2">
      <div class="flex flex-col w-full md:w-1/2 items-center justify-center">
      
<div class="tracking-tight text-slate-600 m-4 sm:mx-5 font-normal text-2xl">
  WeBase integrates with Netlify to offer world-class performance for hosting your website reliably and securely.  Just connect to Netlify and deploy to a global network!
</div>







</div>







      <div class="flex flex-col w-full md:w-1/2 h-64 items-center justify-center py-14 sm:px-20 px-5 border-zinc-300 border border-solid bg-zinc-50 rounded-lg">
      <img class="w-full rounded-lg my-10 rotate-0" src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbmdLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62830f04fb3fa0d673249677e1c444128a2f81ff/logo-netlify-large-fullcolor-lightmode.png">







</div>







</div>







</div>







      <div class="flex flex-col w-full py-10 items-center justify-center px-5 md:px-40 text-purple-600 bg-purple-100">
      
  <h1 class="tracking-tight font-extrabold text-center w-fit text-5xl" style="font-family: 'Lato'; font-weight: 900">
    Built on Tailwind CSS
  </h1>








      <div class="flex flex-row flex-wrap w-full sm:px-20 py-10 mt-2">
      <div class="flex flex-col w-full md:w-1/2 h-64 items-center justify-center py-14 sm:px-20 px-5 border border-solid rounded-lg bg-white border-zinc-300">
      <img class="w-full rounded-lg my-10 rotate-0 mx-14" src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbmtLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c7f1000b8191a8cc1f6a51fc6e3adeb885384794/tailwindcss-logotype.svg">







</div>







      <div class="flex flex-col w-full md:w-1/2 items-center justify-center">
      
<div class="tracking-tight text-slate-600 m-4 sm:mx-5 font-normal text-2xl">
  TailwindCSS is rapidly becoming the industry standard styling framework. With WeBase now anyone can get the power of Tailwind without learning to code.
</div>







</div>







</div>







</div>







</div>

    <div class="flex flex-row w-full flex-wrap md:px-40 px-5 py-20">
      <div class="flex flex-col w-full sm:w-1/2">
      
  <h1 class="tracking-tight font-extrabold text-purple-600 text-5xl" style="font-family: 'Lato'; font-weight: 900">
    WeBase
  </h1>








      <div class="">
  Get there faster!
</div>







      <div class="flex flex-row w-full mt-5">
      
    <a href="https://twitter.com/WebaseHQ" class="inline-flex justify-center items-center w-10 h-10 rounded rounded-full mr-1 bg-purple-100 text-purple-600">

      <i class="fab fa-twitter"></i>








  </a>








      
    <a href="https://www.youtube.com/@webasehq" class="inline-flex justify-center items-center w-10 h-10 rounded rounded-full mr-1 bg-purple-100 text-purple-600">

      <i class="fab fa-youtube"></i>








  </a>








</div>







</div>







      <div class="flex flex-col w-full sm:w-1/6">
      
  <h1 class="tracking-tight my-2 text-2xl" style="font-family: 'Lato'; font-weight: 900">
    Company
  </h1>








        <a href="/about" class="mb-1">About Us</a>








        <a href="/launch-deal" class="mb-1">Pricing</a>








        <a href="/blog" class="mb-1">Blog</a>








</div>







      <div class="flex flex-col w-full sm:w-1/6">
      
  <h1 class="tracking-tight my-2 text-2xl" style="font-family: 'Lato'; font-weight: 900">
    Features
  </h1>








        <a href="/components" class="mb-1">Components</a>








        <a href="#" class="mb-1">Themes</a>








        <a href="#" class="mb-1">Templates</a>








</div>







      <div class="flex flex-col w-full sm:w-1/6">
      
  <h1 class="tracking-tight my-2 text-2xl" style="font-family: 'Lato'; font-weight: 900">
    What we do
  </h1>








        <a href="#" class="mb-1">Product</a>








        <a href="#" class="mb-1">Services</a>








        <a href="#" class="mb-1">Courses</a>








</div>







</div>

    <div id="slideOutNav" class="offcanvas offcanvas-start bg-zinc-100 w-64" tabindex="-1">
  <div class="offcanvas-header text-slate-600">
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
      <i class="far fa-times fa-lg"></i>
    </button>
  </div>
  <div class="offcanvas-body">
    <nav class="">
            <a href="/" class="ml-2 font-extrabold text-purple-600 text-3xl">WeBase</a>








          <ul class="">
      <li class="my-2">
</li>







      <li class="my-2">
        <a href="/users/register" class="border rounded-lg border-purple-300 hover:border-purple-300 text-purple-100 bg-purple-600 hover:text-purple-100 hover:bg-purple-500 p-2 px-5">Sign Up</a>








</li>







</ul>







    </nav>
  </div>
</div>




</div>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>





</body>
</html>
