Stacksona icon
Stacksona Gate Stacksona

Terms of Use

import { motion } from "framer-motion";

const logoSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAg0AAAINCAYAAAC9GEyUAAAQAElEQVR4Aez9iZozTXYeBr6RmQDqW/6tV3po6yHHfsamSFM9pD22pRmJmiuYuYIZX4HpS+AViHcgPt5kihT3ZnebzaWbFPfulpr9t6Tuv//926q+r6q+WrAj0+8biQQSQGYiE0gAiapA5UFs55w4cSIy4uSJSJQH93EacBpwGnAacBpwGnAaKKEBZzSUUJJDcRpwGnAacBpwGmiuBvYnmTMa9qdrV5PTgNOA04DTgNPAUWvAGQ1H3X1OeKcBpwGnAaeBpmrgLsrljIa72KuuTU4DTgNOA04DTgM70IAzGnagVMfSacBpwGnAaaCpGnBybaMBZzRsoz1H6zTgNOA04DTgNHCPNOCMhnvU2a6pTgNOA04DTdWAk+s4NOCMhuPoJyel04DTgNOA04DTwME14IyGg3eBE8BpwGnAaaCpGnByOQ0sasAZDYv6cCmnAacBpwGnAacBp4EcDTijIUcxLttpwGnAaaCpGnByOQ0cSgPOaDiU5l29TgNOA04DTgNOA0emAWc0HFmHOXGdBpwGmqoBJ5fTwN3XgDMa7n4fuxY6DTgNOA04DTgN1KIBZzTUokbHxGnAaaCpGnByOQ04DdSnAWc01KdLx8lpwGnAacBpwGngTmvAGQ13untd45wGmqoBJ5fTgNPAMWrAGQ3H2GtOZqcBpwGnAacBp4EDaMAZDQdQuqvSaaCpGnByOQ04DTgNFGnAGQ1F2nFlTgNOA04DTgNOA04DMw04o2GmChdxGmiqBpxcTgNOA04DzdCAMxqa0Q9OCqcBpwGnAacBp4HGa8AZDY3vIidgUzXg5HIacBpwGrhvGnBGw33rcddepwGnAacBpwGngQ014IyGDRXnyJqqASeX04DTgNOA08CuNOCMhl1p1vF1GnAacBpwGnAauGMacEbDHevQpjbHyeU04DTgNOA0cPwacEbD8feha4HTgNOA04DTgNPAXjTgjIa9qLmplTi5nAacBpwGnAacBsprwBkN5XXlMJ0GnAacBpwGnAbutQac0dDA7nciOQ04DTgNOA04DTRRA85oaGKvOJmcBpwGnAacBpwGGqgBZzSU7hSH6DTgNOA04DTgNHC/NeCMhvvd/671TgNOA04DTgNOA6U1cPRGQ+mWOkSnAacBpwGnAacBp4GtNOCMhq3U54idBpwGnAacBpwG7o8GdmQ03B8FupY6DTgNOA04DTgN3BcNOKPhvvS0a6fTgNOA04DTgNNAFQ1k4DqjIUMpLstpwGnAacBpwGnAaWBVA85oWNWJy3EacBpwGnAacBpoqgYOKpczGg6qfle504DTgNOA04DTwPFowBkNx9NXTlKnAacBpwGngaZq4J7I5YyGe9LRrplOA04DTgNOA04D22rAGQ3batDROw04DTgNOA00VQNOrpo14IyGmhXq2DkNOA04DTgNOA3cVQ04o+Gu9qxrl9OA04DTQFM14OQ6Wg04o+Fou84J7jTgNOA04DTgNLBfDTijYb/6drU5DTgNOA00VQNOLqeBtRpwRsNaFTkEpwGnAacBpwGnAacBacAZDdKCA6cBpwGngaZqwMnlNNAgDTijoUGd4URxGriLGvjBd1/9s4rwz4mfC//hu6/++aZAvpTlYmt49ztn3/n2X34aWfiLT6O/+dMn0V/+4dPa4M//8JPoe99+9sFdHA+uTcetAWc0HHf/HbX0//Zvnkd/+2fPor/9U4aEf/31j6NvfPX9GfzR734Qff23PrTwBwwPDV//rY8oS3n4A+L/wW9+FKXha7/+fvSVX/vRDH7/V38Uffl/f792+L1/8X5UFb5Mmi//7x9Qlhh+j/Hf+xcfkE9ZeD/63f/1R9Fv/88/nMFv/U/vRe9+++IX8+B7LFuBb138/79XAO+ybFMg319891uvVuB7zKsC/+7bl1967+9uYeF7t3j/393iw/duNoKPSLcMH//wFu9+6+Invvzr/yF679+9/P8d9Y3uhL9TGnBGw53qzuNpzDe/9kn0o3df4+Mf3uBjTpofv3eNpx/18OKTwQzOng3w8kW/GfCccjzv4WVJOEvwXpAmBecvh7h8NZrB64sRri6HuLpYgnOm18BrlmfCqyGuWVYVrs4pC2mvCK8JCqvBCNdsz+3rCRLoXo3Ru5nCNcMUdFPxXjqe4G8apnllxFXvttC/nWDYi2Yw6ocYDzaDEemWYTwEBl3g1dMRvv2vT3/lG1/7IDqeu9tJepc14IyGu9y7DWzbX/zJx9GX+XR9+qSH0QAYDUPChBAiHANR6FkIFUaGLYjB4PB/oAx3G7D42WiZMuQhYFBwbcS6gN+saGeMZzXsLeIZDyby0b8FPn2vi9/71fe4ZXHqtiz21gOuoiwNeFmZLs9poG4NxMbCe9Gn7/dwfTnCZJQ/u+eX1C1VSX4VBaqIvirENgy2oV2VZIscGQ6CKYvGyDWVZylISbpUctikMQYyHsKxh9enI/y7b5//xFd+44c0Hp474wHucwgNOKPhEFq/Z3V+82uf0ljo0lgYIxyBz+v5U3Tj1pZ9CJSuIx3HXfiwryPDhjDk906vO6e7ubaMMYjoeevfRnj5ZIh3v3X+E7//r37gzjvMVeRie9KAMxr2pOj7WM2ffv3D6Hf/xQ+j0yddGgtmrbHQuDl/lwKJdxY0ZaBIttplMeQoYOCujTRgjLFbFjrv8JLGw3f+/Mydd9hIk45oUw04o2FTzTm6XA3YrYh/+V704uMBbq8mhVsRuUyOtKDyWluZIFZMJllmZoyf+b2PzEyZDGtOgFF3VdaAtix03qF3E8XnHXi/fe/b7rxDZUU6gsoacEZDZZU5giINzLYiLsYYcysC9C9o3VgFulttWRwKLwY04yOBmyFJOSlqlDeqkdd64RPjQeF67FyMvcqcK8VeC4wx8/MOL0buvAPcZx8acEbDPrR8D+r4M7sV8R63Inr0LGgB0NBSmAd5SsnDX87Po68hf18LUHY9NTTgWFmk+/hY27B/uY2M79CgT6/Dy09H9rzDV37jB9EPvn/6P+xfGlfjXdeAZva73kbXvh1q4C//5JPoy3SNPuNWxA23Isb2rQizwxoT1qqjLCQ0JcItFvJKpJWQS8jdRJSt2pj0bYmGbVVPCf5NRFGbE5jKZ4yBiTwMboEzGg//9i/Pf/kb/8eHwppiuMBpYHsNOKNhex3eSw7f/dsX0dd/+8Pok/e7uLrQuQVOWHziaaYyDMVKA5NVrybj17ks1MmrFp3d4X7bRD/qH0EBbXzewUPvKsSnP+hCRv277rxDgcZcURUNOKOhirYcrtXAN776YfTeu5d4dTa0WxGmscaCFTfjyzAvAUaTa81knKC5sIQGdqLLpM8UTmXYST1T3k0LKrTV8J6U8RBODC5fjPD9b5//xFfd7zs0rUePUh5nNBxltx1G6Hgr4kfR6dMhBn0gmhxGjlStNUQNeQgY7OuqMPmvFampvNYKvi2C+kywLZ8joFcfCzYQ1dB4iBbOO1zYH4dy/89iA2U6EqsBZzRYNbivIg1891svLuZbEWN6F8CpyOBOfSK1J4EdtmzDyT8tUQ0s0uyOPJ70mcIjb8qy+OpowXL+BmljqB973iHC2adDfOcvXv6KO++wgSIdCZzR4AZBoQbsVsT3Lt+utBVRyLGBhSsTMydYmkVVJF1hkUVcCimLMCevTn5N5ZXTdJu9InPSbwotxvF9qU0J7EB6bVnosKQ777AD5d4Tls5ouCcdXbWZf/mNT6Lf/5d3bSsiQwuaoDOy4ywtPgnEOe77WDRQvd9EcZDWaQwmsAcBDA1iGQ+L5x30z7Dc/7PYg/qPvgpnNBx9F5ZuQClEGQs6bf3Jj7p4fXFHtyISTWiiTuJrQ0MMAYOlqxSbUkhLjIuSdfMrqquJZaXbrz5LQ4MaozYIDiSSofEwP+8wxPe/dWEPS/7g+6/c7zscqE+OoVpnNBxDL+1Jxm9+7ePo4x/dHsErlDUoZOPJ2rDyBBi9C9fGushofJ28Mthvn5X0XTrcnmtlDg3SkzHUReRB/wxL5x2++5dnv/yn/8fHDZKwsnYdwQ414IyGHSq3FOsGIMm7YLcingzW/mOpBojbIBE42fJpba1AdU+/dfNb24CGIdTe/qQfk3CH7ZXsgh1WsSlrbVmAxkP3KsTHP7zBl7k9+e53Tr+zKT9Hdzc14IyGu9mvpVolY+HL//K96JP34q2I/f2aYynxdodU+6SdLDYKl8Suua6a2QG1M1xq/1Em1Y9ZsEVjpGfBFiz2QWpoBMt4CMf6fQdtWZx/yf2+wz40fzx1OKMhu6/ufO43v8qtiPe4FXE+wYQThCaLO99oNbDmiXuVnWEtAgarhczc8toFzy1FmpHvQ7Z91DFr0HJE/ZqG5fKMtOQVZBQ1OcvQeEjOO5x9OnLnHZrcWXuWzRkNe1b4oauTd8FuRTzlVoSMBe1nHlqoXdevSTuBXdc1428YS4DRI7mkpiMRtQFiJv27HFI0KVLA6DFfxhj7/ywWzjt8zZ13OOY+3Vb24zIatm3tPaaPjYXpVsT5GPdiK0KTtuAQ/b5Qr6EEAgZNuhZk3FKwOnnlibKPOvLqLpsvGRd+KEz9ngVlGTYDT1sWK+cdvv3yg2ZI56TYpwac0bBPbR+orm9+9ZP43EKyFcGnhwOJsvtq7aTNahQyOMiVW3eyeGwoVS7fDfk5sgNqIBkLeeEBRcup2nDLQsbD7LzDt1/aVzS/9233+w45KruT2XUYDXdSMXehUfIufOXXPohOn/bjcwv3wVjYY8dtvoYbSilgcKhrc+EPI/Ge5N2qV2qVUZIUwWG6QbUaY5B13sEZD9LO3QdnNNzBPo6NhR9Z78Llq+F0K+IONlSTdAJNaZ7kKS1LsiiUIKjEtwS/OlEqylYRvU5Jd8dr741Kxk5euLumJpyNMfPzDp/YNy1+4o+//OHeNZHI48JtNVCO3hkN5fR0NFjf/OqnU2NhfDe9C5qSEmhar0iujWQypBIwcNeqBjbW6yqrneQ0Uj6NpyKoTxPastB5h/4t8PSDbvz7Du68Q30KbhgnZzQ0rEM2FSf2Lmgronc3jQUpppGTswSrCzTJ18WrgM+d12NB2+suOlpdaqwVQTVFGWMg42H1vMMLd1gS232aRu2Mhqb1SEV5YmPhDm9FaFJOoKJudokukRb4r2QslFZIJBN5imTKexqkChoQbaRQDdDL0YuQjMOsML9xxiyfdziPD0t+57n7Zcl8tR1ViTMajqq7FoW9s1sRWogSWGxyM1OStXbJksm6ZsY7kbVmGdPsmixvk2VL67D2eDI2l8N5RcaY2XmH00+GePdvz790t847zNt632LOaDjCHv/Xf/Rx9OVf/VF0+vSItiI0wZaFY+oTtWmX8s7e+d9lJY53ZQ3sut8rC9QEAkMhFsEzPo0HH4Nb4Ely3uE7Z87rQE0d6+WMhiPqub/6xifRV37t/ejpBz1cXYwP91aEJsyqcER6Xieqmr4Op/5yTcb1c01zrNyuAM1U/AAA=";
const screenshotSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB2gAAAOJCAIAAABXteXPAAAQAElEQVR4AezdCUBVZf74/4fdBcEFBUwlzS1c0SasTEdNssy0xWWcTMw0jVLL0szczBfNFM0sQ01Lw5Q0yzAV0zATQ1RUEwQV3P33Lw6H1/j7Oedl3v1xzjmv1/P6fa11r7W0vntv+fJ93+f5vl8iCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4L4T+Qf9JfwMQQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRD/BdGf9DcAEQRBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEASxIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIH5JRP+EfwEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQxD8R0b/wLwCCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIH5FRP/CvwAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvglEf0L/wIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCOLXRPQv/AuAIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfEtG/8C8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAI4pdE9C/8C4AgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgiF8S0b/wLwCCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAjil0T0L/wLgCAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiB+SUT/wr8ACIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgfk1E/8K/AQiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIH5NRP/CvwAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAI4tdE9C/8C4AgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgiF8T0b/wLwCCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAjil0b0L/wLgCAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiB+WUT/kr8BCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgfllE/5K/AQiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIH5ZRP+SvwEIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvhlEf1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgfl1E/5K/AQiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIH5dRP+SvwEIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dRH9S/4GIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIhfF9G/5G8AgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgvh1Ef1L/gYgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL4dfH/AtYcMIyWwY+OAAAAAElFTkSuQmCC";

