Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip

This commit is contained in:
marko-kraemer 2025-04-14 14:00:46 +01:00
parent 94a48e1d02
commit efb87b547b
13 changed files with 757 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 B

BIN
frontend/public/holo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 MiB

17
frontend/public/kortix-logo-white.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="1804" height="327" viewBox="0 0 1804 327" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_27_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="392" height="327">
<path d="M391.396 0H0V327H391.396V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_27_2)">
<path d="M132.025 202.15L111.687 214.376L38.6653 258.138C34.0677 260.843 31.255 265.819 31.255 271.175V311.854C31.255 320.238 38.1244 327.054 46.5084 327.054H87.2924C92.6473 327.054 97.6236 324.241 100.382 319.697L172.863 199.662L173.133 199.337L176.758 193.279L179.624 186.896C182.545 179.431 184.114 171.641 184.114 163.527C184.114 155.413 182.653 147.677 179.516 139.888L176.703 133.775L100.382 7.35682C97.6236 2.75881 92.6473 0 87.2924 0H46.5625C38.1785 0 31.3091 6.76179 31.3091 15.2005V55.8794C31.3091 61.1806 34.1218 66.1573 38.7194 68.9161L111.687 112.624L132.241 124.958L134.513 126.31L140.625 130.043C144.412 132.369 147.765 135.182 150.632 138.319C154.851 143.079 151.551 150.653 145.169 151.085L113.634 153.087C96.8122 154.169 80.3688 147.948 68.4149 136.101L51.8092 119.548C47.8607 115.654 41.5321 115.654 37.6917 119.548L2.96583 153.898C-0.982751 157.793 -0.982751 164.122 2.96583 167.963L37.5835 202.421C41.5321 206.316 47.8607 206.316 51.7011 202.421L68.3067 185.868C80.2607 173.967 96.65 167.8 113.526 168.882L148.793 171.1C154.472 171.425 158.042 177.592 155.176 182.46C151.768 188.248 146.792 193.333 140.571 197.066L134.351 200.798" fill="white"/>
<path d="M257.285 126.202L251.173 129.934C247.387 132.261 244.033 135.073 241.166 138.211C236.947 142.971 240.247 150.544 246.629 150.977L278.164 152.979C294.986 154.061 311.429 147.84 323.383 135.993L339.989 119.44C343.938 115.545 350.266 115.545 354.107 119.44L388.724 153.898C392.673 157.793 392.673 164.122 388.724 167.963L354.107 202.421C350.158 206.316 343.829 206.316 339.989 202.421L323.383 185.868C311.429 173.967 295.04 167.8 278.164 168.882L242.897 171.1C237.218 171.425 233.648 177.592 236.515 182.46C239.922 188.248 244.899 193.333 251.119 197.066L257.339 200.798L259.611 202.15L279.949 214.376L352.971 258.138C357.568 260.843 360.381 265.819 360.381 271.175V311.854C360.381 320.238 353.512 327.054 345.128 327.054H304.344C298.989 327.054 294.012 324.241 291.254 319.697L218.773 199.662L218.503 199.337L214.878 193.279L212.012 186.896C209.091 179.431 207.522 171.641 207.522 163.527C207.522 155.413 208.983 147.677 212.12 139.888L214.933 133.775L291.2 7.35682C293.958 2.75881 298.935 0 304.29 0H345.074C353.457 0 360.327 6.76179 360.327 15.2005V55.8794C360.327 61.1806 357.514 66.1573 352.917 68.9161L279.949 112.624L259.395 124.958" fill="white"/>
</g>
<path d="M674.707 48.0338H620.779L525.58 160.117H522.606V48.0338H478.414V291.999H522.606V219.35L549.651 187.435L622.402 291.999H675.572L580.374 157.521L674.707 48.0338Z" fill="white"/>
<path d="M1078.97 257.596C1076.75 257.975 1074.26 258.191 1071.56 258.191C1067.99 258.191 1064.74 257.65 1061.77 256.514C1058.85 255.378 1056.47 253.323 1054.63 250.293C1052.9 247.21 1052.03 242.774 1052.03 236.932V142.375H1088.11V108.999H1052.03V65.1826H1008.92V109.053H955.915C945.421 109.053 936.442 109.324 928.221 115.112C920.107 120.846 914.374 128.96 911.074 139.508H909.181V108.999H867.369V292H910.479V184.406C910.479 176.617 912.264 169.747 915.834 163.796C919.404 157.846 924.272 153.194 930.492 149.84C936.767 146.432 943.204 143.727 951.047 143.078C960.512 142.267 970.195 142.321 982.906 142.321H1008.87V244.072C1008.81 255.486 1011.25 265.061 1016.28 272.688C1021.36 280.316 1028.23 285.941 1036.89 289.62C1045.54 293.19 1055.28 294.813 1066.1 294.488C1072.21 294.326 1077.35 293.785 1081.57 292.811C1085.84 291.838 1089.14 290.972 1091.46 290.215L1084.22 256.514C1083.03 256.839 1081.3 257.163 1078.97 257.596Z" fill="white"/>
<path d="M802.97 118.41C789.88 110.566 774.357 106.617 756.507 106.617C738.657 106.617 723.133 110.566 710.043 118.41C696.954 126.254 686.785 137.289 679.536 151.516C672.397 165.743 668.827 182.295 668.827 201.174C668.827 220.053 672.397 236.606 679.536 250.725C686.785 264.843 696.899 275.879 710.043 283.722C723.133 291.566 738.657 295.515 756.507 295.515C774.357 295.515 789.88 291.566 802.97 283.722C816.06 275.879 826.229 264.843 833.369 250.725C840.617 236.606 844.187 220.053 844.187 201.174C844.187 182.295 840.563 165.688 833.369 151.516C826.229 137.289 816.114 126.254 802.97 118.41ZM795.56 231.359C792.369 240.393 787.555 247.641 781.01 253.051C774.519 258.352 766.405 261.057 756.723 261.057C747.041 261.057 738.549 258.406 731.95 253.051C725.459 247.641 720.537 240.447 717.291 231.359C714.1 222.325 712.531 212.21 712.531 201.12C712.531 190.031 714.1 179.807 717.291 170.719C720.537 161.577 725.459 154.329 731.95 148.919C738.549 143.51 746.825 140.805 756.723 140.805C766.622 140.805 774.519 143.51 781.01 148.919C787.5 154.329 792.369 161.577 795.56 170.719C798.805 179.753 800.428 189.923 800.428 201.12C800.428 212.318 798.805 222.325 795.56 231.359Z" fill="white"/>
<path d="M1340.23 108.996H1294.58L1257.04 176.559L1220.1 108.996H1174.39L1228.7 200.523L1172.93 291.997H1218.69L1257.04 226.11L1295.77 291.997H1341.15L1285.06 200.523L1340.23 108.996Z" fill="white"/>
<path d="M1153.9 108.996H1110.79V291.997H1153.9V108.996Z" fill="white"/>
<path d="M1126.47 33.8222L1106.65 53.636C1103.34 56.9527 1103.34 62.33 1106.65 65.6466L1126.47 85.4603C1129.78 88.777 1135.16 88.777 1138.48 85.4604L1158.29 65.6466C1161.61 62.33 1161.61 56.9527 1158.29 53.636L1138.48 33.8223C1135.16 30.5056 1129.78 30.5056 1126.47 33.8222Z" fill="white"/>
<path d="M1725.1 45.1035V294.198H1679.97V45.1035H1725.1Z" fill="white"/>
<path d="M1480.09 294.198H1431.93L1519.61 45.1035H1575.31L1663.12 294.198H1614.96L1548.44 96.1872H1546.49L1480.09 294.198ZM1481.67 196.53H1613.02V232.775H1481.67V196.53Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

