Merge pull request #4 from code0-tech/business-card

business card integration
code0-tech · May 6, 2024 · e68b0e7 · e68b0e7
2 parents 1977f35 + 3e8fedf
commit e68b0e7
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 3 deletions.
diff --git a/public/code0_bc_nicosammito.vcf b/public/code0_bc_nicosammito.vcf
@@ -0,0 +1,15 @@
+BEGIN:VCARD
+VERSION:3.0
+N;CHARSET=UTF-8:Sammito;Nico;;;
+FN;CHARSET=UTF-8: Nico Sammito
+ORG;CHARSET=UTF-8:Code0
+TITLE;CHARSET=UTF-8:Co-founder
+URL;WORK:https://code0.tech
+EMAIL;type=WORK;type=PREF:[email protected]
+TEL;type=WORK;VOICE:+49 176 72586618
+TEL;type=CELL;MOBILE:+49 176 72586618
+ADR;CHARSET=UTF-8;WORK;type=pref:;;Haberstraße 41;Leverkusen;;51373;Germany
+LABEL;WORK;PREF;ENCODING=QUOTED-PRINTABLE;CHARSET=UTF-8:Haberstraße 41=0D=0A=
+51373 Leverkusen Germany
+REV:2024-05-06T17:48:58+02:00
+END:VCARD
diff --git a/public/code0_bc_raphael-goetz.vcf b/public/code0_bc_raphael-goetz.vcf
@@ -0,0 +1,15 @@
+BEGIN:VCARD
+VERSION:3.0
+N;CHARSET=UTF-8:Götz;Raphael;;;
+FN;CHARSET=UTF-8: Raphael Götz
+ORG;CHARSET=UTF-8:Code0
+TITLE;CHARSET=UTF-8:Co-founder
+URL;WORK:https://code0.tech
+EMAIL;type=WORK;type=PREF:[email protected]
+TEL;type=WORK;VOICE:+49 176 87887188
+TEL;type=CELL;MOBILE:+49 176 87887188
+ADR;CHARSET=UTF-8;WORK;type=pref:;;Haberstraße 41;Leverkusen;;51373;Germany
+LABEL;WORK;PREF;ENCODING=QUOTED-PRINTABLE;CHARSET=UTF-8:Haberstraße 41=0D=0A=
+51373 Leverkusen Germany
+REV:2024-05-06T17:51:23+02:00
+END:VCARD
diff --git a/src/app/business-card/nico-sammito/page.tsx b/src/app/business-card/nico-sammito/page.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import {NextPage} from "next";
+import {BusinessCard} from "@/components/BusinessCard/BusinessCard";
+import {Button, Col, Container, Row} from "@code0-tech/pictor";
+import {Header} from "@/components/Header/Header";
+import React from "react";
+import {CommunitySection} from "@/static-components/CommunitySection";
+import {FlowSection} from "@/static-components/FlowSection";
+import {IconBrandAndroid, IconBrandApple} from "@tabler/icons-react";
+import {BottomNavigation} from "@/components/BottomNavigation/BottomNavigation";
+
+const NicoSammitoCard: NextPage = () => {
+    return <>
+        <BottomNavigation>
+            <Button download href={"/code0_bc_nicosammito.vcf"} variant={"outlined"} mr={1} mb={0.001}
+                    color={"secondary"}>
+                <Button.Icon>
+                    <IconBrandApple/>
+                </Button.Icon>
+                Download contact
+            </Button>
+            <Button download href={"/code0_bc_nicosammito.vcf"} variant={"outlined"} color={"info"} mb={0}>
+                <Button.Icon>
+                    <IconBrandAndroid/>
+                </Button.Icon>
+                Download contact
+            </Button>
+        </BottomNavigation>
+        <Header fh>
+            <Container>
+                <Row>
+                    <Col xs={12} lg={4}><></>
+                    </Col>
+                    <Col xs={12} lg={4}>
+                        <h1 style={{color: "white", fontSize: "3rem", marginBottom: "1rem"}}>
+                            Our <span style={{color: "#70ffb2"}}>business card </span><br/> in style
+                        </h1>
+                        <BusinessCard name={"Nico Sammito"} position={"Co-founder"} mail={"nsammito"}
+                                      phone={"+49 176 72586618"} linkedIn={"Nico Sammito"}/>
+                    </Col>
+                    <Col xs={12} lg={4}><></>
+                    </Col>
+                </Row>
+            </Container>
+        </Header>
+        <FlowSection/>
+        <CommunitySection/>
+    </>
+}
+
+export default NicoSammitoCard;
diff --git a/src/app/business-card/raphael-goetz/page.tsx b/src/app/business-card/raphael-goetz/page.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import {NextPage} from "next";
+import {BusinessCard} from "@/components/BusinessCard/BusinessCard";
+import {Button, Col, Container, Row} from "@code0-tech/pictor";
+import {Header} from "@/components/Header/Header";
+import React from "react";
+import {CommunitySection} from "@/static-components/CommunitySection";
+import {FlowSection} from "@/static-components/FlowSection";
+import {IconBrandAndroid, IconBrandApple} from "@tabler/icons-react";
+import {BottomNavigation} from "@/components/BottomNavigation/BottomNavigation";
+
+const NicoSammitoCard: NextPage = () => {
+    return <>
+        <BottomNavigation>
+            <Button download href={"/code0_bc_raphael-goetz.vcf"} variant={"outlined"} mr={1} mb={0.001}
+                    color={"secondary"}>
+                <Button.Icon>
+                    <IconBrandApple/>
+                </Button.Icon>
+                Download contact
+            </Button>
+            <Button download href={"/code0_bc_raphael-goetz.vcf"} variant={"outlined"} color={"info"} mb={0}>
+                <Button.Icon>
+                    <IconBrandAndroid/>
+                </Button.Icon>
+                Download contact
+            </Button>
+        </BottomNavigation>
+        <Header fh>
+            <Container>
+                <Row>
+                    <Col xs={12} lg={4}>
+                        <></>
+                    </Col>
+                    <Col xs={12} lg={4}>
+                        <h1 style={{color: "white", fontSize: "3rem", marginBottom: "1rem"}}>
+                            Our <span style={{color: "#70ffb2"}}>business card </span><br/> in style
+                        </h1>
+                        <BusinessCard name={"Raphael Götz"} position={"Co-founder"} mail={"rgoetz"}
+                                      phone={"+49 176 87887188"} linkedIn={"Raphael Arun Götz"}/>
+                    </Col>
+                    <Col xs={12} lg={4}>
+                        <></>
+                    </Col>
+                </Row>
+            </Container>
+        </Header>
+        <FlowSection/>
+        <CommunitySection/>
+    </>
+}
+
+export default NicoSammitoCard;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,7 +7,6 @@ import {FlowSection} from "@/static-components/FlowSection";
 import {IntegrationsSection} from "@/static-components/IntegrationsSection";
 import {AdaptersSection} from "@/static-components/AdaptersSection";
 import {CommunitySection} from "@/static-components/CommunitySection";
