cosmik.network / semble
A social knowledge tool for researchers built on ATProto
fork atom

feat: semble landing page (without logo)

Pouria Delfanazari 15cff29d b9892931

+238 -378
unified split
+10 -1
src/webapp/app/layout.tsx
··· 7 7 import '@mantine/core/styles.css'; 8 8 import { AuthProvider } from '@/hooks/useAuth'; 9 9 import { theme } from '@/styles/theme'; 10 + import { Hanken_Grotesk } from 'next/font/google'; 10 11 11 12 export const metadata: Metadata = { 12 13 title: 'Semble', 13 14 description: 'A social knowledge tool for researchers', 14 15 }; 15 16 17 + const hankenGrotesk = Hanken_Grotesk({ 18 + subsets: ['latin'], 19 + }); 20 + 16 21 export default function RootLayout({ 17 22 children, 18 23 }: { 19 24 children: React.ReactNode; 20 25 }) { 21 26 return ( 22 - <html lang="en" {...mantineHtmlProps}> 27 + <html 28 + lang="en" 29 + className={`${hankenGrotesk.className}`} 30 + {...mantineHtmlProps} 31 + > 23 32 <head> 24 33 <ColorSchemeScript /> 25 34 </head>
+10
src/webapp/assets/cosmik-logo-full.svg
··· 1 + <svg width="144" height="46" viewBox="0 0 144 46" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 + <mask id="mask0_285_15" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="9" width="28" height="28"> 3 + <path d="M28 9.5H0V36.5H28V9.5Z" fill="white"/> 4 + </mask> 5 + <g mask="url(#mask0_285_15)"> 6 + <path d="M0 23.9995C0 30.9031 5.59644 36.4995 12.5 36.4995C18.7765 36.4995 23.9726 31.8735 24.8647 25.845C24.9411 25.3288 24.332 25.0129 23.8852 25.2825C22.6049 26.055 21.1043 26.4995 19.5 26.4995C14.8056 26.4995 11 22.6939 11 17.9995C11 15.9273 11.7415 14.0283 12.9737 12.5534C13.3084 12.1526 13.0889 11.5024 12.5667 11.4997L12.5 11.4995C5.59644 11.4995 0 17.096 0 23.9995Z" fill="#868E96"/> 7 + <path d="M28.0718 18C28.0718 13.3056 24.2662 9.5 19.5718 9.5C17.9299 9.5 16.3968 9.96552 15.0971 10.7718C14.6534 11.047 14.8359 11.694 15.3448 11.8109C20.647 13.0293 24.6394 17.7069 25.0385 23.1268C25.0769 23.6472 25.6881 23.9255 26.0277 23.5293C27.302 22.0429 28.0718 20.1114 28.0718 18Z" fill="#868E96"/> 8 + </g> 9 + <path d="M45.3068 32.3201C43.689 32.3201 42.2757 31.9823 41.0668 31.3068C39.8579 30.6134 38.9157 29.6445 38.2401 28.4001C37.5823 27.1557 37.2534 25.689 37.2534 24.0001C37.2534 22.3112 37.5823 20.8445 38.2401 19.6001C38.8979 18.3557 39.8312 17.3957 41.0401 16.7201C42.249 16.0268 43.6712 15.6801 45.3068 15.6801C47.2623 15.6801 48.889 16.169 50.1868 17.1468C51.5023 18.1068 52.3645 19.4934 52.7734 21.3068H49.7601C49.4579 20.2757 48.9334 19.5201 48.1868 19.0401C47.4579 18.5423 46.4979 18.2934 45.3068 18.2934C43.7245 18.2934 42.4801 18.7912 41.5734 19.7868C40.6845 20.7823 40.2401 22.1868 40.2401 24.0001C40.2401 25.7957 40.6845 27.2001 41.5734 28.2134C42.4801 29.209 43.7245 29.7068 45.3068 29.7068C47.7779 29.7068 49.2979 28.6134 49.8668 26.4268H52.8801C52.489 28.329 51.6357 29.7868 50.3201 30.8001C49.0045 31.8134 47.3334 32.3201 45.3068 32.3201ZM62.8105 32.3201C61.1572 32.3201 59.7083 31.9823 58.4638 31.3068C57.2372 30.6134 56.2861 29.6445 55.6105 28.4001C54.935 27.1557 54.5972 25.689 54.5972 24.0001C54.5972 22.3112 54.935 20.8445 55.6105 19.6001C56.2861 18.3557 57.2372 17.3957 58.4638 16.7201C59.7083 16.0268 61.1572 15.6801 62.8105 15.6801C64.5172 15.6801 65.975 16.0179 67.1839 16.6934C68.4105 17.369 69.3527 18.329 70.0105 19.5734C70.6861 20.8179 71.0239 22.2934 71.0239 24.0001C71.0239 25.689 70.6861 27.1645 70.0105 28.4268C69.3527 29.6712 68.4105 30.6312 67.1839 31.3068C65.9572 31.9823 64.4994 32.3201 62.8105 32.3201ZM62.8105 29.7068C64.4639 29.7068 65.7439 29.209 66.6505 28.2134C67.575 27.2001 68.0372 25.7957 68.0372 24.0001C68.0372 22.1868 67.575 20.7823 66.6505 19.7868C65.7439 18.7912 64.4639 18.2934 62.8105 18.2934C61.175 18.2934 59.895 18.8001 58.9705 19.8134C58.0461 20.809 57.5839 22.2045 57.5839 24.0001C57.5839 25.7957 58.0461 27.2001 58.9705 28.2134C59.895 29.209 61.175 29.7068 62.8105 29.7068ZM80.6547 32.3201C78.4325 32.3201 76.6814 31.8579 75.4014 30.9334C74.1214 30.009 73.4191 28.7201 73.2947 27.0668H76.2547C76.3791 28.0445 76.8058 28.7645 77.5347 29.2268C78.2636 29.689 79.3391 29.9201 80.7614 29.9201C83.2502 29.9201 84.4947 29.1379 84.4947 27.5734C84.4947 26.9334 84.2991 26.4445 83.908 26.1068C83.5347 25.7512 82.8947 25.4934 81.988 25.3334L78.4947 24.6934C75.5258 24.1423 74.0413 22.729 74.0413 20.4534C74.0413 18.9779 74.6014 17.8134 75.7214 16.9601C76.8413 16.1068 78.3702 15.6801 80.308 15.6801C82.3169 15.6801 83.908 16.1157 85.0814 16.9868C86.2725 17.8579 86.948 19.0845 87.108 20.6668H84.2014C84.0236 19.7779 83.6058 19.1201 82.948 18.6934C82.308 18.2668 81.4014 18.0534 80.228 18.0534C79.1436 18.0534 78.2991 18.2401 77.6947 18.6134C77.108 18.9868 76.8147 19.529 76.8147 20.2401C76.8147 20.7912 77.0013 21.2268 77.3747 21.5468C77.7658 21.849 78.388 22.0801 79.2414 22.2401L82.7347 22.9068C84.2991 23.1912 85.4458 23.6979 86.1747 24.4268C86.9036 25.1557 87.268 26.1334 87.268 27.3601C87.268 28.9245 86.6991 30.1423 85.5614 31.0134C84.4236 31.8845 82.788 32.3201 80.6547 32.3201ZM91.0722 32.0001V19.0934H89.5255V16.0001H92.7255V18.4534H94.0055C94.4677 17.5645 95.1344 16.889 96.0055 16.4268C96.8944 15.9468 97.9611 15.7068 99.2055 15.7068C100.468 15.7068 101.534 15.9557 102.405 16.4534C103.294 16.9512 104.005 17.7157 104.539 18.7468H104.619C105.739 16.7201 107.579 15.7068 110.139 15.7068C112.112 15.7068 113.65 16.2757 114.752 17.4134C115.854 18.5512 116.405 20.1157 116.405 22.1068V32.0001H113.419V22.5334C113.419 19.7245 112.05 18.3201 109.312 18.3201C106.592 18.3201 105.232 19.7245 105.232 22.5334V32.0001H102.245V22.5334C102.245 19.7245 100.877 18.3201 98.1389 18.3201C96.8055 18.3201 95.7922 18.6845 95.0989 19.4134C94.4055 20.1245 94.0589 21.1645 94.0589 22.5334V32.0001H91.0722ZM120.789 32.0001V16.0001H123.775V32.0001H120.789ZM122.282 13.8134C121.784 13.8134 121.358 13.6357 121.002 13.2801C120.647 12.9245 120.469 12.4979 120.469 12.0001C120.469 11.5023 120.647 11.0757 121.002 10.7201C121.358 10.3645 121.784 10.1868 122.282 10.1868C122.78 10.1868 123.207 10.3645 123.562 10.7201C123.918 11.0757 124.095 11.5023 124.095 12.0001C124.095 12.4979 123.918 12.9245 123.562 13.2801C123.207 13.6357 122.78 13.8134 122.282 13.8134ZM128.254 32.0001V9.6001H131.24V23.2001H131.347L139.054 16.0001H142.707L135.374 22.6134L143.32 32.0001H139.694L133.347 24.4534L131.24 26.1601V32.0001H128.254Z" fill="#868E96"/> 10 + </svg>
src/webapp/assets/icon.png

This is a binary file and will not be displayed.

+1
src/webapp/assets/icons/big-picture-icon.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ff6400"><path d="M760-120q-39 0-70-22.5T647-200H440q-66 0-113-47t-47-113q0-66 47-113t113-47h80q33 0 56.5-23.5T600-600q0-33-23.5-56.5T520-680H313q-13 35-43.5 57.5T200-600q-50 0-85-35t-35-85q0-50 35-85t85-35q39 0 69.5 22.5T313-760h207q66 0 113 47t47 113q0 66-47 113t-113 47h-80q-33 0-56.5 23.5T360-360q0 33 23.5 56.5T440-280h207q13-35 43.5-57.5T760-360q50 0 85 35t35 85q0 50-35 85t-85 35ZM200-680q17 0 28.5-11.5T240-720q0-17-11.5-28.5T200-760q-17 0-28.5 11.5T160-720q0 17 11.5 28.5T200-680Z"/></svg>
+1
src/webapp/assets/icons/community-icon.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ff6400"><path d="M40-160v-160q0-34 23.5-57t56.5-23h131q20 0 38 10t29 27q29 39 71.5 61t90.5 22q49 0 91.5-22t70.5-61q13-17 30.5-27t36.5-10h131q34 0 57 23t23 57v160H640v-91q-35 25-75.5 38T480-200q-43 0-84-13.5T320-252v92H40Zm440-160q-38 0-72-17.5T351-386q-17-25-42.5-39.5T253-440q22-37 93-58.5T480-520q63 0 134 21.5t93 58.5q-29 0-55 14.5T609-386q-22 32-56 49t-73 17ZM160-440q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T280-560q0 50-34.5 85T160-440Zm640 0q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T920-560q0 50-34.5 85T800-440ZM480-560q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-680q0 50-34.5 85T480-560Z"/></svg>
+1
src/webapp/assets/icons/curate-icon.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ff6400"><path d="M864-40 741-162q-18 11-38.5 16.5T660-140q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-6 43.5T797-218L920-96l-56 56ZM220-140q-66 0-113-47T60-300q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm440-80q33 0 56.5-23.5T740-300q0-33-23.5-56.5T660-380q-33 0-56.5 23.5T580-300q0 33 23.5 56.5T660-220ZM220-580q-66 0-113-47T60-740q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm440 0q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Z"/></svg>
+1
src/webapp/assets/icons/db-icon.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ff6400"><path d="M480-520q150 0 255-47t105-113q0-66-105-113t-255-47q-150 0-255 47T120-680q0 66 105 113t255 47Zm0 100q41 0 102.5-8.5T701-456q57-19 98-49.5t41-74.5v100q0 44-41 74.5T701-356q-57 19-118.5 27.5T480-320q-41 0-102.5-8.5T259-356q-57-19-98-49.5T120-480v-100q0 44 41 74.5t98 49.5q57 19 118.5 27.5T480-420Zm0 200q41 0 102.5-8.5T701-256q57-19 98-49.5t41-74.5v100q0 44-41 74.5T701-156q-57 19-118.5 27.5T480-120q-41 0-102.5-8.5T259-156q-57-19-98-49.5T120-280v-100q0 44 41 74.5t98 49.5q57 19 118.5 27.5T480-220Z"/></svg>
src/webapp/assets/semble-bg.webp

This is a binary file and will not be displayed.

+190 -374
src/webapp/components/LandingPage.tsx
··· 1 1 'use client'; 2 2 3 3 import { 4 + ActionIcon, 5 + SimpleGrid, 6 + Image, 7 + Text, 8 + BackgroundImage, 4 9 Title, 5 - Text, 6 10 Stack, 7 11 Button, 8 - Box, 9 12 Container, 13 + Box, 14 + Center, 10 15 Group, 11 - Flex, 16 + Anchor, 12 17 } from '@mantine/core'; 13 - import { FaGithub, FaDiscord } from 'react-icons/fa6'; 14 - 15 - // Simple icon components 16 - const GridIcon = () => ( 17 - <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> 18 - <rect x="3" y="3" width="7" height="7" /> 19 - <rect x="14" y="3" width="7" height="7" /> 20 - <rect x="3" y="14" width="7" height="7" /> 21 - <rect x="14" y="14" width="7" height="7" /> 22 - </svg> 23 - ); 24 - 25 - const NetworkIcon = () => ( 26 - <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> 27 - <circle cx="6" cy="6" r="3" /> 28 - <circle cx="18" cy="6" r="3" /> 29 - <circle cx="12" cy="18" r="3" /> 30 - <path 31 - d="M9 6h6M10.5 15l3-9M13.5 15l-3-9" 32 - stroke="currentColor" 33 - strokeWidth="2" 34 - fill="none" 35 - /> 36 - </svg> 37 - ); 38 - 39 - const DatabaseIcon = () => ( 40 - <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> 41 - <ellipse cx="12" cy="5" rx="9" ry="3" /> 42 - <path 43 - d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" 44 - stroke="currentColor" 45 - strokeWidth="2" 46 - fill="none" 47 - /> 48 - <path 49 - d="M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3" 50 - stroke="currentColor" 51 - strokeWidth="2" 52 - fill="none" 53 - /> 54 - </svg> 55 - ); 56 - 57 - const LinkIcon = () => ( 58 - <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> 59 - <path 60 - d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" 61 - stroke="currentColor" 62 - strokeWidth="2" 63 - fill="none" 64 - /> 65 - <path 66 - d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" 67 - stroke="currentColor" 68 - strokeWidth="2" 69 - fill="none" 70 - /> 71 - </svg> 72 - ); 73 - 74 - const CosmikIcon = () => ( 75 - <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> 76 - <circle cx="12" cy="12" r="10" /> 77 - </svg> 78 - ); 79 - 80 - const ButterflyIcon = () => ( 81 - <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> 82 - <path d="M12 2C8 2 5 5 5 9c0 2 1 4 3 5-2 1-3 3-3 5 0 4 3 7 7 7s7-3 7-7c0-2-1-4-3-5 2-1 3-3 3-5 0-4-3-7-7-7z" /> 83 - </svg> 84 - ); 18 + import { FaBluesky, FaGithub, FaDiscord } from 'react-icons/fa6'; 19 + import BG from '@/assets/semble-bg.webp'; 20 + import CosmikLogo from '@/assets/cosmik-logo-full.svg'; 21 + import CurateIcon from '@/assets/icons/curate-icon.svg'; 22 + import CommunityIcon from '@/assets/icons/community-icon.svg'; 23 + import DBIcon from '@/assets/icons/db-icon.svg'; 24 + import BigPictureIcon from '@/assets/icons/big-picture-icon.svg'; 85 25 86 26 export default function LandingPage() { 87 27 return ( 88 - <Box 89 - style={{ 90 - minHeight: '100vh', 91 - backgroundImage: 'url(/riverbed-background.jpg)', // You'll need to add this image 92 - backgroundSize: 'cover', 93 - backgroundPosition: 'center', 94 - position: 'relative', 95 - }} 96 - > 97 - {/* Semi-transparent overlay */} 98 - <Box 99 - style={{ 100 - position: 'absolute', 101 - top: 0, 102 - left: 0, 103 - right: 0, 104 - bottom: 0, 105 - backgroundColor: 'rgba(76, 175, 80, 0.55)', // Greenish tint 106 - }} 107 - /> 108 - 109 - {/* Content */} 110 - <Box style={{ position: 'relative', zIndex: 1 }}> 111 - {/* Header */} 112 - <Container size="xl"> 113 - <Flex 114 - justify="space-between" 115 - align="center" 116 - style={{ padding: '1rem 2rem' }} 117 - > 118 - <Text 119 - fw={700} 120 - fz="1.25rem" 121 - tt="uppercase" 122 - c="#FF4500" 123 - style={{ fontFamily: 'sans-serif' }} 124 - > 125 - SEMBLE 126 - </Text> 127 - <Group gap="sm"> 128 - <Button 129 - component="a" 130 - href="/signup" 131 - radius="xl" 132 - style={{ 133 - backgroundColor: '#FF4500', 134 - color: '#FFF', 135 - padding: '0.5rem 1rem', 136 - fontSize: '0.9rem', 137 - }} 138 - > 139 - Sign Up 140 - </Button> 141 - <Button 142 - component="a" 143 - href="/login" 144 - radius="xl" 145 - variant="outline" 146 - style={{ 147 - borderColor: '#333', 148 - color: '#333', 149 - padding: '0.5rem 1rem', 150 - fontSize: '0.9rem', 151 - }} 152 - > 153 - Login 154 - </Button> 155 - </Group> 156 - </Flex> 157 - </Container> 158 - 159 - {/* Hero Section */} 160 - <Container size="md" style={{ marginTop: '4rem' }}> 161 - <Stack align="center" gap="xl" style={{ padding: '4rem 0' }}> 162 - <Box maw={600}> 163 - <Title 164 - order={1} 165 - fw={700} 166 - c="#000" 167 - ta="center" 168 - style={{ 169 - fontSize: '3.5rem', 170 - lineHeight: 1.1, 171 - fontFamily: 'sans-serif', 172 - }} 173 - > 174 - A social knowledge tool 175 - <br /> 176 - for researchers 177 - </Title> 178 - <Text 179 - fz="1.125rem" 180 - c="#222" 181 - ta="center" 182 - mt="1rem" 183 - style={{ 184 - fontFamily: 'sans-serif', 185 - fontWeight: 400, 186 - }} 187 - > 188 - {`Follow your peers' research trails. Surface and discover new 189 - connections. Built on ATProto so you own your data.`} 190 - </Text> 191 - </Box> 192 - </Stack> 193 - </Container> 194 - 195 - {/* Features Section */} 196 - <Container size="xl" style={{ marginTop: '6rem' }}> 197 - <Flex 198 - justify="space-between" 199 - wrap="wrap" 200 - gap="2rem" 201 - style={{ marginBottom: '4rem' }} 202 - > 203 - {/* Feature 1 */} 204 - <Box style={{ width: '22%', minWidth: '200px' }}> 205 - <Stack align="flex-start" gap="0.5rem"> 206 - <Box c="#FF4500" mb="0.5rem"> 207 - <GridIcon /> 208 - </Box> 209 - <Text 210 - fw={700} 211 - fz="1rem" 212 - mb="0.25rem" 213 - style={{ fontFamily: 'sans-serif' }} 214 - > 215 - Curate your research trails. 216 - </Text> 217 - <Text 218 - fz="0.9rem" 219 - c="#333" 220 - style={{ 221 - fontFamily: 'sans-serif', 222 - lineHeight: 1.4, 223 - fontWeight: 400, 224 - }} 225 - > 226 - Collect interesting links and add context with reviews and 227 - annotations. Organize them into collections others can follow 228 - and collaborate on. 229 - </Text> 230 - </Stack> 231 - </Box> 232 - 233 - {/* Feature 2 */} 234 - <Box style={{ width: '22%', minWidth: '200px' }}> 235 - <Stack align="flex-start" gap="0.5rem"> 236 - <Box c="#FF4500" mb="0.5rem"> 237 - <NetworkIcon /> 238 - </Box> 239 - <Text 240 - fw={700} 241 - fz="1rem" 242 - mb="0.25rem" 243 - style={{ fontFamily: 'sans-serif' }} 244 - > 245 - Follow and grow your network. 246 - </Text> 247 - <Text 248 - fz="0.9rem" 249 - c="#333" 250 - style={{ 251 - fontFamily: 'sans-serif', 252 - lineHeight: 1.4, 253 - fontWeight: 400, 254 - }} 255 - > 256 - {`See what your peers are sharing and find new collaborators 257 - with shared interests. Experience research rabbit holes, 258 - together.`} 259 - </Text> 260 - </Stack> 261 - </Box> 262 - 263 - {/* Feature 3 */} 264 - <Box style={{ width: '22%', minWidth: '200px' }}> 265 - <Stack align="flex-start" gap="0.5rem"> 266 - <Box c="#FF4500" mb="0.5rem"> 267 - <DatabaseIcon /> 268 - </Box> 269 - <Text 270 - fw={700} 271 - fz="1rem" 272 - mb="0.25rem" 273 - style={{ fontFamily: 'sans-serif' }} 274 - > 275 - Own your data. 276 - </Text> 277 - <Text 278 - fz="0.9rem" 279 - c="#333" 280 - style={{ 281 - fontFamily: 'sans-serif', 282 - lineHeight: 1.4, 283 - fontWeight: 400, 284 - }} 28 + <> 29 + <BackgroundImage src={BG.src} h={'100svh'}> 30 + <Center h={'100svh'}> 31 + <Container size={'xl'} p={'md'} my={'auto'}> 32 + <Stack align="center" gap={'5rem'}> 33 + <Stack gap={'xs'} align="center" maw={550} mx={'auto'}> 34 + <Title order={1} fw={600} fz={'3rem'} ta={'center'}> 35 + A social knowledge tool for researchers 36 + </Title> 37 + <Title order={2} fw={600} fz={'xl'} c={'#1F6144'} ta={'center'}> 38 + Follow your peers’ research trails. Surface and discover new 39 + connections. Built on ATProto so you own your data. 40 + </Title> 41 + <Button 42 + component="a" 43 + href="https://tally.so/r/nGd4Ap" 44 + target="_blank" 45 + size="lg" 46 + color="dark" 47 + mt={'lg'} 285 48 > 286 - {`Built on ATProto so you own your data. New apps will come to 287 - you – no more rebuilding your social graph and data when apps 288 - pivot and shut down.`} 289 - </Text> 49 + Join our waitlist 50 + </Button> 290 51 </Stack> 291 - </Box> 292 52 293 - {/* Feature 4 */} 294 - <Box style={{ width: '22%', minWidth: '200px' }}> 295 - <Stack align="flex-start" gap="0.5rem"> 296 - <Box c="#FF4500" mb="0.5rem"> 297 - <LinkIcon /> 298 - </Box> 299 - <Text 300 - fw={700} 301 - fz="1rem" 302 - mb="0.25rem" 303 - style={{ fontFamily: 'sans-serif' }} 304 - > 305 - Discover relevant context and connections. 306 - </Text> 307 - <Text 308 - fz="0.9rem" 309 - c="#333" 310 - style={{ 311 - fontFamily: 'sans-serif', 312 - lineHeight: 1.4, 313 - fontWeight: 400, 314 - }} 315 - > 316 - {`Easily find and filter for relevant research based on your 317 - network. See the big picture and get the extra context that 318 - matters before you dive into a long read.`} 319 - </Text> 320 - </Stack> 321 - </Box> 322 - </Flex> 323 - </Container> 324 - 325 - {/* Footer */} 326 - <Container size="xl"> 327 - <Flex 328 - justify="space-between" 329 - align="center" 330 - style={{ 331 - padding: '2rem', 332 - borderTop: '1px solid rgba(0,0,0,0.1)', 333 - }} 334 - > 335 - {/* Left side */} 336 - <Group gap="0.5rem"> 337 - <Text fz="0.875rem" c="#555" style={{ fontFamily: 'sans-serif' }}> 338 - Made by 339 - </Text> 340 - <Group gap="0.25rem"> 341 - <CosmikIcon /> 342 - <Text 343 - fz="0.875rem" 344 - c="purple" 345 - style={{ fontFamily: 'sans-serif' }} 346 - > 347 - Cosmik 348 - </Text> 349 - </Group> 350 - <Text fz="0.875rem" c="#555" style={{ fontFamily: 'sans-serif' }}> 351 - with support from Open Philanthropy and Astera 352 - </Text> 353 - <Text fz="0.875rem" c="#555" style={{ fontFamily: 'sans-serif' }}> 354 - · 355 - </Text> 356 - <Text 357 - component="a" 358 - href="#" 359 - fz="0.875rem" 360 - c="#000" 361 - style={{ 362 - fontFamily: 'sans-serif', 363 - textDecoration: 'none', 364 - }} 365 - styles={{ 366 - root: { 367 - '&:hover': { 368 - textDecoration: 'underline', 369 - }, 370 - }, 371 - }} 53 + <SimpleGrid 54 + cols={{ base: 1, xs: 2, sm: 2, md: 3, lg: 4 }} 55 + spacing={{ base: 'xl' }} 56 + mt={{ base: '1rem', xs: '5rem' }} 372 57 > 373 - Privacy Policy 374 - </Text> 375 - </Group> 58 + <Stack gap={'xs'}> 59 + <Image src={CurateIcon.src} alt="Curate icon" w={28} /> 60 + <Text> 61 + <Text fw={600} fz={'lg'} span> 62 + Curate your research trails. 63 + </Text>{' '} 64 + <Text fw={500} fz={'lg'} c={'dark.2'} span> 65 + Collect interesting links, add notes, and organize them 66 + into shareable collections. Build trails others can 67 + explore and extend. 68 + </Text> 69 + </Text> 70 + </Stack> 71 + <Stack gap={'xs'}> 72 + <Image src={CommunityIcon.src} alt="Community icon" w={28} /> 73 + <Text> 74 + <Text fw={600} fz={'lg'} span> 75 + Connect with peers. 76 + </Text>{' '} 77 + <Text fw={500} fz={'lg'} c={'dark.2'} span> 78 + See what your peers are sharing and find new collaborators 79 + with shared interests. Experience research rabbit holes, 80 + together. 81 + </Text> 82 + </Text> 83 + </Stack> 84 + <Stack gap={'xs'}> 85 + <Image src={DBIcon.src} alt="Database icon" w={28} /> 86 + <Text> 87 + <Text fw={600} fz={'lg'} span> 88 + Own your data. 89 + </Text>{' '} 90 + <Text fw={500} fz={'lg'} c={'dark.2'} span> 91 + Built on ATProto, new apps will come to you. No more 92 + rebuilding your social graph and data when apps pivot and 93 + shut down. 94 + </Text> 95 + </Text> 96 + </Stack> 97 + <Stack gap={'xs'}> 98 + <Image 99 + src={BigPictureIcon.src} 100 + alt="Big picture icon" 101 + w={28} 102 + /> 103 + <Text> 104 + <Text fw={600} fz={'lg'} span> 105 + See the bigger picture. 106 + </Text>{' '} 107 + <Text fw={500} fz={'lg'} c={'dark.2'} span> 108 + Find relevant research based on your network. Get the 109 + extra context that matters before you dive into a long 110 + read. 111 + </Text> 112 + </Text> 113 + </Stack> 114 + </SimpleGrid> 376 115 377 - {/* Right side */} 378 - <Group gap="0.75rem"> 379 - <Box component="a" href="#" c="#333"> 380 - <FaGithub size={24} /> 381 - </Box> 382 - <Box component="a" href="#" c="#333"> 383 - <ButterflyIcon /> 384 - </Box> 385 - <Box component="a" href="#" c="#333"> 386 - <FaDiscord size={24} /> 116 + <Box 117 + component="footer" 118 + px={'md'} 119 + py={'xs'} 120 + mt={'xl'} 121 + pos={'relative'} 122 + > 123 + <Stack align="center" gap={'xs'}> 124 + <Text c="dark.1" fw={600} ta="center"> 125 + Made by &nbsp; 126 + <Anchor 127 + href="https://cosmik.network/" 128 + target="_blank" 129 + style={{ verticalAlign: 'middle' }} 130 + > 131 + <Box 132 + component="span" 133 + display="inline-flex" 134 + style={{ verticalAlign: 'middle' }} 135 + > 136 + <Image 137 + src={CosmikLogo.src} 138 + alt="Cosmik logo" 139 + w={92} 140 + h={28.4} 141 + /> 142 + </Box> 143 + </Anchor> 144 + &nbsp;&nbsp; 145 + <Text c="dark.1" fw={600} span> 146 + with support from&nbsp; 147 + <Anchor 148 + href="https://www.openphilanthropy.org/" 149 + target="_blank" 150 + c="dark.2" 151 + fw={600} 152 + > 153 + Open Philanthropy 154 + </Anchor>{' '} 155 + and{' '} 156 + <Anchor 157 + href="https://astera.org/" 158 + target="_blank" 159 + c="dark.2" 160 + fw={600} 161 + > 162 + Astera 163 + </Anchor> 164 + </Text> 165 + </Text> 166 + <Group gap="0"> 167 + <ActionIcon 168 + component="a" 169 + href="https://bsky.app/profile/cosmik.network" 170 + target="_blank" 171 + variant="subtle" 172 + color={'dark.2'} 173 + radius={'xl'} 174 + size={'xl'} 175 + m={0} 176 + > 177 + <FaBluesky size={22} /> 178 + </ActionIcon> 179 + <ActionIcon 180 + component="a" 181 + href="https://github.com/cosmik-network" 182 + target="_blank" 183 + variant="subtle" 184 + color={'dark.2'} 185 + radius={'xl'} 186 + size={'xl'} 187 + > 188 + <FaGithub size={22} /> 189 + </ActionIcon> 190 + <ActionIcon 191 + component="a" 192 + href="https://discord.gg/SHvvysb73e" 193 + target="_blank" 194 + variant="subtle" 195 + color={'dark.2'} 196 + radius={'xl'} 197 + size={'xl'} 198 + > 199 + <FaDiscord size={22} /> 200 + </ActionIcon> 201 + </Group> 202 + </Stack> 387 203 </Box> 388 - </Group> 389 - </Flex> 390 - </Container> 391 - </Box> 392 - </Box> 204 + </Stack> 205 + </Container> 206 + </Center> 207 + </BackgroundImage> 208 + </> 393 209 ); 394 210 }
+24 -3
src/webapp/styles/theme.tsx
··· 1 1 'use client'; 2 2 3 - import { createTheme } from '@mantine/core'; 3 + import { Button, createTheme } from '@mantine/core'; 4 4 5 5 export const theme = createTheme({ 6 - primaryColor: 'dark', 6 + primaryColor: 'tangerine', 7 + colors: { 8 + tangerine: [ 9 + '#fff1e2', 10 + '#ffe1cc', 11 + '#ffc29a', 12 + '#ffa164', 13 + '#fe8537', 14 + '#fe731a', 15 + '#ff6400', 16 + '#e45800', 17 + '#cb4d00', 18 + '#b14000', 19 + ], 20 + }, 7 21 fontFamily: 8 - 'Archivo, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji', 22 + 'Hanken Grotesk, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji', 9 23 defaultRadius: 'md', 24 + components: { 25 + Button: Button.extend({ 26 + defaultProps: { 27 + radius: 'xl', 28 + }, 29 + }), 30 + }, 10 31 });