33
frontend/public/kortix-logo.svg Normal file
View File

@ -0,0 +1,33 @@
<svg width="160" height="29" viewBox="0 0 160 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Kortix logo">
<g id="Symbol">
<mask id="mask0_1_721" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="29">
<g id="clippath">
<path id="Vector" d="M34.7136 0H0V29H34.7136V0Z" fill="white"/>
</g>
</mask>
<g mask="url(#mask0_1_721)">
<g id="Group">
<g id="Group_2">
<path id="Vector_2" d="M11.7095 17.9277L9.9057 19.0119L3.42927 22.893C3.0215 23.1328 2.77204 23.5742 2.77204 24.0491V27.6567C2.77204 28.4003 3.3813 29.0048 4.12489 29.0048H7.74209C8.21703 29.0048 8.65839 28.7553 8.90305 28.3524L15.3315 17.707L15.3555 17.6782L15.6769 17.1409L15.9312 16.5749C16.1902 15.9128 16.3294 15.222 16.3294 14.5024C16.3294 13.7828 16.1998 13.0968 15.9216 12.406L15.6721 11.8639L8.90305 0.65244C8.65839 0.244665 8.21703 0 7.74209 0H4.12969C3.3861 0 2.77683 0.599669 2.77683 1.34806V4.95567C2.77683 5.42581 3.0263 5.86716 3.43407 6.11183L9.9057 9.98809L11.7287 11.0819L11.9302 11.2018L12.4723 11.5328C12.8081 11.7391 13.1055 11.9886 13.3598 12.2668C13.734 12.689 13.4414 13.3606 12.8753 13.399L10.0784 13.5765C8.58643 13.6725 7.12803 13.1208 6.06782 12.0701L4.59503 10.6022C4.24482 10.2567 3.68353 10.2567 3.34292 10.6022L0.263021 13.6485C-0.0871855 13.9939 -0.0871855 14.5552 0.263021 14.8958L3.33333 17.9517C3.68353 18.2971 4.24482 18.2971 4.58544 17.9517L6.05822 16.4837C7.11844 15.4283 8.57204 14.8814 10.0688 14.9773L13.1967 15.174C13.7004 15.2028 14.017 15.7497 13.7628 16.1815C13.4605 16.6948 13.0192 17.1457 12.4675 17.4768L11.9158 17.8078" fill="black"/>
<path id="Vector_3" d="M22.8191 11.1922L22.277 11.5232C21.9412 11.7295 21.6437 11.979 21.3895 12.2572C21.0153 12.6794 21.3079 13.351 21.874 13.3894L24.6709 13.5669C26.1628 13.6629 27.6212 13.1112 28.6814 12.0605L30.1542 10.5926C30.5044 10.2471 31.0657 10.2471 31.4063 10.5926L34.4767 13.6485C34.8269 13.9939 34.8269 14.5552 34.4767 14.8958L31.4063 17.9517C31.0561 18.2971 30.4948 18.2971 30.1542 17.9517L28.6814 16.4837C27.6212 15.4283 26.1676 14.8814 24.6709 14.9773L21.543 15.174C21.0393 15.2028 20.7226 15.7497 20.9769 16.1815C21.2791 16.6948 21.7205 17.1457 22.2722 17.4768L22.8239 17.8078L23.0254 17.9277L24.8292 19.0119L31.3056 22.893C31.7134 23.1328 31.9628 23.5742 31.9628 24.0491V27.6567C31.9628 28.4003 31.3536 29.0048 30.61 29.0048H26.9928C26.5178 29.0048 26.0765 28.7553 25.8318 28.3524L19.4034 17.707L19.3794 17.6782L19.058 17.1409L18.8037 16.5749C18.5446 15.9128 18.4055 15.222 18.4055 14.5024C18.4055 13.7828 18.535 13.0968 18.8133 12.406L19.0628 11.8639L25.827 0.65244C26.0717 0.244665 26.513 0 26.988 0H30.6052C31.3488 0 31.958 0.599669 31.958 1.34806V4.95567C31.958 5.42581 31.7086 5.86716 31.3008 6.11183L24.8292 9.98809L23.0062 11.0819" fill="black"/>
</g>
</g>
</g>
</g>
<g id="Wordmark">
<g id="Group_3">
<path id="Vector_4" d="M59.841 4.25983H55.058L46.6147 14.1999H46.3508V4.25983H42.4314V25.8959H46.3508V19.453L48.7495 16.6226L55.202 25.8959H59.9178L51.4744 13.9697L59.841 4.25983Z" fill="black"/>
<path id="Vector_5" d="M95.6958 22.8448C95.4991 22.8784 95.2785 22.8976 95.0386 22.8976C94.722 22.8976 94.4341 22.8496 94.1703 22.7489C93.9112 22.6481 93.7001 22.4658 93.537 22.1972C93.3835 21.9237 93.3068 21.5304 93.3068 21.0122V12.6265H96.5066V9.6665H93.3068V5.78064H89.4833V9.67129H84.7819C83.8512 9.67129 83.0548 9.69528 82.3256 10.2086C81.606 10.7171 81.0975 11.4367 80.8049 12.3722H80.6369V9.6665H76.9286V25.8959H80.7521V16.354C80.7521 15.6632 80.9104 15.0539 81.227 14.5262C81.5436 13.9985 81.9754 13.5859 82.5271 13.2885C83.0836 12.9863 83.6545 12.7464 84.3501 12.6888C85.1896 12.6169 86.0484 12.6217 87.1757 12.6217H89.4785V21.6455C89.4737 22.6577 89.6895 23.5069 90.1357 24.1833C90.5867 24.8597 91.1959 25.3586 91.9635 25.6849C92.7311 26.0015 93.5946 26.1454 94.5541 26.1166C95.0962 26.1022 95.5519 26.0543 95.9261 25.9679C96.3051 25.8816 96.5977 25.8048 96.804 25.7376L96.1612 22.7489C96.0556 22.7777 95.9021 22.8064 95.6958 22.8448Z" fill="black"/>
<path id="Vector_6" d="M71.2169 10.5011C70.0559 9.80553 68.6791 9.45532 67.096 9.45532C65.5128 9.45532 64.136 9.80553 62.975 10.5011C61.8141 11.1968 60.9122 12.1754 60.2693 13.4371C59.6361 14.6988 59.3195 16.1668 59.3195 17.8411C59.3195 19.5154 59.6361 20.9834 60.2693 22.2355C60.9122 23.4876 61.8093 24.4662 62.975 25.1619C64.136 25.8575 65.5128 26.2077 67.096 26.2077C68.6791 26.2077 70.0559 25.8575 71.2169 25.1619C72.3779 24.4662 73.2798 23.4876 73.913 22.2355C74.5559 20.9834 74.8725 19.5154 74.8725 17.8411C74.8725 16.1668 74.5511 14.694 73.913 13.4371C73.2798 12.1754 72.3826 11.1968 71.2169 10.5011ZM70.5597 20.518C70.2766 21.3192 69.8496 21.962 69.2692 22.4418C68.6935 22.9119 67.9739 23.1518 67.1152 23.1518C66.2564 23.1518 65.5032 22.9167 64.918 22.4418C64.3423 21.962 63.9057 21.324 63.6179 20.518C63.3348 19.7169 63.1957 18.8198 63.1957 17.8363C63.1957 16.8528 63.3348 15.9461 63.6179 15.1402C63.9057 14.3294 64.3423 13.6866 64.918 13.2069C65.5032 12.7271 66.2372 12.4873 67.1152 12.4873C67.9931 12.4873 68.6935 12.7271 69.2692 13.2069C69.8449 13.6866 70.2766 14.3294 70.5597 15.1402C70.8475 15.9413 70.9914 16.8432 70.9914 17.8363C70.9914 18.8294 70.8475 19.7169 70.5597 20.518Z" fill="black"/>
<path id="Vector_7" d="M118.868 9.66626H114.819L111.489 15.6582L108.213 9.66626H104.159L108.975 17.7834L104.029 25.8957H108.088L111.489 20.0525L114.924 25.8957H118.949L113.974 17.7834L118.868 9.66626Z" fill="black"/>
<path id="Vector_8" d="M102.341 9.66626H98.5177V25.8957H102.341V9.66626Z" fill="black"/>
</g>
<path id="Vector_9" d="M99.9084 2.99948L98.1512 4.75667C97.8571 5.0508 97.8571 5.52769 98.1512 5.82183L99.9084 7.57901C100.203 7.87315 100.679 7.87315 100.974 7.57901L102.731 5.82183C103.025 5.52769 103.025 5.0508 102.731 4.75667L100.974 2.99949C100.679 2.70535 100.203 2.70535 99.9084 2.99948Z" fill="black"/>
</g>
<g id="AI">
<path id="Vector_10" d="M153.002 4V26.0909H149V4H153.002Z" fill="black"/>
<path id="Vector_11" d="M131.271 26.0909H127L134.777 4H139.717L147.505 26.0909H143.234L137.334 8.53036H137.161L131.271 26.0909ZM131.412 17.4293H143.061V20.6437H131.412V17.4293Z" fill="black"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

