EventPlanner Pro Website

Juan Carlos Valerio Barreto / September 15, 2023
3 min read •
EventPlanner Pro Website
Overview
EventPlanner Pro's website, built with Next.js and TailwindCSS, is tailored for event organizers, focusing on tools like online registration, ticketing, and post-event analysis. Our vision: "Create Unforgettable Events".
Requirements Compliance
1. HTML, CSS, and JavaScript
- Single-page layout: Highlights product features using Next.js.
- Design: TailwindCSS ensures a responsive and elegant look.
- JavaScript functions: Slideshow and toggle features for product images and information.
2. SEO Optimization
- Meta and Schema: Relevant tags and schema implemented.
- Sitemap:
sitemap.xml
included.
3. Web Design
- Responsive: Designed for desktop and mobile.
Accordion Component
The Accordion
component is a reusable UI element designed to display collapsible content panels.
Props:
-
title (string): The header or title of the accordion which the users see before expanding.
-
content (string): The main content that is displayed once the accordion is expanded.
Usage:
<Accordion
title="Your Title Here"
content="Your content here..."
/>
TextImageBlock Component
The TextImageBlock
component is a versatile UI element designed to display a combination of text and image side by side, making it perfect for sections that combine visual content with descriptive text.
Props:
-
title (string): The main header or title for this block.
-
paragraph (string): A longer description or set of details that accompanies the title.
-
image (object): The image asset you want to display. Ensure it's properly imported or sourced.
-
text (string): Additional text that can be displayed, possibly as a caption or supplementary information.
Usage:
import yourImageAsset from './path-to-your-image.jpg';
<TextImageBlock
title="Your Title Here"
paragraph="Your descriptive paragraph here..."
image={yourImageAsset}
text="Any additional text here"
/>
SliderItem Component
The SliderItem
component acts as an individual slide for the parent Carousel
component. It efficiently displays an image along with associated title and message, making it optimal for slideshows or feature showcases.
Props:
-
image (object): The primary image for this slide. Ensure it's properly imported or sourced.
-
title (string): A headline or title for the slide.
-
message (string): A longer description or message that provides additional details about the slide.
Usage:
First, ensure you have the Carousel
component properly set up.
Then, for each SliderItem
:
import yourSlideImage from './path-to-your-slide-image.jpg';
<SliderItem
image={yourSlideImage}
title="Slide Title Here"
message="Your detailed message or description for this slide here..."
/>
4. Scripting
- Automation script: Handles tasks like image compression and file minification.
5. Version Control
- Git Repository: Organized commits and branching using GitHub.
6. Deployment
- Platform: Deployed on Vercel.
- Optimized assets: All assets load correctly. Performance evidence.
This is a Next.js project bootstrapped with create-next-app
.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.