WIP: new marketing page #294
Conversation
✅ Deploy Preview for gertrude-parents ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
A bunch of these font styles can be removed, I'm only using a few of them
kiahjh
force-pushed
the
new-landing-page
branch
from
814845a to
8beb554
Compare
There was a problem hiding this comment.
This page isn't great yet, definitely needs some polish
There was a problem hiding this comment.
Also it's not at all responsive yet, I didn't want to do that till I knew for sure what the layout would be like.
| textarea?: boolean; | ||
| } | ||
|
|
||
| const TextInput: React.FC<TextInputProps> = ({ name, label, type, textarea }) => { |
There was a problem hiding this comment.
One of the biggest questions I initially had was how consistent to try to make it look with our dashboard UI. I eventually sort of decided just to not try to make it look super similar. I kept the same general ideas (fuchsia/violet colors and gradients, large border radius), but otherwise just tried to make it look good on its own. There's definitely parts of the dashboard UI I really like, and others not so much, but I don't think any of it makes for great marketing design material. Also it seems to be a very common pattern; marketing sites frequently don't strictly follow application design principles.
There was a problem hiding this comment.
So that's why I made my own TextInput, and FancyLink, instead of pulling in TextInput and Button from @shared/components. Let me know if you think that was a bad idea.
| import { roboto } from 'lib/fonts'; | ||
|
|
||
| const RootLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => ( | ||
| <html> |
There was a problem hiding this comment.
Still need to port over all of our SEO goodies
site/app/app/page.tsx
Outdated
| @@ -0,0 +1,28 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
Several of these client components will be able to be made into server components once I figure out what the weird errors are (see comment)
|
|
||
| export const roboto = robotoFont.className; | ||
|
|
||
| const axiformaFont = localFont({ |
There was a problem hiding this comment.
Like I said in the other file, I can remove most of these once I know which ones I won't use
| transpilePackages: [ | ||
| `@shared/datetime`, | ||
| `@shared/string`, | ||
| `@shared/components`, |
There was a problem hiding this comment.
It seems like this should fix those errors but it's not... (see comment)
|
There's some weird module parse errors that I can't figure out where they're coming from. I get them sometimes when I change a file, or create a new file/route, and whenever I try to load a documentation page. Maybe it would be a good thing to pair on at some point, I think it would be helpful for use to try to debug it together |
kiahjh
force-pushed
the
new-landing-page
branch
from
8beb554 to
b002224
Compare
site/components/package.json
Outdated
| "@shared/components": "workspace:*", | ||
| "classnames": "2.3.2", | ||
| "lucide-react": "0.315.0", |
There was a problem hiding this comment.
My new favorite icon library, Win told me about it
| import cx from 'classnames'; | ||
| import { axiforma } from '../../app/lib/fonts'; | ||
|
|
||
| const FeaturesBlock: React.FC = () => ( |
There was a problem hiding this comment.
This block obviously isn't close to done
| className="flex-grow relative h-112 flex justify-center items-center max-w-[640px] min-w-[600px] scale-[55%] xs:scale-75 sm:scale-90 md:scale-100" | ||
| > | ||
| <div className="w-176 h-176 [background:radial-gradient(rgb(255_255_255/0.5),transparent_70%)] hidden min-[1450px]:block" /> | ||
| <WebsiteGraphic |
There was a problem hiding this comment.
I'm not totally in love with this graphic; I liked it in isolation, but I'm not certain if it fits the style
site/components/src/VideoModal.tsx
Outdated
There was a problem hiding this comment.
This will need re-implemented...
| className, | ||
| )} | ||
| > | ||
| {/* dock */} |
There was a problem hiding this comment.
I tried to keep these pretty well commented, because they're pretty hairy
| <div className="lg:w-7/12 xl:w-3/5 2xl:w-1/2 sticky top-0 flex justify-center items-center h-[55vh] lg:h-screen overflow-hidden [background:linear-gradient(white_90%,transparent)] to-trasnsparent lg:bg-white overflow-hidden"> | ||
| <SuperScrollerIllustration step={step} /> | ||
| <div className="h-[50px] w-full top-0 lg:top-auto lg:bottom-0 flex justify-center items-center gap-2 absolute"> | ||
| <StepMarker index={1} step={step} duration={4400} /> |
There was a problem hiding this comment.
These still need dialed in, it's really easy to find the duration but I imagine it will be changing after this gets reviewed
✅ Deploy Preview for gertrude-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
closes https://github.com/gertrude-app/project/issues/207