const accent = {
primary: "#5d56c8",
secondary: "#7e73db",
soft: "#a395dd",
line: "#d8d3f0",
blue: "#7484d5",
};

const bullets = [
"Review higher risk agent actions before they go through",
"Give reviewers the context they need in one inbox",
"Return decisions to agents by polling or webhook",
];

const pillars = [
{
title: "A gate before sensitive actions",
text: "Stacksona Gate creates a clear review step between an AI agent and the actions that need oversight.",
},
{
title: "Built for real operating teams",
text: "Reviewers can quickly understand what the agent wants to do, why it needs review, and what happens next.",
},
{
title: "Fits into existing systems",
text: "It is designed as a self hosted layer for agent tasks, not a replacement for the rest of your stack.",
},
];

const steps = [
{
number: "01",
title: "Agent activity is logged",
text: "The agent sends task activity and the action it wants to take next into Stacksona Gate.",
},
{
number: "02",
title: "A guarded action pauses",
text: "When a rule applies, the action is routed for human review instead of executing immediately.",
},
{
number: "03",
title: "A reviewer makes the call",
text: "The reviewer sees the request, summary, payload, and risk level in a dedicated inbox.",
},
{
number: "04",
title: "The decision flows back",
text: "The outcome returns to the agent by webhook or polling so work can continue in a controlled way.",
},
];

