add about page hero image, refactor about components into dedicated folder, update page layout with FadeInOnView animations and HomeStickyHeader, change AboutMission background to transparent, and create new Hero, Mission, and Records components with improved styling and content

Reviewed-on: #4

public/assets/fonts/Source_Sans_3/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2010-2020 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe in the United States and/or other countries.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/fonts/Source_Sans_3/README.txt

@@ -0,0 +1,79 @@
+Source Sans 3 Variable Font
+===========================
+
+This download contains Source Sans 3 as both variable fonts and static fonts.
+
+Source Sans 3 is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  Source_Sans_3/SourceSans3-VariableFont_wght.ttf
+  Source_Sans_3/SourceSans3-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Source Sans 3:
+  Source_Sans_3/static/SourceSans3-ExtraLight.ttf
+  Source_Sans_3/static/SourceSans3-Light.ttf
+  Source_Sans_3/static/SourceSans3-Regular.ttf
+  Source_Sans_3/static/SourceSans3-Medium.ttf
+  Source_Sans_3/static/SourceSans3-SemiBold.ttf
+  Source_Sans_3/static/SourceSans3-Bold.ttf
+  Source_Sans_3/static/SourceSans3-ExtraBold.ttf
+  Source_Sans_3/static/SourceSans3-Black.ttf
+  Source_Sans_3/static/SourceSans3-ExtraLightItalic.ttf
+  Source_Sans_3/static/SourceSans3-LightItalic.ttf
+  Source_Sans_3/static/SourceSans3-Italic.ttf
+  Source_Sans_3/static/SourceSans3-MediumItalic.ttf
+  Source_Sans_3/static/SourceSans3-SemiBoldItalic.ttf
+  Source_Sans_3/static/SourceSans3-BoldItalic.ttf
+  Source_Sans_3/static/SourceSans3-ExtraBoldItalic.ttf
+  Source_Sans_3/static/SourceSans3-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

public/assets/icons/foundation_icons/open.svg

@@ -0,0 +1,16 @@
+<svg width="74" height="70" viewBox="0 0 74 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_37_360)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.1454 51.5083C51.2298 50.8936 50.9106 50.0339 50.9978 48.982C51.0383 48.4992 51.096 48.0127 51.2077 47.541C51.3955 46.744 51.2506 46.0863 50.6786 45.4643C49.7225 44.4247 48.4791 44.3311 47.2737 44.5307C45.5111 44.8226 43.7755 45.3103 42.0448 45.7772C41.4741 45.9299 41.0162 45.9742 40.6627 45.4384C40.4356 45.0948 40.1717 45.1293 39.8882 45.3276C39.2266 45.7895 38.5712 46.2587 37.9194 46.733C37.8003 46.8179 37.7107 46.9423 37.5119 47.1468C37.9108 47.2121 38.1808 47.2934 38.4509 47.2934C39.1186 47.2934 39.7851 47.2712 40.4516 47.2306C41.981 47.137 43.3668 47.5791 44.6568 48.3613C44.8716 48.4918 44.9919 48.7763 45.1576 48.9919C45.0901 49.1052 45.0226 49.2185 44.9539 49.3343C44.7378 49.1902 44.5402 49.0017 44.3058 48.9118C43.4785 48.5891 42.6585 48.1445 41.7993 48.0324C40.2822 47.8378 38.7369 47.8526 37.2026 47.7774C36.7386 47.754 36.3569 47.8895 36.0242 48.174H33.1864C32.7997 48.3046 32.4082 48.4228 32.0264 48.5694C31.1034 48.9242 30.2098 49.4316 29.2549 49.6188C28.0814 49.8504 26.8577 49.8356 25.6536 49.8836C25.4314 49.8935 25.2006 49.6989 24.9736 49.5991C24.9944 49.5437 25.0153 49.4883 25.0349 49.4328C27.0111 49.5548 28.9726 49.604 30.7499 48.5645C30.745 48.4881 30.7389 48.4118 30.7352 48.3342C30.1276 48.3662 29.5212 48.397 28.9161 48.4278C29.0425 48.2344 29.1874 48.1272 29.3482 48.0866C30.4443 47.8132 31.5404 47.5262 32.6463 47.2946C33.5337 47.1086 34.5071 47.1604 35.3148 46.8106C36.8356 46.1504 38.2741 45.2993 39.7225 44.4826C40.1767 44.2264 40.5473 43.8224 41.0371 43.4197C40.2012 43.012 39.4721 43.1389 38.7577 43.198C36.05 43.4246 33.4171 44.0294 30.8162 44.7967C28.5577 45.4618 26.363 46.3327 24.01 46.6911C22.5101 46.9202 21.1439 47.6038 19.7852 48.5867C21.4852 48.8342 22.9667 48.1938 24.6471 47.9597C24.4703 48.1617 24.4396 48.2184 24.3942 48.2455C22.7114 49.2222 20.8653 49.4821 18.9652 49.4932C18.7701 49.4957 18.5209 49.4587 18.3908 49.3368C18.1539 49.1175 17.8912 48.8404 17.8262 48.546C17.7906 48.381 18.0925 48.0792 18.3073 47.9351C18.5332 47.7836 18.8314 47.7429 19.1015 47.6617C20.0073 47.387 20.9426 47.1862 21.8141 46.8266C23.2466 46.239 24.6777 45.723 26.2476 45.6872C26.5582 45.6811 26.8712 45.532 27.1756 45.4274C29.2205 44.7265 31.236 43.9136 33.3177 43.3507C34.8631 42.9319 36.4894 42.7878 38.0912 42.6105C39.4905 42.4553 40.8996 42.2496 42.3124 42.6486C42.6315 42.7386 43.0894 42.6117 43.3913 42.4282C44.4923 41.763 45.343 40.8356 45.8204 39.6223C46.6035 37.6319 46.05 35.66 44.6814 34.6118C43.1139 33.4084 41.2531 32.7864 39.2401 32.7827C38.9799 32.7827 38.7172 32.8677 38.3294 32.9342C38.592 33.305 38.7909 33.5328 38.9234 33.7939C38.9922 33.9282 38.9431 34.1228 38.9468 34.2891C38.8019 34.2817 38.6387 34.3125 38.5135 34.2595C36.9644 33.6018 35.3553 33.236 33.6749 33.1892C33.4441 33.183 33.2158 33.0808 32.9814 33.0451C32.5579 32.9798 32.0571 32.7605 31.7196 32.9083C30.7082 33.3493 29.7471 33.9122 28.7946 34.4714C27.7034 35.1119 26.7116 35.9679 25.2988 35.7154C23.7044 35.4309 22.1554 35.5737 20.7266 36.4138C19.8539 36.9274 18.9836 37.4472 18.1416 38.0125C17.7623 38.2675 17.3855 38.5853 17.1339 38.9622C16.6368 39.6987 16.2379 40.503 15.7825 41.2691C15.0853 42.4417 14.5268 43.6833 14.5035 45.0554C14.4568 47.7651 14.6483 50.4416 15.618 53.0294C16.6601 55.8069 17.5905 58.6299 18.5405 61.4407C18.8376 62.3189 19.0413 63.2291 19.2868 64.1246C19.3948 64.3438 19.5016 64.5643 19.6096 64.7848C19.8294 65.1222 20.0773 65.4462 20.2663 65.8009C21.3833 67.9108 23.1128 69.1684 25.4204 69.7042C27.345 70.1513 29.1984 69.8273 31.0445 69.3211C31.3722 69.23 31.7785 69.0686 31.9454 68.8075C32.4168 68.0734 33.0612 67.5881 33.7915 67.178C34.3033 66.8897 34.8078 66.5843 35.3307 66.3145C35.5688 66.1914 35.8401 66.1322 36.0954 66.0448C36.1568 66.099 36.2194 66.1532 36.2808 66.2098C36.0451 66.6348 35.8094 67.0597 35.5455 67.5376C36.7852 67.5955 37.9083 67.6485 39.1984 67.71C38.9136 67.3442 38.7025 67.1127 38.5392 66.8503C38.214 66.3392 37.8359 65.8428 37.6236 65.2836C36.9239 63.4299 36.9718 61.4912 37.1449 59.5562C37.1731 59.2483 37.1191 58.7839 37.6162 58.8012C37.6825 58.8049 37.8212 59.3764 37.7635 59.6498C37.3278 61.7252 37.6236 63.6578 38.8019 65.4277C39.6624 66.7198 40.6725 67.8209 42.2559 68.2384C43.6773 68.6153 45.0705 68.4909 46.4427 68.0796C48.4103 67.4896 49.9937 66.3835 50.7989 64.4017C51.2494 63.2895 51.6005 62.1341 52.019 61.0084C52.2093 60.4972 52.4584 60.0082 52.6683 59.5045C53.0807 58.5142 53.6085 57.5485 53.8651 56.5164C54.2174 55.1061 54.1695 53.6711 53.147 52.4714C52.8475 52.1192 52.5235 51.762 52.1454 51.5083Z" fill="#04B782"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3755 13.1375C14.4676 13.3198 14.8137 13.4848 15.0285 13.4688C15.4115 13.4417 15.7834 13.2705 16.3615 13.1018C16.0866 13.8839 15.981 14.6069 15.6091 15.1402C15.0322 15.9667 15.0101 16.7882 15.3501 17.627C16.2314 19.7973 17.1643 21.9466 18.091 24.0959C18.3672 24.7364 18.7121 25.3239 19.7284 24.963C19.6093 25.3486 19.5038 25.5974 19.4596 25.8585C19.3724 26.3659 19.1748 26.914 19.2828 27.3833C19.4903 28.2862 19.8143 29.1791 20.2145 30.0167C20.5226 30.667 20.9276 31.3309 21.453 31.8051C22.5024 32.7511 24.3055 32.2005 24.783 30.8062C25.5354 28.6089 25.0248 26.5445 23.9177 24.6034C23.8035 24.4014 23.3187 24.2252 23.1075 24.3065C22.5147 24.5307 21.9697 24.8891 21.4137 25.2081C21.0442 25.4212 20.6883 25.6577 20.1875 25.9693C20.2427 24.846 20.9583 24.4162 21.5487 23.9518C22.1501 23.4776 22.8473 23.1216 23.6206 22.64C23.2892 22.6918 23.0106 22.6721 22.7958 22.7805C22.1465 23.1081 21.5241 23.4911 20.8834 23.8373C20.6981 23.9358 20.4857 23.9838 20.2857 24.0553C20.4673 23.2768 20.8049 22.7349 21.5021 22.5009C21.8273 22.3912 22.1808 22.2915 22.441 22.0845C22.6338 21.9318 22.8056 21.6091 22.8007 21.3677C22.7884 20.7186 22.7 20.067 22.5969 19.4241C22.3404 17.8352 22.0593 16.2512 21.2246 14.8372C20.6232 13.8186 19.7444 13.5279 18.7121 14.0785C17.9817 14.4677 17.3054 14.9592 16.5874 15.3742C16.4303 15.4654 16.1995 15.4247 16.0019 15.4444C16.0841 15.2548 16.1148 14.9887 16.2584 14.8889C16.7359 14.5552 17.2441 14.2632 17.7584 13.9873C18.0947 13.8075 18.4617 13.6856 18.8152 13.5378C18.7931 13.4836 18.7722 13.4306 18.7514 13.3764C18.1475 13.5365 17.546 13.6967 16.9433 13.8568C16.9102 13.8112 16.8758 13.7644 16.8439 13.7188C16.9298 13.5809 16.9851 13.3752 17.109 13.3173C17.5963 13.0833 18.0898 12.7877 18.609 12.7138C19.667 12.5635 19.6768 12.6165 19.694 11.54C19.6977 11.3774 19.6768 11.2148 19.6633 11.0522C19.4817 8.88441 18.8262 6.86565 17.7498 4.98731C17.2441 4.10295 16.6328 3.31589 15.5551 3.11882C15.1255 3.03999 14.6848 3.03137 14.2491 2.99072C13.8134 3.2075 13.3764 3.42305 12.9406 3.63983C12.0839 4.59809 11.9071 5.71524 12.1772 6.93955C12.6534 9.09873 13.3874 11.1668 14.3755 13.1375Z" fill="#04B782"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.7769 40.815C73.6689 40.5958 73.5621 40.3753 73.4541 40.156C73.3632 40.0772 73.2528 40.0144 73.1853 39.9183C72.6071 39.0882 71.8167 38.6398 70.8335 38.4403C69.692 38.21 68.5688 38.306 67.4691 38.5906C66.0906 38.9477 64.9823 39.6239 64.1881 40.6549L64.1832 40.6475C64.139 40.7152 64.0936 40.7781 64.0482 40.8446C63.9905 40.9271 63.9316 41.0084 63.8763 41.0958C63.2908 41.9469 62.7078 42.7229 62.153 43.409C61.8044 43.3659 61.7259 43.6873 61.6547 44.0125C59.9522 46.0288 58.6425 47.1459 58.6425 47.1459L58.564 47.3652C57.6372 47.6904 56.7719 48.1522 55.9102 48.6659C54.8362 49.3076 54.5159 50.2067 54.4864 51.2968C54.4619 52.2132 54.657 53.0877 55.2253 53.8747C55.8697 54.764 56.6553 54.801 57.3304 53.9388C57.7379 53.4153 58.1957 53.5298 58.7039 53.1061C59.4809 52.4607 60.2959 51.8523 61.1404 51.2992C61.9358 50.7758 62.2966 51.3239 62.2352 50.3804C62.2254 50.1969 62.3334 49.3913 62.385 49.2053C62.4476 49.2053 62.509 49.2053 62.5716 49.2053C62.7986 49.8298 63.0417 49.2189 63.2467 49.8508C63.4713 50.5442 63.5056 50.5467 64.0654 50.1328C64.4348 49.8594 64.8583 49.6549 65.2683 49.4431C67.2763 48.4121 69.5164 47.8726 71.2729 46.3084C72.9361 44.8254 74.2764 43.2661 73.7769 40.815Z" fill="#04B782"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.7131 12.7603C28.8751 13.7382 28.8297 14.7027 28.8616 15.6769C28.9341 17.8644 29.2826 20.0445 29.5416 22.2246C29.5895 22.6311 29.8718 22.7543 30.2621 22.6065C30.6021 22.4759 30.9458 22.3527 31.2932 22.2468C31.794 22.0941 31.9351 22.237 31.8075 22.7838C31.9143 22.774 32.0149 22.7494 32.1119 22.758C32.2346 22.7678 32.3562 22.8048 32.4777 22.8282C32.4028 22.9501 32.3414 23.0868 32.2469 23.1903C32.1819 23.2617 32.0751 23.2987 31.9793 23.3319C31.0612 23.667 30.6304 24.4158 30.5972 25.3113C30.5273 27.1244 31.2085 28.6874 32.458 29.9844C33.4817 31.0436 34.3581 30.9303 35.1854 29.7208C36.2754 28.127 36.2778 26.3484 36.0999 24.5402C36.0225 23.7569 35.7439 23.5339 34.8786 23.3517C34.5962 23.2925 34.3188 23.2112 34.0402 23.141C34.0402 23.04 34.0427 22.9366 34.0427 22.8356C34.3618 22.8134 34.6908 22.7333 34.9988 22.7826C35.4714 22.859 35.7697 22.689 35.8838 22.2591C36.0287 21.7098 36.1379 21.1494 36.2152 20.5865C36.4767 18.6601 35.8593 16.8372 35.5426 14.9773C35.4653 14.5327 35.1253 14.545 34.8516 14.5684C33.7665 14.6571 32.6851 14.7938 31.6013 14.9145C31.3828 14.9391 31.1582 15.0044 30.9446 14.9798C30.812 14.965 30.6279 14.8418 30.5874 14.7261C30.5445 14.6053 30.6021 14.3639 30.6979 14.295C31.4466 13.7678 32.1733 13.1815 32.9895 12.7935C33.5296 12.541 34.2096 12.594 34.8233 12.4967C35.2861 12.4228 35.5279 12.2306 35.4297 11.6677C35.1682 10.17 34.9596 8.66116 34.7521 7.15356C34.5275 5.52279 34.3618 3.88216 34.0991 2.25632C33.9678 1.45079 33.5247 0.797986 32.7624 0.391525C30.8231 -0.644335 28.6567 1.10345 28.2111 2.70589C27.7913 4.2098 27.7925 5.77529 27.9619 7.31861C28.1608 9.13783 28.4112 10.9546 28.7131 12.7603Z" fill="#04B782"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.2381 31.7421C42.2802 32.3666 43.5371 32.0648 44.2527 30.8381C44.8431 29.8281 45.8962 27.4915 46.3246 26.3978C46.5958 25.7056 46.2669 25.102 45.6434 24.6894C44.8872 24.1881 43.7064 24.6525 42.8202 24.3298C42.8018 24.3236 42.8055 24.2571 42.7736 24.0834C43.0694 23.9997 43.3824 23.8248 43.6844 23.8457C44.3656 23.8962 45.0665 23.9627 45.7121 24.1721C46.2964 24.363 46.5492 24.198 46.7849 23.6893C47.5434 22.0462 47.6134 20.3009 47.5606 18.542C47.552 18.2994 47.3016 18.0333 47.1065 17.8313C46.8192 17.5332 46.4817 17.2832 46.165 17.0135C46.2129 16.9371 46.2608 16.862 46.3074 16.7868C46.7321 16.9507 47.1556 17.1157 47.579 17.2795C47.6171 17.2118 47.6539 17.1453 47.6907 17.0775C47.1261 16.7425 46.5603 16.4075 45.9956 16.0724C46.0177 15.9961 46.0398 15.9185 46.0619 15.8409C46.4706 15.8852 46.8818 15.9099 47.2844 15.9801C48.1117 16.1229 48.5328 15.7719 48.4849 14.9541C48.41 13.6559 48.329 12.3576 48.2639 11.0582C48.2198 10.1689 48.0749 9.25252 48.8372 8.54306C48.9047 8.48025 48.9292 8.35954 48.9476 8.25977C49.2213 6.62038 49.333 4.97729 48.7991 3.36623C48.4088 2.19365 47.1065 1.46202 45.9367 1.79088C44.5841 2.17271 43.6856 3.16177 43.3615 4.46737C42.7846 6.80267 42.4753 9.19217 42.6054 11.6186C42.6337 12.1606 42.5919 12.7062 42.5809 13.2494C42.5747 13.7027 42.5649 14.1572 42.5563 14.6252C44.9327 14.2779 44.9327 14.2779 45.458 14.7262C44.9008 14.8642 44.4159 14.9861 43.8967 15.1154C44.2478 15.3371 44.5497 15.5305 44.9363 15.7731C44.2662 16.2424 43.6488 16.118 43.0571 16.1193C42.6828 16.1193 42.3636 16.1624 42.2986 16.6206C42.0114 18.6393 41.7143 20.6556 41.4381 22.6756C41.3878 23.0463 41.4492 23.374 41.9696 23.3346C42.0813 23.3259 42.2065 23.4897 42.3268 23.5747C42.2384 23.6979 42.1746 23.8617 42.0555 23.9356C41.7843 24.1044 41.486 24.2288 41.2 24.3704C41.2467 24.3975 41.2933 24.4258 41.3399 24.4529C41.1718 24.8791 40.9152 25.2917 40.8514 25.7339C40.6477 27.1614 40.4709 28.5976 40.3715 30.0362C40.3248 30.7198 40.5851 31.3529 41.2381 31.7421Z" fill="#04B782"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2726 34.889C16.1854 33.6401 15.5606 32.5956 14.985 31.5536C14.2092 30.1457 13.242 28.8746 11.936 27.8942C11.6966 27.7131 11.542 27.3966 11.3959 27.117C11.1688 26.6896 11.0179 26.2203 10.7724 25.8077C9.89845 24.3395 8.68451 23.1792 7.4362 22.0399C6.96854 21.6125 6.57699 21.073 6.24803 20.5262C5.52384 19.324 4.87698 18.0751 4.16875 16.8618C3.55871 15.8186 2.30549 15.3789 1.22166 15.7816C0.415231 16.0809 0.00526541 17.0133 0.145194 18.2093C0.294942 19.5149 0.870612 20.6629 1.46347 21.7985C1.78997 22.4242 2.16434 22.5314 2.83084 22.2776C3.13156 22.1631 3.40528 21.9685 3.70846 21.8662C3.91221 21.7985 4.14911 21.8281 4.3725 21.8157C4.28045 22.0116 4.23994 22.2764 4.08774 22.3946C3.6925 22.6976 3.24939 22.9391 2.78542 23.2285C3.14383 23.8961 3.27272 23.9022 3.70968 23.3307C3.81279 23.194 4.01655 23.1337 4.17488 23.0376C4.16016 23.2297 4.15402 23.4243 4.12947 23.6165C4.07301 24.0242 3.91835 24.4442 3.97113 24.8371C4.03373 25.3101 4.2694 25.7609 4.42897 26.2228C5.05987 28.0555 6.20507 29.4498 7.92349 30.344C8.51266 30.6507 9.07974 30.6483 9.59772 30.142C9.8113 29.9339 10.0777 29.7762 10.3342 29.6186C10.4017 29.5767 10.5748 29.5853 10.6042 29.6333C10.6582 29.7171 10.6926 29.8846 10.6435 29.9524C10.4717 30.1962 10.2753 30.4303 10.0592 30.6384C9.68855 30.9956 9.4492 31.3787 9.8113 31.8627C10.9516 33.3876 12.0637 34.9358 13.2665 36.4089C13.895 37.1763 14.5468 37.2329 15.3286 36.8511C15.9461 36.5506 16.3302 35.7143 16.2726 34.889Z" fill="#04B782"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.9816 42.3396C46.7336 41.9566 46.4489 42.0477 46.185 42.331C45.7259 42.8261 45.1232 42.9284 44.4985 43.0614C44.048 43.1538 43.6442 43.4629 43.2145 43.6686C42.7383 43.894 42.2621 44.1231 41.7748 44.3288C41.6348 44.3879 41.4483 44.3362 41.3083 44.3966C41.1733 44.4544 41.0727 44.5912 40.9561 44.6946C41.069 44.8215 41.1782 45.0555 41.2936 45.058C41.7625 45.0691 42.2424 45.0543 42.7002 44.9582C43.1888 44.8584 43.6515 44.638 44.1339 44.5012C44.7685 44.3239 45.4129 44.1761 46.0536 44.0135C46.0426 43.9716 46.0303 43.931 46.0193 43.8891C46.3273 43.7364 46.6661 43.6243 46.9386 43.421C47.3596 43.107 47.2172 42.703 46.9816 42.3396Z" fill="#04B782"/>
+</g>
+<defs>
+<clipPath id="clip0_37_360">
+<rect width="74" height="70" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/assets/icons/foundation_icons/people.svg