11
frontend/public/kortix-symbol.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="124" height="104" viewBox="0 0 124 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_7847)">
<path d="M41.6897 63.8244L35.2679 67.6836L12.2124 81.5056C10.7596 82.3655 9.87527 83.9386 9.87527 85.6165V98.4527C9.87527 101.095 12.044 103.256 14.6969 103.256H27.5827C29.2671 103.256 30.8463 102.375 31.7095 100.928L54.5965 63.0274L54.6808 62.9225L55.8177 61.0138L56.7231 59.0003C57.6495 56.6512 58.1338 54.1763 58.1338 51.6174C58.1338 49.0586 57.6706 46.6046 56.681 44.1506L55.7967 42.221L31.6885 2.32813C30.8252 0.880915 29.2461 0 27.5616 0H14.6969C12.044 0 9.87527 2.13936 9.87527 4.80308V17.6393C9.87527 19.3172 10.7596 20.8903 12.2124 21.7502L35.2468 35.5512L41.7318 39.4524L42.4477 39.8719L44.3848 41.0464C45.5849 41.7805 46.6377 42.6614 47.543 43.6682C48.8695 45.1783 47.8378 47.5694 45.8165 47.6952L35.8574 48.3245C30.5515 48.6601 25.3509 46.7095 21.582 42.9551L16.3392 37.7325C15.097 36.495 13.0967 36.495 11.8755 37.7325L0.92681 48.5971C-0.315447 49.8346 -0.315447 51.8272 0.92681 53.0437L11.8545 63.9293C13.0967 65.1667 15.097 65.1667 16.3182 63.9293L21.5609 58.7067C25.3298 54.9523 30.5094 53.0017 35.8363 53.3373L46.9746 54.0294C48.7642 54.1343 49.9012 56.0849 48.9959 57.616C47.922 59.4408 46.3429 61.0558 44.3848 62.2303L42.4266 63.4049" fill="black"/>
<path d="M81.1892 39.8509L79.2521 41.0255C78.052 41.7596 76.9992 42.6405 76.0938 43.6472C74.7673 45.1574 75.799 47.5484 77.8203 47.6743L87.7795 48.3035C93.0854 48.6391 98.286 46.6885 102.055 42.9341L107.298 37.7115C108.54 36.4741 110.54 36.4741 111.761 37.7115L122.689 48.5971C123.931 49.8346 123.931 51.8272 122.689 53.0437L111.761 63.9293C110.519 65.1667 108.519 65.1667 107.298 63.9293L102.055 58.7067C98.286 54.9523 93.1064 53.0017 87.7795 53.3373L76.6413 54.0294C74.8516 54.1343 73.7146 56.0849 74.62 57.616C75.6938 59.4408 77.2729 61.0558 79.231 62.2303L81.1892 63.4049L81.9051 63.8244L88.3269 67.6836L111.382 81.5056C112.835 82.3655 113.719 83.9386 113.719 85.6165V98.4527C113.719 101.095 111.551 103.256 108.898 103.256H96.012C94.3276 103.256 92.7485 102.375 91.8852 100.928L68.9982 63.0274L68.914 62.9225L67.777 61.0138L66.8716 59.0003C65.9452 56.6512 65.4609 54.1763 65.4609 51.6174C65.4609 49.0586 65.9242 46.6046 66.9137 44.1506L67.7981 42.221L91.9063 2.32813C92.7695 0.880915 94.3487 0 96.0331 0H108.919C111.572 0 113.741 2.13936 113.741 4.80308V17.6393C113.741 19.3172 112.856 20.8903 111.403 21.7502L88.369 35.5512L81.884 39.4524" fill="black"/>
</g>
<defs>
<clipPath id="clip0_5_7847">
<rect width="123.594" height="103.256" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