function fadeUp(delay = 0) {
return {
initial: { opacity: 0, y: 22 },
whileInView: { opacity: 1, y: 0 },
viewport: { once: true, amount: 0.25 },
transition: { duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] },
};
}

function RowCascade({ children, className = "", baseDelay = 0 }) {
return (
<div className={className}>
{Array.isArray(children)
? children.map((child, index) => (
<motion.div key={index} {...fadeUp(baseDelay + index * 0.15)}>
{child}
</motion.div>
))
: children}
</div>
);
}

function StepCard({ step }) {
return (
<motion.div {...fadeUp(0)} className="rounded-[28px] border border-[#ddd8f3] bg-white p-6">
<div className="text-sm font-medium" style={{ color: accent.primary }}>{step.number}</div>
<h3 className="mt-2 text-xl font-semibold tracking-[-0.03em] text-black">{step.title}</h3>
<p className="mt-3 text-[15px] leading-7 text-neutral-600">{step.text}</p>
</motion.div>
);
}

export default function StacksonaGateLandingPage() {
return (
<div className="min-h-screen bg-[#f6f5f2] text-[#111111] antialiased">
<header className="sticky top-0 z-50 border-b border-black/5 bg-[#f6f5f2]/90 backdrop-blur-xl">
<div className="mx-auto flex max-w-7xl items-center justify-between px-8 py-6 lg:px-10">
<motion.a {...fadeUp(0)} href="#top" className="flex items-center gap-3">
<img src={logoSrc} alt="Stacksona" className="h-11 w-11 object-contain" />
<div>
<div className="text-[15px] font-medium text-neutral-500">Stacksona Gate</div>
<div className="text-[28px] font-semibold tracking-[-0.06em] text-black">Stacksona</div>
</div>
</motion.a>

<div className="hidden items-center gap-3 md:flex">
{[
["Product", "#product"],
["How it works", "#how"],
["Coming soon", "#availability"],
].map(([label, href], index) => (
<motion.a
key={label}
{...fadeUp(index * 0.15)}
href={href}
className="rounded-xl px-4 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-white hover:text-black"
>
{label}
</motion.a>
))}
<motion.a
{...fadeUp(0.45)}
href="#notify"
className="rounded-xl px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-95"
style={{ backgroundColor: accent.primary }}
>
Register to be notified
</motion.a>
</div>
</div>
</header>

<main id="top">
<section className="mx-auto max-w-7xl px-8 pb-18 pt-10 lg:px-10 lg:pb-24 lg:pt-16">
<div className="grid items-center gap-16 lg:grid-cols-[0.95fr_1.05fr]">
<div className="max-w-2xl">
<motion.div
{...fadeUp(0)}
className="mb-5 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[12px] font-medium"
style={{ borderColor: accent.line, color: accent.primary, backgroundColor: "#faf9ff" }}
>
<span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: accent.secondary }} />
Human review for AI agent tasks
</motion.div>