@@ -0,0 +1,33 @@
+<svg width="80" height="54" viewBox="0 0 80 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_37_320)">
+<mask id="mask0_37_320" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="59" height="54">
+<path d="M0.799805 0.0859375H58.2931V53.9859H0.799805V0.0859375Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_37_320)">
+<path d="M58.1438 53.8738H0.799805V51.1482C0.799805 51.1482 7.01413 47.4413 18.4615 42.4265C19.661 39.5924 20.3143 38.0649 20.3143 38.0649C20.3143 38.0649 21.2969 38.0114 21.5138 36.5937C21.732 35.1773 21.894 32.6686 21.894 32.6686C21.894 32.6686 19.934 31.0888 19.3879 27.4904C19.2042 26.3828 18.7882 25.8545 18.7882 25.8545C18.7882 25.8545 17.1523 22.1476 17.59 19.5866C17.6869 19.094 18.6248 18.8222 18.6248 18.8222L18.7333 9.6105C18.7333 9.6105 18.242 1.70669 35.4673 0.126953C33.4524 1.59823 34.8688 2.68797 34.8688 2.68797L39.2304 6.44846C39.2304 6.44846 40.5906 7.97589 40.5906 10.5369V18.9869C40.5906 18.9869 41.5183 19.3684 41.5183 19.912C41.5183 20.4581 41.2452 24.4917 40.3201 25.8545C39.5009 29.6699 37.7029 32.287 37.7029 32.287C37.7029 32.287 37.1568 36.6485 37.5945 37.4103C38.0309 38.1747 38.5757 38.3367 38.5757 38.3367C38.5757 38.3367 38.9573 38.8267 39.2278 39.9726C39.5009 41.1172 39.9386 42.4252 39.9386 42.4252C39.9386 42.4252 56.018 49.1308 58.1438 51.1482V53.8738Z" fill="#04B782"/>
+</g>
+<mask id="mask1_37_320" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="42" y="4" width="38" height="50">
+<path d="M42.6133 4.78662H79.2V53.9857H42.6133V4.78662Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_37_320)">
+<path d="M62.6775 43.4849C62.6775 43.4849 62.2832 42.2982 62.0344 41.2595C61.7881 40.2195 61.4423 39.7754 61.4423 39.7754C61.4423 39.7754 60.9459 39.6274 60.5517 38.9333C60.1548 38.2416 60.6512 34.2846 60.6512 34.2846C60.6512 34.2846 62.2832 31.9099 63.0259 28.448C63.8655 27.2115 64.1118 23.5506 64.1118 23.0567C64.1118 22.5616 63.2722 22.2158 63.2722 22.2158V14.5494C63.2722 12.2244 62.0344 10.8399 62.0344 10.8399L58.0787 7.42651C58.0787 7.42651 56.7924 6.43758 58.6223 5.10156C42.992 6.53583 43.4374 13.7085 43.4374 13.7085L43.3698 19.2848C43.5829 19.4455 43.7794 19.6612 43.7794 19.9139C43.7794 20.4511 43.5152 24.3826 42.6182 25.7977C42.9589 27.2536 43.4871 28.448 43.4871 28.448C43.4871 28.448 43.8636 28.9278 44.032 29.9333C44.5258 33.1962 46.3059 34.6317 46.3059 34.6317C46.3059 34.6317 46.1579 36.9069 45.9601 38.1932C45.7611 39.4794 44.8717 39.5279 44.8717 39.5279C44.8717 39.5279 44.3612 39.5879 43.4208 41.8082C47.2106 43.4147 58.6363 48.3377 60.4075 50.017V53.8732H79.1997V51.3989C77.2704 49.5691 62.6775 43.4849 62.6775 43.4849Z" fill="#04B782"/>
+</g>
+<mask id="mask2_37_320" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="43" y="41" width="37" height="13">
+<path d="M43.2666 41.7002H79.1999V53.9859H43.2666V41.7002Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_37_320)">
+<path d="M60.4076 50.0174C58.6364 48.3394 47.2107 43.4151 43.4209 41.8086C47.2107 43.4151 58.6364 48.3381 60.4076 50.0174Z" fill="#04B782"/>
+</g>
+<mask id="mask3_37_320" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="42" y="4" width="38" height="50">
+<path d="M42.6133 4.78662H79.2V53.9857H42.6133V4.78662Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_37_320)">
+<path d="M79.1997 53.8732H60.4075V50.017C58.6363 48.3377 47.2106 43.4147 43.4208 41.8082C44.3612 39.5879 44.8717 39.5279 44.8717 39.5279C44.8717 39.5279 45.7611 39.4794 45.9601 38.1932C46.1579 36.9069 46.3059 34.6317 46.3059 34.6317C46.3059 34.6317 44.5258 33.1962 44.032 29.9333C43.8636 28.9278 43.4871 28.448 43.4871 28.448C43.4871 28.448 42.9589 27.2536 42.6182 25.7977C43.5152 24.3826 43.7794 20.4511 43.7794 19.9139C43.7794 19.6612 43.5829 19.4455 43.3698 19.2848L43.4374 13.7085C43.4374 13.7085 43.4348 13.688 43.4348 13.6472C43.4348 12.9518 43.8355 6.45927 58.6223 5.10156C57.8618 5.65792 57.6384 6.15302 57.6384 6.54221C57.6384 7.08964 58.0787 7.42651 58.0787 7.42651L62.0344 10.8399C62.0344 10.8399 63.2722 12.2244 63.2722 14.5494V22.2158C63.2722 22.2158 64.1118 22.5616 64.1118 23.0567C64.1118 23.5506 63.8655 27.2115 63.0259 28.448C62.2832 31.9099 60.6512 34.2846 60.6512 34.2846C60.6512 34.2846 60.3973 36.3033 60.3973 37.7108C60.3973 38.2723 60.4381 38.7367 60.5517 38.9333C60.9459 39.6274 61.4423 39.7754 61.4423 39.7754C61.4423 39.7754 61.7881 40.2195 62.0344 41.2595C62.2832 42.2982 62.6775 43.4849 62.6775 43.4849C62.6775 43.4849 77.2704 49.5691 79.1997 51.3989V53.8732Z" fill="#04B782"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_37_320">
+<rect width="80" height="54" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/assets/icons/foundation_icons/planet.svg

@@ -0,0 +1,11 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_37_341)">
+<path d="M28 0C43.4647 0 56 12.5362 56 28C56 43.4647 43.4647 56 28 56C12.5362 56 0 43.4647 0 28C0 12.5362 12.5362 0 28 0Z" fill="#04B782"/>
+<path d="M27.9965 4.98193C27.9965 4.98193 22.4129 3.99756 18.6358 4.98193C14.8597 5.96813 11.0826 8.92308 10.4254 10.5655C9.76917 12.208 10.0973 15.6551 9.27607 16.3132C8.45485 16.9685 9.43922 21.2405 10.7535 21.5687C12.0679 21.8959 9.6042 26.166 12.5601 26.8232C14.5315 30.6003 18.4854 30.4973 18.4854 30.4973C18.4854 30.4973 24.3844 31.9146 24.3844 33.228C24.3844 34.5414 22.0848 34.8696 22.0848 34.8696C22.0848 34.8696 22.741 39.467 24.0554 39.631C25.3706 41.7675 27.9965 41.4384 27.9965 41.4384C27.9965 41.4384 28.1606 44.2293 26.6831 45.2146C25.2047 46.2008 25.8728 51.4554 28.0011 51.4554C30.1311 51.4554 27.3403 48.1705 29.3108 47.3511C31.2814 46.528 38.3425 42.4237 38.3425 40.4541C40.478 35.6908 35.7157 34.3756 35.7157 34.3756C35.7157 34.3756 29.4749 31.2146 25.6978 30.4973C21.9207 29.7791 20.4423 27.9999 20.4423 27.9999L17.6515 27.3154C17.6515 27.3154 16.1731 25.2418 18.1446 24.8007C20.1151 24.3595 22.2498 24.3595 22.5779 25.5089C22.9051 26.6601 23.6479 25.508 23.9341 23.047C24.2194 20.5834 27.9965 19.105 27.9965 19.105C27.9965 19.105 32.4298 16.4782 31.9386 14.5076C31.4455 12.5361 37.3572 14.8348 37.3572 14.8348C37.3572 14.8348 35.3866 8.59495 32.5948 8.75902C29.8021 8.92399 29.8021 8.26592 29.8021 8.26592C29.8021 8.26592 29.3108 7.61058 28.4896 8.43089C27.6684 9.25212 27.5061 11.5526 25.3706 11.2236C23.2341 10.8946 21.5133 7.11748 23.9341 6.95251C26.3541 6.78844 27.5034 7.61058 27.5034 7.61058C27.5034 7.61058 30.2825 5.27269 27.9965 4.98193Z" fill="#FDF8F1"/>
+</g>
+<defs>
+<clipPath id="clip0_37_341">
+<rect width="56" height="56" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/assets/icons/foundation_icons/simplicity.svg

@@ -0,0 +1,25 @@
+<svg width="86" height="76" viewBox="0 0 86 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_37_345)">
+<path d="M47.4371 28.6147C46.4792 27.6472 48.9415 16.0921 50.3963 14.1722C52.8227 10.81 52.8185 11.7734 55.7128 10.8238C55.7128 10.8238 65.3563 9.90462 64.8746 9.90186C68.724 10.8846 79.2895 18.6441 75.4029 25.3726C72.9709 30.1799 59.9335 35.9022 55.59 37.3266C57.5306 34.4447 58.0261 31.5559 55.1442 29.6154C56.1145 28.1744 56.1255 25.7646 56.6113 24.8026C51.3155 23.8144 51.7613 31.527 45.9893 29.0909C46.4737 28.6106 46.9582 28.1316 47.4412 27.6513" fill="#04B782"/>
+<path d="M58.4856 36.3769C62.8332 33.9877 68.6384 29.1957 74.4104 31.6331C79.2191 34.065 78.7056 40.8087 81.0948 45.1578C83.0077 48.0576 85.4259 46.1419 85.3996 51.9236C85.3831 55.2968 82.0085 55.7633 81.9892 59.6182C76.6823 61.0398 67.5315 60.0337 63.6848 58.0876C57.9156 55.1684 52.167 47.914 48.3369 42.5947C55.0944 40.2166 54.1062 45.5139 57.9542 46.9769C64.6896 49.4171 70.9806 43.663 62.8043 40.2525C65.232 36.4086 60.411 36.8682 58.97 35.8966" fill="#04B782"/>
+<path d="M41.6322 33.4067C42.1484 26.1813 42.1842 18.4715 34.9727 15.0637C31.1274 12.6359 17.1818 6.30631 16.6711 12.5683C13.3006 12.0714 8.96539 11.5677 8.46299 15.9029C7.97578 17.3466 12.3027 19.2955 12.7775 20.7419C13.2523 22.1911 10.3553 23.6224 11.7893 26.0391C16.0928 33.2866 23.7888 36.214 31.9928 33.8442C29.1123 31.4206 25.2601 30.9209 25.2781 27.066C27.6893 26.5954 30.5781 27.0909 32.5021 28.0625C32.9852 27.5836 32.9879 27.1005 33.4724 26.6216C36.3501 29.5269 38.7434 32.9112 40.6564 36.2927C40.6619 34.8476 41.1532 32.9222 40.6812 30.9927" fill="#04B782"/>
+<mask id="mask0_37_345" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="26" y="42" width="33" height="34">
+<path d="M26.04 42.2402H58.9V75.9132H26.04V42.2402Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_37_345)">
+<path d="M48.7914 48.3805C53.5835 54.1857 60.2968 61.4442 58.3259 70.5909C52.0514 72.49 48.1896 73.9172 42.8799 75.8205C41.9483 69.0699 37.0927 76.7576 32.7658 74.3271C28.9205 72.3824 26.5617 61.7686 28.9799 59.8528C28.0179 59.3656 27.0628 57.4347 26.1035 56.4658C28.5368 51.6585 34.3516 44.4566 39.6627 42.5547C39.6558 43.9998 33.2958 64.2102 42.0118 55.577C43.8654 71.488 49.7534 48.8664 48.7872 49.3439" fill="#04B782"/>
+</g>
+<path d="M35.3409 39.1607C30.052 36.7274 24.7547 35.7378 18.9716 35.7102C15.5984 35.695 9.33916 34.7026 6.43797 36.6156C4.50429 38.0524 0.610726 46.226 0.599684 48.6358C0.590023 50.564 1.5189 58.2793 2.47263 60.2102C5.33656 66.0057 7.74502 66.4999 14.4998 64.6034L19.8136 61.7368C22.2303 60.3027 21.7348 63.1929 24.6443 59.3504C28.041 54.5472 25.1743 49.2321 31.9387 45.4089C27.5966 46.353 24.2137 48.2659 19.8757 48.7255C20.3587 48.2466 20.8432 47.7663 21.3277 47.2874C18.4375 46.7919 16.0235 47.7442 13.6137 48.2149C18.9565 39.0834 27.1466 39.6037 36.3015 39.6465" fill="#04B782"/>
+<mask id="mask1_37_345" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="40" y="0" width="13" height="45">
+<path d="M40.5264 0.123047H52.1864V44.7134H40.5264V0.123047Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_37_345)">
+<path d="M45.1947 44.5063C46.2395 44.2703 44.7958 27.1571 45.8006 18.0063C46.7957 11.264 49.2001 12.7201 51.1448 8.87483C54.0653 2.62249 49.2332 5.49194 46.3237 9.33444C46.8137 7.40905 51.6665 0.201602 46.3665 0.176758C42.0271 0.639128 43.4529 4.98402 44.8855 7.88108C42.0271 0.639128 40.081 4.48577 41.0265 8.34483C41.0251 8.82652 43.9028 11.7319 44.3762 13.6614C44.851 15.1092 43.3894 18.4756 43.3811 20.4037C42.876 25.2206 40.8498 46.3544 45.1947 44.5063Z" fill="#04B782"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_37_345">
+<rect width="86" height="76" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/assets/logos/logo_dark.svg

