feat(Footer): created new footer component

hypha-dao · Nov 14, 2024 · 466b870 · 466b870
2 parents d597bfe + 7533d57
commit 466b870
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 3 deletions.
diff --git a/apps/web/src/app/[lang]/page.tsx b/apps/web/src/app/[lang]/page.tsx
@@ -5,6 +5,7 @@ import { Locale } from '@hypha-platform/i18n';
 import { getAssignmentsPath } from './dho/[id]/assignments/constants';
 import { Container } from '@hypha-platform/ui';
 import { Heading } from 'packages/ui/src/atoms/heading';
+import { Footer } from '@hypha-platform/ui/server';
 
 type PageProps = {
   params: { lang: Locale; id: string };
@@ -15,9 +16,9 @@ export default async function Index({ params: { lang } }: PageProps) {
   const daos = await getDaoList({ token: newtoken.accessJWT });
 
   return (
-    <div className="w-full px-6 py-4 overflow-auto">
+    <div className="w-full overflow-auto">
       <Container>
-        <Heading className="mb-4" size="8" color="secondary" weight="medium" align="center">All your spaces, in one place</Heading>
+        <Heading className="mb-4 mt-3" size="8" color="secondary" weight="medium" align="center">All your spaces, in one place</Heading>
         <div data-testid="dho-list-container" className="w-full">
           {daos.map((dao) => (
             <div key={dao.name} className="mb-5">
@@ -37,6 +38,7 @@ export default async function Index({ params: { lang } }: PageProps) {
           ))}
         </div>
       </Container>
+      <Footer/>
     </div>
   );
 }
diff --git a/packages/ui/src/atoms/logo/index.tsx b/packages/ui/src/atoms/logo/index.tsx
@@ -1,4 +1,9 @@
 import Image from 'next/image'
 import LogoSrc from './logo-white.svg';
 
-export const Logo = () => <Image src={LogoSrc} alt="Logo" width={100} height={100} />
+type logoProps = {
+  width?: number,
+  height?: number
+}
+
+export const Logo = ({width, height}: logoProps) => <Image src={LogoSrc} alt="Logo" width={width ? width : 100} height={height ? height : 100} />
diff --git a/packages/ui/src/organisms/footer.tsx b/packages/ui/src/organisms/footer.tsx
@@ -0,0 +1,83 @@
+
+import { Container } from "../container"
+import { Button } from "../button";
+import { Link } from "@radix-ui/themes";
+import { Text } from "@radix-ui/themes";
+import { Logo } from "../atoms";
+
+type FooterProps = {}
+
+const customLinkStyles: React.CSSProperties = {
+  fontSize: '14px',
+  fontWeight: '400'
+}
+
+const customLabelStyles: React.CSSProperties = {
+  fontSize: '12px',
+  fontWeight: '510',
+  marginBottom: '12px'
+}
+
+export const Footer = ({}:FooterProps) => {
+  return (
+    <div className="bg-zinc-900">
+      <Container>
+        <div className="pt-6">
+          <Logo width={140} />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-0 py-8">
+          <div className="flex flex-col items-start space-y-4 md:space-y-0">
+            <Text className="text-white" style={customLabelStyles}>THE NETWORK</Text>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Explore</Link>
+            </Button>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">My Network</Link>
+            </Button>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Wallet</Link>
+            </Button>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Notifications</Link>
+            </Button>
+          </div>
+
+          <div className="flex flex-col items-start space-y-4 md:space-y-0">
+            <Text className="text-white" style={customLabelStyles}>GET STARTED</Text>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Create Hypha Account</Link>
+            </Button>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Create Your Space</Link>
+            </Button>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Develop With Us</Link>
+            </Button>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Join a Space</Link>
+            </Button>
+          </div>
+
+          <div className="flex flex-col items-start space-y-4 md:space-y-0">
+            <Text className="text-white" style={customLabelStyles}>DAO SERVICES</Text>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Launch Programme</Link>
+            </Button>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Expert Deep Dives</Link>
+            </Button>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Founders Round Table</Link>
+            </Button>
+            <Button asChild variant="ghost" className="rounded-lg justify-start text-gray-400 px-0">
+              <Link style={customLinkStyles} href="/">Activation Group</Link>
+            </Button>
+          </div>
+        </div>
+        <div className="pb-4 text-gray-400 text-center md:text-left" style={{ fontSize: '12px' }}>
+          Hypha Genossenschaft, Birkenweg 6, 9490, Vaduz Liechtenstein.
+        </div>
+      </Container>
+    </div>
+  )
+}
diff --git a/packages/ui/src/organisms/index.ts b/packages/ui/src/organisms/index.ts
@@ -6,3 +6,4 @@ export * from './menu';
 export * from './navigation';
 export * from './menu-left';
 export * from './menu-top';
+export * from './footer';