add Banner; remove old timeline; add timeline to previous

src/modules/landing/BottomBanner.tsx

@@ -0,0 +1,40 @@
+import ParticipateButton from './ParticipateButton';
+export default function BottomBanner({
+    height = '4rem',
+    maxHeight = '6rem',
+    backgroundColor = 'rgba(0,0,0,0.7)',
+    closeButtonClicked = 'false',
+}) {
+    return (
+        <div
+            className="bottom-0 left-0 right-0 w-full fixed p-4 z-50 rounded-md"
+            style={{
+                backgroundColor: backgroundColor || 'black',
+                height: height || '150px',
+                maxHeight: maxHeight || '350px',
+            }}
+        >
+            <div className="flex flex-row justify-center align-center h-full">
+                <div className="flex items-center h-full justify-center flex-row w-full">
+                    <div className="flex flex-row">
+                        <div className="uppercase hidden md:contents">
+                            <p>Want to join Grow?</p>
+                        </div>
+                        <div className="uppercase hidden md:contents">
+                            <p className="mx-12">--&gt;</p>
+                        </div>
+                    </div>
+                    <div className="flex flex-col md:flex-row">
+                        <ParticipateButton />
+                    </div>
+                    {/*                     <div
+                        className="cursor-pointer px-1.5 mr-3"
+                        onClick={() => (closeButtonClicked = 'true')}
+                    >
+                        X
+                    </div> */}
+                </div>
+            </div>
+        </div>
+    );
+}

src/modules/landing/MainInfoBlock.tsx

@@ -8,7 +8,7 @@ import {
     Text,
 } from '@chakra-ui/react';
 import AnimatedLogo from './AnimatedLogo';