@@ -0,0 +1,56 @@
+<svg width="176" height="45" viewBox="0 0 176 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8906 18.9009C17.4167 19.578 17.849 20.3332 18.1771 21.1561C18.5104 20.3332 18.9427 19.578 19.4688 18.9009C19.6667 17.9998 19.724 17.0675 19.6198 16.1248C19.4584 14.7134 18.9636 13.3957 18.1771 12.2603C17.3959 13.3957 16.9011 14.7134 16.7396 16.1248C16.6354 17.0675 16.6927 17.9998 16.8906 18.9009Z" fill="#1F1D1A"/>
+<path d="M2.97363 19.1873C3.42676 20.9686 4.43197 22.5467 5.8903 23.7134C6.30697 24.0415 6.74447 24.3228 7.19759 24.5623C8.66634 22.8696 10.6715 21.7759 12.8278 21.4321C11.0309 20.1873 9.69759 18.328 9.10905 16.1665C8.59863 16.1873 8.08301 16.2498 7.56738 16.3696C5.69759 16.7967 4.11947 17.8228 2.97363 19.1873Z" fill="#1F1D1A"/>
+<path d="M17.7084 26.5833C17.5313 25.7552 17.4688 24.8906 17.5261 24.0156C16.875 24.6146 16.1563 25.1042 15.3907 25.4844C13.9584 27.3177 13.3178 29.6823 13.6719 32.0104C15.724 30.8333 17.1719 28.849 17.7084 26.5833Z" fill="#1F1D1A"/>
+<path d="M26.2972 16.1821C23.943 16.3488 21.7764 17.505 20.3128 19.3071C20.1097 20.1405 19.7868 20.953 19.3545 21.7186C20.1982 21.4634 21.0524 21.3332 21.9066 21.3228C23.9951 20.2915 25.6097 18.4373 26.2972 16.1821Z" fill="#1F1D1A"/>
+<path d="M14.8128 24.7394C15.3545 24.078 15.9951 23.4894 16.7191 22.9894C15.8441 22.8488 15.0055 22.5936 14.2295 22.229C11.9066 22.255 9.65658 23.229 8.05762 24.9634C10.2503 25.8332 12.7087 25.729 14.8128 24.7394Z" fill="#1F1D1A"/>
+<path d="M18.1771 38.25C19.7656 37.4323 21.1146 36.125 21.9427 34.3958C22.1771 33.9219 22.349 33.4323 22.4844 32.9375C20.5052 31.8802 18.9948 30.1667 18.1771 28.1406C17.3646 30.1667 15.8542 31.8802 13.875 32.9375C14.0104 33.4323 14.1823 33.9219 14.4167 34.3958C15.2448 36.125 16.5937 37.4323 18.1771 38.25Z" fill="#1F1D1A"/>
+<path d="M22.4736 26.0783C23.5465 27.9793 23.9424 30.2293 23.5361 32.4325C24.0049 32.6356 24.4945 32.8022 25.0153 32.922C26.8799 33.3491 28.7445 33.1095 30.3695 32.3804C30.7236 30.6304 30.5413 28.7606 29.708 27.0314C29.4788 26.5575 29.208 26.12 28.9059 25.7085C27.7184 26.2241 26.4476 26.4793 25.182 26.4793C24.2653 26.4793 23.3538 26.3439 22.4736 26.0783Z" fill="#1F1D1A"/>
+<path d="M10.0625 16.1821C10.75 18.4425 12.3646 20.2915 14.4531 21.3228C15.3073 21.3332 16.1615 21.4634 17.0052 21.7186C16.5729 20.953 16.25 20.1405 16.0469 19.3071C14.5833 17.505 12.4167 16.3488 10.0625 16.1821Z" fill="#1F1D1A"/>
+<path d="M11.344 32.922C11.8648 32.8022 12.3544 32.6356 12.8231 32.4325C12.4169 30.2293 12.8127 27.9793 13.8856 26.0783C13.0054 26.3439 12.094 26.4793 11.1773 26.4793C9.91168 26.4793 8.64085 26.2241 7.45335 25.7085C7.15126 26.12 6.88043 26.5575 6.65126 27.0314C5.81793 28.7606 5.63564 30.6304 5.98981 32.3752C7.61481 33.1095 9.47939 33.3491 11.344 32.922Z" fill="#1F1D1A"/>
+<path d="M18.7607 11.5208C20.0889 13.3281 20.7035 15.5313 20.5628 17.7083C22.1774 16.2396 24.2816 15.349 26.5212 15.2552C26.6149 14.7552 26.667 14.2396 26.667 13.7083C26.667 11.7865 26.0212 10.0208 24.9378 8.59375C23.1045 8.64063 21.3441 9.27604 19.8805 10.4375C19.4691 10.7656 19.0993 11.1302 18.7607 11.5208Z" fill="#1F1D1A"/>
+<path d="M17.5986 11.5208C17.2601 11.1302 16.8903 10.7656 16.4788 10.4375C15.0153 9.27604 13.2549 8.64063 11.4216 8.59375C10.3382 10.0208 9.69238 11.7865 9.69238 13.7083C9.69238 14.2396 9.74447 14.7552 9.83822 15.2552C12.0778 15.349 14.182 16.2396 15.7966 17.7083C15.6559 15.5313 16.2705 13.3281 17.5986 11.5208Z" fill="#1F1D1A"/>
+<mask id="mask0_94_167" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="18" y="33" width="13" height="7">
+<path d="M18.667 33.3335H30.667V39.7918H18.667V33.3335Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_94_167)">
+<path d="M24.8079 33.8127C24.2923 33.6981 23.7975 33.5262 23.3236 33.3335C23.1777 33.8283 23.0059 34.3179 22.7715 34.797C21.9642 36.4741 20.7194 37.8022 19.2402 38.7137C21.2975 39.4429 23.6309 39.3804 25.7454 38.3647C27.86 37.3439 29.3652 35.5522 30.0788 33.495C29.0736 33.8543 28.0007 34.0522 26.9017 34.0522C26.2142 34.0522 25.5111 33.9741 24.8079 33.8127Z" fill="#1F1D1A"/>
+</g>
+<path d="M20.9691 25.4844C20.2035 25.1042 19.4847 24.6146 18.8285 24.0156C18.891 24.8906 18.8285 25.7552 18.6514 26.5833C19.1878 28.849 20.6357 30.8333 22.6878 32.0104C23.042 29.6823 22.4014 27.3177 20.9691 25.4844Z" fill="#1F1D1A"/>
+<mask id="mask1_94_167" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="29" y="20" width="7" height="12">
+<path d="M29.333 20H35.3903V32H29.333V20Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_94_167)">
+<path d="M31.0361 24.4272C30.6247 24.7606 30.1872 25.047 29.7393 25.297C30.0309 25.7189 30.307 26.1564 30.5361 26.6356C31.3434 28.3127 31.5986 30.12 31.3903 31.8439C33.2393 30.6877 34.6559 28.8283 35.1768 26.5314C35.6976 24.245 35.2393 21.9585 34.0726 20.1147C33.4997 21.797 32.4632 23.2918 31.0361 24.4272Z" fill="#1F1D1A"/>
+</g>
+<mask id="mask2_94_167" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="20" width="7" height="12">
+<path d="M0.645508 20H6.66634V32H0.645508V20Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_94_167)">
+<path d="M5.82255 26.6356C6.05172 26.1564 6.32776 25.7189 6.61943 25.297C6.17151 25.047 5.73401 24.7606 5.32255 24.4272C3.89547 23.2918 2.85901 21.797 2.28609 20.1147C1.11943 21.9585 0.661095 24.245 1.18193 26.5314C1.70276 28.8283 3.11943 30.6877 4.96839 31.8439C4.76005 30.12 5.01526 28.3127 5.82255 26.6356Z" fill="#1F1D1A"/>
+</g>
+<mask id="mask3_94_167" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="33" width="13" height="7">
+<path d="M5.33301 33.3335H17.333V39.7918H5.33301V33.3335Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_94_167)">
+<path d="M13.5885 34.797C13.3542 34.3179 13.1823 33.8283 13.0365 33.3335C12.5625 33.5262 12.0677 33.6981 11.5521 33.8127C10.849 33.9741 10.1458 34.0522 9.45833 34.0522C8.35937 34.0522 7.28646 33.8543 6.28125 33.495C6.99479 35.5522 8.5 37.3439 10.6146 38.3647C12.7292 39.3804 15.0625 39.4377 17.1198 38.7137C15.6406 37.8022 14.3958 36.4741 13.5885 34.797Z" fill="#1F1D1A"/>
+</g>
+<path d="M33.3854 19.1873C32.2396 17.8228 30.6615 16.7967 28.7917 16.3696C28.276 16.2498 27.7604 16.1873 27.25 16.1665C26.6615 18.328 25.3281 20.1873 23.5312 21.4321C25.6875 21.7759 27.6927 22.8696 29.1615 24.5623C29.6146 24.3228 30.0521 24.0415 30.4688 23.7134C31.9271 22.5467 32.9323 20.9686 33.3854 19.1873Z" fill="#1F1D1A"/>
+<path d="M27.443 15.2656C27.9587 15.2969 28.4795 15.3594 28.9951 15.474C30.818 15.8906 32.3857 16.8177 33.6045 18.0625C33.6045 18.0469 33.6097 18.0365 33.6097 18.026C33.8649 15.7708 33.2243 13.5573 31.8128 11.7813C30.3962 10.0104 28.3805 8.89583 26.1253 8.64062C26.1149 8.64062 26.0993 8.64062 26.0889 8.64062C27.0316 10.1042 27.5837 11.8385 27.5837 13.7083C27.5837 14.2396 27.5316 14.7552 27.443 15.2656Z" fill="#1F1D1A"/>
+<path d="M22.1302 22.229C21.3542 22.5936 20.5156 22.8488 19.6406 22.9894C20.3646 23.4894 21.0052 24.078 21.5469 24.7394C23.651 25.729 26.1094 25.8332 28.3021 24.9634C26.7031 23.229 24.4531 22.255 22.1302 22.229Z" fill="#1F1D1A"/>
+<path d="M2.75542 18.0625C3.97417 16.8177 5.54187 15.8906 7.36479 15.474C7.88042 15.3594 8.40125 15.2969 8.91687 15.2656C8.82833 14.7552 8.77625 14.2396 8.77625 13.7083C8.77625 11.8385 9.32833 10.1042 10.271 8.64062C10.2554 8.64062 10.245 8.64062 10.2346 8.64062C7.97937 8.89583 5.96375 10.0104 4.54708 11.7813C3.13562 13.5573 2.495 15.7708 2.75021 18.026C2.75021 18.0365 2.75542 18.0469 2.75542 18.0625Z" fill="#1F1D1A"/>
+<mask id="mask4_94_167" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="12" y="5" width="14" height="7">
+<path d="M12 5.04688H25.3333V12H12V5.04688Z" fill="white"/>
+</mask>
+<g mask="url(#mask4_94_167)">
+<path d="M17.0465 9.72396C17.4632 10.0521 17.833 10.4219 18.1768 10.8021C18.5257 10.4219 18.8955 10.0521 19.3122 9.72396C20.7705 8.55729 22.4684 7.91146 24.1976 7.73438C22.6611 6.18229 20.5309 5.21875 18.1768 5.21875C15.8278 5.21875 13.6976 6.18229 12.1611 7.72917C13.8903 7.91146 15.5882 8.55729 17.0465 9.72396Z" fill="#1F1D1A"/>
+</g>
+<path d="M51.2048 31.3452C49.4235 31.3556 47.7777 31.0744 46.2673 30.491C44.7673 29.9077 43.4548 29.0692 42.3298 27.9702C41.2048 26.8765 40.3298 25.5744 39.7048 24.0744C39.0798 22.5744 38.7569 20.939 38.7464 19.1577C38.7152 17.366 39.0017 15.7202 39.6006 14.2202C40.1944 12.7202 41.0433 11.4077 42.1423 10.2827C43.236 9.15772 44.5277 8.28272 46.0173 7.65772C47.5173 7.03272 49.1527 6.71501 50.9339 6.69938C52.7256 6.67334 54.3714 6.9598 55.8714 7.55355C57.3714 8.13688 58.6839 8.98063 59.8089 10.0744C60.9339 11.1733 61.7985 12.465 62.4131 13.9494C63.0381 15.439 63.361 17.0744 63.3923 18.866C63.4027 20.6473 63.111 22.2931 62.5173 23.8035C61.9339 25.3192 61.0902 26.6369 59.9964 27.7619C58.8975 28.8869 57.6058 29.7619 56.1214 30.3869C54.6319 30.9963 52.9964 31.314 51.2048 31.3452ZM51.1839 28.3869C52.9444 28.3608 54.5069 27.939 55.8714 27.116C57.2308 26.2827 58.2933 25.1577 59.0589 23.741C59.835 22.3244 60.2152 20.715 60.2048 18.9077C60.1735 17.1056 59.7569 15.5067 58.9548 14.116C58.1631 12.715 57.0694 11.616 55.6839 10.8244C54.2933 10.0223 52.7152 9.63167 50.9548 9.65772C49.2048 9.67334 47.6423 10.0952 46.2673 10.9285C44.9027 11.7619 43.835 12.8869 43.0589 14.3035C42.2933 15.7098 41.9235 17.314 41.9548 19.116C41.9652 20.9233 42.3714 22.5275 43.1631 23.9285C43.9652 25.3348 45.0642 26.4285 46.4548 27.2202C47.8558 28.0119 49.4339 28.4025 51.1839 28.3869Z" fill="#1F1D1A"/>
+<path d="M80.1413 30.4696L77.3913 30.5112L77.3704 28.8029C76.8132 29.5008 76.1048 30.0529 75.2454 30.4696C74.3809 30.8706 73.3548 31.0789 72.1621 31.0946C70.7454 31.1206 69.4798 30.8237 68.3704 30.1987C67.2715 29.5633 66.3965 28.6727 65.7454 27.5321C65.1048 26.3966 64.7767 25.0946 64.7663 23.6362L64.6621 13.8029L67.4329 13.7821L67.5371 23.6154C67.5475 25.1154 67.9798 26.3185 68.8288 27.2196C69.6882 28.1258 70.9017 28.5633 72.4746 28.5321C74.0684 28.5216 75.2767 28.0529 76.0996 27.1362C76.9173 26.2196 77.3184 25.0112 77.3079 23.5112L77.2038 13.6779L79.9538 13.6362L80.1413 30.4696Z" fill="#1F1D1A"/>
+<path d="M82.3145 13.606L85.0645 13.5851L85.0853 15.6685C85.7207 14.8247 86.5332 14.1685 87.5228 13.7101C88.5072 13.2414 89.6374 12.9966 90.9186 12.981L90.9395 15.3976C89.0645 15.4132 87.6165 15.9185 86.6061 16.9185C85.6061 17.908 85.1165 19.1268 85.1478 20.5851L85.252 30.4185L82.502 30.4393L82.3145 13.606Z" fill="#1F1D1A"/>
+<path d="M98.3434 30.2578L91.6768 6.77865L94.7809 6.73698L99.8434 24.5495L104.468 6.63281L107.573 6.59115L112.635 24.4036L117.26 6.48698L120.364 6.44531L114.239 30.0911L111.135 30.112L106.093 12.2995L101.448 30.237L98.3434 30.2578Z" fill="#1F1D1A"/>
+<path d="M130.27 12.5311C132.046 12.505 133.624 12.8748 134.999 13.6352C136.374 14.4009 137.463 15.4582 138.27 16.8019C139.072 18.1352 139.484 19.6665 139.499 21.3852C139.526 23.1092 139.151 24.6509 138.374 26.0102C137.593 27.3592 136.526 28.4269 135.166 29.2186C133.802 30.0102 132.234 30.4165 130.458 30.4477C128.708 30.4582 127.135 30.0832 125.749 29.3227C124.359 28.5623 123.255 27.5102 122.437 26.1769C121.63 24.8436 121.213 23.3175 121.187 21.5936C121.171 19.8748 121.552 18.3332 122.333 16.9686C123.124 15.6092 124.208 14.5311 125.583 13.7394C126.958 12.9477 128.52 12.5467 130.27 12.5311ZM130.291 15.1561C129.083 15.1717 128.005 15.4582 127.062 16.0102C126.13 16.5675 125.395 17.3227 124.854 18.2811C124.312 19.229 124.046 20.3175 124.062 21.5519C124.072 22.7602 124.359 23.8436 124.916 24.8019C125.484 25.7498 126.239 26.4894 127.187 27.0311C128.145 27.5727 129.229 27.8384 130.437 27.8227C131.645 27.8123 132.718 27.5259 133.666 26.9686C134.609 26.4009 135.343 25.6352 135.874 24.6769C136.401 23.7082 136.656 22.6144 136.645 21.4061C136.63 20.1717 136.343 19.0884 135.791 18.1561C135.249 17.2134 134.499 16.479 133.541 15.9477C132.583 15.4061 131.499 15.1457 130.291 15.1561Z" fill="#1F1D1A"/>
+<path d="M141.108 12.936L143.858 12.9152L143.879 14.9985C144.515 14.1548 145.327 13.4985 146.317 13.0402C147.301 12.5715 148.431 12.3267 149.713 12.311L149.733 14.7277C147.858 14.7433 146.41 15.2485 145.4 16.2485C144.4 17.2381 143.91 18.4569 143.942 19.9152L144.046 29.7485L141.296 29.7694L141.108 12.936Z" fill="#1F1D1A"/>
+<path d="M151.492 6.08773L154.242 6.06689L154.513 29.6294L151.763 29.6502L151.492 6.08773Z" fill="#1F1D1A"/>
+<path d="M173.732 5.8418L174.003 29.4043L171.253 29.4251L171.232 27.3626C170.592 28.2116 169.763 28.873 168.753 29.3418C167.737 29.8001 166.534 30.0345 165.149 30.0501C163.425 30.0605 161.883 29.6855 160.524 28.9251C159.175 28.1647 158.107 27.1126 157.316 25.7793C156.524 24.446 156.112 22.9199 156.086 21.196C156.071 19.4772 156.446 17.9355 157.211 16.571C157.972 15.2116 159.024 14.1335 160.357 13.3418C161.701 12.5501 163.237 12.1491 164.961 12.1335C166.347 12.123 167.55 12.3366 168.566 12.7793C169.576 13.2116 170.42 13.8366 171.086 14.6543L170.982 5.86263L173.732 5.8418ZM164.982 14.7585C163.816 14.7741 162.774 15.0605 161.857 15.6126C160.951 16.1699 160.237 16.9251 159.711 17.8835C159.196 18.8314 158.946 19.9199 158.961 21.1543C158.972 22.3626 159.253 23.446 159.795 24.4043C160.336 25.3522 161.066 26.0918 161.982 26.6335C162.909 27.1751 163.961 27.4408 165.128 27.4251C166.321 27.4147 167.368 27.1283 168.274 26.571C169.175 26.0033 169.883 25.2376 170.399 24.2793C170.909 23.3105 171.159 22.2168 171.149 21.0085C171.133 19.7741 170.857 18.6908 170.316 17.7585C169.784 16.8158 169.066 16.0814 168.149 15.5501C167.232 15.0085 166.175 14.748 164.982 14.7585Z" fill="#1F1D1A"/>
+</svg>

public/images/people/emre_koc/index.md

@@ -0,0 +1,20 @@
+---
+title: Emre Koc
+weight: 3
+description: Sustainability Engineer & Program Manager
+taxonomies:
+    people: [emre_koc]
+    memberships: []
+    categories: []
+extra:
+    imgPath: emre_koc.jpg
+    organizations: []
+    countries: []
+    cities: []
+    private: 0
+    socialLinks: {
+        LinkedIn: https://www.linkedin.com/in/remrekoc/,
+    }
+---
+
+Sustainability engineer and program manager focused on building regenerative infrastructure that serves local communities while meeting global standards.

public/images/people/emre_koc/placeholder.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+  <rect width="400" height="400" fill="#E0E7FF"/>
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="36" fill="#312E81">
+    Emre Koc
+  </text>
+</svg>

scripts/generate-people-data.js

@@ -30,16 +30,59 @@ function getPeopleComponents() {
 }
 
 // Function to generate the peopleData.ts content
