Website real data integrate and final fixes (#2)

* Hero section

* Redirect to app section

* Get started button and apps section

* Fix video section

* Blog added

* Blog load

* Blog cleanup

* assets optimization

* Fix build and apps folder

* Image optimize and apps description

* Footer image url

* Header menu and image

* Footer app links

* Refactor

* Fix hover and class

* Image optimize

* App redirect url

* Support image

* Remove static png files

* Fixed blog size

* Process change

* Hero layout fix

* Fixed process section

* Support vector

* Fixed margin top

* Using vector app logos

* Header app logos

* SVG id for uniqueness

* Add hover effect

* Footer app redirect link

* Fixed avatar icon on blog

* Fixed blog logic

content/authors/doug.md

@@ -0,0 +1,17 @@
+---
+name: Doug
+avatar: /images/logo.png
+occupation: Frontend Engineer
+company: ARK Builder
+email:
+twitter:
+linkedin:
+github:
+id: doug
+---
+
+Doug is a frontend engineer at ARK Builders.
+
+### Memorable Quotes
+
+> "Every day feels like I've died and gone to Paradise."

content/posts/what-is-local.md

@@ -0,0 +1,77 @@
+---
+title: What is "local-first"?
+date: '2024-01-04'
+draft: false
+summary: 'Every day, millions of people create, edit and collaborate on digital files. In this post, we describe our vision of local-first architecture - where collaboration can occur in real time, without a big cloud in the middle.'
+tags:
+  - ARK-Builders
+image:
+author: Doug
+---
+
+## Local-first architecture
+
+Every day, millions of people create, edit and collaborate on digital files. The files could be text documents, spreadsheets or presentations. They could also be PhotoShop files, videos, code or even an industry specific format. As teams have dispersed geographically, using the cloud to share and collaborate on files has been a logical growth pattern - everyone has access to the files, and updates are kept in a centralized repository.
+
+But there is a downside to “cloud first” collaborations. The biggest (and most expensive) downside is that once a team has “bought in” to a cloud service, they are also “locked in.” A third party now has an indirect ownership of your content. And that ownership comes at a cost - security, proprietary formats, but also a monthly recurring charge to keep your content in their cloud.
+
+What if we could have a similar user experience, but keeping the files stored locally on our device (or devices) and collaborate with others who also have copies local to their device? We gain all the benefits of a distributed storage and collaboration that we gained from the cloud, but we retain ownership and copies of our files.
+
+In this post, we’ll discuss why building with a local-first architecture has benefits and advantages over cloud centered collaboration. The term was first coined by 'Ink & Switch,' and you can delve into their comprehensive vision on [their website](https://www.inkandswitch.com/local-first/).
+
+## Local-first (old school)
+
+In the old days, every person would work on a document on their computer, and save it locally. If they needed to share a file with a colleague, they might email a copy to them (share a disk, anyone?), wait for any edits, and then resume working on the returned copy. I know I am not the only person who worked on an executive presentation with a filename like: “1H-ExecProposal-1212-Doug-(Eds-edits)-final-final2.pptx” that made its way around the office for final approval.
+
+I also remember making copies of my thesis, and storing them in different buildings, just in case there was a hard drive failure, a fire or other disaster.
+
+## Cloud creation
+
+As the cloud has become prevalent, we can create text documents in a Google Doc, spreadsheets in Office365, or collaborate on code with GitHub. PhotoShop can be run in Adobe cloud, bugs filed in Jira and more.
+
+Editing a Google Doc with several people looks and feels like magic - we can see other people editing in real time, as we work on a different section. But no one actually has a copy of the file on their computer - we are editing on a Google server somewhere on the internet. Google has an “ownership” of our files.
+
+All of our data is stored in the cloud, and it is easy to collaborate and work on files this way… until it isn’t.
+
+In March 2021, customers of OVH Cloud who stored their files in the Strasbourg data center discovered this firsthand when their files went up in smoke:
+![Image of OVH datacenter on fire](/images/ovh_fire.jpg)
+
+Ok, that’s a super extreme example - and everyone should save important files and deployments on multiple machines - whether local or cloud. But users have been locked out of Google Accounts. When you stop paying for BigCorp Cloud, how long until your data is removed? What if your card has expired, and the emails are going to a former employee's e-mail account? Will you lose your files forever? At a previous position, months of work was lost when a colleague decided that a specific tenant was no longer in use, and deleted it without looking at usage, or asking the team if the data on the server was still needed.
+
+![Image of Google recovery](/images/google_recovery.png)
+
+All of the convenience of Cloud-first architecture is lost - as soon as we lose all of our files.
+
+## Cloud with local files
+
+Git is an example of cloud collaboration where the working documents are kept locally. I edit my code locally on my computer, and when it is completed, I can update the cloud repository (that is considered the reference point for all). Local versions on other devices can quickly become out of date as other users make updates. As local versions become out of date, the possibility of a conflict on future merges increases - adding time and energy to keep the code synchronized.
+
+Files on Github (and other cloud tools like DropBox) use Content Addressable storage (CAS). Instead of a directory structure, each file is stored as a unique hash based on its content. Rather than relying on a location of the file, The file can be quickly and efficiently received by the hash. Use of content hashes also makes version control easy - by accessing an “older hash” of the file, users can revisit older incarnations of the file.
+
+## New school local-first
+
+What if we could edit our files locally, and share them with colleagues - instantly? No more emailing that Powerpoint with the ever growing file name - but using the internet to update files on every change.
+
+Each colleague would have a distinct copy of the same file, and software running on each device would sync with one another as edits were being made. With a local-first and real-time sync, we gain many of the collaborational attributes of working in the cloud, but we also retain ownership of our content. We can leverage CAS to make file discovery easy, and also enable version control of our documents.
+
+Alice has a copy, Bob has a copy, Charlie has a copy. When Charlie edits the file on a flight, the updates are synced as soon as his device has internet access again. Syncing is automatic, and most conflicts can be handled with automation (look for a future post on this), and human intervention is rarely needed. There can even be a copy or two of the document stored in the cloud as a backup. These copies are not the point of reference, but another copy of the same file, getting the same regular updates as all of the other local copies. Now, each file has multiple backups, collaboration is similar (if not identical) to cloud collaboration, the team retains ownership of the files and editing is no longer limited by network speeds - improving the performance.
+
+## How do updates work?
+
+Just as saving to the cloud and propagating the cloud changes outward- local changes on Alice’s machine are sent to Bob, Charlie and David. If the remote documents are not available (Alice is asleep, Bob closed his laptop and David’s battery died), they update as soon as they come back online. Optionally, files can be stored, updated and backed up on a private server, cloud or 3rd party server to improve availability of updates. Files can be updated over the internet, or over a local peer to peer network. Using the version control, we can revert to older versions if needed.
+
+## Examples of local-first architecture
+
+Here at ARK Builders, we are building a suite of applications that allow for easy sharing of files across platforms and across users and focus on local-first storage of content.
+
+**[ARK Navigator](https://www.ark-builders.dev/apps/navigator/)**: A file browser that embraces tags as the novel method to locate your data. It effectively eliminates irrelevant system files, enabling you to find your documents or photos with ease through the use of tags.
+
+**[ARK Shelf](https://www.ark-builders.dev/apps/shelf/)**: A cross-device bookmark keeper. Secure any intriguing webpage into your dedicated folder, independent of any browser. Later, conveniently retrieve this link on another device.
+
+**[ARK Memo](https://www.ark-builders.dev/apps/memo/)**: Memo application for text and graphical notes with version control. Create content, save and continue on your idea. Make a change you are not happy with? Roll back to a previous version.
+
+**[ARK Retouch](https://www.ark-builders.dev/apps/retouch/)**: graphic assistant right in your pocket! This app is designed not only for photo editing but also for drawing, creating graphic notes with a stylus, and highlighting important information in screenshots.
+
+**[ARK Rate](https://www.ark-builders.dev/apps/rate/)**: The indispensable companion for travelers, enables swift conversions among multiple currencies and allows you to set exchange rate alerts for both fiat and crypto, ensuring no lucrative deal slips past you.
+
+All of these apps are Open Source, and we welcome contributions!

src/lib/app.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+	scroll-behavior: smooth;
+}

src/lib/assets/images/app-logos/memo.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { makeid } from '$utils/tools'
+	let id = makeid(8)
+</script>
+
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_165_608)">
+		<rect width="48" height="48" rx="6" fill="#FFEAB4" />
+		<mask
+			id={'mask' + id}
+			style="mask-type:luminance"
+			maskUnits="userSpaceOnUse"
+			x="6"
+			y="6"
+			width="37"
+			height="48"
+		>
+			<path d="M42.0171 6H6V53.9744H42.0171V6Z" fill="white" />
+		</mask>
+		<g mask="url(#{'mask' + id})">
+			<path
+				d="M15.1217 18.9822L13.8149 23.6285L17.2569 27.4121L11.1416 32.3658L8.31459 31.0335L6 26.1566L7.48612 24.0897L6.7089 19.6655L8.37438 13.9943L10.0142 10.8171L17.684 6H22.2448L17.3338 12.1324L15.1217 18.9822Z"
+				fill="url(#{'paint0_linear_165_608' + id})"
+			/>
+			<path
+				d="M23.4064 16.5822L22.2448 19.8021L23.4064 24.7217V31.4947L17.2569 27.4121L13.8149 23.6285L15.1217 18.9822L17.3338 12.1238L22.2448 6L23.4064 7.35801V16.5822Z"
+				fill="url(#{'paint1_linear_165_608' + id})"
+			/>
+			<path
+				d="M19.9047 37.2598L19.4434 41.4449L16.4627 40.4285L14.6605 38.1822L10.7659 34.168L11.1417 32.3658L17.257 27.4121L19.9047 37.2598Z"
+				fill="url(#{'paint2_linear_165_608' + id})"
+			/>
+			<path
+				d="M23.4065 31.4947V37.1231L22.8172 40.232L21.8265 41.4449H19.4436L19.9048 37.2598L17.2571 27.4121L23.4065 31.4947Z"
+				fill="url(#{'paint3_linear_165_608' + id})"
+			/>
+			<path
+				d="M32.8953 18.9822L34.2021 23.6285L30.7601 27.4121L36.8754 32.3658L39.7025 31.0335L42.0171 26.1566L40.5309 24.0897L41.3082 19.6655L39.6427 13.9943L38.0028 10.8171L30.3416 6H25.7722L30.6832 12.1324L32.8953 18.9822Z"
+				fill="url(#{'paint4_linear_165_608' + id})"
+			/>
+			<path
+				d="M24.6194 16.5822L25.7724 19.8021L24.6194 24.7217V31.4947L30.7603 27.4121L34.2023 23.6285L32.8955 18.9822L30.6834 12.1238L25.7724 6L24.6194 7.35801V16.5822Z"
+				fill="url(#{'paint5_linear_165_608' + id})"
+			/>
+			<path
+				d="M28.1125 37.2598L28.5738 41.4449L31.5631 40.4285L33.3567 38.1822L37.2513 34.168L36.8755 32.3658L30.7602 27.4121L28.1125 37.2598Z"
+				fill="url(#{'paint6_linear_165_608' + id})"
+			/>
+			<path
+				d="M24.6194 31.4947V37.1231L25.2087 40.232L26.1909 41.4449H28.5738L28.1126 37.2598L30.7603 27.4121L24.6194 31.4947Z"
+				fill="url(#{'paint7_linear_165_608' + id})"
+			/>
+		</g>
+	</g>
+	<defs>
+		<linearGradient
+			id={'paint0_linear_165_608' + id}
+			x1="0.788268"
+			y1="26.4274"
+			x2="17.6124"
+			y2="17.4785"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD635" />
+			<stop offset="1" stop-color="#FF9913" />
+		</linearGradient>
+		<linearGradient
+			id={'paint1_linear_165_608' + id}
+			x1="26.8413"
+			y1="24.0739"
+			x2="13.0602"
+			y2="9.75582"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD635" />
+			<stop offset="1" stop-color="#FF9913" />
+		</linearGradient>
+		<linearGradient
+			id={'paint2_linear_165_608' + id}
+			x1="17.2416"
+			y1="27.3249"
+			x2="12.5881"
+			y2="50.1449"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD635" />
+			<stop offset="1" stop-color="#FF9913" />
+		</linearGradient>
+		<linearGradient
+			id={'paint3_linear_165_608' + id}
+			x1="27.3494"
+			y1="46.5522"
+			x2="19.0338"
+			y2="32.407"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD635" />
+			<stop offset="1" stop-color="#FF9913" />
+		</linearGradient>
+		<linearGradient
+			id={'paint4_linear_165_608' + id}
+			x1="47.2298"
+			y1="26.4274"
+			x2="30.4057"
+			y2="17.4785"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD635" />
+			<stop offset="1" stop-color="#FF9913" />
+		</linearGradient>
+		<linearGradient
+			id={'paint5_linear_165_608' + id}
+			x1="21.1769"
+			y1="24.0739"
+			x2="34.958"
+			y2="9.75582"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD635" />
+			<stop offset="1" stop-color="#FF9913" />
+		</linearGradient>
+		<linearGradient
+			id={'paint6_linear_165_608' + id}
+			x1="30.7765"
+			y1="27.3249"
+			x2="35.4301"
+			y2="50.1449"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD635" />
+			<stop offset="1" stop-color="#FF9913" />
+		</linearGradient>
+		<linearGradient
+			id={'paint7_linear_165_608' + id}
+			x1="20.669"
+			y1="46.5522"
+			x2="28.9847"
+			y2="32.407"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD635" />
+			<stop offset="1" stop-color="#FF9913" />
+		</linearGradient>
+		<clipPath id={'clip' + id}>
+			<rect width="48" height="48" rx="6" fill="white" />
+		</clipPath>
+	</defs>
+</svg>

src/lib/assets/images/support/bitcoin.svelte

@@ -0,0 +1,20 @@
+<svg width="153" height="43" viewBox="0 0 153 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="153" height="43" rx="6" fill="#F7931A"/>
+<path d="M66.9427 27.3368C68.2997 27.8187 69.1697 28.9752 69.1697 30.6714C69.1697 33.0038 67.4994 34.3531 64.2982 34.3531H58V20.8602H63.9502C66.9949 20.8602 68.5607 22.2673 68.5607 24.3684C68.5607 25.7176 67.9344 26.7585 66.9427 27.3368ZM63.6022 23.2118H60.8011V26.3923H63.6022C64.9767 26.3923 65.7248 25.8526 65.7248 24.7924C65.7248 23.7323 64.9767 23.2118 63.6022 23.2118ZM64.0894 32.0014C65.5508 32.0014 66.3337 31.5003 66.3337 30.3438C66.3337 29.2065 65.5508 28.6668 64.0894 28.6668H60.8011V32.0014H64.0894Z" fill="white"/>
+<path d="M72.1734 34.3531V20.8602H74.9919V34.3531H72.1734Z" fill="white"/>
+<path d="M81.2749 34.3531V23.4046H77.3777V20.8602H87.9906V23.4046H84.0934V34.3531H81.2749Z" fill="white"/>
+<path d="M96.0355 34.5844C92.2601 34.5844 89.4416 31.6738 89.4416 27.6066C89.4416 23.5395 92.2601 20.6289 96.0529 20.6289C98.1581 20.6289 99.9153 21.477 101.064 23.0191L99.2542 24.8695C98.4365 23.8286 97.41 23.2889 96.1921 23.2889C93.9129 23.2889 92.2949 25.0623 92.2949 27.6066C92.2949 30.151 93.9129 31.9243 96.1921 31.9243C97.41 31.9243 98.4365 31.3846 99.2542 30.3245L101.064 32.1749C99.9153 33.7362 98.1581 34.5844 96.0355 34.5844Z" fill="white"/>
+<path d="M109.48 34.5844C105.635 34.5844 102.816 31.6159 102.816 27.6066C102.816 23.5973 105.635 20.6289 109.48 20.6289C113.308 20.6289 116.143 23.5781 116.143 27.6066C116.143 31.6352 113.308 34.5844 109.48 34.5844ZM109.48 31.9243C111.655 31.9243 113.29 30.1703 113.29 27.6066C113.29 25.043 111.655 23.2889 109.48 23.2889C107.305 23.2889 105.67 25.043 105.67 27.6066C105.67 30.1703 107.305 31.9243 109.48 31.9243Z" fill="white"/>
+<path d="M119.132 34.3531V20.8602H121.95V34.3531H119.132Z" fill="white"/>
+<path d="M134.096 20.8602H136.88V34.3531H134.566L128.494 26.161V34.3531H125.71V20.8602H128.042L134.096 29.0523V20.8602Z" fill="white"/>
+<path d="M58.9088 18V11.0082H62.0851C64.3724 11.0082 65.9406 12.3866 65.9406 14.5041C65.9406 16.6216 64.3724 18 62.0851 18H58.9088ZM60.5269 16.6716H62.0052C63.3936 16.6716 64.3025 15.8425 64.3025 14.5041C64.3025 13.1657 63.3936 12.3366 62.0052 12.3366H60.5269V16.6716ZM70.3471 18.1199C68.1397 18.1199 66.5216 16.5817 66.5216 14.5041C66.5216 12.4265 68.1397 10.8883 70.3471 10.8883C72.5446 10.8883 74.1727 12.4165 74.1727 14.5041C74.1727 16.5917 72.5446 18.1199 70.3471 18.1199ZM70.3471 16.7415C71.5957 16.7415 72.5346 15.8325 72.5346 14.5041C72.5346 13.1757 71.5957 12.2667 70.3471 12.2667C69.0986 12.2667 68.1597 13.1757 68.1597 14.5041C68.1597 15.8325 69.0986 16.7415 70.3471 16.7415ZM80.0033 11.0082H81.6015V18H80.273L76.7871 13.755V18H75.189V11.0082H76.5274L80.0033 15.2532V11.0082ZM88.2798 18L87.6605 16.5018H84.4143L83.7951 18H82.137L85.2533 11.0082H86.8515L89.9778 18H88.2798ZM84.9337 15.2732H87.1511L86.0424 12.5963L84.9337 15.2732ZM91.6006 18V12.3267H89.3632V11.0082H95.4561V12.3267H93.2187V18H91.6006ZM97.735 16.7015H101.541V18H96.1269V11.0082H101.411V12.3067H97.735V13.8249H100.981V15.0834H97.735V16.7015ZM108.364 18.1199C106.376 18.1199 105.197 16.9812 105.197 14.9236V11.0082H106.815V14.8637C106.815 16.1921 107.395 16.7415 108.374 16.7415C109.362 16.7415 109.932 16.1921 109.932 14.8637V11.0082H111.53V14.9236C111.53 16.9812 110.351 18.1199 108.364 18.1199ZM115.226 18.1199C114.118 18.1199 112.999 17.7902 112.38 17.3108L112.929 16.0922C113.518 16.5217 114.397 16.8214 115.236 16.8214C116.195 16.8214 116.585 16.5018 116.585 16.0723C116.585 14.7638 112.52 15.6627 112.52 13.0658C112.52 11.8772 113.478 10.8883 115.466 10.8883C116.345 10.8883 117.244 11.0981 117.893 11.5076L117.394 12.7362C116.745 12.3666 116.075 12.1868 115.456 12.1868C114.497 12.1868 114.128 12.5464 114.128 12.9859C114.128 14.2744 118.193 13.3854 118.193 15.9524C118.193 17.121 117.224 18.1199 115.226 18.1199ZM119.099 18V11.0082H120.717V18H119.099ZM126.991 11.0082H128.589V18H127.261L123.775 13.755V18H122.176V11.0082H123.515L126.991 15.2532V11.0082ZM134.768 16.4418V14.3942H136.246V17.2309C135.477 17.8102 134.418 18.1199 133.419 18.1199C131.222 18.1199 129.604 16.6116 129.604 14.5041C129.604 12.3966 131.222 10.8883 133.449 10.8883C134.678 10.8883 135.697 11.3078 136.376 12.0969L135.337 13.0558C134.828 12.5164 134.238 12.2667 133.529 12.2667C132.171 12.2667 131.242 13.1757 131.242 14.5041C131.242 15.8126 132.171 16.7415 133.509 16.7415C133.949 16.7415 134.358 16.6616 134.768 16.4418Z" fill="white"/>
+<circle cx="28" cy="22" r="17" fill="white"/>
+<circle cx="28.0004" cy="21.9984" r="13.6" fill="#F7931A"/>
+<path d="M33.2322 23.6852C34.5717 24.5618 35.2017 25.9523 34.7441 27.6102C34.1148 29.8899 31.942 30.7095 28.4754 29.7526L21.6551 27.87L25.2956 14.6816L31.739 16.4602C35.0361 17.3704 36.3521 19.2138 35.7852 21.2674C35.4212 22.5862 34.4621 23.4164 33.2322 23.6852ZM30.7277 18.6548L27.6944 17.8175L26.8363 20.9261L29.8696 21.7634C31.358 22.1743 32.3138 21.8704 32.5998 20.8342C32.8859 19.7979 32.2161 19.0656 30.7277 18.6548ZM28.8838 27.3916C30.4664 27.8285 31.4494 27.5727 31.7615 26.4422C32.0683 25.3307 31.3661 24.5691 29.7835 24.1322L26.2226 23.1493L25.3229 26.4087L28.8838 27.3916Z" fill="white"/>
+<rect x="27.6348" y="12" width="1.9684" height="3.23167" transform="rotate(14.7502 27.6348 12)" fill="white"/>
+<rect x="31.0625" y="12.8672" width="1.9878" height="3.42815" transform="rotate(14.2129 31.0625 12.8672)" fill="white"/>
+<rect x="23.6445" y="28.0117" width="2.03676" height="3.32783" transform="rotate(13.963 23.6445 28.0117)" fill="white"/>
+<rect x="27.1387" y="28.8555" width="1.9744" height="3.32783" transform="rotate(15.2176 27.1387 28.8555)" fill="white"/>
+<rect x="22.5273" y="13.9844" width="4.4561" height="13.7441" transform="rotate(13.9058 22.5273 13.9844)" fill="white"/>
+<rect x="21.2266" y="15.9883" width="3.42508" height="9.26055" rx="0.799753" transform="rotate(13.9168 21.2266 15.9883)" fill="#F7931A"/>
+</svg>