-import {RoadMapSection} from "@/static-components/RoadMapSection";
 
 const LandingPage: NextPage = () => {
 

diff --git a/src/components/BottomNavigation/BottomNavigation.module.scss b/src/components/BottomNavigation/BottomNavigation.module.scss
@@ -0,0 +1,12 @@
+.bottom-navigation {
+  position: fixed;
+  bottom: 0;
+  width: 100vw;
+  z-index: 9999;
+  padding: 1rem;
+
+  background: rgba(#030014, .1);
+  -webkit-backdrop-filter: blur(1rem);
+  backdrop-filter: blur(1rem);
+  border-top: 1px solid rgba(#030014, .25);
+}
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -0,0 +1,13 @@
+import styles from './BottomNavigation.module.scss';
+import React from "react";
+import {Container} from "@code0-tech/pictor";
+
+export const BottomNavigation: React.FC<{children: React.ReactNode}> = ({children}) => {
+
+    return <div className={styles['bottom-navigation']}>
+        <Container display={"flex"} justify={"center"}>
+            {children}
+        </Container>
+    </div>
+
+}
diff --git a/src/components/BusinessCard/BusinessCard.module.scss b/src/components/BusinessCard/BusinessCard.module.scss
@@ -0,0 +1,6 @@
+.business-card {
+  border-color: rgba(#70ffb2, .5) !important;
+  &:before {
+    background: linear-gradient(225deg, rgba(#70ffb2, .5) 0%, transparent 50%) !important;
+  }
+}
diff --git a/src/components/BusinessCard/BusinessCard.tsx b/src/components/BusinessCard/BusinessCard.tsx
@@ -0,0 +1,55 @@
+import {Card, Text} from "@code0-tech/pictor";
+import {IconBrandLinkedin, IconMail, IconPhone} from "@tabler/icons-react";
+import Image from "next/image";
+import styles from "./BusinessCard.module.scss";
+import React from "react";
+
+
+interface BusinessCardType {
+    name: string
+    position: string
+    mail: string
+    phone: string
+    linkedIn: string
+}
+
+export const BusinessCard: React.FC<BusinessCardType> = ({name, position, mail,phone, linkedIn}) => {
+    return <Card color={"primary"} gradient variant={"filled"} className={styles["business-card"]}>
+        <Card.Section border display={"flex"} align={"center"}>
+            <Image src={"/code0_logo.png"} alt={"code0 logo"} width={50} height={50} style={{marginRight: ".5rem"}}/>
+            <div>
+                <Text display={"block"} size={"lg"} c={"#70ffb2"}>
+                    {name}
+                </Text>
+                <Text size={"xs"}>
+                    {position}
+                </Text>
+            </div>
+        </Card.Section>
+        <Card.Section border>
+            <Text display={"block"} size={"md"}>
+                Haberstraße 41
+            </Text>
+            <Text display={"block"} size={"md"}>
+                51373, Leverkusen
+            </Text>
+            <Text display={"block"} size={"md"}>
+                Germany
+            </Text>
+        </Card.Section>
+        <Card.Section>
+            <Text display={"flex"} align={"center"} mb={0.5} size={"md"}>
+                <IconMail size={16} style={{marginRight: ".5rem"}}/>
+                {mail}@code0.tech
+            </Text>
+            <Text display={"flex"} align={"center"} mb={0.5} size={"md"}>
+                <IconPhone size={16} style={{marginRight: ".5rem"}}/>
+                {phone}
+            </Text>
+            <Text display={"flex"} align={"center"} mb={0.5} size={"md"}>
+                <IconBrandLinkedin size={16} style={{marginRight: ".5rem"}}/>
+                {linkedIn}
+            </Text>
+        </Card.Section>
+    </Card>
+}
diff --git a/src/static-components/FlowSection.tsx b/src/static-components/FlowSection.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import {Card, Col, Container, Row, Text} from "@code0-tech/pictor";
+import {Col, Container, Row, Text} from "@code0-tech/pictor";
 import {FlowCard} from "@/components/FlowCard/FlowCard";
-import {ChildFlowSplitter, FlowSplitter, ParentFlowSplitter} from "@/components/FlowLines/FlowLines";
+import {ChildFlowSplitter, ParentFlowSplitter} from "@/components/FlowLines/FlowLines";
 
 export const FlowSection: React.FC = () => {