0
frontend/public/kortex_icon.png → frontend/public/kortix_icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 MiB

After

Width:  |  Height:  |  Size: 4.8 MiB

47
frontend/src/app/components/NavBar.tsx
View File

@ -1,47 +0,0 @@
'use client';
import Link from 'next/link';
import { useEffect, useState } from 'react';
export default function NavBar() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
const isScrolled = window.scrollY > 20;
if (isScrolled !== scrolled) {
setScrolled(isScrolled);
}
};
document.addEventListener('scroll', handleScroll, { passive: true });
return () => {
document.removeEventListener('scroll', handleScroll);
};
}, [scrolled]);
return (
<nav className={`sticky top-0 z-50 transition-all duration-300 ${
scrolled ? 'bg-white/95 backdrop-blur-sm shadow-sm' : 'bg-transparent'
}`}>
<div className="container mx-auto px-4 py-4">
<div className="flex justify-between items-center">
<div className="flex items-center">
<Link href="/" className="text-2xl font-bold text-blue-600">Kortix Suna</Link>
</div>
<div className="hidden md:flex space-x-8">
<Link href="#intro" className="text-gray-700 hover:text-blue-600 transition-all">Intro</Link>
<Link href="#use-cases" className="text-gray-700 hover:text-blue-600 transition-all">Use Cases</Link>
<Link href="#pricing" className="text-gray-700 hover:text-blue-600 transition-all">Pricing</Link>
<Link href="#footer" className="text-gray-700 hover:text-blue-600 transition-all">Contact</Link>
</div>
<div>
<Link href="/dashboard" className="px-5 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-all duration-300">
Get Started
</Link>
</div>
</div>
</div>
</nav>
);
}

139
frontend/src/app/globals.css
View File

@ -4,123 +4,80 @@
@layer base {
:root {
/* Base theme colors */
--background: 210 40% 98%; /* Changed to HSL format to match Tailwind's expectations */
--foreground: 60 2% 23%; /* Updated to match #3c3c3a */
--background-secondary: #ffffff;
--hover-bg: rgba(241,238,231,255);
--icon-color: rgba(60, 60, 58, 0.7);
--background: 0 0% 100%;
--foreground: 0 0% 10%;
--background-secondary: 0 0% 98%;
--hover-bg: 0 0% 96%;
--icon-color: 0 0% 45%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--card-foreground: 0 0% 10%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--popover-foreground: 0 0% 10%;
--primary: 222 82% 53%; /* Updated to match #2562eb */
--primary-foreground: 210 40% 98%;
--primary: 0 0% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 10%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 80%;
--radius: 0.5rem;
--border-color: #e9ebee;
--card-bg: #fefffe;
--card-title: #3c3c3a;
/* Shadow Colors */
--shadow-color: rgba(0, 0, 0, 0.05);
--shadow-color-dark: rgba(0, 0, 0, 0.2);
/* Gradient Colors */
--gradient-start: #faf9f5;
--gradient-end: rgba(250, 249, 245, 0);
--border-color: #e4e4e4;
--card-bg: #ffffff;
--card-title: #000000;
}
.dark {
/* Base theme colors */
--background: 60 5% 15%; /* Updated to match #272724 */
--foreground: 0 0% 94%; /* Updated to match #f0f0f0 */
--background-secondary: #1e1e1c;
--hover-bg: #141413;
--icon-color: rgba(240, 240, 240, 0.6);
--background: 0 0% 9%;
--foreground: 0 0% 98%;
--background-secondary: 0 0% 7%;
--hover-bg: 0 0% 15%;
--icon-color: 0 0% 70%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--card: 0 0% 12%;
--card-foreground: 0 0% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--popover: 0 0% 12%;
--popover-foreground: 0 0% 98%;
--primary: 222 82% 53%; /* Updated to match #2562eb */
--primary-foreground: 222.2 47.4% 11.2%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--secondary: 0 0% 15%;
--secondary-foreground: 0 0% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--muted: 0 0% 15%;
--muted-foreground: 0 0% 65%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--accent: 0 0% 15%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 84% 40%;
--destructive-foreground: 0 0% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--border: 0 0% 20%;
--input: 0 0% 20%;
--ring: 0 0% 28%;
--border-color: #2a2a2a;
--card-bg: #30302e;
--card-title: #c3c1b6;
/* Shadow Colors */
--shadow-color: rgba(0, 0, 0, 0.2);
--shadow-color-dark: rgba(0, 0, 0, 0.3);
/* Gradient Colors */
--gradient-start: #272724;
--gradient-end: rgba(39, 39, 36, 0);
--card-bg: #1a1a1a;
--card-title: #ffffff;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
@layer utilities {
.bg-hover {
background-color: var(--hover-bg);
}
.text-icon {
color: var(--icon-color);
}
.shadow-custom {
box-shadow: 0 2px 10px 0 var(--shadow-color);
}
.dark .shadow-custom {
box-shadow: 0 2px 10px 0 var(--shadow-color-dark);
}
}

9
frontend/src/app/layout.tsx
View File

@ -1,9 +1,12 @@
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Manrope } from 'next/font/google';
import { Providers } from './providers';
const inter = Inter({ subsets: ['latin'] });
const manrope = Manrope({
subsets: ['latin'],
variable: '--font-sans',
});
export const metadata: Metadata = {
title: 'AgentPress',
@ -17,7 +20,7 @@ export default function RootLayout({
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<body className={manrope.className}>
<Providers>{children}</Providers>
</body>
</html>

625
frontend/src/app/page.tsx
View File

@ -1,224 +1,461 @@
'use client'
import Link from 'next/link';
import NavBar from './components/NavBar';
import Image from 'next/image';
import { ArrowRight, Check, Command, Sparkles, Send } from 'lucide-react';
import { useState } from 'react';
import { Input } from '@/components/ui/input';
import NavBar from '@/components/layout/NavBar';
export default function Home() {
const [inputValue, setInputValue] = useState('');
const [isTyping, setIsTyping] = useState(false);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
setIsTyping(true);
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (inputValue.trim()) {
console.log('Input submitted:', inputValue);
// In a real app, you would process the input here
setIsTyping(false);
}
};
export default function Index() {
return (
<div className="min-h-screen bg-white">
{/* Navigation Bar */}
<div className="flex flex-col min-h-screen bg-background text-foreground">
<NavBar />
{/* Hero Section with centered gradient and rounded bottom */}
<section className="relative">
<div className="absolute inset-0 bg-gradient-to-b from-white via-blue-50 to-white" />
<div id="intro" className="relative container mx-auto px-4 py-20 sm:py-32 flex flex-col items-center text-center">
<div className="bg-gradient-to-b from-transparent via-blue-50/50 to-transparent px-8 py-16 rounded-3xl backdrop-blur-sm">
<h1 className="text-4xl sm:text-6xl font-bold text-gray-900 mb-6">
Welcome to <span className="text-blue-600">Kortix Suna</span>
</h1>
<p className="text-xl text-gray-600 max-w-2xl mb-10">
The intelligent platform that transforms how you interact with data, automate workflows, and make decisions.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href="/dashboard" className="px-8 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-all duration-300">
Start Free Trial
</Link>
<Link href="#use-cases" className="px-8 py-3 bg-white text-blue-600 font-medium rounded-lg border border-blue-200 hover:bg-gray-50 transition-all duration-300">
See Examples
</Link>
<div className="w-full mx-auto flex-grow">
{/* Hero Section - Centered, Clean, Impactful */}
<section className="relative py-24 md:py-32 overflow-hidden">
{/* Subtle grid background */}
<div className="absolute inset-0 z-0">
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-gray-50/5 to-transparent"></div>
<div className="absolute inset-0 opacity-[0.02]" style={{
backgroundImage: `linear-gradient(to right, var(--border-color) 1px, transparent 1px),
linear-gradient(to bottom, var(--border-color) 1px, transparent 1px)`,
backgroundSize: '40px 40px'
}}></div>
<div className="absolute inset-0 opacity-[0.01]" style={{
backgroundImage: `linear-gradient(to right, var(--border-color) 1px, transparent 1px),
linear-gradient(to bottom, var(--border-color) 1px, transparent 1px)`,
backgroundSize: '200px 200px'
}}></div>
</div>
<div className="container mx-auto px-4 max-w-5xl">
{/* Centered hero content */}
<div className="text-center">
<div className="inline-flex items-center px-3 py-1.5 bg-foreground/5 border border-foreground/10 rounded-full text-xs font-medium mb-8">
<Sparkles className="h-3.5 w-3.5 mr-1.5" /> THE NEXT GENERATION AI AGENT
</div>
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6">
Meet your AI Employee<br />
</h1>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10">
A personal AI that bridges minds and actions — it doesn't just think, it delivers results.
</p>
{/* Demo input with focused styling */}
<div className="max-w-2xl mx-auto mb-12 relative">
<form onSubmit={handleSubmit} className="relative z-10">
<div className="rounded-xl border-2 border-input bg-background/70 backdrop-blur-sm overflow-hidden group transition-all duration-300 hover:border-foreground/20 focus-within:border-foreground/20 shadow-lg">
<div className="flex items-center">
<Command className="h-5 w-5 text-muted-foreground ml-4" />
<Input
type="text"
placeholder="Ask Suna to do anything..."
className="bg-transparent border-0 py-6 px-3 text-base placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
value={inputValue}
onChange={handleInputChange}
/>
<button
type="submit"
className={`mr-4 p-2 rounded-md transition-all ${inputValue.trim() ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}
disabled={!inputValue.trim()}
>
<Send className="h-4 w-4" />
</button>
</div>
</div>
</form>
{/* Decorative glow effect */}
<div className="absolute bottom-0 inset-x-0 h-16 bg-primary/10 blur-xl rounded-full -z-10"></div>
</div>
{/* CTA Buttons
<div className="flex flex-wrap items-center justify-center gap-4 mb-16">
<Link href="/signup" className="bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-3 rounded-md font-medium transition-colors">
Get Started Free
</Link>
<Link href="/docs" className="text-foreground hover:text-primary px-6 py-3 rounded-md font-medium transition-colors flex items-center">
Learn more <ArrowRight className="ml-2 h-4 w-4" />
</Link>
</div> */}
</div>
</div>
</div>
<div className="absolute bottom-0 w-full h-24 bg-gradient-to-b from-white/0 to-white"></div>
</section>
{/* Use Cases Section */}
<section id="use-cases" className="relative bg-gradient-to-b from-white via-gray-50 to-white py-20">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center text-gray-900 mb-12">Use Cases & Examples</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{
title: "Data Processing",
description: "Process and analyze large datasets with intelligent automation that adapts to your specific needs."
},
{
title: "Workflow Optimization",
description: "Streamline complex workflows with AI-powered optimization that reduces manual steps by up to 80%."
},
{
title: "Decision Support",
description: "Get actionable insights and recommendations based on your data, helping you make better decisions faster."
},
{
title: "Customer Analytics",
description: "Understand customer behavior patterns and preferences to create personalized experiences."
},
{
title: "Predictive Maintenance",
description: "Anticipate equipment failures before they happen, reducing downtime and maintenance costs."
},
{
title: "Supply Chain Optimization",
description: "Improve efficiency and reduce costs by optimizing your entire supply chain with intelligent forecasting."
}
].map((useCase, index) => (
<div key={index} className="bg-white/80 backdrop-blur-sm p-6 rounded-xl border border-gray-100 hover:border-blue-100 transition-all duration-300">
<h3 className="text-xl font-semibold text-gray-900 mb-3">{useCase.title}</h3>
<p className="text-gray-600">{useCase.description}</p>
</div>
))}
</div>
</div>
</section>
{/* Pricing Section */}
<section id="pricing" className="relative bg-gradient-to-b from-white via-blue-50 to-white py-20">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center text-gray-900 mb-12">Pricing Plans</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
{[
{
name: "Starter",
price: "$49",
period: "per month",
description: "Perfect for individuals and small teams just getting started.",
features: [
"Up to 5 users",
"10GB storage",
"Basic analytics",
"Standard support"
],
cta: "Start with Starter",
featured: false
},
{
name: "Professional",
price: "$99",
period: "per month",
description: "Ideal for growing businesses with more advanced needs.",
features: [
"Up to 20 users",
"50GB storage",
"Advanced analytics",
"Priority support",
"Workflow automation"
],
cta: "Choose Professional",
featured: true
},
{
name: "Enterprise",
price: "Custom",
period: "pricing",
description: "Tailored solutions for large organizations with complex requirements.",
features: [
"Unlimited users",
"Unlimited storage",
"Custom integrations",
"Dedicated support",
"Advanced security",
"On-premise options"
],
cta: "Contact Sales",
featured: false
}
].map((plan, index) => (
<div key={index} className={`${
plan.featured
? 'bg-gradient-to-b from-blue-600 to-blue-700 text-white border-2 border-blue-300'
: 'bg-white/80 backdrop-blur-sm text-gray-900 border border-gray-100'
} p-8 rounded-xl flex flex-col transition-all duration-300 ${
plan.featured ? 'translate-y-[-8px]' : 'hover:translate-y-[-4px]'
}`}>
<h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
<div className="mb-4">
<span className="text-3xl font-bold">{plan.price}</span>
<span className={`${plan.featured ? 'text-blue-100' : 'text-gray-500'}`}> {plan.period}</span>
</section>
{/* Trusted By / Social Proof Section */}
<section className="py-12 border-y border-input">
<div className="container mx-auto px-4">
<p className="text-center text-sm text-muted-foreground uppercase tracking-wider mb-8">Trusted by innovative teams</p>
<div className="flex flex-wrap justify-center items-center gap-x-12 gap-y-8">
{['Notion', 'Figma', 'Linear', 'Vercel', 'Stripe', 'Loom'].map((company, i) => (
<div key={i} className="grayscale opacity-70 hover:opacity-100 hover:grayscale-0 transition-all">
<div className="h-8 flex items-center">
<span className="text-lg font-medium">{company}</span>
</div>
</div>
))}
</div>
</div>
</section>
{/* Key Features Section */}
<section className="py-24 md:py-32">
<div className="container mx-auto px-4 max-w-7xl">
<div className="text-center mb-20">
<div className="inline-block px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full mb-4">FEATURES</div>
<h2 className="text-3xl md:text-5xl font-bold mb-6">Empower Your Workflow with AI</h2>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
From research and content creation to data analysis, Suna handles it all with remarkable precision.
</p>
</div>
{/* Feature Cards with simpler, cleaner design */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[
{
title: "Research & Analysis",
description: "Turn complex data into clear insights and actionable recommendations.",
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
)
},
{
title: "Content Creation",
description: "Generate high-quality, context-aware content tailored to your needs.",
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M5 12H19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
)
},
{
title: "Task Automation",
description: "Let Suna handle repetitive tasks while you focus on what matters.",
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.7519 11.1679L11.5547 9.03647M11.5547 9.03647L12.6953 5.50397M11.5547 9.03647L9.24723 13.1219M7.1884 15.9681L11.5547 14.5753M11.5547 14.5753L15.9149 15.9898M11.5547 14.5753L10.4141 18.1078M19.2256 7.33163L15.9089 2.75L8.28113 2.75L4.96447 7.33163L8.28113 11.9133L15.9089 11.9133L19.2256 7.33163ZM15.9089 21.25L8.28113 21.25L4.96447 16.6684L8.28113 12.0867L15.9089 12.0867L19.2256 16.6684L15.9089 21.25Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
)
}
].map((feature, i) => (
<div key={i} className="group bg-background border border-input rounded-xl p-8 hover:shadow-md transition-all duration-300">
<div className="h-12 w-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary mb-6">
{feature.icon}
</div>
<h3 className="text-xl font-semibold mb-4 group-hover:text-primary transition-colors">{feature.title}</h3>
<p className="text-muted-foreground">{feature.description}</p>
</div>
))}
</div>
{/* Demo Feature - AI Agent Chat */}
<div className="mt-24 bg-muted/30 rounded-xl border border-input overflow-hidden p-6 md:p-8">
<div className="max-w-4xl mx-auto">
<div className="rounded-lg bg-chat p-4 md:p-6 mb-6 bg-primary/5">
<div className="flex items-start gap-4 mb-6">
<div className="h-8 w-8 bg-primary/20 rounded-full flex items-center justify-center text-primary shrink-0">S</div>
<div>
<div className="bg-background rounded-lg p-4 shadow-sm">
<p className="text-sm text-muted-foreground mb-2">I need help planning a trip to Japan in April.</p>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div className="h-8 w-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground shrink-0">AI</div>
<div>
<div className="bg-background rounded-lg p-4 shadow-sm">
<p className="font-medium mb-2">I'll help plan your Japan trip in April</p>
<p className="text-sm text-muted-foreground">I'll create a detailed itinerary considering weather, cherry blossom season, popular attractions, and local events. Would you like to focus on specific regions or activities?</p>
</div>
</div>
</div>
</div>
<p className={`${plan.featured ? 'text-blue-100' : 'text-gray-600'} mb-6`}>{plan.description}</p>
<ul className="mb-8 flex-grow">
{plan.features.map((feature, i) => (
<li key={i} className="flex items-center mb-3">
<svg className={`h-5 w-5 ${plan.featured ? 'text-blue-300' : 'text-blue-500'} mr-2`} fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
{feature}
</li>
))}
</ul>
<button className={`w-full py-3 rounded-lg font-medium transition-all duration-300 ${
plan.featured
? 'bg-white text-blue-600 hover:bg-gray-100'
: 'bg-blue-600 text-white hover:bg-blue-700'
}`}>
{plan.cta}
</button>
</div>
))}
</div>
</div>
</div>
</section>
{/* CTA Section */}
<section className="container mx-auto px-4 py-16 sm:py-24">
<div className="bg-gradient-to-r from-blue-600 via-blue-700 to-blue-600 rounded-2xl p-8 sm:p-12 text-center">
<h2 className="text-3xl font-bold text-white mb-6">Ready to transform your workflow?</h2>
<p className="text-blue-100 max-w-2xl mx-auto mb-8">
Join thousands of satisfied users who have revolutionized their processes with Kortix Suna.
</p>
<Link href="/dashboard" className="inline-block px-8 py-3 bg-white text-blue-600 font-medium rounded-lg hover:bg-gray-100 transition-all duration-300">
Start Your Free Trial
</Link>
</div>
</section>
</section>
{/* How It Works - Simplified Step Process */}
<section className="py-24 bg-muted/20 border-y border-input">
<div className="container mx-auto px-4 max-w-7xl">
<div className="text-center mb-20">
<div className="inline-block px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full mb-4">HOW IT WORKS</div>
<h2 className="text-3xl md:text-5xl font-bold mb-6">Simple. Seamless. Smart.</h2>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
From initial request to completed task, Suna streamlines your workflow with intelligent automation.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-16 relative">
{/* Line connecting steps */}
<div className="hidden md:block absolute top-20 left-[calc(16.67%+1rem)] right-[calc(16.67%+1rem)] h-[2px] bg-muted"></div>
{[
{
step: "01",
title: "Request",
description: "Make a natural language request describing what you need done."
},
{
step: "02",
title: "Process",
description: "Suna understands context, gathers information, and plans execution."
},
{
step: "03",
title: "Deliver",
description: "Receive completed tasks with full documentation of process and results."
}
].map((step, i) => (
<div key={i} className="relative">
<div className="flex flex-col items-center">
<div className="bg-primary text-primary-foreground h-12 w-12 rounded-full flex items-center justify-center text-base font-medium mb-6 z-10 shadow-sm">
{step.step}
</div>
<h3 className="text-xl font-semibold mb-4">{step.title}</h3>
<p className="text-muted-foreground text-center">{step.description}</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* Pricing Section - More Minimal and Clean */}
<section className="py-24 md:py-32">
<div className="container mx-auto px-4 max-w-7xl">
<div className="text-center mb-20">
<div className="inline-block px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full mb-4">PRICING</div>
<h2 className="text-3xl md:text-5xl font-bold mb-6">Pricing that scales with you</h2>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
Choose the plan that works best for your needs.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
{/* Free Plan */}
<div className="bg-background border border-input rounded-xl p-8 flex flex-col hover:shadow-md transition-all duration-300">
<div className="mb-8">
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider mb-2">Free</h3>
<div className="flex items-baseline">
<span className="text-4xl font-bold">$0</span>
<span className="text-muted-foreground ml-2">/month</span>
</div>
</div>
<ul className="space-y-4 mb-8 flex-grow">
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>5 agent requests per day</span>
</li>
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Access to basic AI capabilities</span>
</li>
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Community support</span>
</li>
</ul>
<Link href="/signup" className="w-full bg-background border border-input text-foreground hover:bg-muted px-6 py-3 rounded-md font-medium transition-colors text-center">
Get Started
</Link>
</div>
{/* Personal Plan */}
<div className="bg-background border border-input rounded-xl p-8 flex flex-col hover:shadow-md transition-all duration-300">
<div className="mb-8">
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider mb-2">Personal</h3>
<div className="flex items-baseline">
<span className="text-4xl font-bold">$12</span>
<span className="text-muted-foreground ml-2">/month</span>
</div>
</div>
<ul className="space-y-4 mb-8 flex-grow">
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Unlimited agent requests</span>
</li>
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Access to all core AI capabilities</span>
</li>
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Basic integrations with popular tools</span>
</li>
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Email support within 24 hours</span>
</li>
</ul>
<Link href="/signup" className="w-full bg-background border border-primary text-primary hover:bg-primary hover:text-primary-foreground px-6 py-3 rounded-md font-medium transition-colors text-center">
Get Started
</Link>
</div>
{/* Business Plan */}
<div className="bg-background border-2 border-primary rounded-xl p-8 flex flex-col relative overflow-hidden shadow-md">
<div className="absolute top-0 right-0 bg-primary text-primary-foreground px-3 py-1 text-xs font-medium rounded-bl-md">Popular</div>
<div className="mb-8">
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider mb-2">Business</h3>
<div className="flex items-baseline">
<span className="text-4xl font-bold">$24</span>
<span className="text-muted-foreground ml-2">/month</span>
</div>
</div>
<ul className="space-y-4 mb-8 flex-grow">
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Unlimited agent operation hours</span>
</li>
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Advanced AI capabilities and customization</span>
</li>
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Full integration suite with API access</span>
</li>
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Priority support with 4-hour response time</span>
</li>
<li className="flex items-start">
<Check className="h-5 w-5 text-primary mr-3 shrink-0" />
<span>Multi-user access with team management</span>
</li>
</ul>
<Link href="/signup" className="w-full bg-primary text-primary-foreground px-6 py-3 rounded-md font-medium hover:bg-primary/90 transition-colors text-center">
Get Started
</Link>
</div>
</div>
</div>
</section>
{/* FAQ Section */}
<section className="py-24 border-t border-input">
<div className="container mx-auto px-4 max-w-4xl">
<div className="text-center mb-16">
<div className="inline-block px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full mb-4">FAQ</div>
<h2 className="text-3xl md:text-5xl font-bold">Frequently Asked Questions</h2>
</div>
<div className="space-y-8">
{[
{
question: "What is Suna?",
answer: "Suna is an AI agent designed to help streamline your workflow by handling various tasks from research and content creation to data analysis and more."
},
{
question: "How does it work?",
answer: "Simply describe what you need in natural language. Suna understands your request, gathers relevant information, and delivers completed tasks with full documentation."
},
{
question: "Is my data secure?",
answer: "Yes. We prioritize data security and privacy. All data is encrypted and we never share your information with third parties without your explicit permission."
},
{
question: "Can Suna integrate with other tools?",
answer: "Yes. Suna integrates with popular productivity tools, communication platforms, and data sources to provide a seamless workflow experience."
}
].map((faq, i) => (
<div key={i} className="border-b border-input pb-8">
<h3 className="text-xl font-semibold mb-4">{faq.question}</h3>
<p className="text-muted-foreground">{faq.answer}</p>
</div>
))}
</div>
</div>
</section>
{/* Final CTA Section */}
<section className="py-20 bg-primary text-primary-foreground">
<div className="container mx-auto px-4 text-center">
<h2 className="text-3xl md:text-4xl font-bold mb-6">Automate.<br />Simplify. Thrive.</h2>
<Link href="/signup" className="inline-flex items-center bg-background text-foreground hover:bg-background/90 px-6 py-3 rounded-md font-medium transition-colors">
Get Started Free
</Link>
</div>
</section>
</div>
{/* Footer */}
<footer id="footer" className="bg-gradient-to-b from-gray-900 to-gray-950 text-white pt-12 pb-6">
<footer className="border-t border-input py-12 bg-background">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<div className="grid grid-cols-2 md:grid-cols-5 gap-8">
<div>
<h3 className="text-xl font-bold mb-4">Kortix Suna</h3>
<p className="text-gray-400">Intelligent solutions for modern businesses.</p>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Product</h4>
<h3 className="font-semibold mb-4">Product</h3>
<ul className="space-y-2">
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">Features</Link></li>
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">Integrations</Link></li>
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">Documentation</Link></li>
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">API</Link></li>
<li><Link href="/features" className="text-sm text-muted-foreground hover:text-foreground">Features</Link></li>
<li><Link href="/pricing" className="text-sm text-muted-foreground hover:text-foreground">Pricing</Link></li>
<li><Link href="/roadmap" className="text-sm text-muted-foreground hover:text-foreground">Roadmap</Link></li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Company</h4>
<h3 className="font-semibold mb-4">Resources</h3>
<ul className="space-y-2">
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">About Us</Link></li>
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">Careers</Link></li>
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">Blog</Link></li>
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">Press</Link></li>
<li><Link href="/docs" className="text-sm text-muted-foreground hover:text-foreground">Documentation</Link></li>
<li><Link href="/guides" className="text-sm text-muted-foreground hover:text-foreground">Guides</Link></li>
<li><Link href="/api" className="text-sm text-muted-foreground hover:text-foreground">API</Link></li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Contact</h4>
<h3 className="font-semibold mb-4">Company</h3>
<ul className="space-y-2">
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">Support</Link></li>
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">Sales</Link></li>
<li><Link href="#" className="text-gray-400 hover:text-white transition-all">Partnerships</Link></li>
<li><Link href="/about" className="text-sm text-muted-foreground hover:text-foreground">About</Link></li>
<li><Link href="/blog" className="text-sm text-muted-foreground hover:text-foreground">Blog</Link></li>
<li><Link href="/careers" className="text-sm text-muted-foreground hover:text-foreground">Careers</Link></li>
</ul>
</div>
</div>
<div className="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center">
<div className="text-gray-500 mb-4 md:mb-0">
© 2023 Kortix Suna. All rights reserved.
<div>
<h3 className="font-semibold mb-4">Legal</h3>
<ul className="space-y-2">
<li><Link href="/privacy" className="text-sm text-muted-foreground hover:text-foreground">Privacy</Link></li>
<li><Link href="/terms" className="text-sm text-muted-foreground hover:text-foreground">Terms</Link></li>
</ul>
</div>
<div className="flex gap-6">
<Link href="#" className="text-gray-500 hover:text-white transition-all">Terms</Link>
<Link href="#" className="text-gray-500 hover:text-white transition-all">Privacy</Link>
<Link href="#" className="text-gray-500 hover:text-white transition-all">Cookies</Link>
<div>
<div className="flex items-center space-x-2 mb-4">
<svg viewBox="0 0 24 24" className="w-6 h-6" fill="currentColor">
<path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.73l7.46 3.73L12 12.2 4.54 8.46 12 4.73zM4 9.54l7 3.5v5.92l-7-3.5V9.54zm16 0v5.92l-7 3.5v-5.92l7-3.5z" />
</svg>
<span className="font-semibold">Suna</span>
</div>
<p className="text-sm text-muted-foreground">
© {new Date().getFullYear()} Suna AI.<br />All rights reserved.
</p>
</div>
</div>
</div>
</footer>
</div>
)
);
}

1
frontend/src/components/layout/DashboardLayout.tsx
View File

@ -22,6 +22,7 @@ import { getProjects, getThreads } from "@/lib/api";
import { useToolsPanel } from "@/lib/hooks/use-tools-panel";
import UserAccountPanel from "@/components/dashboard/user-account-panel";
import {
DropdownMenu,
DropdownMenuContent,

177
frontend/src/components/layout/NavBar.tsx Normal file
View File

@ -0,0 +1,177 @@
'use client';
import Link from 'next/link';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import { useTheme } from 'next-themes';
import { Github, Menu, X } from 'lucide-react';
export default function NavBar() {
const [scrolled, setScrolled] = useState(false);
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
// Only show UI after mount to prevent hydration mismatch
useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
const handleScroll = () => {
const isScrolled = window.scrollY > 20;
if (isScrolled !== scrolled) {
setScrolled(isScrolled);
}
};
document.addEventListener('scroll', handleScroll, { passive: true });
return () => {
document.removeEventListener('scroll', handleScroll);
};
}, [scrolled]);
return (
<nav className={`sticky top-0 z-50 transition-all duration-300 ${
scrolled ? 'bg-background/90 backdrop-blur-md border-b border-border shadow-custom' : 'bg-transparent'
}`}>
<div className="container mx-auto px-4 py-3">
<div className="flex items-center justify-between">
{/* Logo and Brand */}
<div className="flex items-center">
<Link href="/" className="flex items-center">
<div className="relative w-7 h-7 mr-2.5">
<Image
src="/kortix-symbol.svg"
alt="Suna Logo"
width={28}
height={28}
className={`${theme === 'dark' ? 'invert' : ''}`}
/>
</div>
<span className="font-semibold text-lg">Suna</span>
</Link>
</div>
{/* Mobile menu button */}
<div className="md:hidden">
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="p-2 text-foreground"
aria-label="Toggle menu"
>
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-2">
{/* GitHub Star Button */}
<Link
href="https://github.com/yourusername/suna"
target="_blank"
rel="noopener noreferrer"
className="flex items-center px-3 py-1.5 rounded-lg bg-muted/80 hover:bg-muted transition-colors"
>
<Github size={18} className="mr-1.5" />
<span className="font-medium text-sm">80.7K</span>
</Link>
<Link href="/pricing" className="px-4 py-1.5 text-sm font-medium rounded-md hover:bg-muted/50 transition-colors">
Pricing
</Link>
<Link href="/docs" className="px-4 py-1.5 text-sm font-medium rounded-md hover:bg-muted/50 transition-colors">
Docs
</Link>
{/* Divider */}
<div className="h-6 w-px bg-border mx-1"></div>
{mounted && (
<button
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
className="p-2 rounded-md text-foreground hover:bg-muted/80 transition-colors"
aria-label="Toggle theme"
>
{theme === 'dark' ? (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
)}
</button>
)}
<Link href="/login" className="px-4 py-1.5 text-sm font-medium rounded-md text-foreground hover:text-primary transition-colors">
Sign in
</Link>
<Link href="/signup" className="px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">
Get Started
</Link>
</div>
</div>
{/* Mobile menu */}
{mobileMenuOpen && (
<div className="md:hidden py-4 border-t border-border mt-3 space-y-3">
<Link
href="/pricing"
className="block px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
onClick={() => setMobileMenuOpen(false)}
>
Pricing
</Link>
<Link
href="/docs"
className="block px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
onClick={() => setMobileMenuOpen(false)}
>
Docs
</Link>
<Link
href="https://github.com/yourusername/suna"
target="_blank"
rel="noopener noreferrer"
className="block px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
onClick={() => setMobileMenuOpen(false)}
>
<span className="flex items-center">
<Github size={18} className="mr-2" />
<span>GitHub</span>
</span>
</Link>
<div className="border-t border-border pt-3 mt-3 flex flex-col space-y-3">
<Link
href="/login"
className="block px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
onClick={() => setMobileMenuOpen(false)}
>
Sign in
</Link>
<Link
href="/signup"
className="block px-3 py-2 rounded-md bg-primary text-primary-foreground text-center"
onClick={() => setMobileMenuOpen(false)}
>
Get Started
</Link>
</div>
</div>
)}
</div>
</nav>
);
}

33
frontend/src/hooks/use-media-query.ts Normal file
View File

@ -0,0 +1,33 @@
"use client";
import { useEffect, useState } from "react";
export function useMediaQuery(query: string) {
const [value, setValue] = useState(false);
useEffect(() => {
// Handle initial check and subsequent changes
function checkQuery() {
const result = window.matchMedia(query);
setValue(result.matches);
}
// Check immediately
checkQuery();
// Add resize listener
window.addEventListener("resize", checkQuery);
// Add media query change listener
const mediaQuery = window.matchMedia(query);
mediaQuery.addEventListener("change", checkQuery);
// Cleanup
return () => {
window.removeEventListener("resize", checkQuery);
mediaQuery.removeEventListener("change", checkQuery);
};
}, [query]);
return value;
}