Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Landing Page, Contact Page, and About Page and their components #7

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Zaidanfzn
Copy link
Collaborator

Overview

This pull request introduces several new in-page features and components as an initial look on the website later. These changes include the addition of a Landing Page, a Contact Page, and an About Page, each with its own components.

Video Overview

Daskom.Web.Apps.2.mp4

Some Updates

Landing Page

  • LandingNavbar Component: A navigation bar for the homepage.
  • MainLanding Component: The main content section of the homepage.
  • LandingSosmed Component: A collection of official social media links for the Daskom Laboratory.
  • SocialMediaIcon Component: A container for social media icons.
  • SocialMediaData Component: Data for official Daskom Laboratory social media accounts.
  • Landing Footer Component: The footer section of the homepage.

Contact Page

  • AboutDescription Component: A descriptive paragraph about the Daskom Laboratory.
  • Vector Component: Illustrative vectors representing the programming environment.

About Page

  • ContactDescription Component: A detailed contact description for Daskom Laboratory assistants.
  • ContactData Component: A container for assistant contact information.

Apptest Files

  • Apptest.jsx: Temporary placement of pages and components to demonstrate the current code structure and functionality.

Notes

  1. The Apptest.jsx file is used to temporarily place the created pages and components, providing an overview of the coding structure.
  2. All pages are linked into the Apptest.jsx temporary file, and all required components and assets are linked to the appropriate paths.
  3. The CSS styles for text and backgrounds adhere to the design specifications, although manual hex colors are still in use, pending customization in tailwind.config.js.

export default function AboutPage({ setCurrentPage }){
return (
<>
<div className="bg-[#EBEBEB] flex mt-7 mx-auto rounded-lg shadow-xl max-w-4xl min-h-[475px] p-5">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also this #EBEBEB

@@ -0,0 +1,5 @@
export default function LandingFooter() {
return (
<footer className='fixed left-0 right-0 mt-10 bg-[#304D30] w-full h-12'></footer>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can add a name for #304D30 in your tailwind.config.js without waiting for someone to add a customization name

@fakhrip
Copy link
Member

fakhrip commented Aug 31, 2024

And also, please dont remove the .env.example as its important to create a template structure for the configurable environment variables @Zaidanfzn, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants