✨ Landing page

src/components/CapAppBar.tsx

@@ -1,15 +1,5 @@
 import { useUserStore } from '@/services/user'
-import {
-  AppBar,
-  AppBarProps,
-  Avatar,
-  IconButton,
-  Toolbar,
-  Typography,
-  useMediaQuery,
-  useScrollTrigger,
-  useTheme,
-} from '@mui/material'
+import { AppBar, AppBarProps, Avatar, IconButton, Toolbar, Typography, useScrollTrigger, useTheme } from '@mui/material'
 import { getAttachmentUrl } from '@/services/network'
 import MenuIcon from '@mui/icons-material/Menu'
 import AccountCircle from '@mui/icons-material/AccountCircle'
@@ -17,14 +7,12 @@ import Link from 'next/link'
 import React, { useState } from 'react'
 import { CapDrawer } from './CapDrawer'
 
-interface ElevationAppBarProps {
+interface AppBarScrollProps {
   elevation?: number
-  color?: any
-  isMobile: boolean
   children?: React.ReactElement<{ elevation?: number } & AppBarProps>
 }
 
-function ElevationScroll(props: ElevationAppBarProps) {
+function AppBarScroll(props: AppBarScrollProps) {
   if (typeof window === 'undefined') return props.children
 
   const trigger = useScrollTrigger({
@@ -41,9 +29,7 @@ function ElevationScroll(props: ElevationAppBarProps) {
   return props.children
     ? React.cloneElement(props.children, {
         elevation: trigger ? props.elevation : 0,
-        sx: trigger
-          ? { backgroundColor: props.color, color: 'black', ...commonStyle }
-          : { backgroundColor: 'transparent', ...commonStyle },
+        sx: trigger ? { borderBottom: 1, borderColor: 'divider', ...commonStyle } : { ...commonStyle },
       })
     : null
 }
@@ -52,8 +38,6 @@ export function CapAppBar() {
   const userStore = useUserStore()
   const theme = useTheme()
 
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
-
   const [open, setOpen] = useState(false)
 
   const drawerWidth = 280
@@ -62,16 +46,8 @@ export function CapAppBar() {
     <>
       <CapDrawer width={drawerWidth} open={open} onClose={() => setOpen(false)} />
 
-      <ElevationScroll isMobile={isMobile} elevation={2} color="white">
-        <AppBar
-          position="sticky"
-          elevation={0}
-          color="transparent"
-          sx={{
-            width: isMobile ? null : `calc(100% - ${drawerWidth}`,
-            marginLeft: isMobile ? null : `${drawerWidth}px`,
-          }}
-        >
+      <AppBarScroll elevation={0}>
+        <AppBar position="sticky" elevation={0} color="transparent" className="backdrop-blur-md">
           <Toolbar>
             <IconButton
               size="large"
@@ -108,7 +84,7 @@ export function CapAppBar() {
             </Link>
           </Toolbar>
         </AppBar>
-      </ElevationScroll>
+      </AppBarScroll>
     </>
   )
 }

src/pages/_app.tsx

@@ -44,6 +44,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <style jsx global>{`
         html {
           font-family: ${fontRoboto.style.fontFamily};
+          scroll-behavior: smooth;
         }
       `}</style>
 

src/pages/index.tsx

@@ -1,14 +1,116 @@
-import { Container, Typography } from '@mui/material'
+import { Box, Chip, Container, Grid2 as Grid, Link, Paper, Typography } from '@mui/material'
+import { Roboto_Serif } from 'next/font/google'
+import NextLink from 'next/link'
+import Image from 'next/image'
+
+import StarIcon from '@mui/icons-material/Star'
+import ArrowForward from '@mui/icons-material/ArrowForward'
+import ArrowDownward from '@mui/icons-material/ArrowDownward'
+import LaunchIcon from '@mui/icons-material/Launch'
+
+import ImgSolarNetworkLabeled from '@/assets/products/solar-network/labeled.webp'
+
+const fontSerif = Roboto_Serif({
+  subsets: ['latin'],
+  weight: ['300'],
+  display: 'swap',
+  style: 'italic',
+})
 
 export default function Home() {
   return (
-    <main>
-      <Container sx={{ pt: 5 }}>
-        <Typography variant="h3" component="h1">
+    <>
+      <Container sx={{ py: 24, display: 'flex', flexDirection: 'column', gap: 32 }}>
+        <Box>
+          <Image src="/logo.png" width={128} height={128} alt="company logo" className="mb-2" />
+          <Typography variant="h3" component="h1" gutterBottom>
             Welcome to <br />
             the Solsynth Capital.
           </Typography>
+          <Typography variant="body1" fontSize={20} sx={{ mb: 2 }}>
+            A vibrant creating wonderful software and hope the future will be brighter.
+          </Typography>
+
+          <Link href="#products">
+            Explore our works
+            <ArrowDownward sx={{ fontSize: 15, marginLeft: 0.5 }} />
+          </Link>
+        </Box>
+
+        <Box id="products">
+          <Grid container columns={{ xs: 1, sm: 1, md: 2 }} spacing={4}>
+            <Grid size={1}>
+              <Chip
+                label="Featured Project"
+                variant="outlined"
+                icon={<StarIcon sx={{ fontSize: 18 }} />}
+                sx={{ px: 1, mb: 2 }}
+              />
+              <Typography variant="h4" component="h2">
+                Solar Network
+              </Typography>
+              <Typography variant="body1" fontSize={16} sx={{ mb: 2 }}>
+                The next generation social network. But not only a social media.
+              </Typography>
+
+              <Typography
+                variant="subtitle1"
+                fontSize={26}
+                fontFamily={fontSerif.style.fontFamily}
+                sx={{ mb: 2, width: 'fit-content', fontStyle: 'italic' }}
+                className="textmarker-effect active"
+              >
+                Social Network, Redefined.
+              </Typography>
+
+              <NextLink passHref href="/products/solar-network">
+                <Link component="span">
+                  Explore more you can do with Solar Network
+                  <ArrowForward sx={{ fontSize: 15, marginLeft: 0.5 }} />
+                </Link>
+              </NextLink>
+            </Grid>
+            <Grid size={1}>
+              <Paper sx={{ position: 'relative', aspectRatio: 16 / 10, width: '100%' }}>
+                <Image
+                  src={ImgSolarNetworkLabeled}
+                  alt="solian the app preview"
+                  fill
+                  style={{ objectFit: 'cover', borderRadius: '8px' }}
+                />
+              </Paper>
+            </Grid>
+          </Grid>
+        </Box>
+
+        <Box id="production">
+          <Grid container columns={{ xs: 1, sm: 1, md: 2 }} spacing={4}>
+            <Grid size={1}>
+              <Image
+                src="/product-branding.webp"
+                alt="product branding mark"
+                width={256}
+                height={80}
+                style={{ marginLeft: '-20px' }}
+              />
+              <Typography variant="h4" component="h2" sx={{ my: 2 }}>
+                Made by Solsynth
+              </Typography>
+              <Typography variant="body1" sx={{ mb: 2 }}>
+                There are a lot of other great projects was made by Solsynth, and most of them are open sourced. You can
+                check them on our GitHub organization.
+              </Typography>
+
+              <NextLink passHref href="https://www.github.com/Solsynth" target="_blank">
+                <Link component="span">
+                  Check out our GitHub page
+                  <LaunchIcon sx={{ fontSize: 15, marginLeft: 0.5 }} />
+                </Link>
+              </NextLink>
+            </Grid>
+          </Grid>
+        </Box>
       </Container>
-    </main>
+    </>
   )
 }

src/styles/globals.css

@@ -1,3 +1,38 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.textmarker-effect {
+  position: relative;
+}
+
+.textmarker-effect:before {
+  position: absolute;
+  z-index: -1;
+  content: '';
+  background: var(--mui-palette-primary-main);
+  height: 20px;
+  left: 0;
+  bottom: 0;
+  width: 0%;
+  opacity: 0.5;
+  transition: all 0.5s;
+}
+
+.textmarker-effect:hover:before {
+  width: 100%;
+}
+
+.textmarker-effect.active:before {
+  animation: textmarker-effect-animation 0.5s ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+@keyframes textmarker-effect-animation {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}