existence-master/existence

The official repository for Existence

existence's Issues

Design the club website

Instructions

‌

1. Concept & Vibe:
   • a. Identify your club's personality:
     • Is it playful and energetic?
     • Serious and focused?
     • Collaborative and welcoming?
   • b. Choose a color palette and fonts:
     • Select colors that reflect your vibe (e.g., bright and bold for energetic, muted and clean for focused).
     • Choose fonts that are easy to read and complement the visual style (e.g., playful fonts for a fun vibe, sans-serif fonts for a professional look).
2. Structure & Layout:
   • a. Hero Section:
     • i. Compelling headline: Briefly introduce your club and its purpose.
     • ii. Engaging visual: Use an image or video that captures the essence of your club (e.g., group working on a project, code illustration).
     • iii. Clear call to action (CTA): Encourage visitors to join, contribute, or learn more (e.g., "Join the Club," "Read Our Wiki," "Get Involved").
   • b. About Us:
     • i. Briefly explain your club's mission and values.
     • ii. Highlight the benefits of joining your club.
     • iii. Use testimonials or quotes from members to express their experiences.
   • c. What We Do:
     • i. Showcase the types of projects your club works on.
     • ii. Explain how members can participate and contribute.
     • iii. Include links to relevant resources like code repositories, wiki pages, or meeting schedules.
   • d. Get Involved:
     • i. Provide clear instructions on how to join your club.
     • ii. List communication channels (e.g., mailing list, Discord server).
     • iii. Offer ways for beginners to get started (e.g., workshops, mentorship programs).
   • e. Footer:
     • i. Include contact information and social media links.
     • ii. Add links to other relevant pages on your website.
3. Additional Tips:
   • a. Use high-quality visuals: Images and videos should be clear, relevant, and visually appealing.
   • b. Keep it clean and organized: Ensure information is easy to find and understand.
   • c. Make it mobile-friendly: Your landing page should look good and function well on all devices.
   • d. Highlight the open-source aspect: Showcase the collaborative nature of your club and the benefits of open-source software.
   • e. Embrace accessibility: Use clear language, alt text for images, and proper color contrast for optimal user experience

Develop the club website

1. Project Setup:
   • a. Install dependencies: Set up a Next.js project and install Tailwind CSS and Framer Motion according to their official documentation.
   • b. Configure Tailwind: Create a tailwind.config.js file and customize the utility classes to match your chosen color palette and fonts.
2. Components & Layout:
   • a. Create reusable components: Break down the landing page into reusable components for each section (e.g., Hero, About, Get Involved).
   • b. Utilize Next.js routing: Define each section as separate pages within the Next.js project structure, enabling smooth navigation.
   • c. Implement Framer Motion: Use Framer Motion components and variants to add subtle animations and transitions between elements, enhancing user experience.
3. Building Sections:
   • a. Hero Section:
     • i. Use a next/image component to display the engaging visual.
     • ii. Style the headline and CTA button with Tailwind classes.
     • iii. Implement Framer Motion variants for subtle animation on hover or scroll.
   • b. About Us:
     • i. Use headings and paragraphs to explain the club's mission and values.
     • ii. Utilize Tailwind utility classes for spacing and typography.
     • iii. For testimonials, consider using Framer Motion for a slide-in or fade-in animation.
   • c. What We Do:
     • i. Leverage Tailwind to create a grid or list layout showcasing projects.
     • ii. Use image components and link elements within each project card.
     • iii. Implement Framer Motion for hover effects or interactive elements on project cards.
   • d. Get Involved:
     • i. Utilize a form component or link to direct users to join channels.
     • ii. Style buttons and links with Tailwind for clarity and action.
     • iii. Consider using Framer Motion for interactive animations within the form or buttons.
   • e. Footer:
     • i. Use Tailwind to arrange contact information and social media links.
     • ii. Leverage Next.js Link component for navigation to other relevant pages.
4. Additional Considerations:
   • a. Responsive Design: Utilize Tailwind's responsive utilities to ensure the layout adapts seamlessly across different screen sizes.
   • b. Accessibility: Follow best practices for accessibility by using semantic HTML, proper color contrast, and alt text for images.
   • c. Version Control: Utilize Git for version control and collaboration with other club members on the development process.