diff --git a/README.md b/README.md index ddffbdd..1706b96 100644 --- a/README.md +++ b/README.md @@ -6,11 +6,15 @@ The business website of Promptly Technologies, LLC is designed in the style of a ## Structure and customization -The entry points of the site, of course, are `index.html`, `main.tsx`, and `App.tsx`, as is traditional in React + Typescript architecture. The site consists of two pages, `Home` and `Legal`. The former hosts the core of the site, while the latter hosts the privacy policy. The Home consists of a `Hero` section (the "cover" of our comic book), a `Story` section (the comic strips), a `Bookings` section for users to book consultations (roughly analogous to the subscription page in an old-timey comic book), and `Credits` section (really our "Team" section but presented in the style of comic book credits). +The entry points of the site, of course, are `index.html`, `main.tsx`, and `App.tsx`, as is traditional in React + Typescript architecture. + +The site consists of three pages, `Home`, `Legal`, and `Store`. The `Home` page hosts the core of the site, `Legal` hosts the terms and conditions and privacy policy, and `Store` hosts products syndicated from Zazzle via an RSS feed which we scrape using a Github Actions script. + +The `Home` page consists of a `Hero` section (the "cover" of our comic book), a `ContactForm` section powered by FormSpree, a `Story` section (the comic strips), an `Events` section with a subscription form powered by ConvertKit, and a `Credits` section (really our "Team" section but presented in the style of comic book credits). Some of the metadata and content of the site is controlled from JSON files in the `src/customizations` folder. You can add new social profiles here, and also change the text that appears in the hero section. -The `Booking` section is a Calendly iframe displayed from offsite and must be controlled from the Calendly dashboard. +To use the `ContactForm` or `SubscribeForm` components, you will need [FormSpree](https://formspree.io/) and [ConvertKit](https://convertkit.com/) accounts, respectively. There is also a `Bookings` component, not currently implemented, which is powered by [Calendly](https://calendly.com/). Sign up, create a form, and put your form URL or ID(s) in `src/customizations/siteproperties.json`. ## Contributing diff --git a/public/images/creativity.jpg b/public/images/creativity.jpg deleted file mode 100644 index 22b1b09..0000000 Binary files a/public/images/creativity.jpg and /dev/null differ diff --git a/public/images/giantrobot.jpg b/public/images/giantrobot.jpg deleted file mode 100644 index 1f795c9..0000000 Binary files a/public/images/giantrobot.jpg and /dev/null differ diff --git a/public/images/mechaboi.jpg b/public/images/mechaboi.jpg deleted file mode 100644 index b4fb5e5..0000000 Binary files a/public/images/mechaboi.jpg and /dev/null differ diff --git a/public/images/nonprofit.jpg b/public/images/nonprofit.jpg new file mode 100644 index 0000000..f96e088 Binary files /dev/null and b/public/images/nonprofit.jpg differ diff --git a/public/images/phones.jpg b/public/images/phones.jpg deleted file mode 100644 index bbb86b7..0000000 Binary files a/public/images/phones.jpg and /dev/null differ diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index e1132d6..30fbb75 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -4,16 +4,22 @@ import './Nav.css'; const Nav: React.FC = () => { return ( -
- +
+ + Contact + + Story - - Bookings + + Events - + Credits + + Store +
); }; diff --git a/src/components/Products.css b/src/components/Products.css index 162e799..1ad9ab8 100644 --- a/src/components/Products.css +++ b/src/components/Products.css @@ -1,66 +1,44 @@ .product-grid { - display: flex; - justify-content: center; - flex-wrap: wrap; - @apply mt-12; + @apply font-sans flex flex-wrap justify-center mt-12; } .product-item { - position: relative; - max-width: 250px; - margin: 0 auto; + @apply relative max-w-xs mx-auto transition-opacity duration-300; } -/* The rest of your CSS remains unchanged */ .product-link { - text-decoration: none; - color: inherit; + @apply no-underline; } .product-image-container { - position: relative; - overflow: hidden; + @apply relative overflow-hidden; } .product-image { - width: 100%; - transition: opacity 0.3s ease; + @apply w-full; } +/* Convert styles to Tailwind with @apply directives */ .product-hover-banner { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(0, 0, 0, 0.6); - padding: 10px; - opacity: 0; - transition: opacity 0.3s ease; + @apply absolute bottom-0 left-0 right-0 bg-black p-2 opacity-0; } .product-title { - display: block; - font-weight: bold; - @apply text-white; + @apply block text-white font-bold; } .product-description { - display: block; - font-size: 0.9em; - line-height: 1.2; - @apply text-white; + @apply block text-white text-sm leading-tight; } .product-price { - text-align: center; - margin-top: 10px; - font-weight: bold; + @apply text-center py-2 font-bold; } .product-item:hover .product-image { - opacity: 0.7; + @apply opacity-70; } .product-item:hover .product-hover-banner { - opacity: 1; -} + @apply opacity-100 bg-opacity-60; +} \ No newline at end of file diff --git a/src/components/Products.tsx b/src/components/Products.tsx index 42b5add..317c360 100644 --- a/src/components/Products.tsx +++ b/src/components/Products.tsx @@ -6,6 +6,11 @@ import './Products.css'; const Products: React.FC = () => { const productFeed: ProductFeed = productFeedJSON; + // Replace '"' with '"' in the description + const cleanDescription = (description: string) => { + return description.replace(/"/g, '"'); + } + const truncateDescription = (description: string, maxLength: number = 150) => { return description.length <= maxLength ? description : description.slice(0, maxLength) + '...'; }; @@ -22,7 +27,7 @@ const Products: React.FC = () => { {item.title}
{item["media:title"]} - {truncateDescription(item["media:description"])} + {truncateDescription(cleanDescription(item["media:description"]))}
{item["media:price"]}
diff --git a/src/components/SimpleNav.tsx b/src/components/SimpleNav.tsx index 3ca9731..e598d5f 100644 --- a/src/components/SimpleNav.tsx +++ b/src/components/SimpleNav.tsx @@ -8,9 +8,24 @@ const FullNav: React.FC = () => {
Home - Store - Newsletter - Privacy Policy + + Contact + + + Story + + + Events + + + Credits + + + Privacy Policy + + + Store +
); diff --git a/src/components/Story.tsx b/src/components/Story.tsx index 516541c..5e9086b 100644 --- a/src/components/Story.tsx +++ b/src/components/Story.tsx @@ -3,6 +3,7 @@ import ThreePanelBlock from './ThreePanelBlock'; import ThreePanelRow from './ThreePanelRow'; import ComicPanel from './ComicPanel'; import Feature from './Feature'; +import Events from '../components/Events'; const Story: React.FC = () => { return ( @@ -32,7 +33,7 @@ const Story: React.FC = () => { horizontalPosition="left" verticalPosition="bottom" /> - ]} widthClass='xl:w-3/4'/> + ]} widthClass='xl:w-3/4' orientation='right' /> { verticalPosition="top" /> ]} widthClass='xl:w-3/4'/> + + , + , + + ]} widthClass='xl:w-3/4' orientation='left' /> ); }; diff --git a/src/components/SubscribeForm.tsx b/src/components/SubscribeForm.tsx index 5b88593..4d1787a 100644 --- a/src/components/SubscribeForm.tsx +++ b/src/components/SubscribeForm.tsx @@ -21,7 +21,7 @@ const SubscribeForm = () => { return(
-

Subscribe to our newsletter to get notified about new events!

+

Subscribe to get notified about new events!

diff --git a/src/components/ThreePanelBlock.tsx b/src/components/ThreePanelBlock.tsx index d30d2a9..562ddcf 100644 --- a/src/components/ThreePanelBlock.tsx +++ b/src/components/ThreePanelBlock.tsx @@ -1,18 +1,37 @@ -import React from 'react'; import PanelProps from '../types/panels'; -const ThreePanelBlock: React.FC = ({ panels, widthClass='w-auto', heightClass='h-auto' }) => { +interface ThreePanelBlockProps extends PanelProps { + orientation?: 'left' | 'right'; +} + +const ThreePanelBlock: React.FC = ({ panels, widthClass = 'w-auto', heightClass = 'h-auto', orientation = 'right' }) => { return (
-
- {panels[0]} -
-
- {panels[1]} -
-
- {panels[2]} -
+ {orientation === 'left' ? ( + <> +
+ {panels[0]} +
+
+ {panels[1]} +
+
+ {panels[2]} +
+ + ) : ( + <> +
+ {panels[0]} +
+
+ {panels[1]} +
+
+ {panels[2]} +
+ + )}
); }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index b36553a..83c1d00 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -3,7 +3,6 @@ import './Home.css'; import Hero from '../components/Hero'; import ContactForm from '../components/ContactForm'; import Story from '../components/Story'; -import Events from '../components/Events'; import Credits from '../components/Credits'; const Home: React.FC = () => { @@ -12,7 +11,6 @@ const Home: React.FC = () => { - )