Created About Us Page #408
Conversation
As/initial setup
🎨 Added Our Principles
Our team section draft
As/about us page/our investors
add purpose of the company section draft
As/about us page/update team page
|
@AbhishekSoni1764 is attempting to deploy a commit to the avikalpg's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis update introduces a comprehensive set of components for the "About Us" section of a web application, significantly enhancing the user experience. It presents detailed information about the company, its community, investors, principles, team members, and product vision. The changes include new React components, CSS styles, and updates to configuration files, all aimed at improving layout, responsiveness, and overall visual appeal. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Navbar
participant AboutUs
participant AdSec
participant OurCommunity
participant OurInvestors
participant OurPrinciples
participant OurTeam
participant ProductVision
participant PurposeOfCompany
User->>Navbar: Click About Us
Navbar->>AboutUs: Navigate to About Us page
AboutUs->>AdSec: Render advertisement section
AboutUs->>OurCommunity: Render community information
AboutUs->>OurInvestors: Render investor details
AboutUs->>OurPrinciples: Render core principles
AboutUs->>OurTeam: Render team member cards
AboutUs->>ProductVision: Show product vision
AboutUs->>PurposeOfCompany: Display company purpose
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (6)
components/aboutus/ad-section/index.tsx (1)
3-16: Consider using theImagecomponent fromnext/image.The
Imagecomponent fromnext/imageis commented out and replaced with a standardimgtag. Using theImagecomponent can improve performance and optimization.- {/* <Image src="./Workflow.svg" alt="altImg" fill={true} /> */} - <img src="/Workflow.svg" alt="laptop" /> + <Image src="/Workflow.svg" alt="laptop" fill={true} />pages/about-us/index.tsx (1)
11-26: Consider adding error boundaries.The
AboutUscomponent is well-structured, but adding error boundaries can improve error handling for potential issues with the imported components.+import { ErrorBoundary } from 'react-error-boundary'; const AboutUs = () => { return ( <div> + <ErrorBoundary FallbackComponent={<div>Something went wrong.</div>}> <MainAppBar /> <PurposeOfCompany /> <ProductVision /> <OurPrinciples /> <OurTeam /> <OurInvestors /> <OurCommunity /> <AdSec /> <Footer /> + </ErrorBoundary> </div> ); };components/aboutus/our-principles/index.tsx (1)
4-32: Ensure the parent element has the required position for thefillprop.The
Imagecomponent is using thefillprop, which requires the parent element to have a position of relative or absolute.- <div className="glow-effect h-72 w-72 md:h-96 md:w-96"> + <div className="glow-effect h-72 w-72 md:h-96 md:w-96 relative">utils/about/index.tsx (3)
44-61: Image file/testUser.svgdoes not exist.The image file specified in the
teamMembersarray is missing from the repository. Please ensure that the correct image paths are provided or add the missing image file to the repository.
- File:
utils/about/index.tsx- Lines: 44-61
Analysis chain
Verify image paths.
Ensure that the image paths in the
teamMembersarray are correct and the images exist at the specified locations.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of image files used in the teamMembers array. # Test: Check if the image files exist. Expect: All files should exist. for img in "/testUser.svg"; do if [ ! -f "$img" ]; then echo "Image file $img does not exist." fi doneLength of output: 150
30-43: Update image paths.The image file
vibinex-dark-logo.pngexists in thepublicdirectory. Update the image paths in theInvestorsarray topublic/vibinex-dark-logo.png.
- File:
utils/about/index.tsx- Lines: 30-43
- Current Path:
/vibinex-dark-logo.png- Correct Path:
public/vibinex-dark-logo.pngAnalysis chain
Verify image paths.
Ensure that the image paths in the
Investorsarray are correct and the images exist at the specified locations.
Verify image paths.
The image file
/vibinex-dark-logo.pngdoes not exist. Let's search for the image file within the repository to confirm its presence and path.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of image files used in the Investors array. # Test: Check if the image files exist. Expect: All files should exist. for img in "/vibinex-dark-logo.png"; do if [ ! -f "$img" ]; then echo "Image file $img does not exist." fi doneLength of output: 186
Script:
#!/bin/bash # Description: Search for the image file within the repository. # Find any files with the name vibinex-dark-logo.png fd vibinex-dark-logo.pngLength of output: 55
1-28: Update image paths.The image paths in the
Principlesarray are incorrect. Please update them to the correct paths as found in the repository:
public/User.svg(orpublic/testUser.svg)public/focus.svgpublic/rocket.svg(orpublic/aboutus/Rocket.svg)public/efficiency.svgpublic/introspection.svgEnsure that the paths are correctly referenced to display the images properly.
Analysis chain
Verify image paths.
Ensure that the image paths in the
Principlesarray are correct and the images exist at the specified locations.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of image files used in the Principles array. # Test: Check if the image files exist. Expect: All files should exist. for img in "./user.svg" "/focus.svg" "/rocket.svg" "/efficiency.svg" "/introspection.svg"; do if [ ! -f "$img" ]; then echo "Image file $img does not exist." fi doneLength of output: 1066
Script:
#!/bin/bash # Description: Search for the actual locations of the image files used in the Principles array. # Define the image filenames to search for images=("user.svg" "focus.svg" "rocket.svg" "efficiency.svg" "introspection.svg") # Search for each image file in the repository for img in "${images[@]}"; do echo "Searching for $img:" fd "$img" doneLength of output: 776
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (17)
public/AboutUsDesignCircles.svgis excluded by!**/*.svgpublic/AboutUsDesignEcllipseFull.svgis excluded by!**/*.svgpublic/AboutUsDesignEcllipseHalf.svgis excluded by!**/*.svgpublic/AboutUsDesignGradient.svgis excluded by!**/*.svgpublic/AboutUsDesignGradientFull.svgis excluded by!**/*.svgpublic/AboutUsDesignStarBig.svgis excluded by!**/*.svgpublic/AboutUsDesignStars.svgis excluded by!**/*.svgpublic/AboutUsDesignTopGradient.svgis excluded by!**/*.svgpublic/User.svgis excluded by!**/*.svgpublic/Workflow.svgis excluded by!**/*.svgpublic/aboutus/Rocket.svgis excluded by!**/*.svgpublic/efficiency.svgis excluded by!**/*.svgpublic/focus.svgis excluded by!**/*.svgpublic/introspection.svgis excluded by!**/*.svgpublic/investor.svgis excluded by!**/*.svgpublic/rocket.svgis excluded by!**/*.svgpublic/testUser.svgis excluded by!**/*.svg
Files selected for processing (15)
- components/aboutus/ad-section/index.tsx (1 hunks)
- components/aboutus/our-community/index.tsx (1 hunks)
- components/aboutus/our-investors/index.tsx (1 hunks)
- components/aboutus/our-principles/index.tsx (1 hunks)
- components/aboutus/our-team/FlipCard.module.css (1 hunks)
- components/aboutus/our-team/FlipCard.tsx (1 hunks)
- components/aboutus/our-team/index.tsx (1 hunks)
- components/aboutus/product-vision/index.tsx (1 hunks)
- components/aboutus/purpose/index.tsx (1 hunks)
- next.config.js (1 hunks)
- pages/about-us/index.tsx (1 hunks)
- styles/globals.css (2 hunks)
- tailwind.config.js (1 hunks)
- utils/about/index.tsx (1 hunks)
- views/Navbar.tsx (1 hunks)
Files skipped from review due to trivial changes (3)
- components/aboutus/our-team/FlipCard.module.css
- components/aboutus/product-vision/index.tsx
- tailwind.config.js
Additional comments not posted (36)
components/aboutus/ad-section/index.tsx (2)
1-2: Import statement is correct.The import statement for the
Imagecomponent fromnext/imageis necessary and correctly included.
17-18: Export statement is correct.The export statement for the
AdSeccomponent is necessary and correctly included.pages/about-us/index.tsx (2)
1-10: Import statements are correct.The import statements for the various components are necessary and correctly included.
27-27: Export statement is correct.The export statement for the
AboutUscomponent is necessary and correctly included.components/aboutus/our-principles/index.tsx (2)
1-3: Import statements are correct.The import statements for the
Imagecomponent and thePrinciplesdata are necessary and correctly included.
33-34: Export statement is correct.The export statement for the
OurPrinciplescomponent is necessary and correctly included.components/aboutus/our-team/index.tsx (4)
1-4: Imports look good.All imported modules are necessary and correctly used in the file.
6-39: Component structure and JSX look good.The component is well-structured, and the use of
Imagefor background elements andFlipCardfor team members is appropriate. The layout is designed to be responsive.
8-39: CSS class usage looks good.The CSS classes are appropriately applied and follow best practices for responsive design.
43-43: Export statement looks good.The component is correctly exported as the default export.
components/aboutus/purpose/index.tsx (4)
1-2: Imports look good.All imported modules are necessary and correctly used in the file.
4-47: Component structure and JSX look good.The component is well-structured, and the use of
Imagefor background elements and text for the company's purpose is appropriate. The layout is designed to be responsive.
6-47: CSS class usage looks good.The CSS classes are appropriately applied and follow best practices for responsive design.
51-51: Export statement looks good.The component is correctly exported as the default export.
components/aboutus/our-investors/index.tsx (4)
1-2: Imports look good.All imported modules are necessary and correctly used in the file.
4-49: Component structure and JSX look good.The component is well-structured, and the use of
Imagefor background elements and investor images is appropriate. The layout is designed to be responsive.
6-49: CSS class usage looks good.The CSS classes are appropriately applied and follow best practices for responsive design.
53-53: Export statement looks good.The component is correctly exported as the default export.
utils/about/index.tsx (4)
1-28: LGTM!The
Principlesarray is well-structured and consistent.
30-43: LGTM!The
Investorsarray is well-structured and consistent.
44-61: Placeholder data verification.The
teamMembersarray contains placeholder data for names and images. Ensure that this is intentional and will be updated with real data.
44-61: LGTM!The
teamMembersarray is well-structured and consistent.components/aboutus/our-community/index.tsx (3)
1-1: LGTM!The import of the
Imagecomponent fromnext/imageis correct and necessary.
3-50: LGTM!The
OurCommunitycomponent structure is correct and consistent.
5-50: LGTM!The JSX elements are well-structured and should be responsive as intended.
components/aboutus/our-team/FlipCard.tsx (4)
1-4: LGTM!The imports of icons from
react-iconsand theImagecomponent fromnext/imageare correct and necessary.
6-13: LGTM!The
Memberinterface is well-defined and consistent.
15-63: LGTM!The
FlipCardcomponent structure is correct and consistent.
17-63: LGTM!The JSX elements are well-structured and should be responsive as intended.
next.config.js (1)
45-50: LGTM! Ensure the new domain is correct.The addition of the new domain
via.placeholder.comfor placeholder images is correct.However, verify that the domain is correct and intended for use.
Verification successful
The domain
via.placeholder.comis correctly added and intended for use.
- The domain is only referenced in the
next.config.jsfile, which aligns with its purpose for placeholder images.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the new domain addition in the next.config.js file. # Test: Check the occurrences of the new domain. rg --type js 'via.placeholder.com'Length of output: 108
Script:
#!/bin/bash # Description: Verify the new domain addition in the next.config.js file and check for any related configurations or documentation. # Test: Check for any additional references to the new domain across the codebase. rg 'via.placeholder.com'Length of output: 98
styles/globals.css (2)
224-243: LGTM! The new CSS classes enhance visual effects.The
.glow-effectand.box-shadowclasses add advanced visual effects.However, verify that these new classes are used correctly in the application.
4-6: LGTM! Ensure the new fonts are used correctly.The import of Google Fonts "Lato" and "Poppins" enhances typographic options.
However, verify that the new fonts are used correctly in the application.
views/Navbar.tsx (4)
1-14: LGTM! The imports and initializations are correct.The imports and initializations are correctly set up for the
Navbarcomponent.
22-37: LGTM! The state and event listeners are correctly set up.The state and event listeners for the navbar are correctly set up to handle scrolling and visibility.
39-147: LGTM! The event handlers for tracking user interactions are correct.The event handlers for tracking user interactions with the navigation links are correctly set up.
151-258: LGTM! The JSX structure and new link are correct.The JSX structure is well-organized, and the new link to the "About Us" page is correctly added.
However, verify that the new link is functional and correctly routes to the "About Us" page.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
This is a good first pull request.
I have gone through it once and have pointed out some large changes. Please fix them and let me know again.
Also, please join the Vibinex Discord. I would have provided my review much faster if you had shared the pull request on Discord in the #contributors channel. Others in the team would also have provided their feedback much faster.
| return ( | ||
| <div className="flex justify-center items-center p-10 gap-28"> | ||
| <div className="w-full md:w-2/5 font-lato text-5xl font-normal tracking-normal leading-tight"> | ||
| <p>All of our work and vision is defined by phrase</p> | ||
| <span className="text-[#1EEBBA] font-bold">{`"Being Productive"`}</span> | ||
| </div> | ||
| <div className="w-96 h-96 hidden md:block"> | ||
| {/* <Image src="./Workflow.svg" alt="altImg" fill={true} /> */} | ||
| <img src="/Workflow.svg" alt="laptop" /> | ||
| </div> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
Not a fan of this section at all.
| import { teamMembers } from "../../../utils/about"; | ||
| import Image from "next/image"; | ||
|
|
||
| const OurTeam = () => { |
There was a problem hiding this comment.
^ You can use the contents from this image for populating the page.
There was a problem hiding this comment.
Also, add links to the GitHub and LinkedIn profiles of the founders:
GitHub: @avikalpg and @tapishr
LinkedIn: Avikalp Gupta and Tapish Rathore
There was a problem hiding this comment.
Link to the profile images:
Tapish's picture
Avikalp's picture
utils/about/index.tsx
Outdated
There was a problem hiding this comment.
Don't create utils for page-level stuff (it is not a utility if it is only going to be useful in one place).
Since you have created separate folders for each view, you can add these in a different file of the same folder.
Or, you can also just add them in the same file as the component (as we have done in many other views).
| import React, { useState, useEffect } from 'react'; | ||
| import { useSession } from 'next-auth/react' | ||
| import type { Session } from 'next-auth' | ||
| import Link from 'next/link'; | ||
| import { AiOutlineMenu, AiOutlineClose } from 'react-icons/ai'; | ||
| import React, { useState, useEffect } from "react"; | ||
| import { useSession } from "next-auth/react"; | ||
| import type { Session } from "next-auth"; | ||
| import Link from "next/link"; | ||
| import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai"; | ||
| import LoginLogout from "../components/LoginLogout"; | ||
| import chromeLogo from '../public/chrome-logo.png' | ||
| import Image from 'next/image'; | ||
| import RudderContext from '../components/RudderContext'; | ||
| import { getAndSetAnonymousIdFromLocalStorage } from '../utils/rudderstack_initialize'; | ||
| import { getAuthUserId, getAuthUserName } from '../utils/auth'; | ||
| import AppBar from '../components/AppBar'; | ||
| import VibinexDarkLogo from '../public/vibinex-dark-logo.png'; | ||
| import Button from '../components/Button'; | ||
| import chromeLogo from "../public/chrome-logo.png"; | ||
| import Image from "next/image"; | ||
| import RudderContext from "../components/RudderContext"; | ||
| import { getAndSetAnonymousIdFromLocalStorage } from "../utils/rudderstack_initialize"; | ||
| import { getAuthUserId, getAuthUserName } from "../utils/auth"; | ||
| import AppBar from "../components/AppBar"; | ||
| import VibinexDarkLogo from "../public/vibinex-dark-logo.png"; | ||
| import Button from "../components/Button"; |
There was a problem hiding this comment.
Please remove any inconsequential changes from your pull request.
When adding your changes using git, use the -p flag to choose which changes you want to commit and which ones you want to skip. These changes should have been skipped.
| const [showNavbar, setShowNavbar] = useState(false); | ||
| const [scrollDown, setScrollDown] = useState(!props.transparent); |
There was a problem hiding this comment.
If you haven't followed this in your other files, I just want to emphasize that we use tabs (not spaces) in our project. If you have used spaces for indentation, please replace them with tabs.
There was a problem hiding this comment.
IMPORTANT.
We don't want to add the "About Us" link in the NavBar at all. We want to add it ONLY to the footer of the website.
| <div className="pt-28 md:pt-0"> | ||
| <h1 className="font-medium p-10 md:p-0 text-7xl tracking-normal font-lato"> | ||
| Purpose of <span className="text-[#6B4CFF]">the Company</span> | ||
| </h1> | ||
| </div> | ||
| <p className="font-lato text-center text-2xl w-[90%] md:w-[40%] px-10"> | ||
| To revolutionize the way software is being built to reduce the cost of | ||
| innovation. | ||
| </p> |
There was a problem hiding this comment.
The bigger and more highlighted part should be the purpose itself, not the title "Purpose of the company".
There was a problem hiding this comment.
We have an institutional investor named "FirstCheque"
And a list of angel investors and advisors (this list is more than 10 people, out of which, we want to highlight 2-3 people).
There was a problem hiding this comment.
So you might want to change the layout accordingly.
|
This is the first draft for the About Us page. This is also responsive for mobile view.
Sections Added:
PR: #233
Summary by CodeRabbit
New Features
Documentation
Style