Skip to content

Commit

Permalink
updated website homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelsboost
michaelsboost committed Sep 7, 2024
1 parent 15d96bd commit 362ee93
Show file tree
Hide file tree
Showing 15 changed files with 229 additions and 193 deletions.
6 changes: 1 addition & 5 deletions dist/bundle.css
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions imgs/capture-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/capture.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions imgs/capture.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/frameworks.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/lighthouse(1).png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/lighthouse-full.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/pwa.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
159 changes: 85 additions & 74 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,90 +25,101 @@
<link rel="stylesheet" href="dist/bundle.css">
</head>
<body>
<div class="container absolute inset-0 m-auto">
<nav class="sticky top-0 inset-x-0 flex align-center place-items-center justify-between px-2 py-4 bg-gray-900 border-0 border-b border-solid border-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-lg z-10">
<ul class="font-thin">
<li class="py-0">
<a
aria-label="kodeWeave"
name="kodeWeave"
href="https://michaelsboost.com/kodeWeave/"
target="_blank"
class="no-underline"
style="color: unset;">
<img class="h-8 inline-block" src="imgs/logo.svg" width="100" height="256" alt="kodeWeave">
<span class="hidden sm:inline-block">kodeWeave</span>
<div class="container" id="home">
<nav class="md:sticky md:top-0 md:inset-x-0 flex-col md:flex-row items-center py-4 bg-[#13171f] bg-opacity-50 backdrop-filter backdrop-blur-lg">
<ul class="flex flex-col md:flex-row items-center gap-0 md:gap-3">
<!-- Logo -->
<li>
<a href="#home" class="text-2xl font-bold">
<img src="imgs/logo.svg" alt="kodeWeave Logo" class="h-8">
</a>
</li>
</ul>
<ul class="flex items-center">
<li class="py-0">
<a
aria-label="github repo"
name="github repo"
href="https://github.com/michaelsboost/kodeWeave/"
target="_blank"
class="text-white mx-1 sm:mx-2 px-1 sm:px-2 py-2 no-underline">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 496 512" class="w-4 h-4">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
</svg>
</a>
</li>
<li class="py-0">
<a
aria-label="twitter page for project feed"
name="twitter page for project feed"
href="https://twitter.com/kodeweave_app"
target="_blank"
class="text-white mx-1 sm:mx-2 px-1 sm:px-2 py-2 no-underline">
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs id="defs2"><clipPath clipPathUnits="userSpaceOnUse" id="clipPath7"><path style="display:none;fill:#2a34ff;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" d="M 2.7194315,3.6106111 H 8.5920036 L 21.280954,20.389389 h -5.727371 z" id="path7"></path><path id="lpe_path-effect7" style="fill:#2a34ff;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" class="powerclip" d="M -2.8448815,-3.9722732 H 26.113213 V 27.972273 H -2.8448815 Z M 2.7194315,3.6106111 15.553583,20.389389 h 5.727371 L 8.5920036,3.6106111 Z"></path></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath11"><rect style="fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" id="rect11" width="21.586601" height="18.278778" x="1.2021173" y="2.8606112"></rect></clipPath></defs><g style="fill:none;stroke:currentColor;stroke-width:1.5" id="g2" transform="translate(-0.04613684)"><g id="g8" clip-path="url(#clipPath11)"><path d="M 2.7194315,3.6106111 H 8.5920036 L 21.280954,20.389389 h -5.727371 z" id="path2-8"></path><path d="M 20.541589,1.5132639 19.650846,2.5619375 18.760104,3.6106111 17.869362,4.6592848 16.978619,5.7079584 16.087877,6.756632 15.197135,7.8053056 14.306392,8.8539793 13.41565,9.9026529 12.524908,10.951326 11.634165,12 10.743423,13.048674 9.852681,14.097347 8.961938,15.146021 8.071196,16.194695 7.1804539,17.243368 6.2897116,18.292042 5.3989693,19.340715 4.5082269,20.389389 3.6174846,21.438063 2.7267423,22.486736" id="path4" clip-path="url(#clipPath7)"></path></g></g>
</svg>
</a>
</li>
<li class="py-0">
<a
aria-label="keep the project alive by helping the developer"
name="keep the project alive by helping the developer"
href="https://michaelsboost.com/donate/"
target="_blank"
class="mx-1 sm:mx-2 px-1 sm:px-2 py-2 no-underline">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-red-400">
<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
</svg>
</a>

<!-- Links -->
<ul class="flex flex-col md:flex-row items-center gap-0 md:gap-3 text-xs md:text-base">
<li class="flex gap-3 py-2">
<div class="bg-[#cf06bc] rounded-md px-2 py-1 md:px-4 md:py-3">
<a class="no-underline text-white" href="#home">Home</a>
</div>
<div class="px-2 py-1 md:px-4 md:py-3">
<a class="no-underline text-white" href="https://github.com/michaelsboost/kodeWeave" target="_blank">Github</a>
</div>
<div class="px-2 py-1 md:px-4 md:py-3">
<a class="no-underline text-white" href="https://twitter.com/michaelsboost" target="_blank">Twitter</a>
</div>
<div class="px-2 py-1 md:px-4 md:py-3">
<a class="no-underline text-white" href="https://michaelsboost.com/donate" target="_blank">Support</a>
</div>
</li>
<li class="py-0">
<a class="block w-auto font-light px-3 py-2 bg-[#0072ad] text-white" href="./go/index.html">
Launch
</ul>

<!-- Get Started Button -->
<ul class="flex flex-col md:flex-row items-center gap-0 md:gap-3">
<li>
<a href="./go" class="no-underline text-white bg-[#0d6efd] hover:bg-[#0b5ed7] active:bg-[#0a58ca] px-3 py-2 md:px-4 md:py-3 rounded-lg">
Get Started
</a>
</li>
</ul>
</nav>

<main class="w-full grid grid-cols-1 h-full gap-4 items-center">
<div>
<hgroup class="text-center">
<h1 class="my-2">
kodeWeave is your on the go coding playground!
</h1>
<h2>
Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop.
</h2>
</hgroup>
<div class="text-center">
<img
class="border border-solid border-gray-800 shadow-2xl shadow-blue-900"
src="imgs/screenshot.webp"
srcset="imgs/screenshot-640w.webp 640w, imgs/screenshot-1280w.webp 1280w"
alt="kodeWeave">

<a class="my-10 mx-auto block w-full font-thin py-4" role="button" href="./go/index.html">
Launch kodeWeave
</a>
</div>

<main class="flex flex-col items-center justify-center min-h-screen py-12">
<hgroup class="text-center mb-8">
<h1 class="text-4xl font-bold">
Code with Speed, Preview with Power
</h1>
<h2 class="text-lg mt-4">
A blazing fast PWA coding playground that lets you build, test, and deploy websites seamlessly across desktop and mobile.
</h2>
</hgroup>

<div class="mb-8">
<img class="w-full h-full object-cover object-center rounded-lg shadow-lg shadow-blue-900" src="imgs/screenshot.webp" srcset="https://michaelsboost.com/kodeWeave/imgs/screenshot-640w.webp 640w, https://michaelsboost.com/kodeWeave/imgs/screenshot-1280w.webp 1280w" alt="kodeWeave">
</div>

<a href="./go" class="w-full text-center no-underline text-white bg-[#0d6efd] hover:bg-[#0b5ed7] active:bg-[#0a58ca] text-xl px-5 py-4 rounded-lg">
Try kodeWeave Now!
</a>
</main>

<article id="features">
<section class="container py-16">
<hgroup class="text-center mb-8">
<h1 class="text-4xl font-bold">
Why kodeWeave?
</h1>
<h2 class="text-lg mt-4">
Discover how kodeWeave helps you code faster, preview live, and deploy effortlessly.
</h2>
</hgroup>
<div class="w-1/2 m-auto">
<hr>
</div>
<div class="grid md:grid-cols-2 gap-8 p-4">
<div class="text-center">
<img src="imgs/lighthouse.png" alt="Blazing Fast" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Blazing Fast Performance</h3>
<p>Experience unmatched speed, powered by kodeWeave’s client-side architecture.</p>
</div>
<div class="text-center">
<img src="imgs/pwa.png" alt="PWA Export" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Export as PWA</h3>
<p>Turn your projects into fully functional PWAs with just one click.</p>
</div>
<div class="text-center">
<img src="imgs/frameworks.png" alt="Framework Support" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Supports Multiple Frameworks</h3>
<p>Built-in support for popular frameworks like React, Vue, AlpineJS, and more.</p>
</div>
<div class="text-center">
<img src="imgs/capture.png" alt="Full Website Screenshot" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Screenshot Full Websites</h3>
<p>Capture full-page screenshots with ease, perfect for documentation or sharing.</p>
</div>
</div>
</section>
</article>
</div>
</body>
</html>
Loading

0 comments on commit 362ee93

Please sign in to comment.