feat: add features block variants and chart component
- Introduce new features block variants (Features, Features2, Features4, Features5, Features6, Features7, Features8, Features9) - Add Recharts and Dotted Map libraries for advanced charting and visualization - Create a new chart component with support for light and dark themes - Update features page to include all new feature block components - Add reference links to NSUI design system for each feature block - Enhance feature sections with responsive layouts and modern design patterns
This commit is contained in:
javayhu
parent
8af6e89675
commit
76748cf0b2
@ -43,6 +43,7 @@
|
||||
"date-fns": "^4.1.0",
|
||||
"deepmerge": "^4.3.1",
|
||||
"dotenv": "^16.4.7",
|
||||
"dotted-map": "^2.2.3",
|
||||
"drizzle-orm": "^0.39.3",
|
||||
"framer-motion": "^12.4.7",
|
||||
"geist": "^1.3.1",
|
||||
@ -58,6 +59,7 @@
|
||||
"react-dom": "^19.0.0",
|
||||
"react-hook-form": "^7.54.2",
|
||||
"react-remove-scroll": "^2.6.3",
|
||||
"recharts": "^2.15.1",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-pretty-code": "^0.14.0",
|
||||
"rehype-slug": "^6.0.0",
|
||||
|
||||
323
pnpm-lock.yaml
generated
323
pnpm-lock.yaml
generated
@ -107,6 +107,9 @@ importers:
|
||||
dotenv:
|
||||
specifier: ^16.4.7
|
||||
version: 16.4.7
|
||||
dotted-map:
|
||||
specifier: ^2.2.3
|
||||
version: 2.2.3
|
||||
drizzle-orm:
|
||||
specifier: ^0.39.3
|
||||
version: 0.39.3(@neondatabase/serverless@0.10.4)(@opentelemetry/api@1.9.0)(@types/pg@8.11.11)(kysely@0.27.5)(pg@8.13.3)
|
||||
@ -152,6 +155,9 @@ importers:
|
||||
react-remove-scroll:
|
||||
specifier: ^2.6.3
|
||||
version: 2.6.3(@types/react@19.0.9)(react@19.0.0)
|
||||
recharts:
|
||||
specifier: ^2.15.1
|
||||
version: 2.15.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
|
||||
rehype-autolink-headings:
|
||||
specifier: ^7.1.0
|
||||
version: 7.1.0
|
||||
@ -2269,6 +2275,15 @@ packages:
|
||||
'@swc/helpers@0.5.15':
|
||||
resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
|
||||
|
||||
'@turf/boolean-point-in-polygon@6.5.0':
|
||||
resolution: {integrity: sha512-DtSuVFB26SI+hj0SjrvXowGTUCHlgevPAIsukssW6BG5MlNSBQAo70wpICBNJL6RjukXg8d2eXaAWuD/CqL00A==}
|
||||
|
||||
'@turf/helpers@6.5.0':
|
||||
resolution: {integrity: sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==}
|
||||
|
||||
'@turf/invariant@6.5.0':
|
||||
resolution: {integrity: sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==}
|
||||
|
||||
'@types/acorn@4.0.6':
|
||||
resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
|
||||
|
||||
@ -2278,6 +2293,33 @@ packages:
|
||||
'@types/cors@2.8.17':
|
||||
resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
|
||||
|
||||
'@types/d3-array@3.2.1':
|
||||
resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
|
||||
|
||||
'@types/d3-color@3.1.3':
|
||||
resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
|
||||
|
||||
'@types/d3-ease@3.0.2':
|
||||
resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
|
||||
|
||||
'@types/d3-interpolate@3.0.4':
|
||||
resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
|
||||
|
||||
'@types/d3-path@3.1.1':
|
||||
resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
|
||||
|
||||
'@types/d3-scale@4.0.9':
|
||||
resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
|
||||
|
||||
'@types/d3-shape@3.1.7':
|
||||
resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
|
||||
|
||||
'@types/d3-time@3.0.4':
|
||||
resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
|
||||
|
||||
'@types/d3-timer@3.0.2':
|
||||
resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
|
||||
|
||||
'@types/debug@4.1.12':
|
||||
resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
|
||||
|
||||
@ -2605,6 +2647,50 @@ packages:
|
||||
csstype@3.1.3:
|
||||
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
|
||||
|
||||
d3-array@3.2.4:
|
||||
resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-color@3.1.0:
|
||||
resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-ease@3.0.1:
|
||||
resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-format@3.1.0:
|
||||
resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-interpolate@3.0.1:
|
||||
resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-path@3.1.0:
|
||||
resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-scale@4.0.2:
|
||||
resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-shape@3.2.0:
|
||||
resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-time-format@4.1.0:
|
||||
resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-time@3.1.0:
|
||||
resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-timer@3.0.1:
|
||||
resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
date-fns@4.1.0:
|
||||
resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
|
||||
|
||||
@ -2630,6 +2716,9 @@ packages:
|
||||
supports-color:
|
||||
optional: true
|
||||
|
||||
decimal.js-light@2.5.1:
|
||||
resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
|
||||
|
||||
decimal.js@10.5.0:
|
||||
resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
|
||||
|
||||
@ -2674,6 +2763,9 @@ packages:
|
||||
dlv@1.1.3:
|
||||
resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
|
||||
|
||||
dom-helpers@5.2.1:
|
||||
resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
|
||||
|
||||
dom-serializer@2.0.0:
|
||||
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
|
||||
|
||||
@ -2691,6 +2783,9 @@ packages:
|
||||
resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
dotted-map@2.2.3:
|
||||
resolution: {integrity: sha512-8hyOOHHLLVCcCisM3yb9hqp+3bJ7TSMcr1SfrUw8Wxp5UMqih35jIvUyagweCooJbz/EH1nC9GGuPysh7+YlAg==}
|
||||
|
||||
drizzle-kit@0.30.4:
|
||||
resolution: {integrity: sha512-B2oJN5UkvwwNHscPWXDG5KqAixu7AUzZ3qbe++KU9SsQ+cZWR4DXEPYcvWplyFAno0dhRJECNEhNxiDmFaPGyQ==}
|
||||
hasBin: true
|
||||
@ -2909,6 +3004,9 @@ packages:
|
||||
estree-walker@3.0.3:
|
||||
resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
|
||||
|
||||
eventemitter3@4.0.7:
|
||||
resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
|
||||
|
||||
eventsource-parser@3.0.0:
|
||||
resolution: {integrity: sha512-T1C0XCUimhxVQzW4zFipdx0SficT651NnkR0ZSH3yQwh+mFMdLfgjABVi4YtMTtaL4s168593DaoaRLMqryavA==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
@ -2923,6 +3021,10 @@ packages:
|
||||
fast-deep-equal@2.0.1:
|
||||
resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
|
||||
|
||||
fast-equals@5.2.2:
|
||||
resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
|
||||
fast-glob@3.3.3:
|
||||
resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
|
||||
engines: {node: '>=8.6.0'}
|
||||
@ -3102,6 +3204,10 @@ packages:
|
||||
inline-style-parser@0.2.4:
|
||||
resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
|
||||
|
||||
internmap@2.0.3:
|
||||
resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
intl-messageformat@10.7.15:
|
||||
resolution: {integrity: sha512-LRyExsEsefQSBjU2p47oAheoKz+EOJxSLDdjOaEjdriajfHsMXOmV/EhMvYSg9bAgCUHasuAC+mcUBe/95PfIg==}
|
||||
|
||||
@ -3249,6 +3355,10 @@ packages:
|
||||
longest-streak@3.1.0:
|
||||
resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
|
||||
|
||||
loose-envify@1.4.0:
|
||||
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
|
||||
hasBin: true
|
||||
|
||||
lru-cache@10.4.3:
|
||||
resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
|
||||
|
||||
@ -3345,6 +3455,9 @@ packages:
|
||||
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
mgrs@1.0.0:
|
||||
resolution: {integrity: sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==}
|
||||
|
||||
micromark-core-commonmark@2.0.2:
|
||||
resolution: {integrity: sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==}
|
||||
|
||||
@ -3838,6 +3951,12 @@ packages:
|
||||
resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
proj4@2.15.0:
|
||||
resolution: {integrity: sha512-LqCNEcPdI03BrCHxPLj29vsd5afsm+0sV1H/O3nTDKrv8/LA01ea1z4QADDMjUqxSXWnrmmQDjqFm1J/uZ5RLw==}
|
||||
|
||||
prop-types@15.8.1:
|
||||
resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
|
||||
|
||||
property-information@6.5.0:
|
||||
resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
|
||||
|
||||
@ -3877,6 +3996,12 @@ packages:
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17 || ^18 || ^19
|
||||
|
||||
react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
|
||||
react-is@18.3.1:
|
||||
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
|
||||
|
||||
react-promise-suspense@0.3.4:
|
||||
resolution: {integrity: sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ==}
|
||||
|
||||
@ -3900,6 +4025,12 @@ packages:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
react-smooth@4.0.4:
|
||||
resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
react-style-singleton@2.2.3:
|
||||
resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
|
||||
engines: {node: '>=10'}
|
||||
@ -3910,6 +4041,12 @@ packages:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
react-transition-group@4.4.5:
|
||||
resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
|
||||
peerDependencies:
|
||||
react: '>=16.6.0'
|
||||
react-dom: '>=16.6.0'
|
||||
|
||||
react@19.0.0:
|
||||
resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@ -3929,6 +4066,16 @@ packages:
|
||||
resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
|
||||
engines: {node: '>= 14.18.0'}
|
||||
|
||||
recharts-scale@0.4.5:
|
||||
resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
|
||||
|
||||
recharts@2.15.1:
|
||||
resolution: {integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==}
|
||||
engines: {node: '>=14'}
|
||||
peerDependencies:
|
||||
react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
recma-build-jsx@1.0.0:
|
||||
resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
|
||||
|
||||
@ -4258,6 +4405,9 @@ packages:
|
||||
resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
tiny-invariant@1.3.3:
|
||||
resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
|
||||
|
||||
tinyglobby@0.2.10:
|
||||
resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
@ -4415,6 +4565,9 @@ packages:
|
||||
vfile@6.0.3:
|
||||
resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
|
||||
|
||||
victory-vendor@36.9.2:
|
||||
resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
|
||||
|
||||
wcwidth@1.0.1:
|
||||
resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
|
||||
|
||||
@ -4426,6 +4579,9 @@ packages:
|
||||
engines: {node: '>= 8'}
|
||||
hasBin: true
|
||||
|
||||
wkt-parser@1.4.0:
|
||||
resolution: {integrity: sha512-qpwO7Ihds/YYDTi1aADFTI1Sm9YC/tTe3SHD24EeIlZxy7Ik6a1b4HOz7jAi0xdUAw487duqpo8OGu+Tf4nwlQ==}
|
||||
|
||||
wrap-ansi@7.0.0:
|
||||
resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
|
||||
engines: {node: '>=10'}
|
||||
@ -6199,6 +6355,17 @@ snapshots:
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
|
||||
'@turf/boolean-point-in-polygon@6.5.0':
|
||||
dependencies:
|
||||
'@turf/helpers': 6.5.0
|
||||
'@turf/invariant': 6.5.0
|
||||
|
||||
'@turf/helpers@6.5.0': {}
|
||||
|
||||
'@turf/invariant@6.5.0':
|
||||
dependencies:
|
||||
'@turf/helpers': 6.5.0
|
||||
|
||||
'@types/acorn@4.0.6':
|
||||
dependencies:
|
||||
'@types/estree': 1.0.6
|
||||
@ -6209,6 +6376,30 @@ snapshots:
|
||||
dependencies:
|
||||
'@types/node': 20.17.23
|
||||
|
||||
'@types/d3-array@3.2.1': {}
|
||||
|
||||
'@types/d3-color@3.1.3': {}
|
||||
|
||||
'@types/d3-ease@3.0.2': {}
|
||||
|
||||
'@types/d3-interpolate@3.0.4':
|
||||
dependencies:
|
||||
'@types/d3-color': 3.1.3
|
||||
|
||||
'@types/d3-path@3.1.1': {}
|
||||
|
||||
'@types/d3-scale@4.0.9':
|
||||
dependencies:
|
||||
'@types/d3-time': 3.0.4
|
||||
|
||||
'@types/d3-shape@3.1.7':
|
||||
dependencies:
|
||||
'@types/d3-path': 3.1.1
|
||||
|
||||
'@types/d3-time@3.0.4': {}
|
||||
|
||||
'@types/d3-timer@3.0.2': {}
|
||||
|
||||
'@types/debug@4.1.12':
|
||||
dependencies:
|
||||
'@types/ms': 2.1.0
|
||||
@ -6535,6 +6726,44 @@ snapshots:
|
||||
|
||||
csstype@3.1.3: {}
|
||||
|
||||
d3-array@3.2.4:
|
||||
dependencies:
|
||||
internmap: 2.0.3
|
||||
|
||||
d3-color@3.1.0: {}
|
||||
|
||||
d3-ease@3.0.1: {}
|
||||
|
||||
d3-format@3.1.0: {}
|
||||
|
||||
d3-interpolate@3.0.1:
|
||||
dependencies:
|
||||
d3-color: 3.1.0
|
||||
|
||||
d3-path@3.1.0: {}
|
||||
|
||||
d3-scale@4.0.2:
|
||||
dependencies:
|
||||
d3-array: 3.2.4
|
||||
d3-format: 3.1.0
|
||||
d3-interpolate: 3.0.1
|
||||
d3-time: 3.1.0
|
||||
d3-time-format: 4.1.0
|
||||
|
||||
d3-shape@3.2.0:
|
||||
dependencies:
|
||||
d3-path: 3.1.0
|
||||
|
||||
d3-time-format@4.1.0:
|
||||
dependencies:
|
||||
d3-time: 3.1.0
|
||||
|
||||
d3-time@3.1.0:
|
||||
dependencies:
|
||||
d3-array: 3.2.4
|
||||
|
||||
d3-timer@3.0.1: {}
|
||||
|
||||
date-fns@4.1.0: {}
|
||||
|
||||
debounce@2.0.0: {}
|
||||
@ -6547,6 +6776,8 @@ snapshots:
|
||||
dependencies:
|
||||
ms: 2.1.3
|
||||
|
||||
decimal.js-light@2.5.1: {}
|
||||
|
||||
decimal.js@10.5.0: {}
|
||||
|
||||
decode-named-character-reference@1.0.2:
|
||||
@ -6580,6 +6811,11 @@ snapshots:
|
||||
|
||||
dlv@1.1.3: {}
|
||||
|
||||
dom-helpers@5.2.1:
|
||||
dependencies:
|
||||
'@babel/runtime': 7.26.9
|
||||
csstype: 3.1.3
|
||||
|
||||
dom-serializer@2.0.0:
|
||||
dependencies:
|
||||
domelementtype: 2.3.0
|
||||
@ -6600,6 +6836,11 @@ snapshots:
|
||||
|
||||
dotenv@16.4.7: {}
|
||||
|
||||
dotted-map@2.2.3:
|
||||
dependencies:
|
||||
'@turf/boolean-point-in-polygon': 6.5.0
|
||||
proj4: 2.15.0
|
||||
|
||||
drizzle-kit@0.30.4:
|
||||
dependencies:
|
||||
'@drizzle-team/brocli': 0.10.2
|
||||
@ -6868,6 +7109,8 @@ snapshots:
|
||||
dependencies:
|
||||
'@types/estree': 1.0.6
|
||||
|
||||
eventemitter3@4.0.7: {}
|
||||
|
||||
eventsource-parser@3.0.0: {}
|
||||
|
||||
extend-shallow@2.0.1:
|
||||
@ -6878,6 +7121,8 @@ snapshots:
|
||||
|
||||
fast-deep-equal@2.0.1: {}
|
||||
|
||||
fast-equals@5.2.2: {}
|
||||
|
||||
fast-glob@3.3.3:
|
||||
dependencies:
|
||||
'@nodelib/fs.stat': 2.0.5
|
||||
@ -7129,6 +7374,8 @@ snapshots:
|
||||
|
||||
inline-style-parser@0.2.4: {}
|
||||
|
||||
internmap@2.0.3: {}
|
||||
|
||||
intl-messageformat@10.7.15:
|
||||
dependencies:
|
||||
'@formatjs/ecma402-abstract': 2.3.3
|
||||
@ -7248,6 +7495,10 @@ snapshots:
|
||||
|
||||
longest-streak@3.1.0: {}
|
||||
|
||||
loose-envify@1.4.0:
|
||||
dependencies:
|
||||
js-tokens: 4.0.0
|
||||
|
||||
lru-cache@10.4.3: {}
|
||||
|
||||
lru-cache@5.1.1:
|
||||
@ -7473,6 +7724,8 @@ snapshots:
|
||||
|
||||
merge2@1.4.1: {}
|
||||
|
||||
mgrs@1.0.0: {}
|
||||
|
||||
micromark-core-commonmark@2.0.2:
|
||||
dependencies:
|
||||
decode-named-character-reference: 1.0.2
|
||||
@ -8095,6 +8348,17 @@ snapshots:
|
||||
|
||||
prismjs@1.29.0: {}
|
||||
|
||||
proj4@2.15.0:
|
||||
dependencies:
|
||||
mgrs: 1.0.0
|
||||
wkt-parser: 1.4.0
|
||||
|
||||
prop-types@15.8.1:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
object-assign: 4.1.1
|
||||
react-is: 16.13.1
|
||||
|
||||
property-information@6.5.0: {}
|
||||
|
||||
proto-list@1.2.4: {}
|
||||
@ -8152,6 +8416,10 @@ snapshots:
|
||||
dependencies:
|
||||
react: 19.0.0
|
||||
|
||||
react-is@16.13.1: {}
|
||||
|
||||
react-is@18.3.1: {}
|
||||
|
||||
react-promise-suspense@0.3.4:
|
||||
dependencies:
|
||||
fast-deep-equal: 2.0.1
|
||||
@ -8175,6 +8443,14 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/react': 19.0.9
|
||||
|
||||
react-smooth@4.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
|
||||
dependencies:
|
||||
fast-equals: 5.2.2
|
||||
prop-types: 15.8.1
|
||||
react: 19.0.0
|
||||
react-dom: 19.0.0(react@19.0.0)
|
||||
react-transition-group: 4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
|
||||
|
||||
react-style-singleton@2.2.3(@types/react@19.0.9)(react@19.0.0):
|
||||
dependencies:
|
||||
get-nonce: 1.0.1
|
||||
@ -8183,6 +8459,15 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/react': 19.0.9
|
||||
|
||||
react-transition-group@4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
|
||||
dependencies:
|
||||
'@babel/runtime': 7.26.9
|
||||
dom-helpers: 5.2.1
|
||||
loose-envify: 1.4.0
|
||||
prop-types: 15.8.1
|
||||
react: 19.0.0
|
||||
react-dom: 19.0.0(react@19.0.0)
|
||||
|
||||
react@19.0.0: {}
|
||||
|
||||
read-cache@1.0.0:
|
||||
@ -8201,6 +8486,23 @@ snapshots:
|
||||
|
||||
readdirp@4.1.2: {}
|
||||
|
||||
recharts-scale@0.4.5:
|
||||
dependencies:
|
||||
decimal.js-light: 2.5.1
|
||||
|
||||
recharts@2.15.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
|
||||
dependencies:
|
||||
clsx: 2.1.1
|
||||
eventemitter3: 4.0.7
|
||||
lodash: 4.17.21
|
||||
react: 19.0.0
|
||||
react-dom: 19.0.0(react@19.0.0)
|
||||
react-is: 18.3.1
|
||||
react-smooth: 4.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
|
||||
recharts-scale: 0.4.5
|
||||
tiny-invariant: 1.3.3
|
||||
victory-vendor: 36.9.2
|
||||
|
||||
recma-build-jsx@1.0.0:
|
||||
dependencies:
|
||||
'@types/estree': 1.0.6
|
||||
@ -8683,6 +8985,8 @@ snapshots:
|
||||
|
||||
throttleit@2.1.0: {}
|
||||
|
||||
tiny-invariant@1.3.3: {}
|
||||
|
||||
tinyglobby@0.2.10:
|
||||
dependencies:
|
||||
fdir: 6.4.3(picomatch@4.0.2)
|
||||
@ -8859,6 +9163,23 @@ snapshots:
|
||||
'@types/unist': 3.0.3
|
||||
vfile-message: 4.0.2
|
||||
|
||||
victory-vendor@36.9.2:
|
||||
dependencies:
|
||||
'@types/d3-array': 3.2.1
|
||||
'@types/d3-ease': 3.0.2
|
||||
'@types/d3-interpolate': 3.0.4
|
||||
'@types/d3-scale': 4.0.9
|
||||
'@types/d3-shape': 3.1.7
|
||||
'@types/d3-time': 3.0.4
|
||||
'@types/d3-timer': 3.0.2
|
||||
d3-array: 3.2.4
|
||||
d3-ease: 3.0.1
|
||||
d3-interpolate: 3.0.1
|
||||
d3-scale: 4.0.2
|
||||
d3-shape: 3.2.0
|
||||
d3-time: 3.1.0
|
||||
d3-timer: 3.0.1
|
||||
|
||||
wcwidth@1.0.1:
|
||||
dependencies:
|
||||
defaults: 1.0.4
|
||||
@ -8869,6 +9190,8 @@ snapshots:
|
||||
dependencies:
|
||||
isexe: 2.0.0
|
||||
|
||||
wkt-parser@1.4.0: {}
|
||||
|
||||
wrap-ansi@7.0.0:
|
||||
dependencies:
|
||||
ansi-styles: 4.3.0
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
import Features from "@/components/blocks/features/features";
|
||||
import Features2 from "@/components/blocks/features/features-2";
|
||||
import Features4 from "@/components/blocks/features/features-4";
|
||||
import Features5 from "@/components/blocks/features/features-5";
|
||||
import Features6 from "@/components/blocks/features/features-6";
|
||||
import Features7 from "@/components/blocks/features/features-7";
|
||||
import Features8 from "@/components/blocks/features/features-8";
|
||||
import Features9 from "@/components/blocks/features/features-9";
|
||||
|
||||
interface FeaturesPageProps {
|
||||
params: Promise<{ locale: string }>;
|
||||
@ -11,8 +17,21 @@ export default async function FeaturesPage(props: FeaturesPageProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="mt-8 flex flex-col gap-16 pb-16">
|
||||
<Features />
|
||||
|
||||
<Features2 />
|
||||
|
||||
<Features4 />
|
||||
|
||||
<Features5 />
|
||||
|
||||
<Features6 />
|
||||
|
||||
<Features7 />
|
||||
|
||||
<Features8 />
|
||||
|
||||
<Features9 />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import Link from 'next/link'
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/call-to-action
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/call-to-action-2.json
|
||||
*/
|
||||
export default function CallToAction2() {
|
||||
@ -11,7 +11,9 @@ export default function CallToAction2() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl rounded-3xl border px-6 py-12 md:py-20 lg:py-32">
|
||||
<div className="text-center">
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">Start Building</h2>
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
|
||||
Start Building
|
||||
</h2>
|
||||
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
|
||||
|
||||
<div className="mt-12 flex flex-wrap justify-center gap-4">
|
||||
@ -30,5 +32,5 @@ export default function CallToAction2() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Mail, SendHorizonal } from 'lucide-react'
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Mail, SendHorizonal } from "lucide-react";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/call-to-action
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/call-to-action-3.json
|
||||
*/
|
||||
export default function CallToAction3() {
|
||||
@ -11,19 +11,28 @@ export default function CallToAction3() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<div className="text-center">
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">Start Building</h2>
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
|
||||
Start Building
|
||||
</h2>
|
||||
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
|
||||
|
||||
<form action="" className="mx-auto mt-10 max-w-sm lg:mt-12">
|
||||
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
|
||||
<Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
|
||||
|
||||
<input placeholder="Your mail address" className="h-14 w-full bg-transparent pl-12 focus:outline-none" type="email" />
|
||||
<input
|
||||
placeholder="Your mail address"
|
||||
className="h-14 w-full bg-transparent pl-12 focus:outline-none"
|
||||
type="email"
|
||||
/>
|
||||
|
||||
<div className="md:pr-1.5 lg:pr-0">
|
||||
<Button aria-label="submit" className="rounded-full">
|
||||
<span className="hidden md:block">Get Started</span>
|
||||
<SendHorizonal className="relative mx-auto size-5 md:hidden" strokeWidth={2} />
|
||||
<SendHorizonal
|
||||
className="relative mx-auto size-5 md:hidden"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,5 +40,5 @@ export default function CallToAction3() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import Link from 'next/link'
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/call-to-action
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/call-to-action-1.json
|
||||
*/
|
||||
export default function CallToAction() {
|
||||
@ -11,7 +11,9 @@ export default function CallToAction() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<div className="text-center">
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">Start Building</h2>
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
|
||||
Start Building
|
||||
</h2>
|
||||
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
|
||||
|
||||
<div className="mt-12 flex flex-wrap justify-center gap-4">
|
||||
@ -30,5 +32,5 @@ export default function CallToAction() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,22 +1,31 @@
|
||||
import { Cpu, Zap } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
import { Cpu, Zap } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/content
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-2.json
|
||||
*/
|
||||
export default function Content2() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
|
||||
<h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">The Lyra ecosystem brings together our models.</h2>
|
||||
<h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">
|
||||
The Lyra ecosystem brings together our models.
|
||||
</h2>
|
||||
<div className="relative">
|
||||
<div className="relative z-10 space-y-4 md:w-1/2">
|
||||
<p className="text-body">
|
||||
Lyra is evolving to be more than just the models. <span className="text-title font-medium">It supports an entire ecosystem</span> — from products innovate.
|
||||
Lyra is evolving to be more than just the models.{" "}
|
||||
<span className="text-title font-medium">
|
||||
It supports an entire ecosystem
|
||||
</span>{" "}
|
||||
— from products innovate.
|
||||
</p>
|
||||
<p>
|
||||
It supports an entire ecosystem — from products to the APIs and
|
||||
platforms helping developers and businesses innovate
|
||||
</p>
|
||||
<p>It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 pt-6 sm:gap-4">
|
||||
<div className="space-y-3">
|
||||
@ -24,26 +33,45 @@ export default function Content2() {
|
||||
<Zap className="size-4" />
|
||||
<h3 className="text-sm font-medium">Faaast</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">It supports an entire helping developers and innovate.</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an entire helping developers and innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cpu className="size-4" />
|
||||
<h3 className="text-sm font-medium">Powerful</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">It supports an entire helping developers and businesses.</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an entire helping developers and businesses.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 h-fit md:absolute md:-inset-y-12 md:inset-x-0 md:mt-0">
|
||||
<div aria-hidden className="bg-linear-to-l z-1 to-background absolute inset-0 hidden from-transparent to-55% md:block"></div>
|
||||
<div
|
||||
aria-hidden
|
||||
className="bg-linear-to-l z-1 to-background absolute inset-0 hidden from-transparent to-55% md:block"
|
||||
></div>
|
||||
<div className="border-border/50 relative rounded-2xl border border-dotted p-2">
|
||||
<Image src="/images/blocks/charts.png" className="hidden rounded-[12px] dark:block" alt="payments illustration dark" width={1207} height={929} />
|
||||
<Image src="/images/blocks/charts-light.png" className="rounded-[12px] shadow dark:hidden" alt="payments illustration light" width={1207} height={929} />
|
||||
<Image
|
||||
src="/images/blocks/charts.png"
|
||||
className="hidden rounded-[12px] dark:block"
|
||||
alt="payments illustration dark"
|
||||
width={1207}
|
||||
height={929}
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/charts-light.png"
|
||||
className="rounded-[12px] shadow dark:hidden"
|
||||
alt="payments illustration light"
|
||||
width={1207}
|
||||
height={929}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,24 +1,43 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ChevronRight } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/content-3
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-3.json
|
||||
*/
|
||||
export default function Content3() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
|
||||
<img className="rounded-(--radius) grayscale" src="https://images.unsplash.com/photo-1530099486328-e021101a494a?q=80&w=2747&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="team image" height="" width="" loading="lazy" />
|
||||
<img
|
||||
className="rounded-(--radius) grayscale"
|
||||
src="https://images.unsplash.com/photo-1530099486328-e021101a494a?q=80&w=2747&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="team image"
|
||||
height=""
|
||||
width=""
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 md:gap-12">
|
||||
<h2 className="text-4xl font-medium">The Lyra ecosystem brings together our models, products and platforms.</h2>
|
||||
<h2 className="text-4xl font-medium">
|
||||
The Lyra ecosystem brings together our models, products and
|
||||
platforms.
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
<p>Lyra is evolving to be more than just the models. It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<p>
|
||||
Lyra is evolving to be more than just the models. It supports an
|
||||
entire ecosystem — from products to the APIs and platforms helping
|
||||
developers and businesses innovate.
|
||||
</p>
|
||||
|
||||
<Button asChild variant="secondary" size="sm" className="gap-1 pr-1.5">
|
||||
<Button
|
||||
asChild
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="gap-1 pr-1.5"
|
||||
>
|
||||
<Link href="#">
|
||||
<span>Learn More</span>
|
||||
<ChevronRight className="size-2" />
|
||||
@ -28,5 +47,5 @@ export default function Content3() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ChevronRight } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/content-4
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-4.json
|
||||
*/
|
||||
export default function Content4() {
|
||||
@ -12,13 +12,29 @@ export default function Content4() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<div className="grid gap-6 md:grid-cols-2 md:gap-12">
|
||||
<h2 className="text-4xl font-medium">The Lyra ecosystem brings together our models, products and platforms.</h2>
|
||||
<h2 className="text-4xl font-medium">
|
||||
The Lyra ecosystem brings together our models, products and
|
||||
platforms.
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
<p>Lyra is evolving to be more than just the models. It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<p>
|
||||
Tailus UI. <span className="font-bold">It supports an entire ecosystem</span> — from products innovate. Sit minus, quod debitis autem quia aspernatur delectus impedit modi, neque non id ad dignissimos? Saepe deleniti perferendis beatae.
|
||||
Lyra is evolving to be more than just the models. It supports an
|
||||
entire ecosystem — from products to the APIs and platforms helping
|
||||
developers and businesses innovate.
|
||||
</p>
|
||||
<Button asChild variant="secondary" size="sm" className="gap-1 pr-1.5">
|
||||
<p>
|
||||
Tailus UI.{" "}
|
||||
<span className="font-bold">It supports an entire ecosystem</span>{" "}
|
||||
— from products innovate. Sit minus, quod debitis autem quia
|
||||
aspernatur delectus impedit modi, neque non id ad dignissimos?
|
||||
Saepe deleniti perferendis beatae.
|
||||
</p>
|
||||
<Button
|
||||
asChild
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="gap-1 pr-1.5"
|
||||
>
|
||||
<Link href="#">
|
||||
<span>Learn More</span>
|
||||
<ChevronRight className="size-2" />
|
||||
@ -28,5 +44,5 @@ export default function Content4() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Cpu, Lock, Sparkles, Zap } from 'lucide-react'
|
||||
import { Cpu, Lock, Sparkles, Zap } from "lucide-react";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/content-5
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-5.json
|
||||
*/
|
||||
export default function Content5() {
|
||||
@ -10,10 +10,24 @@ export default function Content5() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
|
||||
<div className="mx-auto max-w-xl space-y-6 text-center md:space-y-12">
|
||||
<h2 className="text-balance text-4xl font-medium lg:text-5xl">The Lyra ecosystem brings together our models, products and platforms.</h2>
|
||||
<p>Lyra is evolving to be more than just the models. It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<h2 className="text-balance text-4xl font-medium lg:text-5xl">
|
||||
The Lyra ecosystem brings together our models, products and
|
||||
platforms.
|
||||
</h2>
|
||||
<p>
|
||||
Lyra is evolving to be more than just the models. It supports an
|
||||
entire ecosystem — from products to the APIs and platforms helping
|
||||
developers and businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
<img className="rounded-(--radius) grayscale" src="https://images.unsplash.com/photo-1616587226960-4a03badbe8bf?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="team image" height="" width="" loading="lazy" />
|
||||
<img
|
||||
className="rounded-(--radius) grayscale"
|
||||
src="https://images.unsplash.com/photo-1616587226960-4a03badbe8bf?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="team image"
|
||||
height=""
|
||||
width=""
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
|
||||
<div className="space-y-3">
|
||||
@ -21,21 +35,27 @@ export default function Content5() {
|
||||
<Zap className="size-4" />
|
||||
<h3 className="text-sm font-medium">Faaast</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">It supports an entire helping developers and innovate.</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an entire helping developers and innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cpu className="size-4" />
|
||||
<h3 className="text-sm font-medium">Powerful</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">It supports an entire helping developers and businesses.</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an entire helping developers and businesses.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Lock className="size-4" />
|
||||
<h3 className="text-sm font-medium">Security</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">It supports an helping developers businesses innovate.</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an helping developers businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
@ -43,10 +63,12 @@ export default function Content5() {
|
||||
|
||||
<h3 className="text-sm font-medium">AI Powered</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">It supports an helping developers businesses innovate.</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an helping developers businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import Link from 'next/link'
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/content-6
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-6.json
|
||||
*/
|
||||
export default function Content6() {
|
||||
@ -13,44 +13,167 @@ export default function Content6() {
|
||||
<h2 className="text-3xl font-semibold">
|
||||
Built by the Community <br /> for the Community
|
||||
</h2>
|
||||
<p className="mt-6">Harum quae dolore orrupti aut temporibus ariatur.</p>
|
||||
<p className="mt-6">
|
||||
Harum quae dolore orrupti aut temporibus ariatur.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mx-auto mt-12 flex max-w-lg flex-wrap justify-center gap-3">
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/1.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/1.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/2.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/2.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/3.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/3.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/4.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/4.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/5.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/5.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/6.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/6.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/7.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/7.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/1.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/1.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/8.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/8.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/9.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/9.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/meschacirung" target="_blank" title="Méschac Irung" className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover">
|
||||
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/10.jpg" loading="lazy" width={120} height={120} />
|
||||
<Link
|
||||
href="https://github.com/meschacirung"
|
||||
target="_blank"
|
||||
title="Méschac Irung"
|
||||
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
src="https://randomuser.me/api/portraits/men/10.jpg"
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,36 +1,68 @@
|
||||
import Image from 'next/image';
|
||||
import Image from "next/image";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/content
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-1.json
|
||||
*/
|
||||
export default function Content() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
|
||||
<h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">The Lyra ecosystem brings together our models.</h2>
|
||||
<h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">
|
||||
The Lyra ecosystem brings together our models.
|
||||
</h2>
|
||||
<div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
|
||||
<div className="relative mb-6 sm:mb-0">
|
||||
<div className="bg-linear-to-b aspect-76/59 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
|
||||
<Image src="/images/blocks/payments.png" className="hidden rounded-[15px] dark:block" alt="payments illustration dark" width={1207} height={929} />
|
||||
<Image src="/images/blocks/payments-light.png" className="rounded-[15px] shadow dark:hidden" alt="payments illustration light" width={1207} height={929} />
|
||||
<Image
|
||||
src="/images/blocks/payments.png"
|
||||
className="hidden rounded-[15px] dark:block"
|
||||
alt="payments illustration dark"
|
||||
width={1207}
|
||||
height={929}
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/payments-light.png"
|
||||
className="rounded-[15px] shadow dark:hidden"
|
||||
alt="payments illustration light"
|
||||
width={1207}
|
||||
height={929}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative space-y-4">
|
||||
<p className="text-muted-foreground">
|
||||
Gemini is evolving to be more than just the models. <span className="text-accent-foreground font-bold">It supports an entire ecosystem</span> — from products innovate.
|
||||
Gemini is evolving to be more than just the models.{" "}
|
||||
<span className="text-accent-foreground font-bold">
|
||||
It supports an entire ecosystem
|
||||
</span>{" "}
|
||||
— from products innovate.
|
||||
</p>
|
||||
<p className="text-muted-foreground">
|
||||
It supports an entire ecosystem — from products to the APIs and
|
||||
platforms helping developers and businesses innovate
|
||||
</p>
|
||||
<p className="text-muted-foreground">It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate</p>
|
||||
|
||||
<div className="pt-6">
|
||||
<blockquote className="border-l-4 pl-4">
|
||||
<p>Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.</p>
|
||||
<p>
|
||||
Using TailsUI has been like unlocking a secret design
|
||||
superpower. It's the perfect fusion of simplicity and
|
||||
versatility, enabling us to create UIs that are as stunning as
|
||||
they are user-friendly.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 space-y-3">
|
||||
<cite className="block font-medium">John Doe, CEO</cite>
|
||||
<img className="h-5 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/nvidia.svg" alt="Nvidia Logo" height="20" width="auto" />
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nvidia.svg"
|
||||
alt="Nvidia Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
@ -38,5 +70,5 @@ export default function Content() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* https://nsui.irung.me/faqs
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/faqs-1.json
|
||||
*/
|
||||
export default function FAQs() {
|
||||
@ -10,7 +10,8 @@ export default function FAQs() {
|
||||
<div className="grid gap-y-12 px-2 lg:[grid-template-columns:1fr_auto]">
|
||||
<div className="text-center lg:text-left">
|
||||
<h2 className="mb-4 text-3xl font-semibold md:text-4xl">
|
||||
Frequently <br className="hidden lg:block" /> Asked <br className="hidden lg:block" />
|
||||
Frequently <br className="hidden lg:block" /> Asked{" "}
|
||||
<br className="hidden lg:block" />
|
||||
Questions
|
||||
</h2>
|
||||
<p>Accusantium quisquam. Illo, omnis?</p>
|
||||
@ -19,33 +20,61 @@ export default function FAQs() {
|
||||
<div className="divide-y divide-dashed sm:mx-auto sm:max-w-lg lg:mx-0">
|
||||
<div className="pb-6">
|
||||
<h3 className="font-medium">What is the refund policy?</h3>
|
||||
<p className="text-muted-foreground mt-4">We offer a 30-day money back guarantee. If you are not satisfied with our product, you can request a refund within 30 days of your purchase.</p>
|
||||
<p className="text-muted-foreground mt-4">
|
||||
We offer a 30-day money back guarantee. If you are not satisfied
|
||||
with our product, you can request a refund within 30 days of
|
||||
your purchase.
|
||||
</p>
|
||||
|
||||
<ol className="list-outside list-decimal space-y-2 pl-4">
|
||||
<li className="text-muted-foreground mt-4">To request a refund, please contact our support team with your order number and reason for the refund.</li>
|
||||
<li className="text-muted-foreground mt-4">Refunds will be processed within 3-5 business days.</li>
|
||||
<li className="text-muted-foreground mt-4">Please note that refunds are only available for new customers and are limited to one per customer.</li>
|
||||
<li className="text-muted-foreground mt-4">
|
||||
To request a refund, please contact our support team with your
|
||||
order number and reason for the refund.
|
||||
</li>
|
||||
<li className="text-muted-foreground mt-4">
|
||||
Refunds will be processed within 3-5 business days.
|
||||
</li>
|
||||
<li className="text-muted-foreground mt-4">
|
||||
Please note that refunds are only available for new customers
|
||||
and are limited to one per customer.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div className="py-6">
|
||||
<h3 className="font-medium">How do I cancel my subscription?</h3>
|
||||
<p className="text-muted-foreground mt-4">You can cancel your subscription at any time by logging into your account and clicking on the cancel button.</p>
|
||||
<p className="text-muted-foreground mt-4">
|
||||
You can cancel your subscription at any time by logging into
|
||||
your account and clicking on the cancel button.
|
||||
</p>
|
||||
</div>
|
||||
<div className="py-6">
|
||||
<h3 className="font-medium">Can I upgrade my plan?</h3>
|
||||
<p className="text-muted-foreground my-4">Yes, you can upgrade your plan at any time by logging into your account and selecting the plan you want to upgrade to.</p>
|
||||
<p className="text-muted-foreground my-4">
|
||||
Yes, you can upgrade your plan at any time by logging into your
|
||||
account and selecting the plan you want to upgrade to.
|
||||
</p>
|
||||
<ul className="list-outside list-disc space-y-2 pl-4">
|
||||
<li className="text-muted-foreground">You will be charged the difference in price between your current plan and the plan you are upgrading to.</li>
|
||||
<li className="text-muted-foreground">Your new plan will take effect immediately and you will be billed at the new rate on your next billing cycle.</li>
|
||||
<li className="text-muted-foreground">
|
||||
You will be charged the difference in price between your
|
||||
current plan and the plan you are upgrading to.
|
||||
</li>
|
||||
<li className="text-muted-foreground">
|
||||
Your new plan will take effect immediately and you will be
|
||||
billed at the new rate on your next billing cycle.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="py-6">
|
||||
<h3 className="font-medium">Do you offer phone support?</h3>
|
||||
<p className="text-muted-foreground mt-4">We do not offer phone support at this time. However, you can contact us via email or live chat for any questions or concerns you may have.</p>
|
||||
<p className="text-muted-foreground mt-4">
|
||||
We do not offer phone support at this time. However, you can
|
||||
contact us via email or live chat for any questions or concerns
|
||||
you may have.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import { Settings2, Sparkles, Zap } from 'lucide-react'
|
||||
import { ReactNode } from 'react'
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Settings2, Sparkles, Zap } from "lucide-react";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/features
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-2.json
|
||||
*/
|
||||
export default function Features2() {
|
||||
@ -12,10 +12,15 @@ export default function Features2() {
|
||||
<section className="py-16">
|
||||
<div className="@container mx-auto max-w-5xl px-6">
|
||||
<div className="text-center">
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">Built to cover your needs</h2>
|
||||
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur, praesentium iusto repellendus.</p>
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
|
||||
Built to cover your needs
|
||||
</h2>
|
||||
<p className="mt-4">
|
||||
Libero sapiente aliquam quibusdam aspernatur, praesentium iusto
|
||||
repellendus.
|
||||
</p>
|
||||
</div>
|
||||
<div className="@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 [--color-background:var(--color-muted)] [--color-card:var(--color-muted)] *:text-center md:mt-16 dark:[--color-muted:var(--color-zinc-900)]">
|
||||
<div className="md:max-w-full md:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 [--color-background:var(--color-muted)] [--color-card:var(--color-muted)] *:text-center md:mt-16 dark:[--color-muted:var(--color-zinc-900)]">
|
||||
<Card className="group border-0 shadow-none">
|
||||
<CardHeader className="pb-3">
|
||||
<CardDecorator>
|
||||
@ -26,7 +31,10 @@ export default function Features2() {
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<p className="text-sm">Extensive customization options, allowing you to tailor every aspect to meet your specific needs.</p>
|
||||
<p className="text-sm">
|
||||
Extensive customization options, allowing you to tailor every
|
||||
aspect to meet your specific needs.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@ -40,7 +48,10 @@ export default function Features2() {
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<p className="mt-3 text-sm">From design elements to functionality, you have complete control to create a unique and personalized experience.</p>
|
||||
<p className="mt-3 text-sm">
|
||||
From design elements to functionality, you have complete control
|
||||
to create a unique and personalized experience.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@ -54,19 +65,30 @@ export default function Features2() {
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<p className="mt-3 text-sm">Elements to functionality, you have complete control to create a unique experience.</p>
|
||||
<p className="mt-3 text-sm">
|
||||
Elements to functionality, you have complete control to create a
|
||||
unique experience.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const CardDecorator = ({ children }: { children: ReactNode }) => (
|
||||
<div className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]">
|
||||
<div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]" />
|
||||
<div aria-hidden className="bg-radial to-background absolute inset-0 from-transparent to-75%" />
|
||||
<div className="dark:bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t bg-white">{children}</div>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="bg-radial to-background absolute inset-0 from-transparent to-75%"
|
||||
/>
|
||||
<div className="dark:bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t bg-white">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
93
src/components/blocks/features/features-4.tsx
Normal file
93
src/components/blocks/features/features-4.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import {
|
||||
Cpu,
|
||||
Fingerprint,
|
||||
Pencil,
|
||||
Settings2,
|
||||
Sparkles,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/features-4
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-4.json
|
||||
*/
|
||||
export default function Features4() {
|
||||
return (
|
||||
<section className="py-12 md:py-20">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
|
||||
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
|
||||
<h2 className="text-balance text-4xl font-medium lg:text-5xl">
|
||||
The foundation for creative teams management
|
||||
</h2>
|
||||
<p>
|
||||
Lyra is evolving to be more than just the models. It supports an
|
||||
entire to the APIs and platforms helping developers and businesses
|
||||
innovate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative mx-auto grid max-w-4xl divide-x divide-y border *:p-12 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="size-4" />
|
||||
<h3 className="text-sm font-medium">Faaast</h3>
|
||||
</div>
|
||||
<p className="text-sm">
|
||||
It supports an entire helping developers and innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cpu className="size-4" />
|
||||
<h3 className="text-sm font-medium">Powerful</h3>
|
||||
</div>
|
||||
<p className="text-sm">
|
||||
It supports an entire helping developers and businesses.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Fingerprint className="size-4" />
|
||||
|
||||
<h3 className="text-sm font-medium">Security</h3>
|
||||
</div>
|
||||
<p className="text-sm">
|
||||
It supports an helping developers businesses.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="size-4" />
|
||||
|
||||
<h3 className="text-sm font-medium">Customization</h3>
|
||||
</div>
|
||||
<p className="text-sm">
|
||||
It supports helping developers and businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings2 className="size-4" />
|
||||
|
||||
<h3 className="text-sm font-medium">Control</h3>
|
||||
</div>
|
||||
<p className="text-sm">
|
||||
It supports helping developers and businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="size-4" />
|
||||
|
||||
<h3 className="text-sm font-medium">Built for AI</h3>
|
||||
</div>
|
||||
<p className="text-sm">
|
||||
It supports helping developers and businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
65
src/components/blocks/features/features-5.tsx
Normal file
65
src/components/blocks/features/features-5.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { Activity, DraftingCompass, Mail, Zap } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/features-5
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-5.json
|
||||
*/
|
||||
export default function Features5() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="grid items-center gap-12 md:grid-cols-2 md:gap-12 lg:grid-cols-5 lg:gap-24">
|
||||
<div className="lg:col-span-2">
|
||||
<div className="md:pr-6 lg:pr-0">
|
||||
<h2 className="text-4xl font-semibold lg:text-5xl">
|
||||
Built for Scaling teams
|
||||
</h2>
|
||||
<p className="mt-6">
|
||||
Orrupti aut temporibus assumenda atque ab, accusamus sit,
|
||||
molestiae veniam laboriosam pariatur.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="mt-8 divide-y border-y *:flex *:items-center *:gap-3 *:py-3">
|
||||
<li>
|
||||
<Mail className="size-5" />
|
||||
Email and web support
|
||||
</li>
|
||||
<li>
|
||||
<Zap className="size-5" />
|
||||
Fast response time
|
||||
</li>
|
||||
<li>
|
||||
<Activity className="size-5" />
|
||||
Menitoring and analytics
|
||||
</li>
|
||||
<li>
|
||||
<DraftingCompass className="size-5" />
|
||||
Architectural review
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="border-border/50 relative rounded-3xl border p-3 lg:col-span-3">
|
||||
<div className="bg-linear-to-b aspect-76/59 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
|
||||
<Image
|
||||
src="/images/blocks/payments.png"
|
||||
className="hidden rounded-[15px] dark:block"
|
||||
alt="payments illustration dark"
|
||||
width={1207}
|
||||
height={929}
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/payments-light.png"
|
||||
className="rounded-[15px] shadow dark:hidden"
|
||||
alt="payments illustration light"
|
||||
width={1207}
|
||||
height={929}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
90
src/components/blocks/features/features-6.tsx
Normal file
90
src/components/blocks/features/features-6.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import { Cpu, Lock, Sparkles, Zap } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/features-6
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-6.json
|
||||
*/
|
||||
export default function Features6() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl space-y-12 px-6">
|
||||
<div className="relative z-10 grid items-center gap-4 md:grid-cols-2 md:gap-12">
|
||||
<h2 className="text-4xl font-semibold">
|
||||
The Lyra ecosystem brings together our models
|
||||
</h2>
|
||||
<p className="max-w-sm sm:ml-auto">
|
||||
Empower your team with workflows that adapt to your needs, whether
|
||||
you prefer git synchronization or a AI Agents interface.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative rounded-3xl p-3 md:-mx-8 lg:col-span-3">
|
||||
<div className="aspect-88/36 relative">
|
||||
<div className="bg-linear-to-t z-1 from-background absolute inset-0 to-transparent"></div>
|
||||
<Image
|
||||
src="/images/blocks/mail-upper.png"
|
||||
className="absolute inset-0 z-10"
|
||||
alt="payments illustration dark"
|
||||
width={2797}
|
||||
height={1137}
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/mail-back.png"
|
||||
className="hidden dark:block"
|
||||
alt="payments illustration dark"
|
||||
width={2797}
|
||||
height={1137}
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/mail-back-light.png"
|
||||
className="dark:hidden"
|
||||
alt="payments illustration light"
|
||||
width={2797}
|
||||
height={1137}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="size-4" />
|
||||
<h3 className="text-sm font-medium">Faaast</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an entire helping developers and innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cpu className="size-4" />
|
||||
<h3 className="text-sm font-medium">Powerful</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an entire helping developers and businesses.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Lock className="size-4" />
|
||||
<h3 className="text-sm font-medium">Security</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an helping developers businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="size-4" />
|
||||
|
||||
<h3 className="text-sm font-medium">AI Powered</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an helping developers businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
94
src/components/blocks/features/features-7.tsx
Normal file
94
src/components/blocks/features/features-7.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
import { Cpu, Lock, Sparkles, Zap } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/features-7
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-7.json
|
||||
*/
|
||||
export default function Features7() {
|
||||
return (
|
||||
<section className="overflow-hidden py-16 md:py-32">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
|
||||
<div className="relative z-10 max-w-2xl">
|
||||
<h2 className="text-4xl font-semibold lg:text-5xl">
|
||||
Built for Scaling teams
|
||||
</h2>
|
||||
<p className="mt-6 text-lg">
|
||||
Empower your team with workflows that adapt to your needs, whether
|
||||
you prefer git synchronization or a AI Agents interface.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative -mx-4 rounded-3xl p-3 md:-mx-12 lg:col-span-3">
|
||||
<div className="perspective-midrange">
|
||||
<div className="rotate-x-6 -skew-2">
|
||||
<div className="aspect-88/36 relative">
|
||||
<div className="bg-radial-[at_75%_25%] to-background z-1 -inset-17 absolute from-transparent to-75%"></div>
|
||||
<Image
|
||||
src="/images/blocks/mail-upper.png"
|
||||
className="absolute inset-0 z-10"
|
||||
alt="payments illustration dark"
|
||||
width={2797}
|
||||
height={1137}
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/mail-back.png"
|
||||
className="hidden dark:block"
|
||||
alt="payments illustration dark"
|
||||
width={2797}
|
||||
height={1137}
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/mail-back-light.png"
|
||||
className="dark:hidden"
|
||||
alt="payments illustration light"
|
||||
width={2797}
|
||||
height={1137}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="size-4" />
|
||||
<h3 className="text-sm font-medium">Faaast</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an entire helping developers and innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cpu className="size-4" />
|
||||
<h3 className="text-sm font-medium">Powerful</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an entire helping developers and businesses.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Lock className="size-4" />
|
||||
<h3 className="text-sm font-medium">Security</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an helping developers businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="size-4" />
|
||||
|
||||
<h3 className="text-sm font-medium">AI Powered</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
It supports an helping developers businesses innovate.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
224
src/components/blocks/features/features-9.tsx
Normal file
224
src/components/blocks/features/features-9.tsx
Normal file
@ -0,0 +1,224 @@
|
||||
"use client";
|
||||
import { Logo } from "@/components/logo";
|
||||
import { Activity, Map as MapIcon, MessageCircle } from "lucide-react";
|
||||
import DottedMap from "dotted-map";
|
||||
import { Area, AreaChart, CartesianGrid } from "recharts";
|
||||
import {
|
||||
type ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/components/ui/chart";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/features-9
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-9.json
|
||||
*/
|
||||
export default function Features9() {
|
||||
return (
|
||||
<section className="px-4 py-16 md:py-32">
|
||||
<div className="mx-auto grid max-w-5xl border md:grid-cols-2">
|
||||
<div>
|
||||
<div className="p-6 sm:p-12">
|
||||
<span className="text-muted-foreground flex items-center gap-2">
|
||||
<MapIcon className="size-4" />
|
||||
Real time location tracking
|
||||
</span>
|
||||
|
||||
<p className="mt-8 text-2xl font-semibold">
|
||||
Advanced tracking system, Instantly locate all your assets.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div aria-hidden className="relative">
|
||||
<div className="absolute inset-0 z-10 m-auto size-fit">
|
||||
<div className="rounded-(--radius) bg-background z-1 dark:bg-muted relative flex size-fit w-fit items-center gap-2 border px-3 py-1 text-xs font-medium shadow-md shadow-zinc-950/5">
|
||||
<span className="text-lg">🇨🇩</span> Last connection from DR
|
||||
Congo
|
||||
</div>
|
||||
<div className="rounded-(--radius) bg-background absolute inset-2 -bottom-2 mx-auto border px-3 py-4 text-xs font-medium shadow-md shadow-zinc-950/5 dark:bg-zinc-900"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="bg-radial z-1 to-background absolute inset-0 from-transparent to-75%"></div>
|
||||
<Map />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-hidden border-t bg-zinc-50 p-6 sm:p-12 md:border-0 md:border-l dark:bg-transparent">
|
||||
<div className="relative z-10">
|
||||
<span className="text-muted-foreground flex items-center gap-2">
|
||||
<MessageCircle className="size-4" />
|
||||
Email and web support
|
||||
</span>
|
||||
|
||||
<p className="my-8 text-2xl font-semibold">
|
||||
Reach out via email or web for any assistance you need.
|
||||
</p>
|
||||
</div>
|
||||
<div aria-hidden className="flex flex-col gap-8">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex size-5 rounded-full border">
|
||||
<Logo className="m-auto size-3" />
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
Sat 22 Feb
|
||||
</span>
|
||||
</div>
|
||||
<div className="rounded-(--radius) bg-background mt-1.5 w-3/5 border p-3 text-xs">
|
||||
Hey, I'm having trouble with my account.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="rounded-(--radius) mb-1 ml-auto w-3/5 bg-blue-600 p-3 text-xs text-white">
|
||||
Molestiae numquam debitis et ullam distinctio provident nobis
|
||||
repudiandae deleniti necessitatibus.
|
||||
</div>
|
||||
<span className="text-muted-foreground block text-right text-xs">
|
||||
Now
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-full border-y p-12">
|
||||
<p className="text-center text-4xl font-semibold lg:text-7xl">
|
||||
99.99% Uptime
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative col-span-full">
|
||||
<div className="absolute z-10 max-w-lg px-6 pr-12 pt-6 md:px-12 md:pt-12">
|
||||
<span className="text-muted-foreground flex items-center gap-2">
|
||||
<Activity className="size-4" />
|
||||
Activity feed
|
||||
</span>
|
||||
|
||||
<p className="my-8 text-2xl font-semibold">
|
||||
Monitor your application's activity in real-time.{" "}
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
Instantly identify and resolve issues.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<MonitoringChart />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const map = new DottedMap({ height: 55, grid: "diagonal" });
|
||||
|
||||
const points = map.getPoints();
|
||||
|
||||
const svgOptions = {
|
||||
backgroundColor: "var(--color-background)",
|
||||
color: "currentColor",
|
||||
radius: 0.15,
|
||||
};
|
||||
|
||||
const Map = () => {
|
||||
const viewBox = `0 0 120 60`;
|
||||
return (
|
||||
<svg viewBox={viewBox} style={{ background: svgOptions.backgroundColor }}>
|
||||
{points.map((point, index) => (
|
||||
<circle
|
||||
key={index}
|
||||
cx={point.x}
|
||||
cy={point.y}
|
||||
r={svgOptions.radius}
|
||||
fill={svgOptions.color}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const chartConfig = {
|
||||
desktop: {
|
||||
label: "Desktop",
|
||||
color: "#2563eb",
|
||||
},
|
||||
mobile: {
|
||||
label: "Mobile",
|
||||
color: "#60a5fa",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
const chartData = [
|
||||
{ month: "May", desktop: 56, mobile: 224 },
|
||||
{ month: "June", desktop: 56, mobile: 224 },
|
||||
{ month: "January", desktop: 126, mobile: 252 },
|
||||
{ month: "February", desktop: 205, mobile: 410 },
|
||||
{ month: "March", desktop: 200, mobile: 126 },
|
||||
{ month: "April", desktop: 400, mobile: 800 },
|
||||
];
|
||||
|
||||
const MonitoringChart = () => {
|
||||
return (
|
||||
<ChartContainer className="h-120 aspect-auto md:h-96" config={chartConfig}>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor="var(--color-desktop)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="55%"
|
||||
stopColor="var(--color-desktop)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor="var(--color-mobile)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="55%"
|
||||
stopColor="var(--color-mobile)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid vertical={false} />
|
||||
<ChartTooltip
|
||||
active
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent className="dark:bg-muted" />}
|
||||
/>
|
||||
<Area
|
||||
strokeWidth={2}
|
||||
dataKey="mobile"
|
||||
type="stepBefore"
|
||||
fill="url(#fillMobile)"
|
||||
fillOpacity={0.1}
|
||||
stroke="var(--color-mobile)"
|
||||
stackId="a"
|
||||
/>
|
||||
<Area
|
||||
strokeWidth={2}
|
||||
dataKey="desktop"
|
||||
type="stepBefore"
|
||||
fill="url(#fillDesktop)"
|
||||
fillOpacity={0.1}
|
||||
stroke="var(--color-desktop)"
|
||||
stackId="a"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
);
|
||||
};
|
||||
94
src/components/blocks/features/features.tsx
Normal file
94
src/components/blocks/features/features.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Settings2, Sparkles, Zap } from "lucide-react";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/features
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-1.json
|
||||
*/
|
||||
export default function Features() {
|
||||
return (
|
||||
<section className="bg-zinc-50 py-16 dark:bg-transparent">
|
||||
<div className="@container mx-auto max-w-5xl px-6">
|
||||
<div className="text-center">
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
|
||||
Built to cover your needs
|
||||
</h2>
|
||||
<p className="mt-4">
|
||||
Libero sapiente aliquam quibusdam aspernatur, praesentium iusto
|
||||
repellendus.
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:max-w-full md:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 *:text-center md:mt-16">
|
||||
<Card className="group shadow-zinc-950/5">
|
||||
<CardHeader className="pb-3">
|
||||
<CardDecorator>
|
||||
<Zap className="size-6" aria-hidden />
|
||||
</CardDecorator>
|
||||
|
||||
<h3 className="mt-6 font-medium">Customizable</h3>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<p className="text-sm">
|
||||
Extensive customization options, allowing you to tailor every
|
||||
aspect to meet your specific needs.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="group shadow-zinc-950/5">
|
||||
<CardHeader className="pb-3">
|
||||
<CardDecorator>
|
||||
<Settings2 className="size-6" aria-hidden />
|
||||
</CardDecorator>
|
||||
|
||||
<h3 className="mt-6 font-medium">You have full control</h3>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<p className="mt-3 text-sm">
|
||||
From design elements to functionality, you have complete control
|
||||
to create a unique and personalized experience.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="group shadow-zinc-950/5">
|
||||
<CardHeader className="pb-3">
|
||||
<CardDecorator>
|
||||
<Sparkles className="size-6" aria-hidden />
|
||||
</CardDecorator>
|
||||
|
||||
<h3 className="mt-6 font-medium">Powered By AI</h3>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<p className="mt-3 text-sm">
|
||||
Elements to functionality, you have complete control to create a
|
||||
unique experience.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const CardDecorator = ({ children }: { children: ReactNode }) => (
|
||||
<div className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="bg-radial to-background absolute inset-0 from-transparent to-75%"
|
||||
/>
|
||||
<div className="bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -1,20 +1,20 @@
|
||||
'use client'
|
||||
import { Logo } from '@/components/logo'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ArrowRight, Mail, Menu, SendHorizonal, X } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
"use client";
|
||||
import { Logo } from "@/components/logo";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowRight, Mail, Menu, SendHorizonal, X } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
const menuItems = [
|
||||
{ name: 'Features', href: '#' },
|
||||
{ name: 'Solution', href: '#' },
|
||||
{ name: 'Pricing', href: '#' },
|
||||
{ name: 'About', href: '#' },
|
||||
]
|
||||
{ name: "Features", href: "#" },
|
||||
{ name: "Solution", href: "#" },
|
||||
{ name: "Pricing", href: "#" },
|
||||
{ name: "About", href: "#" },
|
||||
];
|
||||
|
||||
export default function HeroSection2() {
|
||||
const [menuState, setMenuState] = useState(false)
|
||||
const [menuState, setMenuState] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
@ -22,28 +22,48 @@ export default function HeroSection2() {
|
||||
<div className="relative mx-auto max-w-5xl px-6 py-28 lg:py-20">
|
||||
<div className="lg:flex lg:items-center lg:gap-12">
|
||||
<div className="relative z-10 mx-auto max-w-xl text-center lg:ml-0 lg:w-1/2 lg:text-left">
|
||||
<Link href="/" className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3 lg:ml-0">
|
||||
<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">New</span>
|
||||
<Link
|
||||
href="/"
|
||||
className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3 lg:ml-0"
|
||||
>
|
||||
<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
|
||||
New
|
||||
</span>
|
||||
<span className="text-sm">Introduction Tailus UI Html</span>
|
||||
<span className="bg-(--color-border) block h-4 w-px"></span>
|
||||
|
||||
<ArrowRight className="size-4" />
|
||||
</Link>
|
||||
|
||||
<h1 className="mt-10 text-balance text-4xl font-bold md:text-5xl xl:text-5xl">Production Ready Digital Marketing blocks</h1>
|
||||
<p className="mt-8">Error totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!</p>
|
||||
<h1 className="mt-10 text-balance text-4xl font-bold md:text-5xl xl:text-5xl">
|
||||
Production Ready Digital Marketing blocks
|
||||
</h1>
|
||||
<p className="mt-8">
|
||||
Error totam sit illum. Voluptas doloribus asperiores quaerat
|
||||
aperiam. Quidem harum omnis beatae ipsum soluta!
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<form action="" className="mx-auto my-10 max-w-sm lg:my-12 lg:ml-0 lg:mr-auto">
|
||||
<form
|
||||
action=""
|
||||
className="mx-auto my-10 max-w-sm lg:my-12 lg:ml-0 lg:mr-auto"
|
||||
>
|
||||
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
|
||||
<Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
|
||||
|
||||
<input placeholder="Your mail address" className="h-14 w-full bg-transparent pl-12 focus:outline-none" type="email" />
|
||||
<input
|
||||
placeholder="Your mail address"
|
||||
className="h-14 w-full bg-transparent pl-12 focus:outline-none"
|
||||
type="email"
|
||||
/>
|
||||
|
||||
<div className="md:pr-1.5 lg:pr-0">
|
||||
<Button aria-label="submit" className="rounded-lg">
|
||||
<span className="hidden md:block">Get Started</span>
|
||||
<SendHorizonal className="relative mx-auto size-5 md:hidden" strokeWidth={2} />
|
||||
<SendHorizonal
|
||||
className="relative mx-auto size-5 md:hidden"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -60,13 +80,25 @@ export default function HeroSection2() {
|
||||
<div className="absolute inset-0 -mx-4 rounded-3xl p-3 lg:col-span-3">
|
||||
<div className="relative">
|
||||
<div className="bg-radial-[at_65%_25%] to-background z-1 -inset-17 absolute from-transparent to-40%"></div>
|
||||
<Image className="hidden dark:block" src="/images/blocks/music.webp" alt="app illustration" width={2796} height={2008} />
|
||||
<Image className="dark:hidden" src="/images/blocks/music-light.webp" alt="app illustration" width={2796} height={2008} />
|
||||
<Image
|
||||
className="hidden dark:block"
|
||||
src="/images/blocks/music.webp"
|
||||
alt="app illustration"
|
||||
width={2796}
|
||||
height={2008}
|
||||
/>
|
||||
<Image
|
||||
className="dark:hidden"
|
||||
src="/images/blocks/music-light.webp"
|
||||
alt="app illustration"
|
||||
width={2796}
|
||||
height={2008}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { Autoplay, EffectCoverflow } from 'swiper/modules'
|
||||
import 'swiper/css'
|
||||
import 'swiper/css/autoplay'
|
||||
import 'swiper/css/navigation'
|
||||
import 'swiper/css/pagination'
|
||||
import 'swiper/css/effect-coverflow'
|
||||
import Link from 'next/link'
|
||||
import { Logo } from '@/components/logo'
|
||||
import { ArrowRight, Menu, Rocket, X } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Autoplay, EffectCoverflow } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/autoplay";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/effect-coverflow";
|
||||
import Link from "next/link";
|
||||
import { Logo } from "@/components/logo";
|
||||
import { ArrowRight, Menu, Rocket, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const menuItems = [
|
||||
{ name: 'Features', href: '#' },
|
||||
{ name: 'Solution', href: '#' },
|
||||
{ name: 'Pricing', href: '#' },
|
||||
{ name: 'About', href: '#' },
|
||||
]
|
||||
{ name: "Features", href: "#" },
|
||||
{ name: "Solution", href: "#" },
|
||||
{ name: "Pricing", href: "#" },
|
||||
{ name: "About", href: "#" },
|
||||
];
|
||||
|
||||
export default function HeroSection3() {
|
||||
const [menuState, setMenuState] = React.useState(false)
|
||||
const [menuState, setMenuState] = React.useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -29,8 +29,13 @@ export default function HeroSection3() {
|
||||
<div className="relative py-24 lg:py-28">
|
||||
<div className="mx-auto max-w-7xl px-6 md:px-12">
|
||||
<div className="text-center sm:mx-auto sm:w-10/12 lg:mr-auto lg:mt-0 lg:w-4/5">
|
||||
<Link href="/" className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3">
|
||||
<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">New</span>
|
||||
<Link
|
||||
href="/"
|
||||
className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3"
|
||||
>
|
||||
<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
|
||||
New
|
||||
</span>
|
||||
<span className="text-sm">Introduction Tailus UI Html</span>
|
||||
<span className="bg-(--color-border) block h-4 w-px"></span>
|
||||
|
||||
@ -40,8 +45,15 @@ export default function HeroSection3() {
|
||||
<h1 className="mt-8 text-4xl font-semibold md:text-5xl xl:text-5xl xl:[line-height:1.125]">
|
||||
Tame the Wild West <br /> of Frontend Development
|
||||
</h1>
|
||||
<p className="mx-auto mt-8 hidden max-w-2xl text-wrap text-lg sm:block">Tailwindcss highly customizable components for building modern websites and applications that look and feel the way you mean it.</p>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-wrap sm:hidden">Highly customizable components for building modern websites and applications, with your personal spark.</p>
|
||||
<p className="mx-auto mt-8 hidden max-w-2xl text-wrap text-lg sm:block">
|
||||
Tailwindcss highly customizable components for building modern
|
||||
websites and applications that look and feel the way you mean
|
||||
it.
|
||||
</p>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-wrap sm:hidden">
|
||||
Highly customizable components for building modern websites
|
||||
and applications, with your personal spark.
|
||||
</p>
|
||||
|
||||
<div className="mt-8">
|
||||
<Button size="lg" asChild>
|
||||
@ -56,13 +68,21 @@ export default function HeroSection3() {
|
||||
<div className="absolute inset-0 -top-8 left-1/2 -z-20 h-56 w-full -translate-x-1/2 [background-image:linear-gradient(to_bottom,transparent_98%,theme(colors.gray.200/75%)_98%),linear-gradient(to_right,transparent_94%,_theme(colors.gray.200/75%)_94%)] [background-size:16px_35px] [mask:radial-gradient(black,transparent_95%)] dark:opacity-10"></div>
|
||||
<div className="absolute inset-x-0 top-12 -z-[1] mx-auto h-1/3 w-2/3 rounded-full bg-blue-300 blur-3xl dark:bg-white/20"></div>
|
||||
|
||||
<Swiper slidesPerView={1} pagination={{ clickable: true }} loop autoplay={{ delay: 5000 }} modules={[Autoplay, EffectCoverflow]}>
|
||||
<Swiper
|
||||
slidesPerView={1}
|
||||
pagination={{ clickable: true }}
|
||||
loop
|
||||
autoplay={{ delay: 5000 }}
|
||||
modules={[Autoplay, EffectCoverflow]}
|
||||
>
|
||||
<SwiperSlide className="px-2">
|
||||
<div className="bg-background rounded-(--radius) h-44 max-w-lg border p-9">
|
||||
<div className="mx-auto h-12 w-max">
|
||||
<NetlifyLogo />
|
||||
</div>
|
||||
<p className="mt-6 text-center text-lg font-medium">30% Increase in revenue</p>
|
||||
<p className="mt-6 text-center text-lg font-medium">
|
||||
30% Increase in revenue
|
||||
</p>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="px-2">
|
||||
@ -70,7 +90,9 @@ export default function HeroSection3() {
|
||||
<div className="mx-auto h-12 w-max">
|
||||
<AstroLogo />
|
||||
</div>
|
||||
<p className="mt-6 text-center text-lg font-medium">45% Increase in revenue</p>
|
||||
<p className="mt-6 text-center text-lg font-medium">
|
||||
45% Increase in revenue
|
||||
</p>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="px-2">
|
||||
@ -78,7 +100,9 @@ export default function HeroSection3() {
|
||||
<div className="mx-auto h-12 w-max">
|
||||
<WorkOsLogo />
|
||||
</div>
|
||||
<p className="mt-6 text-center text-lg font-medium">60% Increase in revenue</p>
|
||||
<p className="mt-6 text-center text-lg font-medium">
|
||||
60% Increase in revenue
|
||||
</p>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
@ -88,27 +112,49 @@ export default function HeroSection3() {
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const WorkOsLogo = () => {
|
||||
return (
|
||||
<svg className="my-auto h-8 w-fit" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 251.8 48">
|
||||
<svg
|
||||
className="my-auto h-8 w-fit"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 251.8 48"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
fill="currentColor"
|
||||
className="text-[#29363D] dark:text-white"
|
||||
d="M73,7.2h7l5,20.6c0.9,3.9,1.1,6.2,1.1,6.2h0.1c0,0,0.3-2.3,1.3-6.2l4.8-20.6h7.9l5.1,20.6 c1,4,1.2,6.2,1.2,6.2h0.1c0,0,0.1-2.2,1-6.2l4.8-20.6h7l-8.8,33.9h-7.7l-5.3-20.5c-1.1-4.5-1.2-6.4-1.2-6.4h-0.1c0,0-0.1,2-1.1,6.4 l-5,20.5h-8C82,41.1,73,7.2,73,7.2z M118.2,28.8c0-7.7,5-12.8,12.6-12.8c7.5,0,12.5,5,12.5,12.8c0,7.8-5,12.8-12.5,12.8 C123.2,41.6,118.2,36.6,118.2,28.8L118.2,28.8z M136.8,28.8c0-5-2.4-7.8-6-7.8c-3.9,0-6.1,3.2-6.1,7.8c0,5.1,2.4,7.9,6.1,7.9 C134.6,36.7,136.8,33.6,136.8,28.8L136.8,28.8z M146.4,16.4h6.2V21h0.1c1.1-2.4,3.6-4.7,8-4.7c0.7,0,1.2,0.1,1.5,0.2v6.2H162 c0,0-0.6-0.2-2.1-0.2c-4.8,0-7.4,2.8-7.4,8.1v10.6h-6.2V16.4z M165.1,7.2h6.2v10.9c0,6.4-0.1,7.6-0.1,7.6h0.1l9.2-9.2h7.7 l-10.8,10.7l12.5,14h-7.3l-9-10.2l-2.3,2.3v7.9H165L165.1,7.2L165.1,7.2z M189.9,24.3c0-10.4,6.5-17.4,16.2-17.4s16.2,7,16.2,17.4 s-6.5,17.4-16.2,17.4C196.4,41.7,189.9,34.7,189.9,24.3z M215.7,24.3c0-7.1-3.8-11.9-9.5-11.9c-5.7,0-9.5,4.8-9.5,11.9 s3.8,11.9,9.5,11.9C211.8,36.2,215.7,31.4,215.7,24.3z M224.7,29.8h7.1c0,4,2.7,6.2,6.9,6.2c3.5,0,5.9-1.8,5.9-4.3 c0-2.8-1.9-3.6-7.7-4.7c-5.4-1.1-11.1-2.9-11.1-9.9c0-5.9,5-10.3,12.7-10.3c8,0,12.9,4.2,12.9,10.5h-7.1c0-3.1-2.4-5-5.8-5 c-3.5,0-5.7,1.7-5.7,4.2c0,2.6,1.5,3.7,6.3,4.6c7,1.5,12.8,2.3,12.8,10.1c0,6.2-5.4,10.3-13.3,10.3 C230.4,41.5,224.7,36.9,224.7,29.8z"></path>
|
||||
<path fill="#6363F1" d="M0,24c0,1.1,0.3,2.1,0.8,3l9.7,16.8c1,1.7,2.5,3.1,4.4,3.7c3.6,1.2,7.5-0.3,9.4-3.5l2.3-4.1 l-9.2-16l9.8-16.9L29.5,3c0.7-1.2,1.6-2.2,2.7-3H17.2c-2.6,0-5.1,1.4-6.4,3.7L0.8,21C0.3,21.9,0,22.9,0,24z"></path>
|
||||
<path fill="#6363F1" d="M55.4,24c0-1.1-0.3-2.1-0.8-3l-9.8-17c-1.9-3.3-5.8-4.7-9.4-3.5c-1.9,0.6-3.4,2-4.4,3.7 L28.7,8L38,24l-9.8,16.9L25.9,45c-0.7,1.2-1.6,2.2-2.7,3h15.1c2.6,0,5.1-1.4,6.4-3.7l10-17.3C55.1,26.1,55.4,25.1,55.4,24z"></path>
|
||||
d="M73,7.2h7l5,20.6c0.9,3.9,1.1,6.2,1.1,6.2h0.1c0,0,0.3-2.3,1.3-6.2l4.8-20.6h7.9l5.1,20.6 c1,4,1.2,6.2,1.2,6.2h0.1c0,0,0.1-2.2,1-6.2l4.8-20.6h7l-8.8,33.9h-7.7l-5.3-20.5c-1.1-4.5-1.2-6.4-1.2-6.4h-0.1c0,0-0.1,2-1.1,6.4 l-5,20.5h-8C82,41.1,73,7.2,73,7.2z M118.2,28.8c0-7.7,5-12.8,12.6-12.8c7.5,0,12.5,5,12.5,12.8c0,7.8-5,12.8-12.5,12.8 C123.2,41.6,118.2,36.6,118.2,28.8L118.2,28.8z M136.8,28.8c0-5-2.4-7.8-6-7.8c-3.9,0-6.1,3.2-6.1,7.8c0,5.1,2.4,7.9,6.1,7.9 C134.6,36.7,136.8,33.6,136.8,28.8L136.8,28.8z M146.4,16.4h6.2V21h0.1c1.1-2.4,3.6-4.7,8-4.7c0.7,0,1.2,0.1,1.5,0.2v6.2H162 c0,0-0.6-0.2-2.1-0.2c-4.8,0-7.4,2.8-7.4,8.1v10.6h-6.2V16.4z M165.1,7.2h6.2v10.9c0,6.4-0.1,7.6-0.1,7.6h0.1l9.2-9.2h7.7 l-10.8,10.7l12.5,14h-7.3l-9-10.2l-2.3,2.3v7.9H165L165.1,7.2L165.1,7.2z M189.9,24.3c0-10.4,6.5-17.4,16.2-17.4s16.2,7,16.2,17.4 s-6.5,17.4-16.2,17.4C196.4,41.7,189.9,34.7,189.9,24.3z M215.7,24.3c0-7.1-3.8-11.9-9.5-11.9c-5.7,0-9.5,4.8-9.5,11.9 s3.8,11.9,9.5,11.9C211.8,36.2,215.7,31.4,215.7,24.3z M224.7,29.8h7.1c0,4,2.7,6.2,6.9,6.2c3.5,0,5.9-1.8,5.9-4.3 c0-2.8-1.9-3.6-7.7-4.7c-5.4-1.1-11.1-2.9-11.1-9.9c0-5.9,5-10.3,12.7-10.3c8,0,12.9,4.2,12.9,10.5h-7.1c0-3.1-2.4-5-5.8-5 c-3.5,0-5.7,1.7-5.7,4.2c0,2.6,1.5,3.7,6.3,4.6c7,1.5,12.8,2.3,12.8,10.1c0,6.2-5.4,10.3-13.3,10.3 C230.4,41.5,224.7,36.9,224.7,29.8z"
|
||||
></path>
|
||||
<path
|
||||
fill="#6363F1"
|
||||
d="M0,24c0,1.1,0.3,2.1,0.8,3l9.7,16.8c1,1.7,2.5,3.1,4.4,3.7c3.6,1.2,7.5-0.3,9.4-3.5l2.3-4.1 l-9.2-16l9.8-16.9L29.5,3c0.7-1.2,1.6-2.2,2.7-3H17.2c-2.6,0-5.1,1.4-6.4,3.7L0.8,21C0.3,21.9,0,22.9,0,24z"
|
||||
></path>
|
||||
<path
|
||||
fill="#6363F1"
|
||||
d="M55.4,24c0-1.1-0.3-2.1-0.8-3l-9.8-17c-1.9-3.3-5.8-4.7-9.4-3.5c-1.9,0.6-3.4,2-4.4,3.7 L28.7,8L38,24l-9.8,16.9L25.9,45c-0.7,1.2-1.6,2.2-2.7,3h15.1c2.6,0,5.1-1.4,6.4-3.7l10-17.3C55.1,26.1,55.4,25.1,55.4,24z"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const AstroLogo = () => {
|
||||
return (
|
||||
<svg className="mx-auto h-12 w-fit" xmlns="http://www.w3.org/2000/svg" width="460" height="160" viewBox="0 0 460 160" fill="none">
|
||||
<svg
|
||||
className="mx-auto h-12 w-fit"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="460"
|
||||
height="160"
|
||||
viewBox="0 0 460 160"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M65.7846 121.175C61.2669 117.045 59.9481 108.368 61.8303 102.082C65.0939 106.045 69.6158 107.301 74.2997 108.009C81.5305 109.103 88.6318 108.694 95.349 105.389C96.1174 105.011 96.8275 104.507 97.6672 103.998C98.2974 105.826 98.4615 107.672 98.2413 109.551C97.706 114.127 95.4288 117.662 91.8069 120.341C90.3586 121.413 88.8261 122.371 87.3303 123.382C82.7349 126.487 81.4917 130.129 83.2184 135.427C83.2594 135.556 83.2961 135.685 83.389 136C81.0427 134.95 79.3289 133.421 78.023 131.411C76.6438 129.289 75.9876 126.942 75.9531 124.403C75.9358 123.167 75.9358 121.92 75.7696 120.702C75.3638 117.732 73.9694 116.402 71.3426 116.325C68.6467 116.247 66.5141 117.913 65.9486 120.538C65.9054 120.739 65.8428 120.938 65.7803 121.172L65.7846 121.175Z"
|
||||
fill="currentColor"
|
||||
@ -117,7 +163,10 @@ const AstroLogo = () => {
|
||||
d="M65.7846 121.175C61.2669 117.045 59.9481 108.368 61.8303 102.082C65.0939 106.045 69.6158 107.301 74.2997 108.009C81.5305 109.103 88.6318 108.694 95.349 105.389C96.1174 105.011 96.8275 104.507 97.6672 103.998C98.2974 105.826 98.4615 107.672 98.2413 109.551C97.706 114.127 95.4288 117.662 91.8069 120.341C90.3586 121.413 88.8261 122.371 87.3303 123.382C82.7349 126.487 81.4917 130.129 83.2184 135.427C83.2594 135.556 83.2961 135.685 83.389 136C81.0427 134.95 79.3289 133.421 78.023 131.411C76.6438 129.289 75.9876 126.942 75.9531 124.403C75.9358 123.167 75.9358 121.92 75.7696 120.702C75.3638 117.732 73.9694 116.402 71.3426 116.325C68.6467 116.247 66.5141 117.913 65.9486 120.538C65.9054 120.739 65.8428 120.938 65.7803 121.172L65.7846 121.175Z"
|
||||
fill="url(#paint0_linear_1_33)"
|
||||
/>
|
||||
<path d="M40 101.034C40 101.034 53.3775 94.5177 66.7924 94.5177L76.9068 63.2155C77.2855 61.7017 78.3911 60.6729 79.6393 60.6729C80.8875 60.6729 81.9932 61.7017 82.3719 63.2155L92.4862 94.5177C108.374 94.5177 119.279 101.034 119.279 101.034C119.279 101.034 96.5558 39.133 96.5114 39.0088C95.8592 37.1787 94.7583 36 93.274 36H66.007C64.5227 36 63.4662 37.1787 62.7696 39.0088C62.7205 39.1307 40 101.034 40 101.034Z" fill="currentColor" />
|
||||
<path
|
||||
d="M40 101.034C40 101.034 53.3775 94.5177 66.7924 94.5177L76.9068 63.2155C77.2855 61.7017 78.3911 60.6729 79.6393 60.6729C80.8875 60.6729 81.9932 61.7017 82.3719 63.2155L92.4862 94.5177C108.374 94.5177 119.279 101.034 119.279 101.034C119.279 101.034 96.5558 39.133 96.5114 39.0088C95.8592 37.1787 94.7583 36 93.274 36H66.007C64.5227 36 63.4662 37.1787 62.7696 39.0088C62.7205 39.1307 40 101.034 40 101.034Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M181.043 81.1227C181.043 86.6079 174.22 89.8838 164.773 89.8838C158.624 89.8838 156.45 88.3601 156.45 85.1604C156.45 81.8083 159.149 80.2085 165.297 80.2085C170.846 80.2085 175.569 80.2846 181.043 80.9703V81.1227ZM181.118 74.3423C177.744 73.5805 172.645 73.1234 166.572 73.1234C148.877 73.1234 140.555 77.3135 140.555 87.065C140.555 97.1975 146.253 101.083 159.449 101.083C170.621 101.083 178.193 98.2641 180.968 91.3313H181.417C181.342 93.0074 181.268 94.6834 181.268 95.9785C181.268 99.5592 181.867 99.8639 184.791 99.8639H198.587C197.837 97.7308 197.388 91.7122 197.388 86.5317C197.388 80.9703 197.612 76.7802 197.612 71.1426C197.612 59.6388 190.715 52.3251 169.121 52.3251C159.824 52.3251 149.477 53.925 141.605 56.2867C142.354 59.4102 143.404 65.7335 143.929 69.8474C150.752 66.6477 160.424 65.2764 167.922 65.2764C178.268 65.2764 181.118 67.6381 181.118 72.4377V74.3423Z"
|
||||
fill="currentColor"
|
||||
@ -134,38 +183,91 @@ const AstroLogo = () => {
|
||||
d="M329.736 64.286C329.811 60.3244 329.886 56.9724 329.961 53.6964H314.89C315.115 60.2483 315.115 66.9525 315.115 76.7802C315.115 86.6079 315.04 93.3883 314.89 99.8639H332.135C331.835 95.2929 331.76 87.5983 331.76 81.0465C331.76 70.6855 335.959 67.7143 345.481 67.7143C349.905 67.7143 353.054 68.2476 355.828 69.238C355.903 65.3526 356.653 57.8104 357.102 54.4583C354.253 53.6203 351.104 53.087 347.28 53.087C339.108 53.0108 333.11 56.3629 330.336 64.3622L329.736 64.286Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path d="M404.808 76.4754C404.808 84.7795 398.81 88.6649 389.363 88.6649C379.991 88.6649 373.993 85.008 373.993 76.4754C373.993 67.9428 380.066 64.7431 389.363 64.7431C398.735 64.7431 404.808 68.1714 404.808 76.4754ZM420.478 76.0945C420.478 59.5626 407.582 52.1728 389.363 52.1728C371.069 52.1728 358.623 59.5626 358.623 76.0945C358.623 92.5503 370.244 101.388 389.288 101.388C408.482 101.388 420.478 92.5503 420.478 76.0945Z" fill="currentColor" />
|
||||
<path
|
||||
d="M404.808 76.4754C404.808 84.7795 398.81 88.6649 389.363 88.6649C379.991 88.6649 373.993 85.008 373.993 76.4754C373.993 67.9428 380.066 64.7431 389.363 64.7431C398.735 64.7431 404.808 68.1714 404.808 76.4754ZM420.478 76.0945C420.478 59.5626 407.582 52.1728 389.363 52.1728C371.069 52.1728 358.623 59.5626 358.623 76.0945C358.623 92.5503 370.244 101.388 389.288 101.388C408.482 101.388 420.478 92.5503 420.478 76.0945Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1_33" x1="61.0003" y1="136" x2="104.622" y2="115.39" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient
|
||||
id="paint0_linear_1_33"
|
||||
x1="61.0003"
|
||||
y1="136"
|
||||
x2="104.622"
|
||||
y2="115.39"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#D83333" />
|
||||
<stop offset="1" stopColor="#F041FF" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const NetlifyLogo = () => {
|
||||
return (
|
||||
<>
|
||||
<svg className="mx-auto h-12 w-fit dark:hidden" xmlns="http://www.w3.org/2000/svg" width="512" height="209" viewBox="0 0 512 209" fill="none">
|
||||
<svg
|
||||
className="mx-auto h-12 w-fit dark:hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="512"
|
||||
height="209"
|
||||
viewBox="0 0 512 209"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0_235_8)">
|
||||
<path d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z" fill="#05BDBA" />
|
||||
<path d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z" fill="#05BDBA" />
|
||||
<path d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z" fill="#05BDBA" />
|
||||
<path d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z" fill="#05BDBA" />
|
||||
<path d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z" fill="#05BDBA" />
|
||||
<path d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z" fill="#05BDBA" />
|
||||
<path
|
||||
d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z"
|
||||
fill="#05BDBA"
|
||||
/>
|
||||
<path
|
||||
d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z"
|
||||
fill="#05BDBA"
|
||||
/>
|
||||
<path
|
||||
d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z"
|
||||
fill="#05BDBA"
|
||||
/>
|
||||
<path
|
||||
d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z"
|
||||
fill="#05BDBA"
|
||||
/>
|
||||
<path
|
||||
d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z"
|
||||
fill="#05BDBA"
|
||||
/>
|
||||
<path
|
||||
d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z"
|
||||
fill="#05BDBA"
|
||||
/>
|
||||
<path
|
||||
d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z"
|
||||
fill="#014847"
|
||||
/>
|
||||
<path d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z" fill="#014847" />
|
||||
<path d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z" fill="#014847" />
|
||||
<path d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z" fill="#014847" />
|
||||
<path d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z" fill="#014847" />
|
||||
<path d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z" fill="#014847" />
|
||||
<path d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z" fill="#014847" />
|
||||
<path
|
||||
d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z"
|
||||
fill="#014847"
|
||||
/>
|
||||
<path
|
||||
d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z"
|
||||
fill="#014847"
|
||||
/>
|
||||
<path
|
||||
d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z"
|
||||
fill="#014847"
|
||||
/>
|
||||
<path
|
||||
d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z"
|
||||
fill="#014847"
|
||||
/>
|
||||
<path
|
||||
d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z"
|
||||
fill="#014847"
|
||||
/>
|
||||
<path
|
||||
d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z"
|
||||
fill="#014847"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_235_8">
|
||||
@ -173,24 +275,67 @@ const NetlifyLogo = () => {
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg className="mx-auto hidden h-12 w-fit dark:block" xmlns="http://www.w3.org/2000/svg" width="512" height="209" viewBox="0 0 512 209" fill="none">
|
||||
<svg
|
||||
className="mx-auto hidden h-12 w-fit dark:block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="512"
|
||||
height="209"
|
||||
viewBox="0 0 512 209"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0_235_26)">
|
||||
<path d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z" fill="#32E6E2" />
|
||||
<path d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z" fill="#32E6E2" />
|
||||
<path d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z" fill="#32E6E2" />
|
||||
<path d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z" fill="#32E6E2" />
|
||||
<path d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z" fill="#32E6E2" />
|
||||
<path d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z" fill="#32E6E2" />
|
||||
<path
|
||||
d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z"
|
||||
fill="#32E6E2"
|
||||
/>
|
||||
<path
|
||||
d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z"
|
||||
fill="#32E6E2"
|
||||
/>
|
||||
<path
|
||||
d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z"
|
||||
fill="#32E6E2"
|
||||
/>
|
||||
<path
|
||||
d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z"
|
||||
fill="#32E6E2"
|
||||
/>
|
||||
<path
|
||||
d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z"
|
||||
fill="#32E6E2"
|
||||
/>
|
||||
<path
|
||||
d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z"
|
||||
fill="#32E6E2"
|
||||
/>
|
||||
<path
|
||||
d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z" fill="white" />
|
||||
<path d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z" fill="white" />
|
||||
<path d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z" fill="white" />
|
||||
<path d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z" fill="white" />
|
||||
<path d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z" fill="white" />
|
||||
<path d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z" fill="white" />
|
||||
<path
|
||||
d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_235_26">
|
||||
@ -199,5 +344,5 @@ const NetlifyLogo = () => {
|
||||
</defs>
|
||||
</svg>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { Logo } from '@/components/logo'
|
||||
import { ArrowRight, Menu, Rocket, X } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import Image from 'next/image'
|
||||
"use client";
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Logo } from "@/components/logo";
|
||||
import { ArrowRight, Menu, Rocket, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Image from "next/image";
|
||||
|
||||
const menuItems = [
|
||||
{ name: 'Features', href: '#' },
|
||||
{ name: 'Solution', href: '#' },
|
||||
{ name: 'Pricing', href: '#' },
|
||||
{ name: 'About', href: '#' },
|
||||
]
|
||||
{ name: "Features", href: "#" },
|
||||
{ name: "Solution", href: "#" },
|
||||
{ name: "Pricing", href: "#" },
|
||||
{ name: "About", href: "#" },
|
||||
];
|
||||
|
||||
export default function HeroSection4() {
|
||||
const [menuState, setMenuState] = React.useState(false)
|
||||
const [menuState, setMenuState] = React.useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -23,17 +23,31 @@ export default function HeroSection4() {
|
||||
<div className="relative">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="max-w-3xl text-center sm:mx-auto lg:mr-auto lg:mt-0 lg:w-4/5">
|
||||
<Link href="/" className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3">
|
||||
<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">New</span>
|
||||
<Link
|
||||
href="/"
|
||||
className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3"
|
||||
>
|
||||
<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
|
||||
New
|
||||
</span>
|
||||
<span className="text-sm">Introduction Tailus UI Html</span>
|
||||
<span className="bg-(--color-border) block h-4 w-px"></span>
|
||||
|
||||
<ArrowRight className="size-4" />
|
||||
</Link>
|
||||
|
||||
<h1 className="mt-8 text-balance text-4xl font-semibold md:text-5xl xl:text-6xl xl:[line-height:1.125]">Modern Software testing reimagined</h1>
|
||||
<p className="mx-auto mt-8 hidden max-w-2xl text-wrap text-lg sm:block">Tailwindcss highly customizable components for building modern websites and applications that look and feel the way you mean it.</p>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-wrap sm:hidden">Highly customizable components for building modern websites and applications, with your personal spark.</p>
|
||||
<h1 className="mt-8 text-balance text-4xl font-semibold md:text-5xl xl:text-6xl xl:[line-height:1.125]">
|
||||
Modern Software testing reimagined
|
||||
</h1>
|
||||
<p className="mx-auto mt-8 hidden max-w-2xl text-wrap text-lg sm:block">
|
||||
Tailwindcss highly customizable components for building modern
|
||||
websites and applications that look and feel the way you mean
|
||||
it.
|
||||
</p>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-wrap sm:hidden">
|
||||
Highly customizable components for building modern websites
|
||||
and applications, with your personal spark.
|
||||
</p>
|
||||
|
||||
<div className="mt-8">
|
||||
<Button size="lg" asChild>
|
||||
@ -46,15 +60,30 @@ export default function HeroSection4() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-16">
|
||||
<div aria-hidden className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%" />
|
||||
<div
|
||||
aria-hidden
|
||||
className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%"
|
||||
/>
|
||||
<div className="relative mx-auto max-w-6xl overflow-hidden px-4">
|
||||
<Image className="z-2 border-border/25 relative hidden rounded-2xl border dark:block" src="/images/blocks/music.png" alt="app screen" width={2796} height={2008} />
|
||||
<Image className="z-2 border-border/25 relative rounded-2xl border dark:hidden" src="/images/blocks/music-light.png" alt="app screen" width={2796} height={2008} />
|
||||
<Image
|
||||
className="z-2 border-border/25 relative hidden rounded-2xl border dark:block"
|
||||
src="/images/blocks/music.png"
|
||||
alt="app screen"
|
||||
width={2796}
|
||||
height={2008}
|
||||
/>
|
||||
<Image
|
||||
className="z-2 border-border/25 relative rounded-2xl border dark:hidden"
|
||||
src="/images/blocks/music-light.png"
|
||||
alt="app screen"
|
||||
width={2796}
|
||||
height={2008}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,24 +1,27 @@
|
||||
'use client'
|
||||
import { Logo } from '@/components/logo'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Menu, X } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
"use client";
|
||||
import { Logo } from "@/components/logo";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
const menuItems = [
|
||||
{ name: 'Features', href: '#' },
|
||||
{ name: 'Solution', href: '#' },
|
||||
{ name: 'Pricing', href: '#' },
|
||||
{ name: 'About', href: '#' },
|
||||
]
|
||||
{ name: "Features", href: "#" },
|
||||
{ name: "Solution", href: "#" },
|
||||
{ name: "Pricing", href: "#" },
|
||||
{ name: "About", href: "#" },
|
||||
];
|
||||
|
||||
export default function HeroSection() {
|
||||
const [menuState, setMenuState] = useState(false)
|
||||
const [menuState, setMenuState] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div aria-hidden className="z-2 absolute inset-0 isolate hidden opacity-50 contain-strict lg:block">
|
||||
<div
|
||||
aria-hidden
|
||||
className="z-2 absolute inset-0 isolate hidden opacity-50 contain-strict lg:block"
|
||||
>
|
||||
<div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
|
||||
<div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
|
||||
<div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
|
||||
@ -27,8 +30,13 @@ export default function HeroSection() {
|
||||
<section className="overflow-hidden bg-white dark:bg-transparent">
|
||||
<div className="relative mx-auto max-w-5xl px-6 py-28 lg:py-24">
|
||||
<div className="relative z-10 mx-auto max-w-2xl text-center">
|
||||
<h1 className="text-balance text-4xl font-semibold md:text-5xl lg:text-6xl">Modern Software testing reimagined</h1>
|
||||
<p className="mx-auto my-8 max-w-2xl text-xl">Officiis laudantium excepturi ducimus rerum dignissimos, and tempora nam vitae, excepturi ducimus iste provident dolores.</p>
|
||||
<h1 className="text-balance text-4xl font-semibold md:text-5xl lg:text-6xl">
|
||||
Modern Software testing reimagined
|
||||
</h1>
|
||||
<p className="mx-auto my-8 max-w-2xl text-xl">
|
||||
Officiis laudantium excepturi ducimus rerum dignissimos, and
|
||||
tempora nam vitae, excepturi ducimus iste provident dolores.
|
||||
</p>
|
||||
|
||||
<Button asChild size="lg">
|
||||
<Link href="#">
|
||||
@ -42,16 +50,46 @@ export default function HeroSection() {
|
||||
<div className="perspective-distant -mr-16 pl-16 lg:-mr-56 lg:pl-56">
|
||||
<div className="[transform:rotateX(20deg);]">
|
||||
<div className="lg:h-176 relative skew-x-[.36rad]">
|
||||
<div aria-hidden className="bg-linear-to-b from-background to-background z-1 absolute -inset-16 via-transparent sm:-inset-32" />
|
||||
<div aria-hidden className="bg-linear-to-r from-background to-background z-1 absolute -inset-16 bg-white/50 via-transparent sm:-inset-32 dark:bg-transparent" />
|
||||
<div
|
||||
aria-hidden
|
||||
className="bg-linear-to-b from-background to-background z-1 absolute -inset-16 via-transparent sm:-inset-32"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="bg-linear-to-r from-background to-background z-1 absolute -inset-16 bg-white/50 via-transparent sm:-inset-32 dark:bg-transparent"
|
||||
/>
|
||||
|
||||
<div aria-hidden className="absolute -inset-16 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px] [--color-border:var(--color-zinc-400)] sm:-inset-32 dark:[--color-border:color-mix(in_oklab,var(--color-white)_20%,transparent)]" />
|
||||
<div aria-hidden className="from-background z-11 absolute inset-0 bg-gradient-to-l" />
|
||||
<div aria-hidden className="z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]" />
|
||||
<div aria-hidden className="z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]" />
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute -inset-16 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px] [--color-border:var(--color-zinc-400)] sm:-inset-32 dark:[--color-border:color-mix(in_oklab,var(--color-white)_20%,transparent)]"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="from-background z-11 absolute inset-0 bg-gradient-to-l"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]"
|
||||
/>
|
||||
|
||||
<Image className="rounded-(--radius) z-1 relative border dark:hidden" src="/images/blocks/card.png" alt="tailus ui hero section" width={2880} height={2074} />
|
||||
<Image className="rounded-(--radius) z-1 relative hidden border dark:block" src="/images/blocks/dark-card.webp" alt="tailus ui hero section" width={2880} height={2074} />
|
||||
<Image
|
||||
className="rounded-(--radius) z-1 relative border dark:hidden"
|
||||
src="/images/blocks/card.png"
|
||||
alt="tailus ui hero section"
|
||||
width={2880}
|
||||
height={2074}
|
||||
/>
|
||||
<Image
|
||||
className="rounded-(--radius) z-1 relative hidden border dark:block"
|
||||
src="/images/blocks/dark-card.webp"
|
||||
alt="tailus ui hero section"
|
||||
width={2880}
|
||||
height={2074}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,5 +97,5 @@ export default function HeroSection() {
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,22 +1,90 @@
|
||||
export default function LogoCloud() {
|
||||
return (
|
||||
<section className="bg-background py-16">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<h2 className="text-center text-lg font-medium">Your favorite companies are our partners.</h2>
|
||||
<div className="mx-auto mt-20 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">
|
||||
<img className="h-5 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/nvidia.svg" alt="Nvidia Logo" height="20" width="auto" />
|
||||
<img className="h-4 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/column.svg" alt="Column Logo" height="16" width="auto" />
|
||||
<img className="h-4 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/github.svg" alt="GitHub Logo" height="16" width="auto" />
|
||||
<img className="h-5 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/nike.svg" alt="Nike Logo" height="20" width="auto" />
|
||||
<img className="h-4 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/laravel.svg" alt="Laravel Logo" height="16" width="auto" />
|
||||
<img className="h-7 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/lilly.svg" alt="Lilly Logo" height="28" width="auto" />
|
||||
<img className="h-5 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg" alt="Lemon Squeezy Logo" height="20" width="auto" />
|
||||
<img className="h-6 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/openai.svg" alt="OpenAI Logo" height="24" width="auto" />
|
||||
<img className="h-4 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/tailwindcss.svg" alt="Tailwind CSS Logo" height="16" width="auto" />
|
||||
<img className="h-5 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/vercel.svg" alt="Vercel Logo" height="20" width="auto" />
|
||||
<img className="h-5 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/zapier.svg" alt="Zapier Logo" height="20" width="auto" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
return (
|
||||
<section className="bg-background py-16">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<h2 className="text-center text-lg font-medium">
|
||||
Your favorite companies are our partners.
|
||||
</h2>
|
||||
<div className="mx-auto mt-20 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nvidia.svg"
|
||||
alt="Nvidia Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/column.svg"
|
||||
alt="Column Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/github.svg"
|
||||
alt="GitHub Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nike.svg"
|
||||
alt="Nike Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/laravel.svg"
|
||||
alt="Laravel Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-7 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/lilly.svg"
|
||||
alt="Lilly Logo"
|
||||
height="28"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
|
||||
alt="Lemon Squeezy Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-6 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/openai.svg"
|
||||
alt="OpenAI Logo"
|
||||
height="24"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/tailwindcss.svg"
|
||||
alt="Tailwind CSS Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/zapier.svg"
|
||||
alt="Zapier Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Check } from 'lucide-react'
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/pricing
|
||||
@ -11,8 +17,14 @@ export default function Pricing3() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="mx-auto max-w-2xl space-y-6 text-center">
|
||||
<h1 className="text-center text-4xl font-semibold lg:text-5xl">Pricing that Scales with You</h1>
|
||||
<p>Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<h1 className="text-center text-4xl font-semibold lg:text-5xl">
|
||||
Pricing that Scales with You
|
||||
</h1>
|
||||
<p>
|
||||
Gemini is evolving to be more than just the models. It supports an
|
||||
entire to the APIs and platforms helping developers and businesses
|
||||
innovate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-3">
|
||||
@ -32,7 +44,11 @@ export default function Pricing3() {
|
||||
<hr className="border-dashed" />
|
||||
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{['Basic Analytics Dashboard', '5GB Cloud Storage', 'Email and Chat Support'].map((item, index) => (
|
||||
{[
|
||||
"Basic Analytics Dashboard",
|
||||
"5GB Cloud Storage",
|
||||
"Email and Chat Support",
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
@ -43,12 +59,16 @@ export default function Pricing3() {
|
||||
</Card>
|
||||
|
||||
<Card className="relative">
|
||||
<span className="absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full px-3 py-1 text-xs font-medium bg-primary text-primary-foreground">Popular</span>
|
||||
<span className="absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full px-3 py-1 text-xs font-medium bg-primary text-primary-foreground">
|
||||
Popular
|
||||
</span>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle className="font-medium">Pro</CardTitle>
|
||||
|
||||
<span className="my-3 block text-2xl font-semibold">$19 / mo</span>
|
||||
<span className="my-3 block text-2xl font-semibold">
|
||||
$19 / mo
|
||||
</span>
|
||||
|
||||
<CardDescription className="text-sm">Per editor</CardDescription>
|
||||
|
||||
@ -61,7 +81,18 @@ export default function Pricing3() {
|
||||
<hr className="border-dashed" />
|
||||
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{['Everything in Free Plan', '5GB Cloud Storage', 'Email and Chat Support', 'Access to Community Forum', 'Single User Access', 'Access to Basic Templates', 'Mobile App Access', '1 Custom Report Per Month', 'Monthly Product Updates', 'Standard Security Features'].map((item, index) => (
|
||||
{[
|
||||
"Everything in Free Plan",
|
||||
"5GB Cloud Storage",
|
||||
"Email and Chat Support",
|
||||
"Access to Community Forum",
|
||||
"Single User Access",
|
||||
"Access to Basic Templates",
|
||||
"Mobile App Access",
|
||||
"1 Custom Report Per Month",
|
||||
"Monthly Product Updates",
|
||||
"Standard Security Features",
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
@ -75,7 +106,9 @@ export default function Pricing3() {
|
||||
<CardHeader>
|
||||
<CardTitle className="font-medium">Startup</CardTitle>
|
||||
|
||||
<span className="my-3 block text-2xl font-semibold">$29 / mo</span>
|
||||
<span className="my-3 block text-2xl font-semibold">
|
||||
$29 / mo
|
||||
</span>
|
||||
|
||||
<CardDescription className="text-sm">Per editor</CardDescription>
|
||||
|
||||
@ -88,7 +121,11 @@ export default function Pricing3() {
|
||||
<hr className="border-dashed" />
|
||||
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{['Everything in Pro Plan', '5GB Cloud Storage', 'Email and Chat Support'].map((item, index) => (
|
||||
{[
|
||||
"Everything in Pro Plan",
|
||||
"5GB Cloud Storage",
|
||||
"Email and Chat Support",
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
@ -100,5 +137,5 @@ export default function Pricing3() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Check } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Check } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/pricing
|
||||
@ -10,8 +10,14 @@ export default function Pricing4() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<div className="mx-auto max-w-2xl space-y-6 text-center">
|
||||
<h1 className="text-center text-4xl font-semibold lg:text-5xl">Pricing that Scales with You</h1>
|
||||
<p>Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<h1 className="text-center text-4xl font-semibold lg:text-5xl">
|
||||
Pricing that Scales with You
|
||||
</h1>
|
||||
<p>
|
||||
Gemini is evolving to be more than just the models. It supports an
|
||||
entire to the APIs and platforms helping developers and businesses
|
||||
innovate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-5 md:gap-0">
|
||||
@ -19,7 +25,9 @@ export default function Pricing4() {
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="font-medium">Free</h2>
|
||||
<span className="my-3 block text-2xl font-semibold">$0 / mo</span>
|
||||
<span className="my-3 block text-2xl font-semibold">
|
||||
$0 / mo
|
||||
</span>
|
||||
<p className="text-muted-foreground text-sm">Per editor</p>
|
||||
</div>
|
||||
|
||||
@ -30,7 +38,11 @@ export default function Pricing4() {
|
||||
<hr className="border-dashed" />
|
||||
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{['Basic Analytics Dashboard', '5GB Cloud Storage', 'Email and Chat Support'].map((item, index) => (
|
||||
{[
|
||||
"Basic Analytics Dashboard",
|
||||
"5GB Cloud Storage",
|
||||
"Email and Chat Support",
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
@ -45,7 +57,9 @@ export default function Pricing4() {
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="font-medium">Pro</h2>
|
||||
<span className="my-3 block text-2xl font-semibold">$19 / mo</span>
|
||||
<span className="my-3 block text-2xl font-semibold">
|
||||
$19 / mo
|
||||
</span>
|
||||
<p className="text-muted-foreground text-sm">Per editor</p>
|
||||
</div>
|
||||
|
||||
@ -55,10 +69,23 @@ export default function Pricing4() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm font-medium">Everything in free plus :</div>
|
||||
<div className="text-sm font-medium">
|
||||
Everything in free plus :
|
||||
</div>
|
||||
|
||||
<ul className="mt-4 list-outside space-y-3 text-sm">
|
||||
{['Everything in Free Plan', '5GB Cloud Storage', 'Email and Chat Support', 'Access to Community Forum', 'Single User Access', 'Access to Basic Templates', 'Mobile App Access', '1 Custom Report Per Month', 'Monthly Product Updates', 'Standard Security Features'].map((item, index) => (
|
||||
{[
|
||||
"Everything in Free Plan",
|
||||
"5GB Cloud Storage",
|
||||
"Email and Chat Support",
|
||||
"Access to Community Forum",
|
||||
"Single User Access",
|
||||
"Access to Basic Templates",
|
||||
"Mobile App Access",
|
||||
"1 Custom Report Per Month",
|
||||
"Monthly Product Updates",
|
||||
"Standard Security Features",
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
@ -71,5 +98,5 @@ export default function Pricing4() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Check } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Check } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/pricing
|
||||
@ -10,7 +10,9 @@ export default function Pricing5() {
|
||||
<div className="py-16">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="text-balance text-3xl font-bold md:text-4xl lg:text-5xl">Start managing your company smarter today</h2>
|
||||
<h2 className="text-balance text-3xl font-bold md:text-4xl lg:text-5xl">
|
||||
Start managing your company smarter today
|
||||
</h2>
|
||||
</div>
|
||||
<div className="mt-8 md:mt-20">
|
||||
<div className="bg-card relative rounded-3xl border shadow-2xl shadow-zinc-950/5">
|
||||
@ -29,23 +31,58 @@ export default function Pricing5() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground mt-12 text-sm">Includes : Security, Unlimited Storage, Payment, Search engine, and all features</p>
|
||||
<p className="text-muted-foreground mt-12 text-sm">
|
||||
Includes : Security, Unlimited Storage, Payment, Search
|
||||
engine, and all features
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<ul role="list" className="space-y-4">
|
||||
{['First premium advantage', 'Second advantage weekly', 'Third advantage donate to project', 'Fourth, access to all components weekly'].map((item, index) => (
|
||||
{[
|
||||
"First premium advantage",
|
||||
"Second advantage weekly",
|
||||
"Third advantage donate to project",
|
||||
"Fourth, access to all components weekly",
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-muted-foreground mt-6 text-sm">Team can be any size, and you can add or switch members as needed. Companies using our platform include:</p>
|
||||
<p className="text-muted-foreground mt-6 text-sm">
|
||||
Team can be any size, and you can add or switch members as
|
||||
needed. Companies using our platform include:
|
||||
</p>
|
||||
<div className="mt-12 flex flex-wrap items-center justify-between gap-6">
|
||||
<img className="h-5 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/nvidia.svg" alt="Nvidia Logo" height="20" width="auto" />
|
||||
<img className="h-4 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/column.svg" alt="Column Logo" height="16" width="auto" />
|
||||
<img className="h-4 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/github.svg" alt="GitHub Logo" height="16" width="auto" />
|
||||
<img className="h-5 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/nike.svg" alt="Nike Logo" height="20" width="auto" />
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nvidia.svg"
|
||||
alt="Nvidia Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/column.svg"
|
||||
alt="Column Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/github.svg"
|
||||
alt="GitHub Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nike.svg"
|
||||
alt="Nike Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,5 +90,5 @@ export default function Pricing5() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,101 +1,138 @@
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Check } from 'lucide-react'
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<section className="py-16 md:py-32">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="mx-auto max-w-2xl space-y-6 text-center">
|
||||
<h1 className="text-center text-4xl font-semibold lg:text-5xl">Pricing that Scales with You</h1>
|
||||
<p>Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
</div>
|
||||
return (
|
||||
<section className="py-16 md:py-32">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="mx-auto max-w-2xl space-y-6 text-center">
|
||||
<h1 className="text-center text-4xl font-semibold lg:text-5xl">
|
||||
Pricing that Scales with You
|
||||
</h1>
|
||||
<p>
|
||||
Gemini is evolving to be more than just the models. It supports an
|
||||
entire to the APIs and platforms helping developers and businesses
|
||||
innovate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-medium">Free</CardTitle>
|
||||
<div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-medium">Free</CardTitle>
|
||||
|
||||
<span className="my-3 block text-2xl font-semibold">$0 / mo</span>
|
||||
<span className="my-3 block text-2xl font-semibold">$0 / mo</span>
|
||||
|
||||
<CardDescription className="text-sm">Per editor</CardDescription>
|
||||
<Button asChild variant="outline" className="mt-4 w-full">
|
||||
<Link href="">Get Started</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardDescription className="text-sm">Per editor</CardDescription>
|
||||
<Button asChild variant="outline" className="mt-4 w-full">
|
||||
<Link href="">Get Started</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<hr className="border-dashed" />
|
||||
<CardContent className="space-y-4">
|
||||
<hr className="border-dashed" />
|
||||
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{['Basic Analytics Dashboard', '5GB Cloud Storage', 'Email and Chat Support'].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{[
|
||||
"Basic Analytics Dashboard",
|
||||
"5GB Cloud Storage",
|
||||
"Email and Chat Support",
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="relative">
|
||||
<span className="bg-linear-to-br/increasing absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-inset ring-white/20 ring-offset-1 ring-offset-gray-950/5">Popular</span>
|
||||
<Card className="relative">
|
||||
<span className="bg-linear-to-br/increasing absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-inset ring-white/20 ring-offset-1 ring-offset-gray-950/5">
|
||||
Popular
|
||||
</span>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle className="font-medium">Pro</CardTitle>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-medium">Pro</CardTitle>
|
||||
|
||||
<span className="my-3 block text-2xl font-semibold">$19 / mo</span>
|
||||
<span className="my-3 block text-2xl font-semibold">
|
||||
$19 / mo
|
||||
</span>
|
||||
|
||||
<CardDescription className="text-sm">Per editor</CardDescription>
|
||||
<CardDescription className="text-sm">Per editor</CardDescription>
|
||||
|
||||
<Button asChild className="mt-4 w-full">
|
||||
<Link href="">Get Started</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<Button asChild className="mt-4 w-full">
|
||||
<Link href="">Get Started</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<hr className="border-dashed" />
|
||||
<CardContent className="space-y-4">
|
||||
<hr className="border-dashed" />
|
||||
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{['Everything in Free Plan', '5GB Cloud Storage', 'Email and Chat Support', 'Access to Community Forum', 'Single User Access', 'Access to Basic Templates', 'Mobile App Access', '1 Custom Report Per Month', 'Monthly Product Updates', 'Standard Security Features'].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{[
|
||||
"Everything in Free Plan",
|
||||
"5GB Cloud Storage",
|
||||
"Email and Chat Support",
|
||||
"Access to Community Forum",
|
||||
"Single User Access",
|
||||
"Access to Basic Templates",
|
||||
"Mobile App Access",
|
||||
"1 Custom Report Per Month",
|
||||
"Monthly Product Updates",
|
||||
"Standard Security Features",
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="flex flex-col">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-medium">Startup</CardTitle>
|
||||
<Card className="flex flex-col">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-medium">Startup</CardTitle>
|
||||
|
||||
<span className="my-3 block text-2xl font-semibold">$29 / mo</span>
|
||||
<span className="my-3 block text-2xl font-semibold">
|
||||
$29 / mo
|
||||
</span>
|
||||
|
||||
<CardDescription className="text-sm">Per editor</CardDescription>
|
||||
<CardDescription className="text-sm">Per editor</CardDescription>
|
||||
|
||||
<Button asChild variant="outline" className="mt-4 w-full">
|
||||
<Link href="">Get Started</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<Button asChild variant="outline" className="mt-4 w-full">
|
||||
<Link href="">Get Started</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<hr className="border-dashed" />
|
||||
<CardContent className="space-y-4">
|
||||
<hr className="border-dashed" />
|
||||
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{['Everything in Pro Plan', '5GB Cloud Storage', 'Email and Chat Support'].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
<ul className="list-outside space-y-3 text-sm">
|
||||
{[
|
||||
"Everything in Pro Plan",
|
||||
"5GB Cloud Storage",
|
||||
"Email and Chat Support",
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="size-3" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* https://nsui.irung.me/stats
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/stats-2.json
|
||||
*/
|
||||
export default function Stats2() {
|
||||
@ -8,8 +8,14 @@ export default function Stats2() {
|
||||
<section className="py-12">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
|
||||
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
|
||||
<h2 className="text-4xl font-semibold lg:text-5xl">Tailus UI in numbers</h2>
|
||||
<p>Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<h2 className="text-4xl font-semibold lg:text-5xl">
|
||||
Tailus UI in numbers
|
||||
</h2>
|
||||
<p>
|
||||
Gemini is evolving to be more than just the models. It supports an
|
||||
entire to the APIs and platforms helping developers and businesses
|
||||
innovate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-0.5 *:text-center md:grid-cols-3 dark:[--color-muted:var(--color-zinc-900)]">
|
||||
@ -28,5 +34,5 @@ export default function Stats2() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* https://nsui.irung.me/stats
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/stats-3.json
|
||||
*/
|
||||
export default function Stats3() {
|
||||
@ -8,8 +8,14 @@ export default function Stats3() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
|
||||
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
|
||||
<h2 className="text-4xl font-semibold lg:text-5xl">Tailus UI in numbers</h2>
|
||||
<p>Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<h2 className="text-4xl font-semibold lg:text-5xl">
|
||||
Tailus UI in numbers
|
||||
</h2>
|
||||
<p>
|
||||
Gemini is evolving to be more than just the models. It supports an
|
||||
entire to the APIs and platforms helping developers and businesses
|
||||
innovate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-0.5 *:text-center md:grid-cols-3">
|
||||
@ -28,5 +34,5 @@ export default function Stats3() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/**
|
||||
* https://nsui.irung.me/stats
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/stats-4.json
|
||||
*
|
||||
*
|
||||
* 1. fix number text colors
|
||||
*/
|
||||
export default function Stats4() {
|
||||
@ -10,37 +10,59 @@ export default function Stats4() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
|
||||
<div className="relative z-10 max-w-xl space-y-6">
|
||||
<h2 className="text-4xl font-medium lg:text-5xl">The Gemini ecosystem brings together our models.</h2>
|
||||
<h2 className="text-4xl font-medium lg:text-5xl">
|
||||
The Gemini ecosystem brings together our models.
|
||||
</h2>
|
||||
<p>
|
||||
Gemini is evolving to be more than just the models. <span className="font-medium">It supports an entire ecosystem</span> — from products innovate.
|
||||
Gemini is evolving to be more than just the models.{" "}
|
||||
<span className="font-medium">It supports an entire ecosystem</span>{" "}
|
||||
— from products innovate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
|
||||
<div>
|
||||
<p>It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate</p>
|
||||
<p>
|
||||
It supports an entire ecosystem — from products to the APIs and
|
||||
platforms helping developers and businesses innovate
|
||||
</p>
|
||||
<div className="mb-12 mt-12 grid grid-cols-2 gap-2 md:mb-0">
|
||||
<div className="space-y-4">
|
||||
<div className="bg-transparent text-primary text-5xl font-bold">+1200</div>
|
||||
<div className="bg-transparent text-primary text-5xl font-bold">
|
||||
+1200
|
||||
</div>
|
||||
<p>Stars on GitHub</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-transparent text-primary text-5xl font-bold">+500</div>
|
||||
<div className="bg-transparent text-primary text-5xl font-bold">
|
||||
+500
|
||||
</div>
|
||||
<p>Powered Apps</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<blockquote className="border-l-4 pl-4">
|
||||
<p>Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.</p>
|
||||
<p>
|
||||
Using TailsUI has been like unlocking a secret design
|
||||
superpower. It's the perfect fusion of simplicity and
|
||||
versatility, enabling us to create UIs that are as stunning as
|
||||
they are user-friendly.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 space-y-3">
|
||||
<cite className="block font-medium">John Doe, CEO</cite>
|
||||
<img className="h-5 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/nvidia.svg" alt="Nvidia Logo" height="20" width="auto" />
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nvidia.svg"
|
||||
alt="Nvidia Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* https://nsui.irung.me/stats
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/stats-1.json
|
||||
*/
|
||||
export default function Stats() {
|
||||
@ -8,8 +8,14 @@ export default function Stats() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
|
||||
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
|
||||
<h2 className="text-4xl font-medium lg:text-5xl">Tailus UI in numbers</h2>
|
||||
<p>Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<h2 className="text-4xl font-medium lg:text-5xl">
|
||||
Tailus UI in numbers
|
||||
</h2>
|
||||
<p>
|
||||
Gemini is evolving to be more than just the models. It supports an
|
||||
entire to the APIs and platforms helping developers and businesses
|
||||
innovate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-12 divide-y *:text-center md:grid-cols-3 md:gap-2 md:divide-x md:divide-y-0">
|
||||
@ -28,5 +34,5 @@ export default function Stats() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-2.json
|
||||
*/
|
||||
export default function Testimonials2() {
|
||||
@ -11,28 +11,57 @@ export default function Testimonials2() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-6xl space-y-8 px-6 md:space-y-16">
|
||||
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
|
||||
<h2 className="text-4xl font-medium lg:text-5xl">Build by makers, loved by thousand developers</h2>
|
||||
<p>Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<h2 className="text-4xl font-medium lg:text-5xl">
|
||||
Build by makers, loved by thousand developers
|
||||
</h2>
|
||||
<p>
|
||||
Gemini is evolving to be more than just the models. It supports an
|
||||
entire to the APIs and platforms helping developers and businesses
|
||||
innovate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 [--color-card:var(--color-muted)] *:border-none *:shadow-none sm:grid-cols-2 md:grid-cols-4 lg:grid-rows-2 dark:[--color-muted:var(--color-zinc-900)]">
|
||||
<Card className="grid grid-rows-[auto_1fr] gap-8 sm:col-span-2 sm:p-6 lg:row-span-2">
|
||||
<CardHeader>
|
||||
<img className="h-6 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/nike.svg" alt="Nike Logo" height="24" width="auto" />
|
||||
<img
|
||||
className="h-6 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nike.svg"
|
||||
alt="Nike Logo"
|
||||
height="24"
|
||||
width="auto"
|
||||
/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p className="text-xl font-medium">Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development</p>
|
||||
<p className="text-xl font-medium">
|
||||
Tailus has transformed the way I develop web applications.
|
||||
Their extensive collection of UI components, blocks, and
|
||||
templates has significantly accelerated my workflow. The
|
||||
flexibility to customize every aspect allows me to create
|
||||
unique user experiences. Tailus is a game-changer for modern
|
||||
web development
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/shekinah.webp" alt="Shekinah Tshiokufila" height="400" width="400" loading="lazy" />
|
||||
<AvatarImage
|
||||
src="https://tailus.io/images/reviews/shekinah.webp"
|
||||
alt="Shekinah Tshiokufila"
|
||||
height="400"
|
||||
width="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
<AvatarFallback>ST</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div>
|
||||
<cite className="text-sm font-medium">Shekinah Tshiokufila</cite>
|
||||
<span className="text-muted-foreground block text-sm">Software Ingineer</span>
|
||||
<cite className="text-sm font-medium">
|
||||
Shekinah Tshiokufila
|
||||
</cite>
|
||||
<span className="text-muted-foreground block text-sm">
|
||||
Software Ingineer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
@ -41,16 +70,27 @@ export default function Testimonials2() {
|
||||
<Card className="md:col-span-2">
|
||||
<CardContent className="h-full pt-6">
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p className="text-xl font-medium">Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.</p>
|
||||
<p className="text-xl font-medium">
|
||||
Tailus is really extraordinary and very practical, no need to
|
||||
break your head. A real gold mine.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/jonathan.webp" alt="Jonathan Yombo" height="400" width="400" loading="lazy" />
|
||||
<AvatarImage
|
||||
src="https://tailus.io/images/reviews/jonathan.webp"
|
||||
alt="Jonathan Yombo"
|
||||
height="400"
|
||||
width="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
<AvatarFallback>JY</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<cite className="text-sm font-medium">Jonathan Yombo</cite>
|
||||
<span className="text-muted-foreground block text-sm">Software Ingineer</span>
|
||||
<span className="text-muted-foreground block text-sm">
|
||||
Software Ingineer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
@ -59,16 +99,29 @@ export default function Testimonials2() {
|
||||
<Card>
|
||||
<CardContent className="h-full pt-6">
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p>Great work on tailfolio template. This is one of the best personal website that I have seen so far!</p>
|
||||
<p>
|
||||
Great work on tailfolio template. This is one of the best
|
||||
personal website that I have seen so far!
|
||||
</p>
|
||||
|
||||
<div className="grid items-center gap-3 [grid-template-columns:auto_1fr]">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/yucel.webp" alt="Yucel Faruksahan" height="400" width="400" loading="lazy" />
|
||||
<AvatarImage
|
||||
src="https://tailus.io/images/reviews/yucel.webp"
|
||||
alt="Yucel Faruksahan"
|
||||
height="400"
|
||||
width="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
<AvatarFallback>YF</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<cite className="text-sm font-medium">Yucel Faruksahan</cite>
|
||||
<span className="text-muted-foreground block text-sm">Creator, Tailkits</span>
|
||||
<cite className="text-sm font-medium">
|
||||
Yucel Faruksahan
|
||||
</cite>
|
||||
<span className="text-muted-foreground block text-sm">
|
||||
Creator, Tailkits
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
@ -77,16 +130,27 @@ export default function Testimonials2() {
|
||||
<Card className="card variant-mixed">
|
||||
<CardContent className="h-full pt-6">
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p>Great work on tailfolio template. This is one of the best personal website that I have seen so far!</p>
|
||||
<p>
|
||||
Great work on tailfolio template. This is one of the best
|
||||
personal website that I have seen so far!
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-[auto_1fr] gap-3">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/rodrigo.webp" alt="Rodrigo Aguilar" height="400" width="400" loading="lazy" />
|
||||
<AvatarImage
|
||||
src="https://tailus.io/images/reviews/rodrigo.webp"
|
||||
alt="Rodrigo Aguilar"
|
||||
height="400"
|
||||
width="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
<AvatarFallback>YF</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Rodrigo Aguilar</p>
|
||||
<span className="text-muted-foreground block text-sm">Creator, TailwindAwesome</span>
|
||||
<span className="text-muted-foreground block text-sm">
|
||||
Creator, TailwindAwesome
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
@ -95,5 +159,5 @@ export default function Testimonials2() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-4.json
|
||||
*/
|
||||
export default function Testimonials4() {
|
||||
@ -11,22 +11,34 @@ export default function Testimonials4() {
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<blockquote>
|
||||
<p className="text-lg font-medium sm:text-xl md:text-3xl">Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.</p>
|
||||
<p className="text-lg font-medium sm:text-xl md:text-3xl">
|
||||
Using TailsUI has been like unlocking a secret design superpower.
|
||||
It's the perfect fusion of simplicity and versatility, enabling us
|
||||
to create UIs that are as stunning as they are user-friendly.
|
||||
</p>
|
||||
|
||||
<div className="mt-12 flex items-center justify-center gap-6">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/shekinah.webp" alt="Shekinah Tshiokufila" height="400" width="400" loading="lazy" />
|
||||
<AvatarImage
|
||||
src="https://tailus.io/images/reviews/shekinah.webp"
|
||||
alt="Shekinah Tshiokufila"
|
||||
height="400"
|
||||
width="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
<AvatarFallback>ST</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="space-y-1 border-l pl-6">
|
||||
<cite className="font-medium">John Doe</cite>
|
||||
<span className="text-muted-foreground block text-sm">CEO, Nvidia</span>
|
||||
<span className="text-muted-foreground block text-sm">
|
||||
CEO, Nvidia
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,101 +1,119 @@
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
type Testimonial = {
|
||||
name: string
|
||||
role: string
|
||||
image: string
|
||||
quote: string
|
||||
}
|
||||
name: string;
|
||||
role: string;
|
||||
image: string;
|
||||
quote: string;
|
||||
};
|
||||
|
||||
const testimonials: Testimonial[] = [
|
||||
{
|
||||
name: 'Jonathan Yombo',
|
||||
role: 'Software Engineer',
|
||||
image: 'https://randomuser.me/api/portraits/men/1.jpg',
|
||||
quote: 'Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.',
|
||||
name: "Jonathan Yombo",
|
||||
role: "Software Engineer",
|
||||
image: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||
quote:
|
||||
"Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.",
|
||||
},
|
||||
{
|
||||
name: 'Yves Kalume',
|
||||
role: 'GDE - Android',
|
||||
image: 'https://randomuser.me/api/portraits/men/6.jpg',
|
||||
quote: 'With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.',
|
||||
name: "Yves Kalume",
|
||||
role: "GDE - Android",
|
||||
image: "https://randomuser.me/api/portraits/men/6.jpg",
|
||||
quote:
|
||||
"With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.",
|
||||
},
|
||||
{
|
||||
name: 'Yucel Faruksahan',
|
||||
role: 'Tailkits Creator',
|
||||
image: 'https://randomuser.me/api/portraits/men/7.jpg',
|
||||
quote: 'Great work on tailfolio template. This is one of the best personal website that I have seen so far :)',
|
||||
name: "Yucel Faruksahan",
|
||||
role: "Tailkits Creator",
|
||||
image: "https://randomuser.me/api/portraits/men/7.jpg",
|
||||
quote:
|
||||
"Great work on tailfolio template. This is one of the best personal website that I have seen so far :)",
|
||||
},
|
||||
{
|
||||
name: 'Anonymous author',
|
||||
role: 'Doing something',
|
||||
image: 'https://randomuser.me/api/portraits/men/8.jpg',
|
||||
quote: 'I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.',
|
||||
name: "Anonymous author",
|
||||
role: "Doing something",
|
||||
image: "https://randomuser.me/api/portraits/men/8.jpg",
|
||||
quote:
|
||||
"I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.",
|
||||
},
|
||||
{
|
||||
name: 'Shekinah Tshiokufila',
|
||||
role: 'Senior Software Engineer',
|
||||
image: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
quote: 'Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.',
|
||||
name: "Shekinah Tshiokufila",
|
||||
role: "Senior Software Engineer",
|
||||
image: "https://randomuser.me/api/portraits/men/4.jpg",
|
||||
quote:
|
||||
"Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.",
|
||||
},
|
||||
{
|
||||
name: 'Oketa Fred',
|
||||
role: 'Fullstack Developer',
|
||||
image: 'https://randomuser.me/api/portraits/men/2.jpg',
|
||||
quote: 'I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.',
|
||||
name: "Oketa Fred",
|
||||
role: "Fullstack Developer",
|
||||
image: "https://randomuser.me/api/portraits/men/2.jpg",
|
||||
quote:
|
||||
"I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.",
|
||||
},
|
||||
{
|
||||
name: 'Zeki',
|
||||
role: 'Founder of ChatExtend',
|
||||
image: 'https://randomuser.me/api/portraits/men/5.jpg',
|
||||
quote: "Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.",
|
||||
name: "Zeki",
|
||||
role: "Founder of ChatExtend",
|
||||
image: "https://randomuser.me/api/portraits/men/5.jpg",
|
||||
quote:
|
||||
"Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.",
|
||||
},
|
||||
{
|
||||
name: 'Joseph Kitheka',
|
||||
role: 'Fullstack Developer',
|
||||
image: 'https://randomuser.me/api/portraits/men/9.jpg',
|
||||
quote: 'Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!',
|
||||
name: "Joseph Kitheka",
|
||||
role: "Fullstack Developer",
|
||||
image: "https://randomuser.me/api/portraits/men/9.jpg",
|
||||
quote:
|
||||
"Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!",
|
||||
},
|
||||
{
|
||||
name: 'Khatab Wedaa',
|
||||
role: 'MerakiUI Creator',
|
||||
image: 'https://randomuser.me/api/portraits/men/10.jpg',
|
||||
quote: "Tailus is an elegant, clean, and responsive tailwind css components it's very helpful to start fast with your project.",
|
||||
name: "Khatab Wedaa",
|
||||
role: "MerakiUI Creator",
|
||||
image: "https://randomuser.me/api/portraits/men/10.jpg",
|
||||
quote:
|
||||
"Tailus is an elegant, clean, and responsive tailwind css components it's very helpful to start fast with your project.",
|
||||
},
|
||||
{
|
||||
name: 'Rodrigo Aguilar',
|
||||
role: 'TailwindAwesome Creator',
|
||||
image: 'https://randomuser.me/api/portraits/men/11.jpg',
|
||||
quote: 'I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time.',
|
||||
name: "Rodrigo Aguilar",
|
||||
role: "TailwindAwesome Creator",
|
||||
image: "https://randomuser.me/api/portraits/men/11.jpg",
|
||||
quote:
|
||||
"I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time.",
|
||||
},
|
||||
{
|
||||
name: 'Eric Ampire',
|
||||
role: 'Mobile Engineer at @BRPNews • @GoogleDevExpert for Android',
|
||||
image: 'https://randomuser.me/api/portraits/men/12.jpg',
|
||||
quote: 'Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website.',
|
||||
name: "Eric Ampire",
|
||||
role: "Mobile Engineer at @BRPNews • @GoogleDevExpert for Android",
|
||||
image: "https://randomuser.me/api/portraits/men/12.jpg",
|
||||
quote:
|
||||
"Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website.",
|
||||
},
|
||||
{
|
||||
name: 'Roland Tubonge',
|
||||
role: 'Software Engineer',
|
||||
image: 'https://randomuser.me/api/portraits/men/13.jpg',
|
||||
quote: 'Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced!',
|
||||
name: "Roland Tubonge",
|
||||
role: "Software Engineer",
|
||||
image: "https://randomuser.me/api/portraits/men/13.jpg",
|
||||
quote:
|
||||
"Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced!",
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
const chunkArray = (array: Testimonial[], chunkSize: number): Testimonial[][] => {
|
||||
const result: Testimonial[][] = []
|
||||
const chunkArray = (
|
||||
array: Testimonial[],
|
||||
chunkSize: number
|
||||
): Testimonial[][] => {
|
||||
const result: Testimonial[][] = [];
|
||||
for (let i = 0; i < array.length; i += chunkSize) {
|
||||
result.push(array.slice(i, i + chunkSize))
|
||||
result.push(array.slice(i, i + chunkSize));
|
||||
}
|
||||
return result
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const testimonialChunks = chunkArray(testimonials, Math.ceil(testimonials.length / 3))
|
||||
const testimonialChunks = chunkArray(
|
||||
testimonials,
|
||||
Math.ceil(testimonials.length / 3)
|
||||
);
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-5.json
|
||||
*/
|
||||
export default function Testimonials5() {
|
||||
@ -104,8 +122,12 @@ export default function Testimonials5() {
|
||||
<div className="py-16">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="text-center">
|
||||
<h2 className="text-title text-3xl font-semibold">Loved by the Community</h2>
|
||||
<p className="text-body mt-6">Harum quae dolore orrupti aut temporibus ariatur.</p>
|
||||
<h2 className="text-title text-3xl font-semibold">
|
||||
Loved by the Community
|
||||
</h2>
|
||||
<p className="text-body mt-6">
|
||||
Harum quae dolore orrupti aut temporibus ariatur.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-8 grid gap-3 sm:grid-cols-2 md:mt-12 lg:grid-cols-3">
|
||||
{testimonialChunks.map((chunk, chunkIndex) => (
|
||||
@ -114,17 +136,27 @@ export default function Testimonials5() {
|
||||
<Card key={index}>
|
||||
<CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-6">
|
||||
<Avatar className="size-9">
|
||||
<AvatarImage alt={name} src={image} loading="lazy" width="120" height="120" />
|
||||
<AvatarImage
|
||||
alt={name}
|
||||
src={image}
|
||||
loading="lazy"
|
||||
width="120"
|
||||
height="120"
|
||||
/>
|
||||
<AvatarFallback>ST</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium">{name}</h3>
|
||||
|
||||
<span className="text-muted-foreground block text-sm tracking-wide">{role}</span>
|
||||
<span className="text-muted-foreground block text-sm tracking-wide">
|
||||
{role}
|
||||
</span>
|
||||
|
||||
<blockquote className="mt-3">
|
||||
<p className="text-gray-700 dark:text-gray-300">{quote}</p>
|
||||
<p className="text-gray-700 dark:text-gray-300">
|
||||
{quote}
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</CardContent>
|
||||
@ -136,5 +168,5 @@ export default function Testimonials5() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,101 +1,119 @@
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
type Testimonial = {
|
||||
name: string
|
||||
role: string
|
||||
image: string
|
||||
quote: string
|
||||
}
|
||||
name: string;
|
||||
role: string;
|
||||
image: string;
|
||||
quote: string;
|
||||
};
|
||||
|
||||
const testimonials: Testimonial[] = [
|
||||
{
|
||||
name: 'Jonathan Yombo',
|
||||
role: 'Software Engineer',
|
||||
image: 'https://randomuser.me/api/portraits/men/1.jpg',
|
||||
quote: 'Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.',
|
||||
name: "Jonathan Yombo",
|
||||
role: "Software Engineer",
|
||||
image: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||
quote:
|
||||
"Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.",
|
||||
},
|
||||
{
|
||||
name: 'Yves Kalume',
|
||||
role: 'GDE - Android',
|
||||
image: 'https://randomuser.me/api/portraits/men/6.jpg',
|
||||
quote: 'With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.',
|
||||
name: "Yves Kalume",
|
||||
role: "GDE - Android",
|
||||
image: "https://randomuser.me/api/portraits/men/6.jpg",
|
||||
quote:
|
||||
"With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.",
|
||||
},
|
||||
{
|
||||
name: 'Yucel Faruksahan',
|
||||
role: 'Tailkits Creator',
|
||||
image: 'https://randomuser.me/api/portraits/men/7.jpg',
|
||||
quote: 'Great work on tailfolio template. This is one of the best personal website that I have seen so far :)',
|
||||
name: "Yucel Faruksahan",
|
||||
role: "Tailkits Creator",
|
||||
image: "https://randomuser.me/api/portraits/men/7.jpg",
|
||||
quote:
|
||||
"Great work on tailfolio template. This is one of the best personal website that I have seen so far :)",
|
||||
},
|
||||
{
|
||||
name: 'Anonymous author',
|
||||
role: 'Doing something',
|
||||
image: 'https://randomuser.me/api/portraits/men/8.jpg',
|
||||
quote: 'I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.',
|
||||
name: "Anonymous author",
|
||||
role: "Doing something",
|
||||
image: "https://randomuser.me/api/portraits/men/8.jpg",
|
||||
quote:
|
||||
"I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.",
|
||||
},
|
||||
{
|
||||
name: 'Shekinah Tshiokufila',
|
||||
role: 'Senior Software Engineer',
|
||||
image: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
quote: 'Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.',
|
||||
name: "Shekinah Tshiokufila",
|
||||
role: "Senior Software Engineer",
|
||||
image: "https://randomuser.me/api/portraits/men/4.jpg",
|
||||
quote:
|
||||
"Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.",
|
||||
},
|
||||
{
|
||||
name: 'Oketa Fred',
|
||||
role: 'Fullstack Developer',
|
||||
image: 'https://randomuser.me/api/portraits/men/2.jpg',
|
||||
quote: 'I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.',
|
||||
name: "Oketa Fred",
|
||||
role: "Fullstack Developer",
|
||||
image: "https://randomuser.me/api/portraits/men/2.jpg",
|
||||
quote:
|
||||
"I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.",
|
||||
},
|
||||
{
|
||||
name: 'Zeki',
|
||||
role: 'Founder of ChatExtend',
|
||||
image: 'https://randomuser.me/api/portraits/men/5.jpg',
|
||||
quote: "Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.",
|
||||
name: "Zeki",
|
||||
role: "Founder of ChatExtend",
|
||||
image: "https://randomuser.me/api/portraits/men/5.jpg",
|
||||
quote:
|
||||
"Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.",
|
||||
},
|
||||
{
|
||||
name: 'Joseph Kitheka',
|
||||
role: 'Fullstack Developer',
|
||||
image: 'https://randomuser.me/api/portraits/men/9.jpg',
|
||||
quote: 'Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!',
|
||||
name: "Joseph Kitheka",
|
||||
role: "Fullstack Developer",
|
||||
image: "https://randomuser.me/api/portraits/men/9.jpg",
|
||||
quote:
|
||||
"Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!",
|
||||
},
|
||||
{
|
||||
name: 'Khatab Wedaa',
|
||||
role: 'MerakiUI Creator',
|
||||
image: 'https://randomuser.me/api/portraits/men/10.jpg',
|
||||
quote: "Tailus is an elegant, clean, and responsive tailwind css components it's very helpful to start fast with your project.",
|
||||
name: "Khatab Wedaa",
|
||||
role: "MerakiUI Creator",
|
||||
image: "https://randomuser.me/api/portraits/men/10.jpg",
|
||||
quote:
|
||||
"Tailus is an elegant, clean, and responsive tailwind css components it's very helpful to start fast with your project.",
|
||||
},
|
||||
{
|
||||
name: 'Rodrigo Aguilar',
|
||||
role: 'TailwindAwesome Creator',
|
||||
image: 'https://randomuser.me/api/portraits/men/11.jpg',
|
||||
quote: 'I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time.',
|
||||
name: "Rodrigo Aguilar",
|
||||
role: "TailwindAwesome Creator",
|
||||
image: "https://randomuser.me/api/portraits/men/11.jpg",
|
||||
quote:
|
||||
"I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time.",
|
||||
},
|
||||
{
|
||||
name: 'Eric Ampire',
|
||||
role: 'Mobile Engineer at @BRPNews • @GoogleDevExpert for Android',
|
||||
image: 'https://randomuser.me/api/portraits/men/12.jpg',
|
||||
quote: 'Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website.',
|
||||
name: "Eric Ampire",
|
||||
role: "Mobile Engineer at @BRPNews • @GoogleDevExpert for Android",
|
||||
image: "https://randomuser.me/api/portraits/men/12.jpg",
|
||||
quote:
|
||||
"Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website.",
|
||||
},
|
||||
{
|
||||
name: 'Roland Tubonge',
|
||||
role: 'Software Engineer',
|
||||
image: 'https://randomuser.me/api/portraits/men/13.jpg',
|
||||
quote: 'Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced!',
|
||||
name: "Roland Tubonge",
|
||||
role: "Software Engineer",
|
||||
image: "https://randomuser.me/api/portraits/men/13.jpg",
|
||||
quote:
|
||||
"Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced!",
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
const chunkArray = (array: Testimonial[], chunkSize: number): Testimonial[][] => {
|
||||
const result: Testimonial[][] = []
|
||||
const chunkArray = (
|
||||
array: Testimonial[],
|
||||
chunkSize: number
|
||||
): Testimonial[][] => {
|
||||
const result: Testimonial[][] = [];
|
||||
for (let i = 0; i < array.length; i += chunkSize) {
|
||||
result.push(array.slice(i, i + chunkSize))
|
||||
result.push(array.slice(i, i + chunkSize));
|
||||
}
|
||||
return result
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const testimonialChunks = chunkArray(testimonials, Math.ceil(testimonials.length / 3))
|
||||
const testimonialChunks = chunkArray(
|
||||
testimonials,
|
||||
Math.ceil(testimonials.length / 3)
|
||||
);
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-6.json
|
||||
*/
|
||||
export default function Testimonials6() {
|
||||
@ -104,27 +122,44 @@ export default function Testimonials6() {
|
||||
<div className="py-16">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="text-center">
|
||||
<h2 className="text-title text-3xl font-semibold">Loved by the Community</h2>
|
||||
<p className="text-body mt-6">Harum quae dolore orrupti aut temporibus ariatur.</p>
|
||||
<h2 className="text-title text-3xl font-semibold">
|
||||
Loved by the Community
|
||||
</h2>
|
||||
<p className="text-body mt-6">
|
||||
Harum quae dolore orrupti aut temporibus ariatur.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-8 grid gap-3 [--color-card:var(--color-muted)] sm:grid-cols-2 md:mt-12 lg:grid-cols-3 dark:[--color-muted:var(--color-zinc-900)]">
|
||||
{testimonialChunks.map((chunk, chunkIndex) => (
|
||||
<div key={chunkIndex} className="space-y-3 *:border-none *:shadow-none">
|
||||
<div
|
||||
key={chunkIndex}
|
||||
className="space-y-3 *:border-none *:shadow-none"
|
||||
>
|
||||
{chunk.map(({ name, role, quote, image }, index) => (
|
||||
<Card key={index}>
|
||||
<CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-6">
|
||||
<Avatar className="size-9">
|
||||
<AvatarImage alt={name} src={image} loading="lazy" width="120" height="120" />
|
||||
<AvatarImage
|
||||
alt={name}
|
||||
src={image}
|
||||
loading="lazy"
|
||||
width="120"
|
||||
height="120"
|
||||
/>
|
||||
<AvatarFallback>ST</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium">{name}</h3>
|
||||
|
||||
<span className="text-muted-foreground block text-sm tracking-wide">{role}</span>
|
||||
<span className="text-muted-foreground block text-sm tracking-wide">
|
||||
{role}
|
||||
</span>
|
||||
|
||||
<blockquote className="mt-3">
|
||||
<p className="text-gray-700 dark:text-gray-300">{quote}</p>
|
||||
<p className="text-gray-700 dark:text-gray-300">
|
||||
{quote}
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</CardContent>
|
||||
@ -136,5 +171,5 @@ export default function Testimonials6() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-1.json
|
||||
*/
|
||||
export default function Testimonials() {
|
||||
@ -11,28 +11,57 @@ export default function Testimonials() {
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-6xl space-y-8 px-6 md:space-y-16">
|
||||
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
|
||||
<h2 className="text-4xl font-medium lg:text-5xl">Build by makers, loved by thousand developers</h2>
|
||||
<p>Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
<h2 className="text-4xl font-medium lg:text-5xl">
|
||||
Build by makers, loved by thousand developers
|
||||
</h2>
|
||||
<p>
|
||||
Gemini is evolving to be more than just the models. It supports an
|
||||
entire to the APIs and platforms helping developers and businesses
|
||||
innovate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-rows-2">
|
||||
<Card className="grid grid-rows-[auto_1fr] gap-8 sm:col-span-2 sm:p-6 lg:row-span-2">
|
||||
<CardHeader>
|
||||
<img className="h-6 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/nike.svg" alt="Nike Logo" height="24" width="auto" />
|
||||
<img
|
||||
className="h-6 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nike.svg"
|
||||
alt="Nike Logo"
|
||||
height="24"
|
||||
width="auto"
|
||||
/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p className="text-xl font-medium">Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development</p>
|
||||
<p className="text-xl font-medium">
|
||||
Tailus has transformed the way I develop web applications.
|
||||
Their extensive collection of UI components, blocks, and
|
||||
templates has significantly accelerated my workflow. The
|
||||
flexibility to customize every aspect allows me to create
|
||||
unique user experiences. Tailus is a game-changer for modern
|
||||
web development
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/shekinah.webp" alt="Shekinah Tshiokufila" height="400" width="400" loading="lazy" />
|
||||
<AvatarImage
|
||||
src="https://tailus.io/images/reviews/shekinah.webp"
|
||||
alt="Shekinah Tshiokufila"
|
||||
height="400"
|
||||
width="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
<AvatarFallback>ST</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div>
|
||||
<cite className="text-sm font-medium">Shekinah Tshiokufila</cite>
|
||||
<span className="text-muted-foreground block text-sm">Software Ingineer</span>
|
||||
<cite className="text-sm font-medium">
|
||||
Shekinah Tshiokufila
|
||||
</cite>
|
||||
<span className="text-muted-foreground block text-sm">
|
||||
Software Ingineer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
@ -41,16 +70,27 @@ export default function Testimonials() {
|
||||
<Card className="md:col-span-2">
|
||||
<CardContent className="h-full pt-6">
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p className="text-xl font-medium">Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.</p>
|
||||
<p className="text-xl font-medium">
|
||||
Tailus is really extraordinary and very practical, no need to
|
||||
break your head. A real gold mine.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/jonathan.webp" alt="Jonathan Yombo" height="400" width="400" loading="lazy" />
|
||||
<AvatarImage
|
||||
src="https://tailus.io/images/reviews/jonathan.webp"
|
||||
alt="Jonathan Yombo"
|
||||
height="400"
|
||||
width="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
<AvatarFallback>JY</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<cite className="text-sm font-medium">Jonathan Yombo</cite>
|
||||
<span className="text-muted-foreground block text-sm">Software Ingineer</span>
|
||||
<span className="text-muted-foreground block text-sm">
|
||||
Software Ingineer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
@ -59,16 +99,29 @@ export default function Testimonials() {
|
||||
<Card>
|
||||
<CardContent className="h-full pt-6">
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p>Great work on tailfolio template. This is one of the best personal website that I have seen so far!</p>
|
||||
<p>
|
||||
Great work on tailfolio template. This is one of the best
|
||||
personal website that I have seen so far!
|
||||
</p>
|
||||
|
||||
<div className="grid items-center gap-3 [grid-template-columns:auto_1fr]">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/yucel.webp" alt="Yucel Faruksahan" height="400" width="400" loading="lazy" />
|
||||
<AvatarImage
|
||||
src="https://tailus.io/images/reviews/yucel.webp"
|
||||
alt="Yucel Faruksahan"
|
||||
height="400"
|
||||
width="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
<AvatarFallback>YF</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<cite className="text-sm font-medium">Yucel Faruksahan</cite>
|
||||
<span className="text-muted-foreground block text-sm">Creator, Tailkits</span>
|
||||
<cite className="text-sm font-medium">
|
||||
Yucel Faruksahan
|
||||
</cite>
|
||||
<span className="text-muted-foreground block text-sm">
|
||||
Creator, Tailkits
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
@ -77,16 +130,27 @@ export default function Testimonials() {
|
||||
<Card className="card variant-mixed">
|
||||
<CardContent className="h-full pt-6">
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p>Great work on tailfolio template. This is one of the best personal website that I have seen so far!</p>
|
||||
<p>
|
||||
Great work on tailfolio template. This is one of the best
|
||||
personal website that I have seen so far!
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-[auto_1fr] gap-3">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/rodrigo.webp" alt="Rodrigo Aguilar" height="400" width="400" loading="lazy" />
|
||||
<AvatarImage
|
||||
src="https://tailus.io/images/reviews/rodrigo.webp"
|
||||
alt="Rodrigo Aguilar"
|
||||
height="400"
|
||||
width="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
<AvatarFallback>YF</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Rodrigo Aguilar</p>
|
||||
<span className="text-muted-foreground block text-sm">Creator, TailwindAwesome</span>
|
||||
<span className="text-muted-foreground block text-sm">
|
||||
Creator, TailwindAwesome
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
@ -95,5 +159,5 @@ export default function Testimonials() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
365
src/components/ui/chart.tsx
Normal file
365
src/components/ui/chart.tsx
Normal file
@ -0,0 +1,365 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as RechartsPrimitive from "recharts"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||
const THEMES = { light: "", dark: ".dark" } as const
|
||||
|
||||
export type ChartConfig = {
|
||||
[k in string]: {
|
||||
label?: React.ReactNode
|
||||
icon?: React.ComponentType
|
||||
} & (
|
||||
| { color?: string; theme?: never }
|
||||
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||
)
|
||||
}
|
||||
|
||||
type ChartContextProps = {
|
||||
config: ChartConfig
|
||||
}
|
||||
|
||||
const ChartContext = React.createContext<ChartContextProps | null>(null)
|
||||
|
||||
function useChart() {
|
||||
const context = React.useContext(ChartContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useChart must be used within a <ChartContainer />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
const ChartContainer = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
config: ChartConfig
|
||||
children: React.ComponentProps<
|
||||
typeof RechartsPrimitive.ResponsiveContainer
|
||||
>["children"]
|
||||
}
|
||||
>(({ id, className, children, config, ...props }, ref) => {
|
||||
const uniqueId = React.useId()
|
||||
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
|
||||
|
||||
return (
|
||||
<ChartContext.Provider value={{ config }}>
|
||||
<div
|
||||
data-chart={chartId}
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer>
|
||||
{children}
|
||||
</RechartsPrimitive.ResponsiveContainer>
|
||||
</div>
|
||||
</ChartContext.Provider>
|
||||
)
|
||||
})
|
||||
ChartContainer.displayName = "Chart"
|
||||
|
||||
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||
const colorConfig = Object.entries(config).filter(
|
||||
([, config]) => config.theme || config.color
|
||||
)
|
||||
|
||||
if (!colorConfig.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: Object.entries(THEMES)
|
||||
.map(
|
||||
([theme, prefix]) => `
|
||||
${prefix} [data-chart=${id}] {
|
||||
${colorConfig
|
||||
.map(([key, itemConfig]) => {
|
||||
const color =
|
||||
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
||||
itemConfig.color
|
||||
return color ? ` --color-${key}: ${color};` : null
|
||||
})
|
||||
.join("\n")}
|
||||
}
|
||||
`
|
||||
)
|
||||
.join("\n"),
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const ChartTooltip = RechartsPrimitive.Tooltip
|
||||
|
||||
const ChartTooltipContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||
React.ComponentProps<"div"> & {
|
||||
hideLabel?: boolean
|
||||
hideIndicator?: boolean
|
||||
indicator?: "line" | "dot" | "dashed"
|
||||
nameKey?: string
|
||||
labelKey?: string
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
active,
|
||||
payload,
|
||||
className,
|
||||
indicator = "dot",
|
||||
hideLabel = false,
|
||||
hideIndicator = false,
|
||||
label,
|
||||
labelFormatter,
|
||||
labelClassName,
|
||||
formatter,
|
||||
color,
|
||||
nameKey,
|
||||
labelKey,
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const { config } = useChart()
|
||||
|
||||
const tooltipLabel = React.useMemo(() => {
|
||||
if (hideLabel || !payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const [item] = payload
|
||||
const key = `${labelKey || item?.dataKey || item?.name || "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
const value =
|
||||
!labelKey && typeof label === "string"
|
||||
? config[label as keyof typeof config]?.label || label
|
||||
: itemConfig?.label
|
||||
|
||||
if (labelFormatter) {
|
||||
return (
|
||||
<div className={cn("font-medium", labelClassName)}>
|
||||
{labelFormatter(value, payload)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <div className={cn("font-medium", labelClassName)}>{value}</div>
|
||||
}, [
|
||||
label,
|
||||
labelFormatter,
|
||||
payload,
|
||||
hideLabel,
|
||||
labelClassName,
|
||||
config,
|
||||
labelKey,
|
||||
])
|
||||
|
||||
if (!active || !payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const nestLabel = payload.length === 1 && indicator !== "dot"
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{!nestLabel ? tooltipLabel : null}
|
||||
<div className="grid gap-1.5">
|
||||
{payload.map((item, index) => {
|
||||
const key = `${nameKey || item.name || item.dataKey || "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
const indicatorColor = color || item.payload.fill || item.color
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.dataKey}
|
||||
className={cn(
|
||||
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
indicator === "dot" && "items-center"
|
||||
)}
|
||||
>
|
||||
{formatter && item?.value !== undefined && item.name ? (
|
||||
formatter(item.value, item.name, item, index, item.payload)
|
||||
) : (
|
||||
<>
|
||||
{itemConfig?.icon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
!hideIndicator && (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
|
||||
{
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||
indicator === "dashed",
|
||||
"my-0.5": nestLabel && indicator === "dashed",
|
||||
}
|
||||
)}
|
||||
style={
|
||||
{
|
||||
"--color-bg": indicatorColor,
|
||||
"--color-border": indicatorColor,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-1 justify-between leading-none",
|
||||
nestLabel ? "items-end" : "items-center"
|
||||
)}
|
||||
>
|
||||
<div className="grid gap-1.5">
|
||||
{nestLabel ? tooltipLabel : null}
|
||||
<span className="text-muted-foreground">
|
||||
{itemConfig?.label || item.name}
|
||||
</span>
|
||||
</div>
|
||||
{item.value && (
|
||||
<span className="font-mono font-medium tabular-nums text-foreground">
|
||||
{item.value.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
ChartTooltipContent.displayName = "ChartTooltip"
|
||||
|
||||
const ChartLegend = RechartsPrimitive.Legend
|
||||
|
||||
const ChartLegendContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> &
|
||||
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
||||
hideIcon?: boolean
|
||||
nameKey?: string
|
||||
}
|
||||
>(
|
||||
(
|
||||
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
|
||||
ref
|
||||
) => {
|
||||
const { config } = useChart()
|
||||
|
||||
if (!payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-4",
|
||||
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{payload.map((item) => {
|
||||
const key = `${nameKey || item.dataKey || "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.value}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{itemConfig?.icon && !hideIcon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
<div
|
||||
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||
style={{
|
||||
backgroundColor: item.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{itemConfig?.label}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
ChartLegendContent.displayName = "ChartLegend"
|
||||
|
||||
// Helper to extract item config from a payload.
|
||||
function getPayloadConfigFromPayload(
|
||||
config: ChartConfig,
|
||||
payload: unknown,
|
||||
key: string
|
||||
) {
|
||||
if (typeof payload !== "object" || payload === null) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const payloadPayload =
|
||||
"payload" in payload &&
|
||||
typeof payload.payload === "object" &&
|
||||
payload.payload !== null
|
||||
? payload.payload
|
||||
: undefined
|
||||
|
||||
let configLabelKey: string = key
|
||||
|
||||
if (
|
||||
key in payload &&
|
||||
typeof payload[key as keyof typeof payload] === "string"
|
||||
) {
|
||||
configLabelKey = payload[key as keyof typeof payload] as string
|
||||
} else if (
|
||||
payloadPayload &&
|
||||
key in payloadPayload &&
|
||||
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||
) {
|
||||
configLabelKey = payloadPayload[
|
||||
key as keyof typeof payloadPayload
|
||||
] as string
|
||||
}
|
||||
|
||||
return configLabelKey in config
|
||||
? config[configLabelKey]
|
||||
: config[key as keyof typeof config]
|
||||
}
|
||||
|
||||
export {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartStyle,
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user