<motion.h1 {...fadeUp(0.1)} className="text-5xl font-semibold leading-[0.96] tracking-[-0.07em] text-black md:text-7xl">
Keep AI moving fast,
<br />
with people in the loop
<br />
when it matters.
</motion.h1>

<motion.p {...fadeUp(0.2)} className="mt-6 max-w-xl text-lg leading-8 text-neutral-600">
Stacksona Gate is a self hosted human in the loop inbox for AI agent tasks. It logs agent task activity, routes guarded actions to human review, returns decisions by polling or webhook, and keeps audit records that can be exported.
</motion.p>

<div className="mt-8 space-y-4">
{bullets.map((bullet, index) => (
<motion.div key={bullet} {...fadeUp(0.3 + index * 0.08)} className="flex items-start gap-3 text-[15px] text-neutral-700">
<div className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full text-[11px] text-white" style={{ backgroundColor: accent.primary }}>
✓
</div>
<span>{bullet}</span>
</motion.div>
))}
</div>

<div className="mt-10 flex flex-wrap gap-3">
<motion.a
{...fadeUp(0.55)}
href="#notify"
className="rounded-xl px-6 py-3.5 text-sm font-medium text-white transition hover:opacity-95"
style={{ backgroundColor: accent.primary }}
>
Register to be notified →
</motion.a>
<motion.a
{...fadeUp(0.7)}
href="#how"
className="rounded-xl border bg-white px-6 py-3.5 text-sm font-medium text-neutral-700 transition hover:bg-[#faf9ff]"
style={{ borderColor: accent.line }}
>
See how it works
</motion.a>
</div>
</div>