-import ParticipateButton from './ParticipateButton';
+import BottomBanner from './BottomBanner';
 
 function Fact({ amount, title }: { amount: string; title: string }) {
     return (
@@ -42,10 +42,13 @@ export default function MainInfoBlock() {
                         lineHeight={1.0}
                         fontWeight="400"
                         fontSize={{ base: '6rem', md: '6.5rem' }}
+                        mt={{
+                            lg: '10%',
+                        }}
                     >
                         Let it <span className="neon-text2">Grow</span>
                     </Heading>
-                    <Box>
+                    <Box className=" mt-3">
                         <Heading size="lg">
                             Germany&apos;s Largest Student Founding Contest
                         </Heading>
@@ -74,8 +77,8 @@ export default function MainInfoBlock() {
                         }}
                         w="100%"
                         mt={{
-                            base: '5',
-                            lg: '20',
+                            base: '6',
+                            lg: '30%',
                         }}
                         flexFlow={{
                             base: 'column',
@@ -97,7 +100,7 @@ export default function MainInfoBlock() {
                     </Flex>
                 </GridItem>
             </Show>
-            <ParticipateButton />
+            <BottomBanner />
         </Grid>
     );
 }

src/modules/landing/ParticipateButton.tsx

@@ -7,12 +7,12 @@ const ParticipateButton = (props: { isDisabled?: boolean }) => {
             <Box
                 as="button"
                 disabled
-                bgGradient="linear(to-r, primary, secondary)"
+                bgGradient="linear(to-r, primary, #472b87)"
                 filter="brightness(0.5)"
-                px={4}
-                py={3}
-                borderRadius={4}
-                minW="16rem"
+                px={6}
+                py={2}
+                borderRadius={'md'}
+                minW="10rem"
                 fontWeight="black"
                 opacity={0.9}
             >
@@ -24,13 +24,14 @@ const ParticipateButton = (props: { isDisabled?: boolean }) => {
         <PageLink href="/connect/signup">
             <Box
                 as="button"
-                bgGradient="linear(to-r, primary, secondary)"
-                px={4}
-                py={3}
-                borderRadius={4}
-                minW="16rem"
+                bgGradient="linear(to-b, primary, #472b87)"
+                px={6}
+                py={2}
+                borderRadius={'md'}
+                boxShadow={'0rem 0rem 1.3rem rgba(255, 255, 255, 0.433)'}
+                minW="10rem"
                 fontWeight="black"
-                opacity={0.9}
+                //opacity={0.9}
                 _hover={{ opacity: '0.7' }}
                 _active={{ opacity: '1', boxShadow: 'outline' }}
                 _focus={{ opacity: '1', boxShadow: 'outline' }}

src/modules/landing/Timeline.tsx

@@ -10,7 +10,7 @@ interface LongTimelineProps {
 const LongTimeline: React.FC<LongTimelineProps> = ({ events }) => {
     return (
         <VStack gap={4}>
-            <Heading>Timeline 22/23 - LAST TIME </Heading>
+            <Heading>Timeline 22/23 </Heading>
             <VStack gap={4} alignItems="stretch" maxW="3xl">
                 {events.map((event) => (
                     <GrowEventCard key={event.id} event={event} />

src/pages/index.tsx

@@ -1,6 +1,5 @@
-import { Box, BoxProps, Divider } from '@chakra-ui/react';
+import { Box, BoxProps, Divider, Heading, VStack } from '@chakra-ui/react';
 import { createClient } from '@supabase/supabase-js';
-
 import { getEvents } from 'modules/events/api';
 import { GrowEvent } from 'modules/events/types';
 import { getFAQs } from 'modules/faq/api';
@@ -10,9 +9,8 @@ import GrowVideo from 'modules/landing/GrowVideo';
 import MainInfoBlock from 'modules/landing/MainInfoBlock';
 import MotivationBlock from 'modules/landing/MotivationBlock';
 import Timeline from 'modules/landing/ShortTimeline';
-import Sponsors from 'modules/landing/sponsor/Sponsors';
-import LongTimeline from 'modules/landing/Timeline';
 import WaitingForBlock from 'modules/landing/WaitingForBlock';
+import Sponsors from 'modules/landing/sponsor/Sponsors';
 import { getSponsors } from 'modules/sponsor/api';
 import { Sponsor } from 'modules/sponsor/types';
 import { PropsWithChildren } from 'react';
@@ -93,8 +91,12 @@ const Home: React.FC<HomeProps> = ({
                 <MotivationBlock />
             </Section>
 
-            <Section id="timeline" mt="4rem">
-                <LongTimeline events={events} />
+            <Section id="timeline" mt="4rem" my="12rem">
+                {/* <LongTimeline events={events} /> */}
+                <VStack gap={4}>
+                    <Heading>Timeline 23/24 </Heading>
+                    <p>coming soon...</p>
+                </VStack>
             </Section>
 
             <Section position="relative" my={24} px={0}>

src/pages/previous.tsx

@@ -3,14 +3,42 @@ import {
     Breadcrumb,
     BreadcrumbItem,
     BreadcrumbLink,
-    SimpleGrid,
     VStack,
 } from '@chakra-ui/react';
-import FinalistCard from 'modules/teams/components/FinalistCard';
-import { Finalist } from 'modules/teams/types';
+import { createClient } from '@supabase/supabase-js';
+import LongTimeline from 'modules/landing/Timeline';
 import Link from 'next/link';
 
-const Finalists: React.FC = () => {
+import { getEvents } from 'modules/events/api';
+import { GrowEvent } from 'modules/events/types';
+import React from 'react';
+const minutesToSeconds = (minutes: number) => minutes * 60;
+
+export const getStaticProps = async () => {
+    const supabase = createClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL as string,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string
+    );
+    try {
+        const events = (await getEvents(supabase)).map((e) => ({
+            ...e,
+            date: e.date.toISOString(),
+        }));
+        return {
+            props: { events },
+            revalidate: minutesToSeconds(30),
+        };
+    } catch (error) {
+        console.error(error);
+        throw error;
+    }
+};
+interface PrevProps {
+    events: (Omit<GrowEvent, 'date'> & { date: string })[];
+}
+
+{
+    /*const Finalists: React.FC = () => {
     const finalists: Finalist[] = [
         {
             name: 'Artjom & Eve',
@@ -27,7 +55,8 @@ const Finalists: React.FC = () => {
         },
         {
             name: 'MaDeCa',
-            description: 'Boosting the Circular Economy – with ALGAE at Sea',
+            description:
+                'Boosting the Circular Economy – with ALGAE at Sea',
             logo: '/images/teams/madeca.svg',
             hideName: true,
         },
@@ -68,11 +97,11 @@ const Finalists: React.FC = () => {
             name: 'SPH1NX',
             description: `SPH1NX is the ultimate play-to-earn online riddle game, where players can compete for real money while getting smarter along the way. 
 
-            We provide our users with free daily riddles to improve their cognitive abilities on a daily basis. Additionally, we offer regular riddle solving contests where players pay a small entry fee to compete with the chance to win thousands of euros just by solving riddles. 
-            
-            SPH1NX is more than just a game, it's a chance for people to level the playing field and earn money based on their intelligence alone. 
-            
-            Our mission is “Empowerment and Equality through intellect”.`,
+        We provide our users with free daily riddles to improve their cognitive abilities on a daily basis. Additionally, we offer regular riddle solving contests where players pay a small entry fee to compete with the chance to win thousands of euros just by solving riddles. 
+        
+        SPH1NX is more than just a game, it's a chance for people to level the playing field and earn money based on their intelligence alone. 
+        
+        Our mission is “Empowerment and Equality through intellect”.`,
             logo: '/images/teams/sph1nx.svg',
         },
         {
@@ -82,10 +111,17 @@ const Finalists: React.FC = () => {
             logo: '/images/teams/first-vision.png',
             hideName: true,
         },
-    ];
+    ]; */
+}
+
+const Prev: React.FC<PrevProps> = ({ events: jsonEvents = [] }) => {
+    const events = jsonEvents.map((e) => ({ ...e, date: new Date(e.date) }));
 
     return (
         <>
+            <div id="timeline" className="mt-4">
+                <LongTimeline events={events} />
+            </div>
             <VStack alignItems="stretch" gap={4} mb={2}>
                 <Breadcrumb
                     color="gray.500"
@@ -98,13 +134,12 @@ const Finalists: React.FC = () => {
                     </BreadcrumbItem>
                 </Breadcrumb>
             </VStack>
-            <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
-                {finalists.map((finalist) => (
-                    <FinalistCard key={finalist.name} finalist={finalist} />
-                ))}
-            </SimpleGrid>
+            {/*                 <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
+                    {finalists.map((finalist) => (
+                        <FinalistCard key={finalist.name} finalist={finalist} />
+                    ))}
+                </SimpleGrid> */}
         </>
     );
 };
-
-export default Finalists;
+export default Prev;

src/styles/globals.css

@@ -37,3 +37,9 @@ body {
 .tap-highlight-transparent {
     -webkit-tap-highlight-color: transparent;
 }
+
+@media (max-width: 640px) {
+    .banner_bottom {
+        height: unset !important;
+    }
+}