Merge pull request #2 from bolanosdev/feature/create_landing_page

create coming soon landing page
bolanosdev · Jan 22, 2025 · 85a6335 · 85a6335
2 parents be887f4 + 61cef09
commit 85a6335
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 85 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/app.styles.ts b/app/app.styles.ts
@@ -2,22 +2,11 @@ import { ComponentProperties } from "@bennie-ui/types";
 
 export const main_styles: ComponentProperties = {
   size: "sm",
-  margin: { x: "auto" },
-  flex: { direction: "col" },
+  flex: { direction: "col", justifyContent: "center", alignItems: "center" },
   width: { value: "full" },
-  colors: {
-    text: { color: "gray", weight: "400" },
-    background: { color: "white" },
-  },
+  height: { value: "screen" },
+  colors: {},
   dark: {
-    colors: {
-      text: { color: "gray", weight: "400" },
-      background: { color: "gray", weight: "800" },
-    },
-  },
-  overrides: {
-    large: {
-      width: { value: "2/3" },
-    },
+    colors: {},
   },
 };
diff --git a/app/components/header/header.tsx b/app/components/header/header.tsx
@@ -13,11 +13,7 @@ export const Header: FC = () => {
             <Section size="2xl">Bolanos Dev</Section>
           </Section>
           <Section>
-            <Button
-              onClick={() => {
-                alert("user profile");
-              }}
-            >
+            <Button onClick={() => {}}>
               <Icon
                 figure="UserIcon"
                 colors={{ text: { color: "black" } }}

diff --git a/app/root.tsx b/app/root.tsx
@@ -9,14 +9,12 @@ import {
 import type { LinksFunction } from "@remix-run/node";
 import { Section } from "@bennie-ui/section";
 import baselineStylesHref from "@bennie-ui/baseline/compiled/baseline.css?url";
-import { Header } from "./components/header";
 import { main_styles } from "./app.styles";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: baselineStylesHref },
 ];
 
-// TODO: check why mx-auto is working and not auto
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
@@ -26,10 +24,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body className="w-full h-full bg-white dark:bg-gray-800">
-        <Section {...main_styles}>
-          <Header />
-          <Section id="main-content">{children}</Section>
+      <body className="w-full h-full bg-white dark:bg-black text-black dark:text-white">
+        <Section id="main-content" {...main_styles}>
+          {children}
         </Section>
         <ScrollRestoration />
         <Scripts />

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,26 +1,87 @@
 import type { MetaFunction } from "@remix-run/cloudflare";
-import { Text } from "@bennie-ui/text";
 import { Section } from "@bennie-ui/section";
-import { Icon } from "@bennie-ui/icons";
+import { Text, Link } from "@bennie-ui/text";
 
 export const meta: MetaFunction = () => {
   return [
-    { title: "New Remix App" },
+    { title: "BolanosDev" },
     {
       name: "description",
-      content: "Welcome to BolanosDev! Using Bennie-UI and Cloudflare!",
+      content: "Welcome to BolanosDev!",
     },
   ];
 };
 
 export default function Index() {
   return (
     <Section
-      padding={{ all: "0.5" }}
       width={{ value: "full" }}
-      colors={{ background: { color: "gray", weight: "900" } }}
+      flex={{ direction: "col", alignItems: "center" }}
     >
-      <Text>Hero Image</Text>
+      <Section margin={{ bottom: "20" }}>
+        <img
+          src="public/logo_white.png"
+          width="140px"
+          height="140px"
+          alt="logo"
+        />
+      </Section>
+      <Section
+        size="6xl"
+        margin={{ bottom: "20" }}
+        flex={{ direction: "col", alignItems: "center" }}
+      >
+        Coming Soon
+        <Text size="base" padding={{ top: "4" }}>
+          I&apos;m determined to finally have a place to share my thoughts
+        </Text>
+      </Section>
+      <Section
+        width={{ value: "full" }}
+        flex={{ direction: "row", justifyContent: "center" }}
+      >
+        <Section margin={{ right: "4" }}>
+          <Link href="https://www.instagram.com/cbolanosmx/">
+            <img
+              height="32"
+              width="32"
+              alt="instagram"
+              src="https://cdn.simpleicons.org/instagram/fff"
+            />
+          </Link>
+        </Section>
+
+        <Section margin={{ right: "4" }}>
+          <Link href="https://www.threads.net/@cbolanosmx">
+            <img
+              height="32"
+              width="32"
+              alt="threads"
+              src="https://cdn.simpleicons.org/threads/fff"
+            />
+          </Link>
+        </Section>
+
+        <Section margin={{ right: "4" }}>
+          <Link href="https://github.com/bolanosdev">
+            <img
+              height="32"
+              width="32"
+              alt="github"
+              src="https://cdn.simpleicons.org/github/fff"
+            />
+          </Link>
+        </Section>
+      </Section>
+      <Section padding={{ top: "40" }}>
+        <Text>Built using </Text>
+        <Link
+          href="https://github.com/bennie-ui/bennie-ui"
+          colors={{ text: { color: "blue", weight: "300" } }}
+        >
+          bennie-ui
+        </Link>
+      </Section>
     </Section>
   );
 }
diff --git a/app/routes/examples.tsx b/app/routes/examples.tsx
@@ -1,58 +1,15 @@
-import { ComponentProperties } from "packages/bennie-ui/libraries/types";
-import { Button } from "@bennie-ui/button";
+import { Section } from "packages/bennie-ui/components/primitives/section/src";
 
 export default function Examples() {
-  const props: ComponentProperties = {
-    children: "Content",
-    colors: {
-      text: { color: "white" },
-      background: { color: "red" },
-      border: { color: "teal", weight: "900" },
-    },
-    dark: {
-      colors: {
-        text: { color: "red" },
-        background: { color: "white" },
-        border: { color: "rose", weight: "900" },
-      },
-    },
-    overrides: {
-      medium: {
-        children: "sm:Content",
-        colors: {
-          text: { color: "sky" },
-          background: { color: "teal" },
-          border: { color: "lime" },
-        },
-        dark: {
-          colors: {
-            text: { color: "teal" },
-            background: { color: "sky" },
-            border: { color: "red" },
-          },
-        },
-      },
-      large: {
-        children: "lg:Content",
-        colors: {
-          text: { color: "orange" },
-          background: { color: "lime" },
-          border: { color: "orange" },
-        },
-        dark: {
-          colors: {
-            text: { color: "lime" },
-            background: { color: "orange" },
-            border: { color: "sky" },
-          },
-        },
-      },
-    },
-  };
-
   return (
     <div>
-      <Button {...props}>Button with Classes</Button>
+      <h1>Example</h1>
+
+      <Section grid={{ templates: { cols: "5" } }}>
+        <div>item1</div>
+        <div>item2</div>
+        <div>item3</div>
+      </Section>
     </div>
   );
 }
diff --git a/packages/bennie-ui b/packages/bennie-ui
diff --git a/public/Logo.png b/public/Logo.png
diff --git a/public/logo_white.png b/public/logo_white.png