<motion.div {...fadeUp(0.15)} className="relative">
<div className="absolute inset-0 -z-10 rounded-[44px] bg-[linear-gradient(to_right,rgba(93,86,200,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(93,86,200,0.06)_1px,transparent_1px)] bg-[size:56px_56px] opacity-70" />
<div className="overflow-hidden rounded-[34px] border border-[#ddd8f3] bg-white p-3 shadow-[0_20px_60px_rgba(93,86,200,0.12)]">
<img src={screenshotSrc} alt="Stacksona Gate inbox" className="w-full rounded-[24px] object-cover" />
</div>
<motion.div
{...fadeUp(0.45)}
className="absolute -bottom-6 left-6 max-w-[280px] rounded-[24px] border border-[#ddd8f3] bg-[#faf9ff] p-5 shadow-[0_14px_36px_rgba(93,86,200,0.14)]"
>
<div className="text-[11px] font-medium uppercase tracking-[0.14em] text-neutral-500">What reviewers see</div>
<div className="mt-2 text-lg font-semibold tracking-[-0.03em] text-black">One place to review, decide, and move work forward.</div>
</motion.div>
</motion.div>
</div>
</section>

<section id="product" className="mx-auto max-w-7xl px-8 py-16 lg:px-10">
<RowCascade className="grid gap-6 md:grid-cols-3">
{pillars.map((item) => (
<div key={item.title} className="rounded-[28px] border border-[#ddd8f3] bg-[#faf9ff] p-7">
<h3 className="text-2xl font-semibold tracking-[-0.04em] text-black">{item.title}</h3>
<p className="mt-4 text-[15px] leading-7 text-neutral-600">{item.text}</p>
</div>
))}
</RowCascade>
</section>