+function sortComponents(components) {
+  const manualOrder = [
+    'People_Kristof_de_Spiegeleer',
+    'People_Adnan_Fateryji',
+    'People_Chris_Camponovo',
+    'People_Florian_Fournier',
+    'People_Alexandre_Hannelas',
+    'People_Gregory_Flipo',
+    'People_Hugo_Mathecowitsch',
+    'People_Jan_De_Landtsheer',
+    'People_Karoline_Zizka',
+    'People_Malte_Geierhos',
+    'People_Marion_Ravarino',
+    'People_Michel_Coucke',
+    'People_Nousrath_Bhugeloo',
+    'People_Owen_Kemp',
+    'People_Sacha_Obeegadoo',
+    'People_Sam_Taggart',
+    'People_Sasha_Astiadi',
+    'People_Timur_Gordon',
+    'People_Emre_Koc',
+    'People_Vianney_Spriet'
+  ]
+
+  return components
+    .map(component => {
+      const orderIndex = manualOrder.indexOf(component.componentName)
+      return {
+        ...component,
+        orderIndex: orderIndex === -1 ? Number.MAX_SAFE_INTEGER : orderIndex
+      }
+    })
+    .sort((a, b) => {
+      if (a.orderIndex !== b.orderIndex) {
+        return a.orderIndex - b.orderIndex
+      }
+      // Fallback to alphabetical ordering for any components not listed
+      return a.componentName.localeCompare(b.componentName)
+    })
+}
+
 function generatePeopleDataContent(components) {
-  const imports = components
+  const sortedComponents = sortComponents(components)
+
+  const imports = sortedComponents
     .map(comp => `import { data as ${comp.importName}Data } from '${comp.importPath}'`)
     .join('\n')
 
-  const dynamicImports = components
+  const dynamicImports = sortedComponents
     .map(comp => `    () => import('${comp.importPath}'),`)
     .join('\n')
 
-  const syncDataPush = components
+  const syncDataPush = sortedComponents
     .map(comp => `
   try {
     allPeopleData.push(...${comp.importName}Data)
@@ -57,6 +100,8 @@ export interface PersonData {
   imageUrl: string
   xUrl: string
   linkedinUrl: string
+  tags?: string[]
+  note?: string
 }
 
 // Function to dynamically get all people data

src/app/(auth)/login/page.tsx

@@ -1,59 +0,0 @@
-import { type Metadata } from 'next'
-import Link from 'next/link'
-
-import { Button } from '@/components/Button'
-import { TextField } from '@/components/Fields'
-import { Logo } from '@/components/Logo'
-import { SlimLayout } from '@/components/SlimLayout'
-
-export const metadata: Metadata = {
-  title: 'Sign In',
-}
-
-export default function Login() {
-  return (
-    <SlimLayout>
-      <div className="flex">
-        <Link href="/" aria-label="Home">
-          <Logo className="h-10 w-auto" />
-        </Link>
-      </div>
-      <h2 className="mt-20 text-lg font-semibold text-gray-900">
-        Sign in to your account
-      </h2>
-      <p className="mt-2 text-sm text-gray-700">
-        Don’t have an account?{' '}
-        <Link
-          href="/register"
-          className="font-medium text-blue-600 hover:underline"
-        >
-          Sign up
-        </Link>{' '}
-        for a free trial.
-      </p>
-      <form action="#" className="mt-10 grid grid-cols-1 gap-y-8">
-        <TextField
-          label="Email address"
-          name="email"
-          type="email"
-          autoComplete="email"
-          required
-        />
-        <TextField
-          label="Password"
-          name="password"
-          type="password"
-          autoComplete="current-password"
-          required
-        />
-        <div>
-          <Button type="submit" variant="solid" color="blue" className="w-full">
-            <span>
-              Sign in <span aria-hidden="true">&rarr;</span>
-            </span>
-          </Button>
-        </div>
-      </form>
-    </SlimLayout>
-  )
-}

src/app/(auth)/register/page.tsx

@@ -1,88 +0,0 @@
-import { type Metadata } from 'next'
-import Link from 'next/link'
-
-import { Button } from '@/components/Button'
-import { SelectField, TextField } from '@/components/Fields'
-import { Logo } from '@/components/Logo'
-import { SlimLayout } from '@/components/SlimLayout'
-
-export const metadata: Metadata = {
-  title: 'Sign Up',
-}
-
-export default function Register() {
-  return (
-    <SlimLayout>
-      <div className="flex">
-        <Link href="/" aria-label="Home">
-          <Logo className="h-10 w-auto" />
-        </Link>
-      </div>
-      <h2 className="mt-20 text-lg font-semibold text-gray-900">
-        Get started for free
-      </h2>
-      <p className="mt-2 text-sm text-gray-700">
-        Already registered?{' '}
-        <Link
-          href="/login"
-          className="font-medium text-blue-600 hover:underline"
-        >
-          Sign in
-        </Link>{' '}
-        to your account.
-      </p>
-      <form
-        action="#"
-        className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2"
-      >
-        <TextField
-          label="First name"
-          name="first_name"
-          type="text"
-          autoComplete="given-name"
-          required
-        />
-        <TextField
-          label="Last name"
-          name="last_name"
-          type="text"
-          autoComplete="family-name"
-          required
-        />
-        <TextField
-          className="col-span-full"
-          label="Email address"
-          name="email"
-          type="email"
-          autoComplete="email"
-          required
-        />
-        <TextField
-          className="col-span-full"
-          label="Password"
-          name="password"
-          type="password"
-          autoComplete="new-password"
-          required
-        />
-        <SelectField
-          className="col-span-full"
-          label="How did you hear about us?"
-          name="referral_source"
-        >
-          <option>AltaVista search</option>
-          <option>Super Bowl commercial</option>
-          <option>Our route 34 city bus ad</option>
-          <option>The “Never Use This” podcast</option>
-        </SelectField>
-        <div className="col-span-full">
-          <Button type="submit" variant="solid" color="blue" className="w-full">
-            <span>
-              Sign up <span aria-hidden="true">&rarr;</span>
-            </span>
-          </Button>
-        </div>
-      </form>
-    </SlimLayout>
-  )
-}

src/app/about/page.tsx

@@ -1,34 +1,40 @@
 import { CallToAction } from '@/components/CallToAction'
+import { FadeInOnView } from '@/components/UI/FadeInOnView'
 import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
-import { Header_darkbg } from '@/components/Header_darkbg'
-import { HomeAbout } from '@/components/HomeAbout'
-import { Hero } from '@/components/Hero'
-import { Pricing } from '@/components/Pricing'
-import { PrimaryFeatures } from '@/components/PrimaryFeatures'
-import { SecondaryFeatures } from '@/components/SecondaryFeatures'
-import { Testimonials } from '@/components/Testimonials'
-import { HomePrinciples } from '@/components/HomePrinciples'
-import { HomeMilestones } from '@/components/HomeMilestones'
-import { HomeVentures } from '@/components/HomeVentures'
+import { HomeStickyHeader } from '@/components/home/HomeStickyHeader'
 import { Quote } from '@/components/Quote'
-import { AboutHero } from '@/components/AboutHero'
-import { AboutMission } from '@/components/AboutMission'
+import { Hero } from '@/components/about/Hero'
+import {Mission } from '@/components/about/Mission'
+import { Records } from '@/components/about/Records'
 import { AboutExperience } from '@/components/AboutExperience'
 
+
 export default function About() {
   return (
     <>
-      <Header_darkbg />
       <main>
-        <AboutHero />
-        <AboutMission />
+        <HomeStickyHeader />
+        <section className="relative min-h-screen">
+          <Hero className="md:-mt-18 -mt-20" />
+        </section>
+
+        <FadeInOnView delayMs={100}>
+        <Mission />
+        </FadeInOnView>
+
+        <FadeInOnView delayMs={200}>
+        <Records />
+        </FadeInOnView>
+
+
         <AboutExperience />
         <Quote />
         <CallToAction />
         <Faqs />
       </main>
       <Footer />
+
     </>
   )
 }

src/app/contact/page.tsx

@@ -2,19 +2,7 @@ import { CallToAction } from '@/components/CallToAction'
 import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
 import { Header_darkbg } from '@/components/Header_darkbg'
-import { HomeAbout } from '@/components/HomeAbout'
-import { Hero } from '@/components/Hero'
-import { Pricing } from '@/components/Pricing'
-import { PrimaryFeatures } from '@/components/PrimaryFeatures'
-import { SecondaryFeatures } from '@/components/SecondaryFeatures'
-import { Testimonials } from '@/components/Testimonials'
-import { HomePrinciples } from '@/components/HomePrinciples'
-import { HomeMilestones } from '@/components/HomeMilestones'
-import { HomeVentures } from '@/components/HomeVentures'
 import { Quote } from '@/components/Quote'
-import { AboutHero } from '@/components/AboutHero'
-import { AboutMission } from '@/components/AboutMission'
-import { AboutExperience } from '@/components/AboutExperience'
 import { ContactHero } from '@/components/ContactHero'
 
 export default function Contact() {

src/app/layout.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
     default: 'OurWorld',
   },
   description:
-    'Most bookkeeping software is accurate, but hard to use. We make the opposite trade-off, and hope you don\'t get audited.',
+    'OurWorld builds sovereign digital infrastructure and tools for Augmented Collective Intelligence, empowering communities with sustainable, autonomous technology and ventures.',
 }
 
 // Avenir font configuration with fallbacks
@@ -26,7 +26,7 @@ export default function RootLayout({
     <html
       lang="en"
       className={clsx(
-        'h-full scroll-smooth bg-white antialiased',
+        'h-full scroll-smooth bg-[#fdf8f1] antialiased',
         avenir.variable,
       )}
     >

src/app/page.tsx

@@ -1,32 +1,61 @@
 import { CallToAction } from '@/components/CallToAction'
 import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
-import { HomeAbout } from '@/components/HomeAbout'
-import { Hero } from '@/components/Hero'
-import { Pricing } from '@/components/Pricing'
-import { PrimaryFeatures } from '@/components/PrimaryFeatures'
-import { SecondaryFeatures } from '@/components/SecondaryFeatures'
-import { Testimonials } from '@/components/Testimonials'
-import { HomePrinciples } from '@/components/HomePrinciples'
-import { HomeMilestones } from '@/components/HomeMilestones'
-import { HomeVentures } from '@/components/HomeVentures'
+import { Hero } from '@/components/home/Hero'
+import { HomePrinciples } from '@/components/home/HomePrinciples'
+import { HomeMilestones } from '@/components/home/HomeMilestones'
+import { HomeVentures } from '@/components/home/HomeVentures'
 import { Quote } from '@/components/Quote'
-import { Header } from '@/components/Header'
-import { Header_darkbg } from '@/components/Header_darkbg'
+import { HomeStickyHeader } from '@/components/home/HomeStickyHeader'
+import { FadeInOnView } from '@/components/UI/FadeInOnView'
+import { About } from '@/components/home/About'
+import { Ventures } from '@/components/home/Ventures'
+import { Foundation } from '@/components/home/Foundation'
+import { Team } from '@/components/home/Team'
+import { News } from '@/components/home/News'
+import { CTA } from '@/components/home/CTA'
 
 export default function Home() {
   return (
     <>
-      <Header_darkbg />
       <main>
-        <Hero />
-        <HomeAbout />
-        <HomePrinciples />
-        <HomeMilestones />
-        <HomeVentures />
-        <Quote />
-        <CallToAction />
-        <Faqs />
+        <HomeStickyHeader />
+        <section className="relative min-h-screen">
+          <Hero className="md:-mt-18 -mt-20" />
+        </section>
+
+        <FadeInOnView delayMs={100}>
+          <About />
+        </FadeInOnView>
+
+
+        <FadeInOnView delayMs={200}>
+          <Ventures />
+        </FadeInOnView>
+
+        <FadeInOnView delayMs={300}>
+          <Foundation />
+        </FadeInOnView>
+
+        <FadeInOnView delayMs={400}>
+          <Team />
+        </FadeInOnView>
+
+        <FadeInOnView delayMs={500}>
+          <Quote />
+        </FadeInOnView>
+
+        <FadeInOnView delayMs={600}>
+          <News />
+        </FadeInOnView>
+
+        <FadeInOnView delayMs={700}>
+          <CTA />
+        </FadeInOnView>
+
+        <FadeInOnView delayMs={800}>
+          <Faqs />
+        </FadeInOnView>
       </main>
       <Footer />
     </>

src/app/people/emre_koc/page.tsx

@@ -0,0 +1,19 @@
+import { CallToAction } from '@/components/CallToAction'
+import { Faqs } from '@/components/Faqs'
+import { Footer } from '@/components/Footer'
+import { Header_darkbg } from '@/components/Header_darkbg'
+import { People_Emre_Koc } from '@/components/people/People_Emre_Koc'
+
+export default function EmreKocPage() {
+  return (
+    <>
+      <Header_darkbg />
+      <main>
+        <People_Emre_Koc />
+        <CallToAction />
+        <Faqs />
+      </main>
+      <Footer />
+    </>
+  )
+}

src/app/people/page.tsx

@@ -2,19 +2,6 @@ import { CallToAction } from '@/components/CallToAction'
 import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
 import { Header_darkbg } from '@/components/Header_darkbg'
-import { HomeAbout } from '@/components/HomeAbout'
-import { Hero } from '@/components/Hero'
-import { Pricing } from '@/components/Pricing'
-import { PrimaryFeatures } from '@/components/PrimaryFeatures'
-import { SecondaryFeatures } from '@/components/SecondaryFeatures'
-import { Testimonials } from '@/components/Testimonials'
-import { HomePrinciples } from '@/components/HomePrinciples'
-import { HomeMilestones } from '@/components/HomeMilestones'
-import { HomeVentures } from '@/components/HomeVentures'
-import { Quote } from '@/components/Quote'
-import { AboutHero } from '@/components/AboutHero'
-import { AboutMission } from '@/components/AboutMission'
-import { AboutExperience } from '@/components/AboutExperience'
 import { PeopleHero } from '@/components/PeopleHero'
 
 export default function People() {

src/app/ventures/cybercity/page.tsx

@@ -3,11 +3,8 @@ import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
 import { Header_darkbg } from '@/components/Header_darkbg'
 import { Quote } from '@/components/Quote'
-import { VenturesFreezone } from '@/components/VenturesFreezone'
-import { VenturesGeomind } from '@/components/VenturesGeomind'
 import { VenturesCybercity } from '@/components/VenturesCybercity'
 
-
 export default function cybercity() {
   return (
     <>
@@ -21,4 +18,4 @@ export default function cybercity() {
       <Footer />
     </>
   )
-}
+}

src/app/ventures/freezone/page.tsx

@@ -4,8 +4,6 @@ import { Footer } from '@/components/Footer'
 import { Header_darkbg } from '@/components/Header_darkbg'
 import { Quote } from '@/components/Quote'
 import { VenturesFreezone } from '@/components/VenturesFreezone'
-import { VenturesGeomind } from '@/components/VenturesGeomind'
-
 
 export default function Freezone() {
   return (
@@ -20,4 +18,4 @@ export default function Freezone() {
       <Footer />
     </>
   )
-}
+}

src/app/ventures/page.tsx

@@ -2,19 +2,7 @@ import { CallToAction } from '@/components/CallToAction'
 import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
 import { Header_darkbg } from '@/components/Header_darkbg'
-import { HomeAbout } from '@/components/HomeAbout'
-import { Hero } from '@/components/Hero'
-import { Pricing } from '@/components/Pricing'
-import { PrimaryFeatures } from '@/components/PrimaryFeatures'
-import { SecondaryFeatures } from '@/components/SecondaryFeatures'
-import { Testimonials } from '@/components/Testimonials'
-import { HomePrinciples } from '@/components/HomePrinciples'
-import { HomeMilestones } from '@/components/HomeMilestones'
-import { HomeVentures } from '@/components/HomeVentures'
 import { Quote } from '@/components/Quote'
-import { AboutHero } from '@/components/AboutHero'
-import { AboutMission } from '@/components/AboutMission'
-import { AboutExperience } from '@/components/AboutExperience'
 import { VenturesHero } from '@/components/VenturesHero'
 
 export default function Ventures() {

src/app/ventures/project-mycelium/page.tsx

@@ -3,14 +3,14 @@ import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
 import { Header_darkbg } from '@/components/Header_darkbg'
 import { Quote } from '@/components/Quote'
-import { VenturesHeroApp } from '@/components/VenturesHeroApp'
+import { VenturesProjectMycelium } from '@/components/VenturesProjectMycelium'
 
-export default function Hero() {
+export default function ProjectMycelium() {
   return (
     <>
       <Header_darkbg />
       <main>
-        <VenturesHeroApp />
+        <VenturesProjectMycelium />
         <Quote />
         <CallToAction />
         <Faqs />
@@ -18,4 +18,4 @@ export default function Hero() {
       <Footer />
     </>
   )
-}
+}

src/app/ventures/sikana/page.tsx

@@ -3,14 +3,14 @@ import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
 import { Header_darkbg } from '@/components/Header_darkbg'
 import { Quote } from '@/components/Quote'
-import { VenturesIndaba } from '@/components/VenturesIndaba'
+import { VenturesSikana } from '@/components/VenturesSikana'
 
-export default function Indaba() {
+export default function Sikana() {
   return (
     <>
       <Header_darkbg />
       <main>
-        <VenturesIndaba />
+        <VenturesSikana />
         <Quote />
         <CallToAction />
         <Faqs />

src/app/ventures/threefold/page.tsx

@@ -1,34 +0,0 @@
-import { CallToAction } from '@/components/CallToAction'
-import { Faqs } from '@/components/Faqs'
-import { Footer } from '@/components/Footer'
-import { Header_darkbg } from '@/components/Header_darkbg'
-import { HomeAbout } from '@/components/HomeAbout'
-import { Hero } from '@/components/Hero'
-import { Pricing } from '@/components/Pricing'
-import { PrimaryFeatures } from '@/components/PrimaryFeatures'
-import { SecondaryFeatures } from '@/components/SecondaryFeatures'
-import { Testimonials } from '@/components/Testimonials'
-import { HomePrinciples } from '@/components/HomePrinciples'
-import { HomeMilestones } from '@/components/HomeMilestones'
-import { HomeVentures } from '@/components/HomeVentures'
-import { Quote } from '@/components/Quote'
-import { AboutHero } from '@/components/AboutHero'
-import { AboutMission } from '@/components/AboutMission'
-import { AboutExperience } from '@/components/AboutExperience'
-import { VenturesHero } from '@/components/VenturesHero'
-import { VenturesThreeFold } from '@/components/VenturesThreefold'
-
-export default function ThreeFold() {
-  return (
-    <>
-      <Header_darkbg />
-      <main>
-        <VenturesThreeFold />
-        <Quote />
-        <CallToAction />
-        <Faqs />
-      </main>
-      <Footer />
-    </>
-  )
-}

src/components/AboutExperience.tsx

@@ -2,7 +2,7 @@ const timeline = [
   {
     name: 'Core Infrastructure',
     description:
-      '✓ ThreeFold’s decentralized, autonomous edge computing technology came alive, serving as the backbone of the OurWorld ecosystem.',
+      '✓ Our decentralized, autonomous edge computing technology came alive, serving as the backbone of the OurWorld ecosystem.',
     date: 'Phase 1',
     description2:
       '✓ OurWorld helped secure $50M in investment from our community of investors.',
@@ -18,9 +18,9 @@ const timeline = [
   {
     name: 'Launch of New Ventures',
     description:
-      '◯ $30M raise underway to expand core infrastructure and invest in new ventures with a focus on interdependent projects that strengthen the ecosystem collectively.',
+      '◯ $50M raise underway to expand core infrastructure and invest in new ventures with a focus on interdependent projects that strengthen the ecosystem collectively.',
     description2:
-      '◯ Designing regulatory framework to facilitate digital assets exchanges and other decentralized financial platforms.',
+      '◯ Advancing the Geomind program with the phased rollout of Tier H and Tier S datacenters.',
     date: 'Current Phase',
   },
   {
@@ -44,7 +44,7 @@ export function AboutExperience() {
           </h2>
           <div className="mx-auto max-w-3xl mt-6">
           <p className="p-default text-gray-900">
-           Incubaid's approach was very IT-centric – focusing on storage, automation and cloud. During this wave from 2000 till 2015, some of those companies defined parts of the cloud landscape, and are still being used actively today.
+           Our initial approach was very IT-centric – focusing on storage, automation and cloud. During this wave from 2000 till 2015, some of those companies defined parts of the cloud landscape, and are still being used actively today.
           </p>
         </div>
         

src/components/AboutHero.tsx

@@ -7,10 +7,10 @@ export function AboutHero() {
           <div className="text-center">
              <p className="subtitle text-black">ABOUT</p>
             <h1 className="h1-default text-gray-900">
-              Building the Future of Digital Autonomy
+              Building the Future of Digital Sovereignty
             </h1>
             <p className="mt-8 p-default text-gray-500">
-              OurWorld is more than a venture creator – we create and develop new businesses, typically in the form of startups. We don't just fund individual ventures – we actively shape the architecture of our unique ecosystem. Support includes providing funding, resources, and mentorship.
+              OurWorld creates and supports ventures that put sovereignty back in the hands of people and communities. Each venture in our ecosystem contributes to a future where individuals and organizations own their digital presence, data, and destiny.
             </p>
             <div className="mt-10 flex items-center justify-center gap-x-6">
               <Button href="/contact" color="black">

src/components/AboutMission.tsx

@@ -10,7 +10,7 @@ const stats = [
 
 export function AboutMission() {
   return (
-    <div className="bg-white py-12">
+    <div className="bg-transparent py-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 items-start gap-x-6 gap-y-16  lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:pr-4">
@@ -61,20 +61,17 @@ export function AboutMission() {
             <div className="text-base/7 text-gray-700 lg:max-w-xl">
               <p className="subtitle text-black">MISSION</p>
               <h2 className="mt-2 h2-default text-gray-900">
-                Let's Shape Our Future Together
+                Digital Sovereignty for All
               </h2>
               <div className="max-w-xl">
                 <p className="mt-6 p-default">
-                  OurWorld aims not just to do business, but to do good for the world while we're at it. We are an international team of experts and passionate believers in a better world who choose to act to make a difference.
+                  We believe access to compute, data ownership, and digital tools should be <strong>fundamental rights</strong>, not privileges granted by corporations.Our ventures create a parallel system where individuals and communities can achieve true digital sovereignty.
                 </p>
                 <p className="mt-8 p-default">
-                  This journey began with the creation of a new Internet infrastructure layer, a process that has taken over two decades – and was made possible by the contributions of thousands of people. Thank you to everyone who has made this possible.
+                  Our work spans decentralized internet infrastructure, sovereign data systems, legal structures for autonomy, and AI frameworks that amplify rather than replace human capability. The foundation was built over two decades developing decentralized internet infrastructure, made possible by thousands of contributors worldwide.
                 </p>
                 <p className="mt-8 p-default">
-                  Some of our co-founders have experience running Incubaid, a successful incubator focused primarily on helping to change our planet for the better through technology that supports decentralization.
-                </p>
-                <p className="mt-8 p-default">
-                  Now in this stage, we are focused on paving the way for Augmented Collective Intelligence, as described by Abhishek Gupta: emergent intelligence from the effective collaboration of human and machine agents to solve shared problems where the whole is greater than the sum of its parts.
+                  Now we're expanding that foundation into a full ecosystem where sovereignty isn't just technical, it's legal, financial, and accessible.
                 </p>
               </div>
             </div>

src/components/AboutRecords.tsx

@@ -0,0 +1,95 @@
+import clsx from 'clsx'
+
+const records = [
+  {
+    period: '1997–2002',
+    title: 'World Records for Web Hosting',
+    description:
+      'Kept UEFA, NASA, and World Cup traffic online with continent-scale uptime.',
+    showStream: true,
+  },
+  {
+    period: '2005',
+    title: 'The First Backup Data Duplication System in the World',
+    description:
+      'Cut enterprise backup footprints by up to 100× before dedupe was mainstream.',
+    showStream: false,
+  },
+  {
+    period: '2008',
+    title: 'One of the First Cloud Systems',
+    description:
+      'Shipped the first Virtual Private Data Center and proved elastic compute trust.',
+    showStream: false,
+  },
+  {
+    period: '2010',
+    title: 'The First Multi-Site Consistent Database',
+    description:
+      'Delivered failover that preserved every transaction across sovereign sites.',
+    showStream: true,
+  },
+  {
+    period: '2012',
+    title: 'The First Unbreakable and Distributed Storage System',
+    description:
+      'Built tamper-proof storage that used 10× less energy and never went dark.',
+    showStream: false,
+  },
+  {
+    period: '2017',
+    title: 'Probably the First Proof of Block Stake Blockchain',
+    description:
+      'Merged staking and settlement in one move, years before the market caught up.',
+    showStream: false,
+  },
+]
+
+export function AboutRecords() {
+  return (
+    <section className="relative overflow-hidden bg-black py-16 sm:py-20">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-white/5"
+      />
+      <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-4xl">
+          <p className="subtitle text-white">WORLD RECORDS</p>
+          <h2 className="mt-2 h2-default text-white">
+            Milestones That Pushed the Internet Forward
+          </h2>
+          <p className="mt-4 max-w-3xl text-sm text-gray-300 sm:text-base">
+            Across decades of building resilient digital infrastructure, our team set new technical benchmarks that still define
+            how mission-critical systems operate today.
+          </p>
+        </div>
+        <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">
+          {records.map((record) => (
+            <article
+              key={record.title}
+              className={clsx(
+                'group relative flex flex-col gap-3 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.05] p-6 transition-colors duration-300 hover:border-white/25 hover:bg-white/[0.09]',
+              )}
+            >
+              {record.showStream && (
+                <span
+                  className="pointer-events-none absolute inset-y-4 left-0 w-px bg-gradient-to-b from-transparent via-white/60 to-transparent"
+                  aria-hidden="true"
+                />
+              )}
+              <div className="text-xs font-semibold uppercase tracking-[0.25em] text-gray-400">
+                {record.period}
+              </div>
+              <h3 className="text-xl font-semibold tracking-tight text-white">
+                {record.title}
+              </h3>
+              <p className="text-sm text-gray-300 sm:text-base">
+                {record.description}
+              </p>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/Button.tsx

@@ -3,9 +3,9 @@ import clsx from 'clsx'
 
 const baseStyles = {
   solid:
-    'group inline-flex items-center justify-center rounded-full py-2 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2',
+    'group inline-flex items-center justify-center rounded-sm py-2 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2',
   outline:
-    'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-6 text-sm',
+    'group inline-flex ring-1 items-center justify-center rounded-sm py-2 px-6 text-sm',
 }
 
 const variantStyles = {
@@ -14,7 +14,10 @@ const variantStyles = {
       'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
     black:
       'bg-black text-white hover:bg-gray-800 hover:text-white active:bg-gray-900 active:text-gray-100 focus-visible:outline-black',
-    blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
+    blue:
+      'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
+    green:
+      'bg-green text-void hover:bg-green/90 hover:text-void active:bg-green/80 active:text-void focus-visible:outline-green',
     white:
       'bg-white text-black hover:bg-gray-100 hover:text-black active:bg-gray-200 active:text-gray-800 focus-visible:outline-white',
     radial:
@@ -24,7 +27,9 @@ const variantStyles = {
     slate:
       'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
     white:
-      'ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white',
+      'ring-white text-white hover:ring-slate-500 active:ring-slate-900 active:text-slate-400 focus-visible:outline-white',
+    green:
+      'ring-green text-void hover:ring-green/90 hover:text-void active:ring-green/80 active:text-void focus-visible:outline-green',
   },
 }
 

src/components/CallToAction.tsx

@@ -16,10 +16,10 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
           <h2 className="h2-default text-white">
-            Launch Ventures That Shape the Future
+            Join the OurWorld Ecosystem
           </h2>
-          <p className="mt-4 text-lg tracking-tight text-white">
-            Partner with OurWorld to build infrastructure, metaverse platforms, DeFi, education, and digital economy ventures; all backed by funding, mentorship, and mission-aligned infrastructure.
+          <p className="mt-4 text-lg tracking-tight text-white">  
+            Collaborate on ventures developing decentralized infrastructure, tools, and frameworks that make sovereign cloud and AI accessible to everyone.
           </p>
           <div className="mt-12 flex flex-col sm:flex-row gap-8 justify-center">
             <Button href="/contact" color="white">

src/components/Faqs.tsx

@@ -2,6 +2,7 @@ import Image from 'next/image'
 
 import { Container } from '@/components/Container'
 import backgroundImage from '@/images/background-faqs.jpg'
+import { H2, PS } from '@/components/UI/Texts'
 
 const faqs = [
   [
@@ -23,14 +24,14 @@ const faqs = [
   ],
   [
     {
-      question: 'What kinds of projects are in the OurWorld ecosystem?',
+      question: 'What projects are in the OurWorld ecosystem?',
       answer:
-        'Our portfolio includes decentralized cloud (ThreeFold), tokenized economies (TF9), digital jurisdictions (free zone), and open education (Sikana).',
+        'Our portfolio includes community driven co-owned cloud (Project Mycelium), Tier S and H datacenters (Geomind), digital jurisdictions (Free Zone), and open education (Sikana).',
     },
     {
       question: 'Where does OurWorld operate?',
       answer:
-        'We’re active in strategic hubs like Mauritius, Zanzibar, UAE, Belgium, and expanding across Europe, Africa, and the Middle East.',
+        'We’re active in strategic hubs like Mauritius, Zanzibar, UAE, Egypt, Belgium, and expanding across Europe, Africa, and the Middle East.',
     },
     {
       question: 'Is this a blockchain company?',
@@ -47,7 +48,7 @@ const faqs = [
     {
       question: 'What is the Digital Free Zone?',
       answer:
-        'It’s a sovereign digital jurisdiction enabling remote company creation, tokenized commerce, and flexible digital residency.',
+        'It’s a sovereign digital jurisdiction with streamlined digital business operations, enabling remote company creation, borderless commerce, and flexible digital residency.',
     },
     {
       question: 'Where can I learn more or contact the team?',
@@ -64,21 +65,21 @@ export function Faqs() {
     <section
       id="faq"
       aria-labelledby="faq-title"
-      className="relative overflow-hidden bg-slate-50 py-20 sm:py-32"
+      className="relative overflow-hidden bg-transparent pt-12 pb-20"
     >
       
       <Container className="relative">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2
+          <H2
             id="faq-title"
-            className=" text-slate-900  h2-default"
+            className=" "
           >
             Frequently Asked Questions
-          </h2>
-          <p className="mt-4 text-lg tracking-tight text-slate-700">
+          </H2>
+          <PS className="mt-6 ">
             If you can’t find what you’re looking for, email our support team
-            and if you’re lucky someone will get back to you.
-          </p>
+            and someone will get back to you.
+          </PS>
         </div>
         <ul
           role="list"

src/components/Footer.tsx

@@ -1,56 +1,77 @@
-import { Logo_darkbg } from '@/components/Logo_darkbg'
-import { SVGProps } from 'react'
-import { EnvelopeIcon } from '@heroicons/react/20/solid'
+import Link from 'next/link'
+import type { SVGProps } from 'react'
 
 const navigation = {
   solutions: [
-    { name: 'Marketing', href: '#' },
-    { name: 'Analytics', href: '#' },
-    { name: 'Automation', href: '#' },
-    { name: 'Commerce', href: '#' },
-    { name: 'Insights', href: '#' },
+    { name: 'Marketing', href: '' },
+    { name: 'Analytics', href: '' },
+    { name: 'Automation', href: '' },
+    { name: 'Commerce', href: '' },
+    { name: 'Insights', href: '' },
   ],
   support: [
-    { name: 'Submit ticket', href: '#' },
-    { name: 'Documentation', href: '#' },
-    { name: 'Guides', href: '#' },
+    { name: 'Submit ticket', href: '' },
+    { name: 'Documentation', href: '' },
+    { name: 'Guides', href: '' },
   ],
   company: [
-    { name: 'About', href: '#' },
-    { name: 'Blog', href: '#' },
-    { name: 'Jobs', href: '#' },
-    { name: 'Press', href: '#' },
+    { name: 'About', href: '' },
+    { name: 'Blog', href: '' },
+    { name: 'Jobs', href: '' },
+    { name: 'Press', href: '' },
   ],
   legal: [
-    { name: 'Terms of service', href: '#' },
-    { name: 'Privacy policy', href: '#' },
-    { name: 'License', href: '#' },
+    { name: 'Terms of service', href: '' },
+    { name: 'Privacy policy', href: '' },
+    { name: 'License', href: '' },
   ],
   social: [
     {
-      name: 'LinkedIn',
-      href: '#',
+      name: 'Facebook',
+      href: '',
       icon: (props: SVGProps<SVGSVGElement>) => (
-       <svg
-          xmlns="http://www.w3.org/2000/svg"
-          xmlSpace="preserve"
-          version="1.1"
-          viewBox="0 0 382 382"
-          className={props.className}
-          aria-hidden="true"
-        >
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
           <path
-            fill="currentColor"
-            d="M347.445 0H34.555C15.471 0 0 15.471 0 34.555v312.889C0 366.529 15.471 382 34.555 382h312.889C366.529 382 382 366.529 382 347.444V34.555C382 15.471 366.529 0 347.445 0M118.207 329.844c0 5.554-4.502 10.056-10.056 10.056H65.345c-5.554 0-10.056-4.502-10.056-10.056V150.403c0-5.554 4.502-10.056 10.056-10.056h42.806c5.554 0 10.056 4.502 10.056 10.056zM86.748 123.432c-22.459 0-40.666-18.207-40.666-40.666S64.289 42.1 86.748 42.1s40.666 18.207 40.666 40.666-18.206 40.666-40.666 40.666M341.91 330.654a9.247 9.247 0 0 1-9.246 9.246H286.73a9.247 9.247 0 0 1-9.246-9.246v-84.168c0-12.556 3.683-55.021-32.813-55.021-28.309 0-34.051 29.066-35.204 42.11v97.079a9.246 9.246 0 0 1-9.246 9.246h-44.426a9.247 9.247 0 0 1-9.246-9.246V149.593a9.247 9.247 0 0 1 9.246-9.246h44.426a9.247 9.247 0 0 1 9.246 9.246v15.655c10.497-15.753 26.097-27.912 59.312-27.912 73.552 0 73.131 68.716 73.131 106.472z"
-          ></path>
+            fillRule="evenodd"
+            d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+            clipRule="evenodd"
+          />
         </svg>
       ),
     },
     {
-      name: 'Mail',
-      href: '#',
+      name: 'Instagram',
+      href: '',
       icon: (props: SVGProps<SVGSVGElement>) => (
-        <EnvelopeIcon className={props.className} aria-hidden="true" />
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: 'X',
+      href: '',
+      icon: (props: SVGProps<SVGSVGElement>) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
+        </svg>
+      ),
+    },
+    {
+      name: 'GitHub',
+      href: '',
+      icon: (props: SVGProps<SVGSVGElement>) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
+        </svg>
       ),
     },
   ],
@@ -58,19 +79,88 @@ const navigation = {
 
 export function Footer() {
   return (
-    <footer className="bg-black">
-      <div className="mx-auto max-w-7xl px-6  pb-8 lg:px-8">
-        <div className="mt-0 border-t border-white/10 pt-8 md:flex md:items-center md:justify-between">
-          <div className="flex gap-x-6 md:order-2">
-            {navigation.social.map((item) => (
-              <a key={item.name} href={item.href} className="text-gray-400 hover:text-white">
-                <span className="sr-only">{item.name}</span>
-                <item.icon aria-hidden="true" className="size-6" />
-              </a>
-            ))}
+    <footer className="bg-transparent ">
+      <div className="mx-auto max-w-7xl px-6 pt-16  lg:px-8  border-t border-gray-200">
+        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+          <div className="space-y-8">
+            <Link href="/" aria-label="Home">
+              <img
+                src="/assets/logos/logo_dark.svg"
+                alt="OurWorld logo"
+                className="h-7 w-auto"
+              />
+            </Link>
+            <p className="mt-2 text-sm/6 text-balance text-gray-500">
+              Shaping the future of Augmented <br />
+              Collective Intelligence
+            </p>
+            <div className="flex gap-x-6">
+              {navigation.social.map((item) => (
+                <a key={item.name} href={item.href} className="text-gray-500 hover:text-gray-800">
+                  <span className="sr-only">{item.name}</span>
+                  <item.icon aria-hidden="true" className="size-5" />
+                </a>
+              ))}
+            </div>
           </div>
-          <p className="mt-8 text-sm/6 text-gray-400 md:order-1 md:mt-0">
-            &copy; 2025  OurWorld Holdings. All rights reserved.
+          <div className="mt-12 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
+              <div className="md:grid md:grid-cols-2 md:gap-8">
+                <div>
+                  <h3 className="text-sm/6 font-semibold text-void">Solutions</h3>
+                  <ul role="list" className="mt-6 space-y-4">
+                    {navigation.solutions.map((item) => (
+                    <li key={item.name}>
+                      <a href={item.href} className="text-sm/6 text-gray-500 hover:text-gray-900">
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="mt-10 md:mt-0">
+                <h3 className="text-sm/6 font-semibold text-void">Support</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.support.map((item) => (
+                    <li key={item.name}>
+                      <a href={item.href} className="text-sm/6 text-gray-500 hover:text-gray-900">
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h3 className="text-sm/6 font-semibold text-void">Company</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.company.map((item) => (
+                    <li key={item.name}>
+                      <a href={item.href} className="text-sm/6 text-gray-500 hover:text-gray-900">
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="mt-10 md:mt-0">
+                <h3 className="text-sm/6 font-semibold text-void">Legal</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.legal.map((item) => (
+                    <li key={item.name}>
+                      <a href={item.href} className="text-sm/6 text-gray-500 hover:text-gray-900">
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-16 border-t border-gray-200 pt-8 pb-12">
+          <p className="text-sm/6 text-gray-500">
+            &copy; 2025 OurWorld Holdings. All rights reserved.
           </p>
         </div>
       </div>

src/components/Header.tsx

@@ -83,7 +83,7 @@ function MobileNavigation() {
 
 export function Header() {
   return (
-    <header className="py-5">
+    <header className="py-5 bg-transparent">
       <Container>
         <nav className="relative z-50 flex justify-between">
           
@@ -92,9 +92,9 @@ export function Header() {
               <Logo className="h-6 w-auto lg:h-6 md:h-8" />
             </Link>
             <div className="hidden md:flex md:gap-x-6">
-              <NavLink href="/about">About</NavLink>
-              <NavLink href="/ventures">Ventures</NavLink>
-              <NavLink href="/people">People</NavLink>
+              <NavLink className="text-white" href="/about">ABOUT</NavLink>
+              <NavLink className="text-white" href="/ventures">VENTURES</NavLink>
+              <NavLink className="text-white" href="/people">PEOPLE</NavLink>
             </div>
           </div>
           <div className="flex items-center gap-x-5 md:gap-x-8">

src/components/Header_darkbg.tsx

@@ -22,7 +22,7 @@ function NavLinkDark({
   return (
     <Link
       href={href}
-      className="inline-block rounded-lg px-2 py-1 text-base text-white hover:bg-white/10 hover:text-white"
+      className="inline-block rounded-lg px-2 tracking-widest py-1 text-sm text-white hover:bg-white/10 hover:text-white"
     >
       {children}
     </Link>
@@ -98,34 +98,27 @@ function MobileNavigation() {
 
 export function Header_darkbg() {
   return (
-    <header className="py-5 relative">
-      <div 
-        className="absolute inset-0 pointer-events-none"
-        style={{
-          background: '#000000',
-          opacity: 1
-        }}
-      />
+    <header className="py-5 bg-transparent relative">
       <Container>
-        <nav className="relative z-50 flex justify-between">
+        <nav className="relative z-50 flex items-center justify-between">
+          {/* Left: Logo */}
           <div className="flex items-center md:gap-x-12">
             <Link href="/" aria-label="Home">
-              <Logo_darkbg className="h-6 w-auto lg:h-6 md:h-8" />
+              <Logo_darkbg className="h-8 w-auto lg:h-8" />
             </Link>
-            <div className="hidden md:flex md:gap-x-6">
-              <NavLinkDark href="/about">About</NavLinkDark>
-              <NavLinkDark href="/ventures">Ventures</NavLinkDark>
-              <NavLinkDark href="/people">People</NavLinkDark>
-
-            </div>
           </div>
+
+          {/* Middle: empty spacer */}
+          <div className="flex-1" />
+
+          {/* Right: Nav links (desktop) + mobile menu */}
           <div className="flex items-center gap-x-5 md:gap-x-8">
-            <div className="hidden md:block">
-              <Button href="/contact" color="white">
-                <span>
-                  Contact Us
-                </span>
-              </Button>
+            <div className="hidden md:flex md:gap-x-6">
+              <NavLinkDark href="/about">ABOUT</NavLinkDark>
+              <NavLinkDark href="/ventures">VENTURES</NavLinkDark>
+              <NavLinkDark href="/people">TEAM</NavLinkDark>
+              <NavLinkDark href="/contact">FELLOWSHIP</NavLinkDark>
+              <NavLinkDark href="/contact">NEWS</NavLinkDark>
             </div>
             <div className="-mr-1 md:hidden">
               <MobileNavigation />

src/components/Hero.tsx

@@ -1,21 +1,27 @@
 import Image from 'next/image'
+import clsx from 'clsx'
 
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import { Logo_hero } from '@/components/Logo_hero'
+import { H1, P } from '@/components/UI/Texts'
+import { FadeInOnView } from '@/components/UI/FadeInOnView'
 
 
+type HeroProps = {
+  className?: string
+}
 
-export function Hero() {
+export function Hero({ className }: HeroProps) {
   return (
-    <div className="relative overflow-hidden min-h-screen">
+    <div className={clsx('relative overflow-hidden min-h-screen', className)}>
       {/* Video Background */}
       <video
         autoPlay
         muted
         loop
         playsInline
-        className="absolute inset-0 w-full h-full object-cover z-0"
+        className="absolute inset-0 w-full h-screen object-cover z-0"
       >
         <source src="/videos/ourworld.mp4" type="video/mp4" />
       </video>
@@ -25,30 +31,29 @@ export function Hero() {
       
       {/* Content */}
       
-      <Container className="relative z-20 pt-24 pb-12 text-center lg:pt-32">
-        <div className="hidden sm:mb-8 sm:flex sm:justify-center">
-            <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-100 ring-1 ring-gray-100/20 hover:ring-gray-100/5">
-              Interested to Take Part?{' '}
-              <a href="https://calendly.com/florian_threefold/30min" className="font-bold text-white0">
-                <span aria-hidden="true" className="absolute inset-0" />
-                Book a Meeting <span aria-hidden="true">&rarr;</span>
-              </a>
-            </div>
-          </div>
-      <div className="mx-auto max-w-4xl flex justify-center">
-        <Logo_hero className='lg:h-auto h-0.5' />
-      </div>
-      <p className="mx-auto lg:mt-6 mt-4 max-w-2xl text-xl lg:text-2xl tracking-tight font-medium text-white/90">
-        Shaping the future of Augmented Collective Intelligence
-      </p>
-      <p className="mx-auto mt-6 max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
-        At OurWorld, we are building the required infrastructures and tools to enable an Augmented Collective Intelligence ;  creating a fairer, decentralized, sustainable, and autonomous future for all.
-      </p>
-      <div className="mt-10 flex justify-center">
-        <Button href="/about" color="white">Learn More</Button>
-      </div>
-      
-    </Container>
+      <Container className="relative z-20 pt-12 pb-12 lg:pt-32">
+        <FadeInOnView>
+          <H1 className="max-w-3xl text-left text-white">
+            Shaping the future of Augmented Collective Intelligence
+          </H1>
+        </FadeInOnView>
+
+        <FadeInOnView delayMs={150} className="my-12 hidden md:flex justify-center">
+          <div className="h-[2px] w-full max-w-7xl bg-white/90 animate-draw-line" />
+        </FadeInOnView>
+
+        <FadeInOnView
+          delayMs={300}
+          className="mx-auto md:mx-0 md:ml-auto md:w-[60%] space-y-6 flex flex-col items-center md:items-start"
+        >
+          <P className="max-w-xl text-lg lg:text-xl tracking-tight text-white/90">
+            At <span className="font-semibold">OurWorld</span>, we are building the required ventures, infrastructures and tools to enable an Augmented Collective Intelligence; creating a sovereign, sustainable, and autonomous future for all.
+          </P>
+          <Button href="/about" color="white" className="w-full md:w-auto mt-4">
+            Learn More
+          </Button>
+        </FadeInOnView>
+      </Container>
     </div>
   )
 }

src/components/HomeAbout.tsx

@@ -4,31 +4,31 @@ const features = [
   {
     name: 'A Funding Platform',
     description:
-      'Unlock unparalleled financial support for diverse, forward-thinking projects, focusing on cutting-edge technologies that benefit both the environment and society.',
+      'Access capital for projects building on decentralized infrastructure, with a focus on ventures that contribute to digital sovereignty for people and sustainable technology for the planet.',
     href: '#',
     icon: CircleStackIcon,
   },
   {
     name: 'Legal & Financial Autonomy',
     description:
-      'Experience true independence with our integrated system offering legal and financial freedom. Through innovative structures like free zones, we create a fertile ground for your business to flourish.',
+      'Operate through our free zone with optimized legal and financial structures designed for global teams. Startups benefit from transparent, innovation-friendly structures designed for streamlined borderless operations.',
     href: '#',
     icon: ScaleIcon,
-  },
-  {
-    name: 'Life Supporting Infrastructure',
-    description:
-      'Benefit from our holistic infrastructure that supports financial, educational- tailored to ensure that every startup within our venture ecosystem can thrive and grow sustainably.',
-    href: '#',
-    icon: ArrowPathIcon,
   },
     {
     name: 'Technological Empowerment',
     description:
-      'Harness the power of our advanced interconnected technological ecosystem, designed to grant individuals, communities, and countries complete digital autonomy.',
+      'Build on our interconnected stack of decentralized cloud infrastructure, sovereign data centers, and agentic AI frameworks, giving your startup the tools for complete digital autonomy.',
     href: '#',
     icon: RocketLaunchIcon,
   },
+  {
+    name: 'Collaborative Ecosystem',
+    description:
+      'Join a network of ventures building interconnected solutions for digital sovereignty. Share resources, infrastructure, and knowledge across projects working toward a decentralized future.',
+    href: '#',
+    icon: ArrowPathIcon,
+  },
 ]
 
 export function HomeAbout() {
@@ -70,12 +70,12 @@ export function HomeAbout() {
         <div className="mx-auto max-w-4xl lg:mx-0">
           <p className="subtitle text-white">ABOUT</p>
           <h2 className="mt-2 h2-default text-white">
-            Enabling an Interconnected Ecosystem to Enhance human Intelligence Through Collaboration.
+            Enabling an Interconnected Ecosystem to Enhance Collective Intelligence Through Collaboration.
           </h2>
         </div>
         <div className="lg:mx-0 max-w-2xl mt-6">
           <p className="p-default text-gray-300">
-            OurWorld is a venture creator, dedicated to empowering startups with the resources and support they need to revolutionize the future.
+            OurWorld is a venture creator providing startups with decentralized infrastructure, legal frameworks, and technological capacity to build without traditional constraints.
           </p>
         </div>
         <div className="mx-auto mt-16 max-w-2xl lg:mt-16 lg:max-w-none">

src/components/HomeMilestones.tsx

@@ -2,7 +2,7 @@ const timeline = [
   {
     name: 'Core Infrastructure',
     description:
-      '✓ ThreeFold’s decentralized, autonomous edge computing technology came alive, serving as the backbone of the OurWorld ecosystem.',
+      '✓ Our decentralized, autonomous edge computing technology came alive, serving as the backbone of the OurWorld ecosystem.',
     date: 'Phase 1',
     description2:
       '✓ OurWorld helped secure $50M in investment from our community of investors.',
@@ -16,12 +16,12 @@ const timeline = [
     date: 'Phase 2',
   },
   {
-    name: 'Launch of New Ventures',
+    name: 'Commercial Expansion',
     description:
-      '◯ $30M raise underway to expand core infrastructure and invest in new ventures with a focus on interdependent projects that strengthen the ecosystem collectively.',
+      '◯ $50M raise underway to expand core infrastructure and invest in new ventures with a focus on interdependent projects that strengthen the ecosystem collectively.',
     description2:
-      '◯ Designing regulatory framework to facilitate digital assets exchanges and other decentralized financial platforms.',
-    date: 'Current Phase',
+      '◯ Advancing the Geomind program with the phased rollout of Tier H and Tier S datacenters.',
+   date: 'Current Phase',
   },
   {
     name: 'Scalable Impact',

src/components/HomePrinciples.tsx

@@ -1,9 +1,50 @@
-const stats = [
-  { id: 1, name: 'Build in ways that respect and protect natural resources.', value: 'Planet First', image: '/images/home/planet.png' },
-  { id: 2, name: 'Ensure equality and equity in our ecosystem.', value: 'People First', image: '/images/home/people.png' },
-  { id: 3, name: 'Promote collaborative development across all our projects.', value: 'Open Source', image: '/images/home/open.png' },
-  { id: 4, name: 'Uphold an ethos of transparency and trust.', value: 'Authenticity', image: '/images/home/authentic.png' },
-  { id: 5, name: 'Eliminate design complexities to foster rapid progress.', value: 'Simplicity', image: '/images/home/simple.png' },
+import {
+  GlobeAltIcon,
+  UsersIcon,
+  CommandLineIcon,
+  ShieldCheckIcon,
+  SparklesIcon,
+} from '@heroicons/react/24/outline'
+
+const foundations = [
+  {
+    id: 1,
+    title: 'Planet First',
+    description:
+      'We act with respect for the Earth. Each initiative supports regeneration and uses natural resources responsibly. Every venture should leave the planet better than it found it.',
+    icon: GlobeAltIcon,
+  },
+  {
+    id: 2,
+    title: 'People First',
+    description:
+      'Empowering people to own their digital lives through shared ownership, inclusive governance, and lifelong learning so everyone can grow and take part.',
+    icon: UsersIcon,
+  },
+]
+
+const tools = [
+  {
+    id: 3,
+    title: 'Open Source',
+    description:
+      'Everything we build is open source. Anyone can use it, improve it, and connect to the ecosystem. Transparency keeps innovation honest.',
+    icon: CommandLineIcon,
+  },
+  {
+    id: 4,
+    title: 'Simplicity',
+    description:
+      'Complex systems slow progress. We design modular, autonomous tools that remove unnecessary layers.',
+    icon: SparklesIcon,
+  },
+  {
+    id: 5,
+    title: 'Authenticity',
+    description:
+      'We are restoring trust online. Sovereign digital tools verify people and information, building a culture of transparency and accountability.',
+    icon: ShieldCheckIcon,
+  },
 ]
 
 export function HomePrinciples() {
@@ -15,17 +56,59 @@ export function HomePrinciples() {
             <h2 className="h2-default  text-gray-900 ">
               The Foundation of Every Venture
             </h2>
-            <p className="mt-4 p-default text-gray-600">Core Principles Guiding OurWorld's Vision for Building Successful Ventures.</p>
+            <p className="mt-4 p-default text-gray-600">
+              We start every project with two essentials: protect the planet and empower people. Everything else follows from there.
+            </p>
+          </div>
+          <div className="mt-12 space-y-12">
+            <section>
+              <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Foundational Commitments</h3>
+              <dl className="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-2">
+                {foundations.map((item) => {
+                  const Icon = item.icon
+
+                  return (
+                    <div
+                      key={item.id}
+                      className="flex items-start gap-4 rounded-2xl border border-gray-200/70 bg-white/90 p-5 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg"
+                    >
+                      <div className="flex size-11 shrink-0 items-center justify-center rounded-full bg-gray-100 ring-1 ring-inset ring-gray-200">
+                        <Icon aria-hidden="true" className="size-6 text-gray-900" />
+                      </div>
+                      <div className="space-y-2">
+                        <h4 className="text-xl/7 font-semibold tracking-tight text-gray-900">{item.title}</h4>
+                        <p className="text-base/7 text-gray-500">{item.description}</p>
+                      </div>
+                    </div>
+                  )
+                })}
+              </dl>
+            </section>
+            <section>
+              <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Tools We Deploy</h3>
+              <p className="mt-3 p-default text-gray-600">
+                With people and planet at the core, these are the principles that shape how we build and operate.
+              </p>
+              <dl className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                {tools.map((item) => {
+                  const Icon = item.icon
+
+                  return (
+                    <div
+                      key={item.id}
+                      className="flex flex-col items-center rounded-2xl border border-gray-200/70 bg-white/90 p-5 text-center shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg"
+                    >
+                      <div className="flex size-11 items-center justify-center rounded-full bg-gray-100 ring-1 ring-inset ring-gray-200">
+                        <Icon aria-hidden="true" className="size-6 text-gray-900" />
+                      </div>
+                      <h4 className="mt-4 text-xl/7 font-semibold tracking-tight text-gray-900">{item.title}</h4>
+                      <p className="mt-2 text-base/7 text-gray-500">{item.description}</p>
+                    </div>
+                  )
+                })}
+              </dl>
+            </section>
           </div>
-          <dl className="mt-12 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-5">
-            {stats.map((stat) => (
-              <div key={stat.id} className="flex flex-col bg-white p-8 border-1 border-gray-200 hover:border-gray-300 transition-colors">
-                <img src={stat.image} alt={stat.value} className="mx-auto mb-4 h-16 w-16 object-contain" />
-                <dd className="text-xl font-semibold tracking-tight text-gray-900">{stat.value}</dd>
-                <dt className="mt-2 text-sm/6 font-medium leading-tight text-gray-600">{stat.name}</dt>
-              </div>
-            ))}
-          </dl>
         </div>
       </div>
     </div>

src/components/HomeStickyHeader.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import clsx from "clsx"
+
+import { Header_darkbg } from "@/components/Header_darkbg"
+
+export function HomeStickyHeader() {
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const heroThreshold = window.innerHeight * 0.8
+      setScrolled(window.scrollY > heroThreshold)
+    }
+
+    handleScroll()
+    window.addEventListener("scroll", handleScroll)
+
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  return (
+    <div
+      className={clsx(
+        "sticky top-0 z-30 transition-all duration-300",
+        scrolled && "bg-black/40 backdrop-blur-md",
+      )}
+    >
+      <Header_darkbg />
+    </div>
+  )
+}

src/components/Logo.tsx

@@ -1,45 +1,11 @@
-export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
+export function Logo(props: React.ComponentPropsWithoutRef<'img'>) {
   return (
-    <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="132"
-    height="32"
-    version="1.2"
-    viewBox="0 0 132 33.75"
-  >
-    <defs>
-      <clipPath id="a">
-        <path d="M18 26h11v6.66H18Zm0 0"></path>
-      </clipPath>
-      <clipPath id="b">
-        <path d="M28 14h5.578v12H28Zm0 0"></path>
-      </clipPath>
-      <clipPath id="c">
-        <path d="M6 26h11v6.66H6Zm0 0"></path>
-      </clipPath>
-      <clipPath id="d">
-        <path d="M11 .645h12V6H11Zm0 0"></path>
-      </clipPath>
-    </defs>
-    <g>
-      <path d="M16 13.473a8.7 8.7 0 0 1 1.207 2.09c.305-.762.711-1.461 1.203-2.09a7.781 7.781 0 0 0-1.203-6.145 7.74 7.74 0 0 0-1.348 3.578A7.8 7.8 0 0 0 16 13.473M2.996 13.742a7.8 7.8 0 0 0 2.727 4.188c.386.304.797.562 1.218.785a8.82 8.82 0 0 1 5.266-2.895 8.74 8.74 0 0 1-3.477-4.879q-.715.029-1.44.192a7.9 7.9 0 0 0-4.294 2.61M16.766 20.59a8.6 8.6 0 0 1-.168-2.38 8.8 8.8 0 0 1-2 1.36 7.83 7.83 0 0 0-1.602 6.04 7.88 7.88 0 0 0 3.77-5.02M24.793 10.957a7.97 7.97 0 0 0-5.594 2.895 8.6 8.6 0 0 1-.898 2.23 8.8 8.8 0 0 1 2.39-.367 7.92 7.92 0 0 0 4.102-4.758M14.059 18.879a8.7 8.7 0 0 1 1.78-1.621 8.9 8.9 0 0 1-2.327-.7 7.98 7.98 0 0 0-5.766 2.532 8.03 8.03 0 0 0 6.313-.211M17.207 31.387a7.84 7.84 0 0 0 3.52-3.567c.214-.441.375-.894.5-1.351a8.77 8.77 0 0 1-4.02-4.438 8.76 8.76 0 0 1-4.023 4.438c.125.457.289.91.504 1.351a7.82 7.82 0 0 0 3.519 3.567M21.219 20.121A8.64 8.64 0 0 1 22.21 26c.441.188.898.344 1.383.453a7.95 7.95 0 0 0 5.004-.5 7.72 7.72 0 0 0-1.368-6.18 8.8 8.8 0 0 1-3.48.715c-.855 0-1.71-.125-2.531-.367M9.621 10.957a7.9 7.9 0 0 0 4.102 4.758 8.7 8.7 0 0 1 2.386.37 8.7 8.7 0 0 1-.894-2.233 7.98 7.98 0 0 0-5.594-2.895M10.82 26.453A8 8 0 0 0 12.2 26a8.67 8.67 0 0 1 .995-5.879 9 9 0 0 1-2.535.367 8.85 8.85 0 0 1-3.48-.71 7.737 7.737 0 0 0-1.367 6.172c1.519.679 3.261.898 5.007.503M17.75 6.64a8.66 8.66 0 0 1 1.68 5.731 8.88 8.88 0 0 1 5.57-2.27c.086-.464.137-.945.137-1.433a7.77 7.77 0 0 0-1.614-4.734A7.9 7.9 0 0 0 17.75 6.64M16.664 6.64a7.907 7.907 0 0 0-5.777-2.707 7.77 7.77 0 0 0-1.614 4.735c0 .488.051.969.141 1.434a8.85 8.85 0 0 1 5.566 2.27 8.68 8.68 0 0 1 1.684-5.731m0 0"></path>
-      <g clipPath="url(#a)">
-        <path d="M23.402 27.281a9 9 0 0 1-1.39-.445c-.133.457-.297.91-.516 1.355a8.66 8.66 0 0 1-3.3 3.625 8 8 0 0 0 6.081-.324 7.87 7.87 0 0 0 4.047-4.508 8.8 8.8 0 0 1-4.922.297m0 0"></path>
-      </g>
-      <path d="M19.813 19.57a8.9 8.9 0 0 1-2-1.36 8.5 8.5 0 0 1-.168 2.38 7.89 7.89 0 0 0 3.773 5.02 7.85 7.85 0 0 0-1.605-6.04m0 0"></path>
-      <g clipPath="url(#b)">
-        <path d="M29.223 18.594c-.387.304-.797.57-1.215.804.277.387.531.793.746 1.235a8.63 8.63 0 0 1 .797 4.824 7.83 7.83 0 0 0 3.539-4.918 7.76 7.76 0 0 0-1.031-5.941 8.7 8.7 0 0 1-2.836 3.996m0 0"></path>
-      </g>
-      <path d="M5.66 20.633c.215-.442.469-.848.746-1.235a8.641 8.641 0 0 1-4.05-4.8 7.76 7.76 0 0 0-1.036 5.941 7.83 7.83 0 0 0 3.543 4.918c-.199-1.598.04-3.27.797-4.824m0 0"></path>
-      <g clipPath="url(#c)">
-        <path d="M12.914 28.191a8.7 8.7 0 0 1-.512-1.355c-.445.18-.906.336-1.39.445a8.78 8.78 0 0 1-4.922-.297 7.86 7.86 0 0 0 4.047 4.508 7.98 7.98 0 0 0 6.078.324 8.66 8.66 0 0 1-3.3-3.625m0 0"></path>
-      </g>
-      <path d="M31.418 13.742a7.9 7.9 0 0 0-4.297-2.61 8 8 0 0 0-1.441-.19 8.74 8.74 0 0 1-3.473 4.878 8.8 8.8 0 0 1 5.262 2.895 7.793 7.793 0 0 0 3.95-4.973M25.863 10.11c.48.027.965.085 1.45.195a8.73 8.73 0 0 1 4.308 2.39q.002-.013.004-.03a7.75 7.75 0 0 0-1.68-5.778 7.91 7.91 0 0 0-5.312-2.91c-.012 0-.024-.004-.035-.004a8.6 8.6 0 0 1 1.398 4.695c0 .492-.05.969-.133 1.441M20.898 16.559a8.8 8.8 0 0 1-2.328.699 8.6 8.6 0 0 1 1.782 1.62 8.04 8.04 0 0 0 6.316.212 8 8 0 0 0-5.77-2.531M2.793 12.695a8.7 8.7 0 0 1 4.305-2.39c.484-.11.968-.168 1.449-.196a9 9 0 0 1-.129-1.441 8.6 8.6 0 0 1 1.395-4.695c-.008 0-.02.004-.032.004a7.9 7.9 0 0 0-5.312 2.91 7.77 7.77 0 0 0-1.684 5.777q.004.02.008.031m0 0"></path>
-      <g clipPath="url(#d)">
-        <path d="M16.148 4.977c.391.308.735.644 1.059 1 .32-.356.668-.692 1.055-1a8.8 8.8 0 0 1 4.57-1.844A7.95 7.95 0 0 0 17.207.809c-2.2 0-4.187.89-5.629 2.324a8.8 8.8 0 0 1 4.57 1.844m0 0"></path>
-      </g>
-      <path d="M48.68 23.702q-2.221.012-3.969-.907-1.752-.92-2.765-2.797-1.002-1.887-1.031-4.625-.035-2.699.921-4.609.95-1.903 2.672-2.875 1.735-.983 3.985-1 2.25-.03 3.984.938 1.747.953 2.75 2.828.996 1.875 1.031 4.547.03 2.718-.937 4.64c-.649 1.274-1.547 2.23-2.703 2.875-1.157.637-2.47.961-3.938.985m4.25-8.454c-.023-1.78-.437-3.156-1.25-4.125q-1.206-1.45-3.172-1.421-1.94.016-3.125 1.5c-.781.98-1.164 2.359-1.14 4.14q.03 2.673 1.218 4.11 1.202 1.44 3.188 1.421 1.98-.03 3.14-1.484c.782-.976 1.16-2.36 1.141-4.14M62.392 20.803q1.061-.012 1.719-.75.668-.733.656-1.906l-.078-6.907 3.11-.03.14 11.843-2.984.031-.016-1.672h-.047c-.762 1.336-1.953 2.008-3.578 2.032-1.281.007-2.277-.352-2.984-1.094q-1.066-1.124-1.094-3.125l-.094-7.89 3.11-.032.093 7.422c.008.68.188 1.199.531 1.562q.515.534 1.516.516M76.046 10.853l.031 3.172a6 6 0 0 0-.843-.032q-2.925.035-2.89 2.782l.077 6.234-3.11.031-.14-11.843 2.985-.032.03 2.047h.048q.654-1.325 1.39-1.86.75-.527 1.828-.546.106 0 .594.047M81.435 18.6h.047q.684-4.2 2.078-11.688l3.547-.047 1.687 7.547q.218.956.375 1.813.17.862.297 1.53l.156.75h.047l.36-2.14q.199-1.03 1.593-7.234l.5-2.328 3.391-.031L91.2 22.787l-3.203.047c-1.23-5.445-2.101-9.594-2.609-12.437h-.047q-.409 2.878-1.234 6.921l-1.094 5.563-3.11.031L75.2 7.006l3.563-.047a368 368 0 0 1 1.703 7.078q.78 3.344.969 4.563M107.307 16.69c.008 1.281-.234 2.39-.734 3.328a5.3 5.3 0 0 1-2.11 2.188q-1.358.766-3.14.781-1.782.013-3.172-.719a5.33 5.33 0 0 1-2.172-2.14q-.768-1.39-.781-3.313-.033-1.905.719-3.328a5.4 5.4 0 0 1 2.125-2.187q1.37-.763 3.14-.782c1.188-.007 2.239.235 3.157.735a5.18 5.18 0 0 1 2.156 2.14q.779 1.394.812 3.297m-6.015 3.672c.945-.008 1.656-.332 2.125-.969.469-.632.695-1.523.687-2.672-.023-1.132-.277-2.015-.765-2.64q-.739-.936-2.157-.922-1.36.017-2.093.953-.721.938-.688 2.672.012 1.769.75 2.687.733.909 2.14.891M114.743 10.412l.031 3.172a6 6 0 0 0-.844-.031q-2.925.034-2.89 2.78l.078 6.235-3.11.032-.14-11.844 2.984-.031.031 2.046h.047q.655-1.325 1.39-1.859.75-.529 1.829-.547.106 0 .594.047M115.256 22.518 115.07 6.55l3.125-.03.187 15.968ZM127.614 22.371l-.016-1.484h-.047q-.55.939-1.453 1.39-.89.435-1.968.454-1.536.012-2.672-.766-1.127-.796-1.75-2.219-.613-1.435-.625-3.328c-.024-1.238.172-2.316.578-3.234.406-.914.976-1.63 1.719-2.14a4.54 4.54 0 0 1 2.546-.782q1.137-.012 2.016.469a3.8 3.8 0 0 1 1.422 1.343h.047l-.063-5.672 3.125-.03.188 15.968Zm0-5.656q-.017-1.811-.719-2.797c-.46-.656-1.133-.976-2.015-.969q-1.253.019-1.938.97-.691.956-.656 2.655.014 1.596.719 2.594.702 1.002 1.875.984 1.262-.011 2-.937.748-.937.734-2.5m0 0"></path>
-    </g>
-  </svg>
+    <img
+      src="/assets/logos/logo_light.svg"
+      width={176}
+      height={45}
+      alt="OurWorld logo"
+      {...props}
+    />
   )
 }

src/components/Logo_darkbg.tsx

@@ -1,45 +1,11 @@
-export function Logo_darkbg(props: React.ComponentPropsWithoutRef<'svg'>) {
+export function Logo_darkbg(props: React.ComponentPropsWithoutRef<'img'>) {
   return (
-    <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="132"
-    height="32"
-    version="1.2"
-    viewBox="0 0 132 33.75"
-  >
-    <defs>
-      <clipPath id="a">
-        <path d="M18 26h11v6.66H18Zm0 0"></path>
-      </clipPath>
-      <clipPath id="b">
-        <path d="M28 14h5.578v12H28Zm0 0"></path>
-      </clipPath>
-      <clipPath id="c">
-        <path d="M6 26h11v6.66H6Zm0 0"></path>
-      </clipPath>
-      <clipPath id="d">
-        <path d="M11 .645h12V6H11Zm0 0"></path>
-      </clipPath>
-    </defs>
-    <g fill="white">
-      <path d="M16 13.473a8.7 8.7 0 0 1 1.207 2.09c.305-.762.711-1.461 1.203-2.09a7.781 7.781 0 0 0-1.203-6.145 7.74 7.74 0 0 0-1.348 3.578A7.8 7.8 0 0 0 16 13.473M2.996 13.742a7.8 7.8 0 0 0 2.727 4.188c.386.304.797.562 1.218.785a8.82 8.82 0 0 1 5.266-2.895 8.74 8.74 0 0 1-3.477-4.879q-.715.029-1.44.192a7.9 7.9 0 0 0-4.294 2.61M16.766 20.59a8.6 8.6 0 0 1-.168-2.38 8.8 8.8 0 0 1-2 1.36 7.83 7.83 0 0 0-1.602 6.04 7.88 7.88 0 0 0 3.77-5.02M24.793 10.957a7.97 7.97 0 0 0-5.594 2.895 8.6 8.6 0 0 1-.898 2.23 8.8 8.8 0 0 1 2.39-.367 7.92 7.92 0 0 0 4.102-4.758M14.059 18.879a8.7 8.7 0 0 1 1.78-1.621 8.9 8.9 0 0 1-2.327-.7 7.98 7.98 0 0 0-5.766 2.532 8.03 8.03 0 0 0 6.313-.211M17.207 31.387a7.84 7.84 0 0 0 3.52-3.567c.214-.441.375-.894.5-1.351a8.77 8.77 0 0 1-4.02-4.438 8.76 8.76 0 0 1-4.023 4.438c.125.457.289.91.504 1.351a7.82 7.82 0 0 0 3.519 3.567M21.219 20.121A8.64 8.64 0 0 1 22.21 26c.441.188.898.344 1.383.453a7.95 7.95 0 0 0 5.004-.5 7.72 7.72 0 0 0-1.368-6.18 8.8 8.8 0 0 1-3.48.715c-.855 0-1.71-.125-2.531-.367M9.621 10.957a7.9 7.9 0 0 0 4.102 4.758 8.7 8.7 0 0 1 2.386.37 8.7 8.7 0 0 1-.894-2.233 7.98 7.98 0 0 0-5.594-2.895M10.82 26.453A8 8 0 0 0 12.2 26a8.67 8.67 0 0 1 .995-5.879 9 9 0 0 1-2.535.367 8.85 8.85 0 0 1-3.48-.71 7.737 7.737 0 0 0-1.367 6.172c1.519.679 3.261.898 5.007.503M17.75 6.64a8.66 8.66 0 0 1 1.68 5.731 8.88 8.88 0 0 1 5.57-2.27c.086-.464.137-.945.137-1.433a7.77 7.77 0 0 0-1.614-4.734A7.9 7.9 0 0 0 17.75 6.64M16.664 6.64a7.907 7.907 0 0 0-5.777-2.707 7.77 7.77 0 0 0-1.614 4.735c0 .488.051.969.141 1.434a8.85 8.85 0 0 1 5.566 2.27 8.68 8.68 0 0 1 1.684-5.731m0 0"></path>
-      <g clipPath="url(#a)">
-        <path d="M23.402 27.281a9 9 0 0 1-1.39-.445c-.133.457-.297.91-.516 1.355a8.66 8.66 0 0 1-3.3 3.625 8 8 0 0 0 6.081-.324 7.87 7.87 0 0 0 4.047-4.508 8.8 8.8 0 0 1-4.922.297m0 0"></path>
-      </g>
-      <path d="M19.813 19.57a8.9 8.9 0 0 1-2-1.36 8.5 8.5 0 0 1-.168 2.38 7.89 7.89 0 0 0 3.773 5.02 7.85 7.85 0 0 0-1.605-6.04m0 0"></path>
-      <g clipPath="url(#b)">
-        <path d="M29.223 18.594c-.387.304-.797.57-1.215.804.277.387.531.793.746 1.235a8.63 8.63 0 0 1 .797 4.824 7.83 7.83 0 0 0 3.539-4.918 7.76 7.76 0 0 0-1.031-5.941 8.7 8.7 0 0 1-2.836 3.996m0 0"></path>
-      </g>
-      <path d="M5.66 20.633c.215-.442.469-.848.746-1.235a8.641 8.641 0 0 1-4.05-4.8 7.76 7.76 0 0 0-1.036 5.941 7.83 7.83 0 0 0 3.543 4.918c-.199-1.598.04-3.27.797-4.824m0 0"></path>
-      <g clipPath="url(#c)">
-        <path d="M12.914 28.191a8.7 8.7 0 0 1-.512-1.355c-.445.18-.906.336-1.39.445a8.78 8.78 0 0 1-4.922-.297 7.86 7.86 0 0 0 4.047 4.508 7.98 7.98 0 0 0 6.078.324 8.66 8.66 0 0 1-3.3-3.625m0 0"></path>
-      </g>
-      <path d="M31.418 13.742a7.9 7.9 0 0 0-4.297-2.61 8 8 0 0 0-1.441-.19 8.74 8.74 0 0 1-3.473 4.878 8.8 8.8 0 0 1 5.262 2.895 7.793 7.793 0 0 0 3.95-4.973M25.863 10.11c.48.027.965.085 1.45.195a8.73 8.73 0 0 1 4.308 2.39q.002-.013.004-.03a7.75 7.75 0 0 0-1.68-5.778 7.91 7.91 0 0 0-5.312-2.91c-.012 0-.024-.004-.035-.004a8.6 8.6 0 0 1 1.398 4.695c0 .492-.05.969-.133 1.441M20.898 16.559a8.8 8.8 0 0 1-2.328.699 8.6 8.6 0 0 1 1.782 1.62 8.04 8.04 0 0 0 6.316.212 8 8 0 0 0-5.77-2.531M2.793 12.695a8.7 8.7 0 0 1 4.305-2.39c.484-.11.968-.168 1.449-.196a9 9 0 0 1-.129-1.441 8.6 8.6 0 0 1 1.395-4.695c-.008 0-.02.004-.032.004a7.9 7.9 0 0 0-5.312 2.91 7.77 7.77 0 0 0-1.684 5.777q.004.02.008.031m0 0"></path>
-      <g clipPath="url(#d)">
-        <path d="M16.148 4.977c.391.308.735.644 1.059 1 .32-.356.668-.692 1.055-1a8.8 8.8 0 0 1 4.57-1.844A7.95 7.95 0 0 0 17.207.809c-2.2 0-4.187.89-5.629 2.324a8.8 8.8 0 0 1 4.57 1.844m0 0"></path>
-      </g>
-      <path d="M48.68 23.702q-2.221.012-3.969-.907-1.752-.92-2.765-2.797-1.002-1.887-1.031-4.625-.035-2.699.921-4.609.95-1.903 2.672-2.875 1.735-.983 3.985-1 2.25-.03 3.984.938 1.747.953 2.75 2.828.996 1.875 1.031 4.547.03 2.718-.937 4.64c-.649 1.274-1.547 2.23-2.703 2.875-1.157.637-2.47.961-3.938.985m4.25-8.454c-.023-1.78-.437-3.156-1.25-4.125q-1.206-1.45-3.172-1.421-1.94.016-3.125 1.5c-.781.98-1.164 2.359-1.14 4.14q.03 2.673 1.218 4.11 1.202 1.44 3.188 1.421 1.98-.03 3.14-1.484c.782-.976 1.16-2.36 1.141-4.14M62.392 20.803q1.061-.012 1.719-.75.668-.733.656-1.906l-.078-6.907 3.11-.03.14 11.843-2.984.031-.016-1.672h-.047c-.762 1.336-1.953 2.008-3.578 2.032-1.281.007-2.277-.352-2.984-1.094q-1.066-1.124-1.094-3.125l-.094-7.89 3.11-.032.093 7.422c.008.68.188 1.199.531 1.562q.515.534 1.516.516M76.046 10.853l.031 3.172a6 6 0 0 0-.843-.032q-2.925.035-2.89 2.782l.077 6.234-3.11.031-.14-11.843 2.985-.032.03 2.047h.048q.654-1.325 1.39-1.86.75-.527 1.828-.546.106 0 .594.047M81.435 18.6h.047q.684-4.2 2.078-11.688l3.547-.047 1.687 7.547q.218.956.375 1.813.17.862.297 1.53l.156.75h.047l.36-2.14q.199-1.03 1.593-7.234l.5-2.328 3.391-.031L91.2 22.787l-3.203.047c-1.23-5.445-2.101-9.594-2.609-12.437h-.047q-.409 2.878-1.234 6.921l-1.094 5.563-3.11.031L75.2 7.006l3.563-.047a368 368 0 0 1 1.703 7.078q.78 3.344.969 4.563M107.307 16.69c.008 1.281-.234 2.39-.734 3.328a5.3 5.3 0 0 1-2.11 2.188q-1.358.766-3.14.781-1.782.013-3.172-.719a5.33 5.33 0 0 1-2.172-2.14q-.768-1.39-.781-3.313-.033-1.905.719-3.328a5.4 5.4 0 0 1 2.125-2.187q1.37-.763 3.14-.782c1.188-.007 2.239.235 3.157.735a5.18 5.18 0 0 1 2.156 2.14q.779 1.394.812 3.297m-6.015 3.672c.945-.008 1.656-.332 2.125-.969.469-.632.695-1.523.687-2.672-.023-1.132-.277-2.015-.765-2.64q-.739-.936-2.157-.922-1.36.017-2.093.953-.721.938-.688 2.672.012 1.769.75 2.687.733.909 2.14.891M114.743 10.412l.031 3.172a6 6 0 0 0-.844-.031q-2.925.034-2.89 2.78l.078 6.235-3.11.032-.14-11.844 2.984-.031.031 2.046h.047q.655-1.325 1.39-1.859.75-.529 1.829-.547.106 0 .594.047M115.256 22.518 115.07 6.55l3.125-.03.187 15.968ZM127.614 22.371l-.016-1.484h-.047q-.55.939-1.453 1.39-.89.435-1.968.454-1.536.012-2.672-.766-1.127-.796-1.75-2.219-.613-1.435-.625-3.328c-.024-1.238.172-2.316.578-3.234.406-.914.976-1.63 1.719-2.14a4.54 4.54 0 0 1 2.546-.782q1.137-.012 2.016.469a3.8 3.8 0 0 1 1.422 1.343h.047l-.063-5.672 3.125-.03.188 15.968Zm0-5.656q-.017-1.811-.719-2.797c-.46-.656-1.133-.976-2.015-.969q-1.253.019-1.938.97-.691.956-.656 2.655.014 1.596.719 2.594.702 1.002 1.875.984 1.262-.011 2-.937.748-.937.734-2.5m0 0"></path>
-    </g>
-  </svg>
+    <img
+      src="/assets/logos/logo_light.svg"
+      width={132}
+      height={32}
+      alt="OurWorld logo"
+      {...props}
+    />
   )
 }

src/components/NavLink.tsx

@@ -1,16 +1,20 @@
 import Link from 'next/link'
+import clsx from 'clsx'
 
-export function NavLink({
-  href,
-  children,
-}: {
+type NavLinkProps = {
   href: string
   children: React.ReactNode
-}) {
+  className?: string
+}
+
+export function NavLink({ href, children, className }: NavLinkProps) {
   return (
     <Link
       href={href}
-      className="inline-block rounded-lg px-2 py-1 text-base text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+      className={clsx(
+        'inline-block rounded-lg px-2 py-1 text-base text-slate-700 hover:bg-slate-100 hover:text-slate-900',
+        className,
+      )}
     >
       {children}
     </Link>

src/components/PeopleHero.tsx

@@ -16,43 +16,63 @@ export function PeopleHero() {
         <div className="mx-auto max-w-2xl lg:mx-0">
           <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Our team</h2>
           <p className="mt-6 text-lg/8 text-gray-600">
-            We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the
-            best results for our clients.
+            We're a dynamic global team building the infrastructure and frameworks that enable true digital sovereignty for individuals and organizations.
           </p>
         </div>
         <ul
           role="list"
           className="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-4"
         >
-          {people.map((person) => (
-            <li key={person.name}>
-              <img
-                alt=""
-                src={person.imageUrl}
-                className="aspect-1/1 w-full rounded-2xl object-cover outline-1 -outline-offset-1 outline-black/5"
-              />
-              <Link href={`/people/${nameToSlug(person.name)}`}>
-                <h3 className="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900 hover:text-indigo-600 cursor-pointer">{person.name}</h3>
-              </Link>
-              <p className="text-base/7 text-gray-600">{person.role}</p>
-              {person.linkedinUrl && person.linkedinUrl !== '#' && (
-                <ul role="list" className="mt-6 flex gap-x-6">
-                  <li>
-                    <a href={person.linkedinUrl} className="text-gray-400 hover:text-gray-500">
-                      <span className="sr-only">LinkedIn</span>
-                      <svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" className="size-5">
-                        <path
-                          d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
-                          clipRule="evenodd"
-                          fillRule="evenodd"
-                        />
-                      </svg>
-                    </a>
-                  </li>
-                </ul>
-              )}
-            </li>
-          ))}
+          {people.map((person) => {
+            const hasLinkedIn = Boolean(person.linkedinUrl && person.linkedinUrl !== '#')
+            const hasTags = Boolean(person.tags?.length)
+
+            return (
+              <li key={person.name} className="flex flex-col">
+                <img
+                  alt=""
+                  src={person.imageUrl}
+                  className="aspect-1/1 w-full rounded-2xl object-cover outline-1 -outline-offset-1 outline-black/5"
+                />
+                <div className="mt-6 flex flex-col flex-grow">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Link href={`/people/${nameToSlug(person.name)}`}>
+                      <h3 className="text-lg/8 font-semibold tracking-tight text-gray-900 hover:text-indigo-600 cursor-pointer">
+                        {person.name}
+                      </h3>
+                    </Link>
+                    {hasTags ? (
+                      <div className="flex flex-wrap items-center gap-2">
+                        {person.tags!.map((tag) => (
+                          <span
+                            key={tag}
+                            className="inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-medium text-indigo-600"
+                          >
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                  <p className="text-base/7 text-gray-600">{person.role}</p>
+                  {person.note ? <p className="mt-3 text-sm text-gray-500 italic">{person.note}</p> : null}
+                  {hasLinkedIn && (
+                    <div className="mt-auto pt-6 flex items-center gap-3">
+                      <a href={person.linkedinUrl} className="text-gray-400 hover:text-gray-500" aria-label={`LinkedIn profile for ${person.name}`}>
+                        <svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" className="size-5">
+                          <path
+                            d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                          />
+                        </svg>
+                      </a>
+                    </div>
+                  )}
+                </div>
+              </li>
+            )
+          })}
         </ul>
       </div>
     </div>

src/components/PersonTemplate.tsx

@@ -12,7 +12,21 @@ export function PersonTemplate({ personData, biography }: PersonTemplateProps) {
         <div className="absolute top-0 bottom-0 left-3/4 hidden w-screen bg-gray-50 lg:block" />
         <div className="mx-auto max-w-prose text-base lg:grid lg:max-w-none lg:grid-cols-2 lg:gap-8">
           <div>
-            <h2 className="text-lg font-semibold text-indigo-600">Team Member</h2>
+            <div className="flex items-center gap-2">
+              <h2 className="text-lg font-semibold text-indigo-600">Team Member</h2>
+              {personData.tags?.length ? (
+                <div className="flex flex-wrap gap-2">
+                  {personData.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-medium text-indigo-600"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+            </div>
             <h3 className="mt-2 text-3xl/8 font-bold tracking-tight text-gray-900 sm:text-4xl">Meet {personData.name}</h3>
           </div>
         </div>
@@ -54,9 +68,10 @@ export function PersonTemplate({ personData, biography }: PersonTemplateProps) {
           </div>
           <div className="mt-8 lg:mt-0">
             <div className="mx-auto text-base/7 text-gray-500">
-              <p className="text-lg/7 font-semibold text-gray-900 mb-4">{personData.role}</p>
+              <p className="text-lg/7 font-semibold text-gray-900">{personData.role}</p>
+              {personData.note ? <p className="mt-3 text-sm italic text-gray-500">{personData.note}</p> : null}
               <div 
-                className="prose prose-gray max-w-none"
+                className="prose prose-gray mt-4 max-w-none"
                 dangerouslySetInnerHTML={{ __html: biography }}
               />
               

src/components/Pricing.tsx

@@ -1,182 +0,0 @@
-import clsx from 'clsx'
-
-import { Button } from '@/components/Button'
-import { Container } from '@/components/Container'
-
-function SwirlyDoodle(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 281 40"
-      preserveAspectRatio="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M240.172 22.994c-8.007 1.246-15.477 2.23-31.26 4.114-18.506 2.21-26.323 2.977-34.487 3.386-2.971.149-3.727.324-6.566 1.523-15.124 6.388-43.775 9.404-69.425 7.31-26.207-2.14-50.986-7.103-78-15.624C10.912 20.7.988 16.143.734 14.657c-.066-.381.043-.344 1.324.456 10.423 6.506 49.649 16.322 77.8 19.468 23.708 2.65 38.249 2.95 55.821 1.156 9.407-.962 24.451-3.773 25.101-4.692.074-.104.053-.155-.058-.135-1.062.195-13.863-.271-18.848-.687-16.681-1.389-28.722-4.345-38.142-9.364-15.294-8.15-7.298-19.232 14.802-20.514 16.095-.934 32.793 1.517 47.423 6.96 13.524 5.033 17.942 12.326 11.463 18.922l-.859.874.697-.006c2.681-.026 15.304-1.302 29.208-2.953 25.845-3.07 35.659-4.519 54.027-7.978 9.863-1.858 11.021-2.048 13.055-2.145a61.901 61.901 0 0 0 4.506-.417c1.891-.259 2.151-.267 1.543-.047-.402.145-2.33.913-4.285 1.707-4.635 1.882-5.202 2.07-8.736 2.903-3.414.805-19.773 3.797-26.404 4.829Zm40.321-9.93c.1-.066.231-.085.29-.041.059.043-.024.096-.183.119-.177.024-.219-.007-.107-.079ZM172.299 26.22c9.364-6.058 5.161-12.039-12.304-17.51-11.656-3.653-23.145-5.47-35.243-5.576-22.552-.198-33.577 7.462-21.321 14.814 12.012 7.205 32.994 10.557 61.531 9.831 4.563-.116 5.372-.288 7.337-1.559Z"
-      />
-    </svg>
-  )
-}
-
-function CheckIcon({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={clsx(
-        'h-6 w-6 flex-none fill-current stroke-current',
-        className,
-      )}
-      {...props}
-    >
-      <path
-        d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
-        strokeWidth={0}
-      />
-      <circle
-        cx={12}
-        cy={12}
-        r={8.25}
-        fill="none"
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-function Plan({
-  name,
-  price,
-  description,
-  href,
-  features,
-  featured = false,
-}: {
-  name: string
-  price: string
-  description: string
-  href: string
-  features: Array<string>
-  featured?: boolean
-}) {
-  return (
-    <section
-      className={clsx(
-        'flex flex-col rounded-3xl px-6 sm:px-8',
-        featured ? 'order-first bg-blue-600 py-8 lg:order-none' : 'lg:py-8',
-      )}
-    >
-      <h3 className="mt-5 font-display text-lg text-white">{name}</h3>
-      <p
-        className={clsx(
-          'mt-2 text-base',
-          featured ? 'text-white' : 'text-slate-400',
-        )}
-      >
-        {description}
-      </p>
-      <p className="order-first font-display text-5xl font-light tracking-tight text-white">
-        {price}
-      </p>
-      <ul
-        role="list"
-        className={clsx(
-          'order-last mt-10 flex flex-col gap-y-3 text-sm',
-          featured ? 'text-white' : 'text-slate-200',
-        )}
-      >
-        {features.map((feature) => (
-          <li key={feature} className="flex">
-            <CheckIcon className={featured ? 'text-white' : 'text-slate-400'} />
-            <span className="ml-4">{feature}</span>
-          </li>
-        ))}
-      </ul>
-      <Button
-        href={href}
-        variant={featured ? 'solid' : 'outline'}
-        color="white"
-        className="mt-8"
-        aria-label={`Get started with the ${name} plan for ${price}`}
-      >
-        Get started
-      </Button>
-    </section>
-  )
-}
-
-export function Pricing() {
-  return (
-    <section
-      id="pricing"
-      aria-label="Pricing"
-      className="bg-slate-900 py-20 sm:py-32"
-    >
-      <Container>
-        <div className="md:text-center">
-          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
-            <span className="relative whitespace-nowrap">
-              <SwirlyDoodle className="absolute top-1/2 left-0 h-[1em] w-full fill-blue-400" />
-              <span className="relative">Simple pricing,</span>
-            </span>{' '}
-            for everyone.
-          </h2>
-          <p className="mt-4 text-lg text-slate-400">
-            It doesn’t matter what size your business is, our software won’t
-            work well for you.
-          </p>
-        </div>
-        <div className="-mx-4 mt-16 grid max-w-2xl grid-cols-1 gap-y-10 sm:mx-auto lg:-mx-8 lg:max-w-none lg:grid-cols-3 xl:mx-0 xl:gap-x-8">
-          <Plan
-            name="Starter"
-            price="$9"
-            description="Good for anyone who is self-employed and just getting started."
-            href="/register"
-            features={[
-              'Send 10 quotes and invoices',
-              'Connect up to 2 bank accounts',
-              'Track up to 15 expenses per month',
-              'Manual payroll support',
-              'Export up to 3 reports',
-            ]}
-          />
-          <Plan
-            featured
-            name="Small business"
-            price="$15"
-            description="Perfect for small / medium sized businesses."
-            href="/register"
-            features={[
-              'Send 25 quotes and invoices',
-              'Connect up to 5 bank accounts',
-              'Track up to 50 expenses per month',
-              'Automated payroll support',
-              'Export up to 12 reports',
-              'Bulk reconcile transactions',
-              'Track in multiple currencies',
-            ]}
-          />
-          <Plan
-            name="Enterprise"
-            price="$39"
-            description="For even the biggest enterprise companies."
-            href="/register"
-            features={[
-              'Send unlimited quotes and invoices',
-              'Connect up to 15 bank accounts',
-              'Track up to 200 expenses per month',
-              'Automated payroll support',
-              'Export up to 25 reports, including TPS',
-            ]}
-          />
-        </div>
-      </Container>
-    </section>
-  )
-}

src/components/PrimaryFeatures.tsx

@@ -1,158 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import Image from 'next/image'
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
-import clsx from 'clsx'
-
-import { Container } from '@/components/Container'
-import backgroundImage from '@/images/background-features.jpg'
-import screenshotExpenses from '@/images/screenshots/expenses.png'
-import screenshotPayroll from '@/images/screenshots/payroll.png'
-import screenshotReporting from '@/images/screenshots/reporting.png'
-import screenshotVatReturns from '@/images/screenshots/vat-returns.png'
-
-const features = [
-  {
-    title: 'Payroll',
-    description:
-      "Keep track of everyone's salaries and whether or not they've been paid. Direct deposit not supported.",
-    image: screenshotPayroll,
-  },
-  {
-    title: 'Claim expenses',
-    description:
-      "All of your receipts organized into one place, as long as you don't mind typing in the data by hand.",
-    image: screenshotExpenses,
-  },
-  {
-    title: 'VAT handling',
-    description:
-      "We only sell our software to companies who don't deal with VAT at all, so technically we do all the VAT stuff they need.",
-    image: screenshotVatReturns,
-  },
-  {
-    title: 'Reporting',
-    description:
-      'Easily export your data into an Excel spreadsheet where you can do whatever the hell you want with it.',
-    image: screenshotReporting,
-  },
-]
-
-export function PrimaryFeatures() {
-  let [tabOrientation, setTabOrientation] = useState<'horizontal' | 'vertical'>(
-    'horizontal',
-  )
-
-  useEffect(() => {
-    let lgMediaQuery = window.matchMedia('(min-width: 1024px)')
-
-    function onMediaQueryChange({ matches }: { matches: boolean }) {
-      setTabOrientation(matches ? 'vertical' : 'horizontal')
-    }
-
-    onMediaQueryChange(lgMediaQuery)
-    lgMediaQuery.addEventListener('change', onMediaQueryChange)
-
-    return () => {
-      lgMediaQuery.removeEventListener('change', onMediaQueryChange)
-    }
-  }, [])
-
-  return (
-    <section
-      id="features"
-      aria-label="Features for running your books"
-      className="relative overflow-hidden bg-blue-600 pt-20 pb-28 sm:py-32"
-    >
-      <Image
-        className="absolute top-1/2 left-1/2 max-w-none translate-x-[-44%] translate-y-[-42%]"
-        src={backgroundImage}
-        alt=""
-        width={2245}
-        height={1636}
-        unoptimized
-      />
-      <Container className="relative">
-        <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
-          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
-            Everything you need to run your books.
-          </h2>
-          <p className="mt-6 text-lg tracking-tight text-blue-100">
-            Well everything you need if you aren’t that picky about minor
-            details like tax compliance.
-          </p>
-        </div>
-        <TabGroup
-          className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
-          vertical={tabOrientation === 'vertical'}
-        >
-          {({ selectedIndex }) => (
-            <>
-              <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
-                <TabList className="relative z-10 flex gap-x-4 px-4 whitespace-nowrap sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
-                  {features.map((feature, featureIndex) => (
-                    <div
-                      key={feature.title}
-                      className={clsx(
-                        'group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
-                        selectedIndex === featureIndex
-                          ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-white/10 lg:ring-inset'
-                          : 'hover:bg-white/10 lg:hover:bg-white/5',
-                      )}
-                    >
-                      <h3>
-                        <Tab
-                          className={clsx(
-                            'font-display text-lg data-selected:not-data-focus:outline-hidden',
-                            selectedIndex === featureIndex
-                              ? 'text-blue-600 lg:text-white'
-                              : 'text-blue-100 hover:text-white lg:text-white',
-                          )}
-                        >
-                          <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
-                          {feature.title}
-                        </Tab>
-                      </h3>
-                      <p
-                        className={clsx(
-                          'mt-2 hidden text-sm lg:block',
-                          selectedIndex === featureIndex
-                            ? 'text-white'
-                            : 'text-blue-100 group-hover:text-white',
-                        )}
-                      >
-                        {feature.description}
-                      </p>
-                    </div>
-                  ))}
-                </TabList>
-              </div>
-              <TabPanels className="lg:col-span-7">
-                {features.map((feature) => (
-                  <TabPanel key={feature.title} unmount={false}>
-                    <div className="relative sm:px-6 lg:hidden">
-                      <div className="absolute -inset-x-4 top-[-6.5rem] bottom-[-4.25rem] bg-white/10 ring-1 ring-white/10 ring-inset sm:inset-x-0 sm:rounded-t-xl" />
-                      <p className="relative mx-auto max-w-2xl text-base text-white sm:text-center">
-                        {feature.description}
-                      </p>
-                    </div>
-                    <div className="mt-10 w-180 overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 sm:w-auto lg:mt-0 lg:w-271.25">
-                      <Image
-                        className="w-full"
-                        src={feature.image}
-                        alt=""
-                        priority
-                        sizes="(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem"
-                      />
-                    </div>
-                  </TabPanel>
-                ))}
-              </TabPanels>
-            </>
-          )}
-        </TabGroup>
-      </Container>
-    </section>
-  )
-}

src/components/Quote.tsx

@@ -1,15 +1,15 @@
 export function Quote() {
   return (
-    <section className="relative isolate overflow-hidden bg-white px-6 pt-24 pb-32 lg:px-8">
-      <div className="mx-auto max-w-2xl lg:max-w-4xl">
+    <section className="relative isolate overflow-hidden bg-transparent px-6 py-12 lg:px-8">
+      <div className="mx-auto max-w-2xl lg:max-w-5xl">
         <img
           alt=""
-          src="/images/home/quotes.png"
+          src="/images/home/quotes_green.png"
           className="mx-auto h-12"
         />
         <figure className="mt-8">
-          <blockquote className="text-center text-2xl/8 font-light italic text-gray-900 sm:text-3xl/9">
-            <p>
+          <blockquote className="text-center text-2xl/8 font-light italic text-void lg:text-4xl">
+            <p className="text-void">
               “We don't just fund individual ventures – we actively shape the architecture of our unique ecosystem. The future we are building is one where technology empowers people and drives innovation while prioritizing safety and autonomy.”
             </p>
           </blockquote>

src/components/SecondaryFeatures.tsx

@@ -1,249 +0,0 @@
-'use client'
-
-import { useId } from 'react'
-import Image, { type ImageProps } from 'next/image'
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
-import clsx from 'clsx'
-
-import { Container } from '@/components/Container'
-import screenshotContacts from '@/images/screenshots/contacts.png'
-import screenshotInventory from '@/images/screenshots/inventory.png'
-import screenshotProfitLoss from '@/images/screenshots/profit-loss.png'
-
-interface Feature {
-  name: React.ReactNode
-  summary: string
-  description: string
-  image: ImageProps['src']
-  icon: React.ComponentType
-}
-
-const features: Array<Feature> = [
-  {
-    name: 'Reporting',
-    summary: 'Stay on top of things with always up-to-date reporting features.',
-    description:
-      'We talked about reporting in the section above but we needed three items here, so mentioning it one more time for posterity.',
-    image: screenshotProfitLoss,
-    icon: function ReportingIcon() {
-      let id = useId()
-      return (
-        <>
-          <defs>
-            <linearGradient
-              id={id}
-              x1="11.5"
-              y1={18}
-              x2={36}
-              y2="15.5"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop offset=".194" stopColor="#fff" />
-              <stop offset={1} stopColor="#6692F1" />
-            </linearGradient>
-          </defs>
-          <path
-            d="m30 15-4 5-4-11-4 18-4-11-4 7-4-5"
-            stroke={`url(#${id})`}
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </>
-      )
-    },
-  },
-  {
-    name: 'Inventory',
-    summary:
-      'Never lose track of what’s in stock with accurate inventory tracking.',
-    description:
-      'We don’t offer this as part of our software but that statement is inarguably true. Accurate inventory tracking would help you for sure.',
-    image: screenshotInventory,
-    icon: function InventoryIcon() {
-      return (
-        <>
-          <path
-            opacity=".5"
-            d="M8 17a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
-            fill="#fff"
-          />
-          <path
-            opacity=".3"
-            d="M8 24a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
-            fill="#fff"
-          />
-          <path
-            d="M8 10a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
-            fill="#fff"
-          />
-        </>
-      )
-    },
-  },
-  {
-    name: 'Contacts',
-    summary:
-      'Organize all of your contacts, service providers, and invoices in one place.',
-    description:
-      'This also isn’t actually a feature, it’s just some friendly advice. We definitely recommend that you do this, you’ll feel really organized and professional.',
-    image: screenshotContacts,
-    icon: function ContactsIcon() {
-      return (
-        <>
-          <path
-            opacity=".5"
-            d="M25.778 25.778c.39.39 1.027.393 1.384-.028A11.952 11.952 0 0 0 30 18c0-6.627-5.373-12-12-12S6 11.373 6 18c0 2.954 1.067 5.659 2.838 7.75.357.421.993.419 1.384.028.39-.39.386-1.02.036-1.448A9.959 9.959 0 0 1 8 18c0-5.523 4.477-10 10-10s10 4.477 10 10a9.959 9.959 0 0 1-2.258 6.33c-.35.427-.354 1.058.036 1.448Z"
-            fill="#fff"
-          />
-          <path
-            d="M12 28.395V28a6 6 0 0 1 12 0v.395A11.945 11.945 0 0 1 18 30c-2.186 0-4.235-.584-6-1.605ZM21 16.5c0-1.933-.5-3.5-3-3.5s-3 1.567-3 3.5 1.343 3.5 3 3.5 3-1.567 3-3.5Z"
-            fill="#fff"
-          />
-        </>
-      )
-    },
-  },
-]
-
-function Feature({
-  feature,
-  isActive,
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<'div'> & {
-  feature: Feature
-  isActive: boolean
-}) {
-  return (
-    <div
-      className={clsx(className, !isActive && 'opacity-75 hover:opacity-100')}
-      {...props}
-    >
-      <div
-        className={clsx(
-          'w-9 rounded-lg',
-          isActive ? 'bg-blue-600' : 'bg-slate-500',
-        )}
-      >
-        <svg aria-hidden="true" className="h-9 w-9" fill="none">
-          <feature.icon />
-        </svg>
-      </div>
-      <h3
-        className={clsx(
-          'mt-6 text-sm font-medium',
-          isActive ? 'text-blue-600' : 'text-slate-600',
-        )}
-      >
-        {feature.name}
-      </h3>
-      <p className="mt-2 font-display text-xl text-slate-900">
-        {feature.summary}
-      </p>
-      <p className="mt-4 text-sm text-slate-600">{feature.description}</p>
-    </div>
-  )
-}
-
-function FeaturesMobile() {
-  return (
-    <div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
-      {features.map((feature) => (
-        <div key={feature.summary}>
-          <Feature feature={feature} className="mx-auto max-w-2xl" isActive />
-          <div className="relative mt-10 pb-10">
-            <div className="absolute -inset-x-4 top-8 bottom-0 bg-slate-200 sm:-inset-x-6" />
-            <div className="relative mx-auto w-211 overflow-hidden rounded-xl bg-white shadow-lg ring-1 shadow-slate-900/5 ring-slate-500/10">
-              <Image
-                className="w-full"
-                src={feature.image}
-                alt=""
-                sizes="52.75rem"
-              />
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function FeaturesDesktop() {
-  return (
-    <TabGroup className="hidden lg:mt-20 lg:block">
-      {({ selectedIndex }) => (
-        <>
-          <TabList className="grid grid-cols-3 gap-x-8">
-            {features.map((feature, featureIndex) => (
-              <Feature
-                key={feature.summary}
-                feature={{
-                  ...feature,
-                  name: (
-                    <Tab className="data-selected:not-data-focus:outline-hidden">
-                      <span className="absolute inset-0" />
-                      {feature.name}
-                    </Tab>
-                  ),
-                }}
-                isActive={featureIndex === selectedIndex}
-                className="relative"
-              />
-            ))}
-          </TabList>
-          <TabPanels className="relative mt-20 overflow-hidden rounded-4xl bg-slate-200 px-14 py-16 xl:px-16">
-            <div className="-mx-5 flex">
-              {features.map((feature, featureIndex) => (
-                <TabPanel
-                  static
-                  key={feature.summary}
-                  className={clsx(
-                    'px-5 transition duration-500 ease-in-out data-selected:not-data-focus:outline-hidden',
-                    featureIndex !== selectedIndex && 'opacity-60',
-                  )}
-                  style={{ transform: `translateX(-${selectedIndex * 100}%)` }}
-                  aria-hidden={featureIndex !== selectedIndex}
-                >
-                  <div className="w-211 overflow-hidden rounded-xl bg-white shadow-lg ring-1 shadow-slate-900/5 ring-slate-500/10">
-                    <Image
-                      className="w-full"
-                      src={feature.image}
-                      alt=""
-                      sizes="52.75rem"
-                    />
-                  </div>
-                </TabPanel>
-              ))}
-            </div>
-            <div className="pointer-events-none absolute inset-0 rounded-4xl ring-1 ring-slate-900/10 ring-inset" />
-          </TabPanels>
-        </>
-      )}
-    </TabGroup>
-  )
-}
-
-export function SecondaryFeatures() {
-  return (
-    <section
-      id="secondary-features"
-      aria-label="Features for simplifying everyday business tasks"
-      className="pt-20 pb-14 sm:pt-32 sm:pb-20 lg:pb-32"
-    >
-      <Container>
-        <div className="mx-auto max-w-2xl md:text-center">
-          <h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
-            Simplify everyday business tasks.
-          </h2>
-          <p className="mt-4 text-lg tracking-tight text-slate-700">
-            Because you’d probably be a little confused if we suggested you
-            complicate your everyday business tasks instead.
-          </p>
-        </div>
-        <FeaturesMobile />
-        <FeaturesDesktop />
-      </Container>
-    </section>
-  )
-}

src/components/Testimonials.tsx

@@ -1,144 +0,0 @@
-import Image from 'next/image'
-
-import { Container } from '@/components/Container'
-import avatarImage1 from '@/images/avatars/avatar-1.png'
-import avatarImage2 from '@/images/avatars/avatar-2.png'
-import avatarImage3 from '@/images/avatars/avatar-3.png'
-import avatarImage4 from '@/images/avatars/avatar-4.png'
-import avatarImage5 from '@/images/avatars/avatar-5.png'
-
-const testimonials = [
-  [
-    {
-      content:
-        'OurWorld is so easy to use I can’t help but wonder if it’s really doing the things the government expects me to do.',
-      author: {
-        name: 'Sheryl Berge',
-        role: 'CEO at Lynch LLC',
-        image: avatarImage1,
-      },
-    },
-    {
-      content:
-        'I’m trying to get a hold of someone in support, I’m in a lot of trouble right now and they are saying it has something to do with my books. Please get back to me right away.',
-      author: {
-        name: 'Amy Hahn',
-        role: 'Director at Velocity Industries',
-        image: avatarImage4,
-      },
-    },
-  ],
-  [
-    {
-      content:
-        'The best part about OurWorld is every time I pay my employees, my bank balance doesn’t go down like it used to. Looking forward to spending this extra cash when I figure out why my card is being declined.',
-      author: {
-        name: 'Leland Kiehn',
-        role: 'Founder of Kiehn and Sons',
-        image: avatarImage5,
-      },
-    },
-    {
-      content:
-        'There are so many things I had to do with my old software that I just don’t do at all with OurWorld. Suspicious but I can’t say I don’t love it.',
-      author: {
-        name: 'Erin Powlowski',
-        role: 'COO at Armstrong Inc',
-        image: avatarImage2,
-      },
-    },
-  ],
-  [
-    {
-      content:
-        'I used to have to remit tax to the EU and with OurWorld I somehow don’t have to do that anymore. Nervous to travel there now though.',
-      author: {
-        name: 'Peter Renolds',
-        role: 'Founder of West Inc',
-        image: avatarImage3,
-      },
-    },
-    {
-      content:
-        'This is the fourth email I’ve sent to your support team. I am literally being held in jail for tax fraud. Please answer your damn emails, this is important.',
-      author: {
-        name: 'Amy Hahn',
-        role: 'Director at Velocity Industries',
-        image: avatarImage4,
-      },
-    },
-  ],
-]
-
-function QuoteIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg aria-hidden="true" width={105} height={78} {...props}>
-      <path d="M25.086 77.292c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622C1.054 58.534 0 53.411 0 47.686c0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C28.325 3.917 33.599 1.507 39.324 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Zm54.24 0c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622-2.11-4.52-3.164-9.643-3.164-15.368 0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C82.565 3.917 87.839 1.507 93.564 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Z" />
-    </svg>
-  )
-}
-
-export function Testimonials() {
-  return (
-    <section
-      id="testimonials"
-      aria-label="What our customers are saying"
-      className="bg-slate-50 py-20 sm:py-32"
-    >
-      <Container>
-        <div className="mx-auto max-w-2xl md:text-center">
-          <h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
-            Loved by businesses worldwide.
-          </h2>
-          <p className="mt-4 text-lg tracking-tight text-slate-700">
-            Our software is so simple that people can’t help but fall in love
-            with it. Simplicity is easy when you just skip tons of
-            mission-critical features.
-          </p>
-        </div>
-        <ul
-          role="list"
-          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
-        >
-          {testimonials.map((column, columnIndex) => (
-            <li key={columnIndex}>
-              <ul role="list" className="flex flex-col gap-y-6 sm:gap-y-8">
-                {column.map((testimonial, testimonialIndex) => (
-                  <li key={testimonialIndex}>
-                    <figure className="relative rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10">
-                      <QuoteIcon className="absolute top-6 left-6 fill-slate-100" />
-                      <blockquote className="relative">
-                        <p className="text-lg tracking-tight text-slate-900">
-                          {testimonial.content}
-                        </p>
-                      </blockquote>
-                      <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
-                        <div>
-                          <div className="font-display text-base text-slate-900">
-                            {testimonial.author.name}
-                          </div>
-                          <div className="mt-1 text-sm text-slate-500">
-                            {testimonial.author.role}
-                          </div>
-                        </div>
-                        <div className="overflow-hidden rounded-full bg-slate-50">
-                          <Image
-                            className="h-14 w-14 object-cover"
-                            src={testimonial.author.image}
-                            alt=""
-                            width={56}
-                            height={56}
-                          />
-                        </div>
-                      </figcaption>
-                    </figure>
-                  </li>
-                ))}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      </Container>
-    </section>
-  )
-}

src/components/UI/FadeInOnView.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { cn } from '@/lib/utils'
+
+interface FadeInOnViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  delayMs?: number
+}
+
+export function FadeInOnView({
+  delayMs = 0,
+  className,
+  children,
+  ...props
+}: FadeInOnViewProps) {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setVisible(true)
+          } else {
+            setVisible(false)
+          }
+        })
+      },
+      {
+        threshold: 0.2,
+      },
+    )
+
+    observer.observe(ref.current)
+
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'transition-all duration-700 ease-out',
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4',
+        className,
+      )}
+      style={{
+        transitionDelay: `${delayMs}ms`,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

src/components/UI/Texts.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+const fontVariants = {
+  sans: 'font-sans',
+  neuton: 'font-neuton',
+  quicking: 'font-quicking',
+  sourceLight: 'font-source-sans-light',
+} as const
+
+const colorVariants = {
+  primary: 'text-gray-900',
+  secondary: 'text-gray-600',
+  light: 'text-gray-50',
+  accent: 'text-cyan-400',
+  cyan: 'text-cyan-400',
+  white: 'text-white',
+  dark: 'text-gray-950',
+  tertiary: 'text-gray-700',
+  lightSecondary: 'text-gray-300',
+} as const
+
+type TextOwnProps = {
+  font?: keyof typeof fontVariants
+  color?: keyof typeof colorVariants
+  className?: string
+  children?: React.ReactNode
+}
+
+// Polymorphic helpers
+type PolymorphicProps<E extends React.ElementType, P> = P & {
+  as?: E
+} & Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
+
+const createTextComponent = <DefaultElement extends React.ElementType>(
+  defaultElement: DefaultElement,
+  defaultClassName: string,
+  defaultProps: Omit<TextOwnProps, 'className' | 'children'> = {}
+) => {
+  type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
+    E,
+    TextOwnProps
+  >
+
+  function Text<E extends React.ElementType = DefaultElement>({
+    font = defaultProps.font || 'sans',
+    as,
+    color = defaultProps.color || 'primary',
+    className,
+    children,
+    ...props
+  }: Props<E>) {
+    const Tag = (as || defaultElement) as React.ElementType
+    return (
+      <Tag
+        className={cn(
+          defaultClassName,
+          fontVariants[font],
+          colorVariants[color],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Tag>
+    )
+  }
+
+  ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'
+  })`
+  return Text
+}
+
+// Exports based on your tailwind.css and the example
+// Headings default to Quicking font
+export const H1 = createTextComponent(
+  'h1',
+  'text-5xl lg:text-7xl font-medium leading-[0.95] lg:leading-tight  tracking-tight',
+  { font: 'quicking' }
+)
+export const H2 = createTextComponent(
+  'h2',
+  'text-3xl lg:text-5xl font-medium leading-tight tracking-tight',
+  { font: 'quicking' }
+)
+export const H3 = createTextComponent(
+  'h3',
+  'text-3xl lg:text-4xl font-medium leading-tight tracking-tight',
+  { font: 'quicking' }
+)
+export const H4 = createTextComponent(
+  'h4',
+  'text-2xl lg:text-3xl font-medium leading-snug tracking-tight',
+  { font: 'quicking' }
+)
+
+// Paragraph-style text defaults to Avenir (font-sans)
+export const P = createTextComponent(
+  'p',
+  'text-base lg:text-xl leading-relaxed',
+  { font: 'sans' }
+)
+
+export const PS = createTextComponent(
+  'p',
+  'text-base lg:text-lg leading-relaxed',
+  { font: 'sans' }
+)
+
+export const Small = createTextComponent(
+  'small',
+  'text-sm font-medium leading-normal tracking-normal'
+)
+export const Subtle = createTextComponent(
+  'p',
+  'text-sm leading-normal tracking-normal text-gray-500',
+  { font: 'sans' }
+)
+export const H5 = createTextComponent(
+  'h5',
+  'text-xl lg:text-2xl font-light lg:leading-snug leading-[0.85] tracking-normal'
+)
+export const Eyebrow = createTextComponent(
+  'h2',
+  'text-base/7 font-semibold  uppercase tracking-[0.16em]',
+  { color: 'accent' }
+)
+
+export const CardEyebrow = createTextComponent(
+  'h3',
+  'text-sm/4 font-semibold tracking-wide'
+)
+export const CardTitle = createTextComponent(
+  'p',
+  'text-lg font-medium leading-snug tracking-tight'
+)
+export const CardDescription = createTextComponent(
+  'p',
+  'text-sm/6 leading-normal tracking-normal',
+  { font: 'sans' }
+)
+export const FeatureTitle = createTextComponent(
+  'h3',
+  'text-lg font-semibold leading-snug tracking-tight'
+)
+export const FeatureDescription = createTextComponent(
+  'p',
+  'lg:text-base text-sm leading-normal tracking-normal',
+  { font: 'sans' }
+)
+export const MobileFeatureTitle = createTextComponent(
+  'h3',
+  'text-sm font-semibold sm:text-lg leading-snug tracking-tight'
+)
+export const SecondaryFeatureTitle = createTextComponent(
+  'h3',
+  'text-base font-semibold leading-snug tracking-tight'
+)
+export const Question = createTextComponent(
+  'h3',
+  'text-lg/6 font-semibold tracking-tight'
+)
+export const Answer = createTextComponent(
+  'p',
+  'mt-4 text-sm leading-normal tracking-normal',
+  { font: 'sans' }
+)
+export const PageHeader = createTextComponent(
+  'h2',
+  'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
+)
+export const DownloadCardTitle = createTextComponent(
+  'dt',
+  'text-base/7 font-semibold tracking-wide'
+)
+export const DownloadCardDescription = createTextComponent(
+  'dd',
+  'text-base/7 leading-normal tracking-normal',
+  { font: 'sans' }
+)
+
+export const CT = createTextComponent(
+  'span',
+  'text-base lg:text-lg leading-normal font-medium',
+  { font: 'quicking' }
+)
+export const CP = createTextComponent(
+  'p',
+  'text-base lg:text-lg tracking-normal leading-normal font-light',
+  { font: 'sans' }
+)

src/components/VenturesCybercity.tsx

@@ -70,17 +70,11 @@ export  function VenturesCybercity() {
                  <p className='text-lg/7 font-light text-gray-600'>
                   Zanzibar, Tanzania
                 </p>
-                <p className='mt-6'>
-                  Website
-                </p>
-                 <p className='text-lg/7 font-light text-gray-600'>
-                  <a href="http://cybercity.ourworld.tf/" className="text-indigo-600 hover:text-gray-500">cybercity.ourworld.tf</a>
-                </p>
                 <p className='mt-6'>
                   Contact
                 </p>
                  <p className='text-lg/7 font-light text-gray-600'>
-                  <a href="mailto:info@threefold.io " className="text-indigo-600 hover:text-gray-50">info@ourworld.tf</a>
+                  <a href="mailto:info@ourworld.tf" className="text-indigo-600 hover:text-gray-50">info@ourworld.tf</a>
                 </p>
               </blockquote>
               </figure>

src/components/VenturesFreezone.tsx

@@ -16,10 +16,10 @@ export  function VenturesFreezone() {
           <div className="lg:pr-8">
             <h2 className="text-2xl font-semibold tracking-tight text-pretty text-gray-900">About</h2>
             <p className="mt-6 text-lg/7 text-gray-600">
-              The digital free zone is a collaborative project with the Revolutionary Government of Zanzibar through ZICTIA. 100% digital and automated, offering seamless legal, financial, and operational support for businesses. The free zone provides regulatory incentives and benefits to businesses through a fully online platform​.
+              Digital Free Zone is a PPP with the Government of Zanzibar through ZICTIA. 100% digital and automated, offering seamless legal, financial, and operational support for businesses.
             </p>
             <p className="mt-8 text-lg/7 text-gray-600">
-              Planned to officially launch in late 2025, the Zanzibar Digital Free Zone will introduce a new paradigm of sovereign digital jurisdiction. Unlike traditional regulatory zones, this free zone is governed directly by OurWorld; enabling an unprecedented level of integration between digital identity, business formation, compliance, and tokenized trade. This sovereign model represents a billion-dollar opportunity and a foundational layer in OurWorld’s broader vision for next-generation, decentralized global infrastructure.
+              OurWorld Digital Free Zone will introduce a new paradigm of sovereign digital jurisdiction. Unlike traditional regulatory zones, this Free Zone is governed directly by OurWorld ;  enabling an unprecedented level of integration between digital identity, business formation, compliance, and tokenized trade. This sovereign model represents a billion-dollar opportunity and a foundational layer in OurWorld’s broader vision for next-generation, decentralized global infrastructure.
             </p>
           </div>
           <div className="lg:row-span-2 lg:-mr-24 xl:mr-auto">
@@ -80,7 +80,7 @@ export  function VenturesFreezone() {
                   Contact
                 </p>
                  <p className='text-lg/7 font-light text-gray-600'>
-                  <a href="mailto:info@threefold.io " className="text-indigo-600 hover:text-gray-500">info@ourworld.tf</a>
+                  <a href="mailto:info@ourworld.tf" className="text-indigo-600 hover:text-gray-500">info@ourworld.tf</a>
                 </p>
               </blockquote>
               </figure>