<section id="how" className="mx-auto max-w-7xl px-8 py-16 lg:px-10">
<motion.div {...fadeUp(0)} className="max-w-3xl">
<div className="text-sm font-medium uppercase tracking-[0.16em]" style={{ color: accent.primary }}>How it works</div>
<h2 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-black md:text-5xl">
A simple control point between an agent and the actions that need review.
</h2>
</motion.div>

<div className="mt-10 space-y-6">
{steps.map((step) => (
<StepCard key={step.number} step={step} />
))}
</div>
</section>

<section id="availability" className="mx-auto max-w-7xl px-8 py-16 lg:px-10">
<motion.div {...fadeUp(0)} className="rounded-[36px] border border-[#ddd8f3] bg-white p-8 md:p-12">
<div className="max-w-3xl">
<div className="text-sm font-medium uppercase tracking-[0.16em]" style={{ color: accent.primary }}>Coming soon</div>
<h2 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-black md:text-5xl">
Azure Marketplace and Google Cloud Marketplace availability is planned.
</h2>
<p className="mt-5 text-lg leading-8 text-neutral-600">
The current documentation includes deployment guidance for Azure Kubernetes Service and Google Kubernetes Engine, along with marketplace packaging documentation. Register to be notified when marketplace availability opens up.
</p>
</div>
</motion.div>
</section>

<section className="mx-auto max-w-7xl px-8 py-16 lg:px-10">
<RowCascade className="grid gap-6 md:grid-cols-2">
{[
{
title: "Designed around review",
text: "Stacksona Gate focuses on human review, agent API access, tools and approval rules, webhook delivery for decisions, tenant scoped human access, and audit exports.",
},
{
title: "Made for clear operations",
text: "The product is built around a reviewer inbox, guarded actions, and a clean decision loop back to the agent.",
},
].map((item) => (
<div key={item.title} className="rounded-[28px] border border-[#ddd8f3] bg-[#faf9ff] p-7">
<h3 className="text-2xl font-semibold tracking-[-0.04em] text-black">{item.title}</h3>
<p className="mt-4 text-[15px] leading-7 text-neutral-600">{item.text}</p>
</div>
))}
</RowCascade>
</section>

<section id="notify" className="mx-auto max-w-7xl px-8 pb-20 pt-8 lg:px-10">
<motion.div
{...fadeUp(0)}
className="flex flex-col items-start justify-between gap-8 rounded-[36px] p-8 text-white md:flex-row md:items-center md:p-10"
style={{ background: `linear-gradient(135deg, ${accent.soft} 0%, ${accent.primary} 55%, ${accent.blue} 100%)` }}
>
<div className="max-w-2xl">
<h2 className="text-4xl font-semibold tracking-[-0.05em] md:text-5xl">Register to be notified.</h2>
<p className="mt-4 text-lg leading-8 text-white/85">
Get updates on Stacksona Gate and upcoming Azure Marketplace and Google Cloud Marketplace availability.
</p>
</div>

<div className="flex w-full max-w-[460px] flex-col gap-3 sm:flex-row">
<input
type="email"
placeholder="Work email"
className="min-w-0 flex-1 rounded-xl border border-white/25 bg-white/95 px-4 py-3.5 text-sm font-medium text-neutral-900 outline-none placeholder:text-neutral-500"
/>
<button className="rounded-xl bg-neutral-950 px-6 py-3.5 text-sm font-medium text-white transition hover:bg-black">
Notify me
</button>
</div>
</motion.div>
</section>
</main>
</div>
);
}