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.

Sign up for GitHub

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

Home_page_responsive_little #56

Closed
wants to merge 2 commits into from
Closed

Home_page_responsive_little #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0bdb42
Home_page_responsive_little
vrunda2005 Oct 3, 2024
abf6659
Type_speed_in_landing_page
vrunda2005 Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@
"react-intersection-observer": "^9.13.0",
"react-pageflip": "^2.0.3",
"react-router-dom": "^6.24.1",
"react-typed": "^2.0.12",
"tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.4"
"tailwindcss": "^3.4.4",
"typewriter-effect": "^2.21.0"
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Consider removing one of the typing animation libraries.

The addition of "typewriter-effect" seems redundant given that "react-typed" has already been added. Both libraries serve similar purposes for creating typing animations. Having two libraries with overlapping functionality may lead to confusion in development and unnecessarily increase the bundle size.

Consider choosing either "react-typed" or "typewriter-effect" based on your specific needs and removing the other to maintain a leaner dependency list.

Comment on lines +24 to +27
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

Package optimization recommended: Remove unused react-typed dependency.

The analysis confirmed that typewriter-effect is used in frontend/src/components/ui/Landing.jsx, while react-typed is not utilized anywhere in the codebase. To optimize the project's dependencies and reduce redundancy, it's recommended to remove react-typed from frontend/package.json.

  • Remove react-typed from frontend/package.json
🔗 Analysis chain

Summary: Package additions align with PR objectives, but consider optimization.

The additions to the package.json file generally support the PR objective of enhancing the homepage's responsiveness and visual appeal. However, there's an opportunity to optimize the dependencies:

  1. The addition of typing animation libraries (react-typed and typewriter-effect) can indeed improve the user experience on the landing page.
  2. However, having two libraries with similar functionality (react-typed and typewriter-effect) is redundant.

To ensure we're not missing any usage of these libraries, let's check the codebase:

Based on the results of this check, consider removing the unused library to keep the project dependencies lean and avoid potential conflicts or confusion in the future.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check usage of react-typed and typewriter-effect in the codebase

echo "Checking usage of react-typed:"
rg --type js --type jsx 'from [\'"]react-typed[\'"]'

echo "\nChecking usage of typewriter-effect:"
rg --type js --type jsx 'from [\'"]typewriter-effect[\'"]'

Length of output: 164

Script:

#!/bin/bash
# Description: Check usage of react-typed and typewriter-effect in the codebase

echo "Checking usage of react-typed:"
rg --type js --type jsx "from ['\"]react-typed['\"]"

echo "\nChecking usage of typewriter-effect:"
rg --type js --type jsx "from ['\"]typewriter-effect['\"]"

Length of output: 337

Script:

#!/bin/bash
# Description: Check usage of react-typed and typewriter-effect in the codebase

echo "Checking usage of react-typed:"
rg "from ['\"]react-typed['\"]" --type js

echo "\nChecking usage of typewriter-effect:"
rg "from ['\"]typewriter-effect['\"]" --type js

Length of output: 342

},
"devDependencies": {
"@types/react": "^18.3.3",
Expand Down
20 changes: 9 additions & 11 deletions frontend/src/components/Pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import bgpic from "../../assets/img/abt1.jpg"
import bgpic from "../../assets/img/abt1.jpg";

export default function About() {
return (
Expand All @@ -9,20 +9,18 @@ export default function About() {
>
<div className="absolute inset-0 bg-black opacity-60"></div> {/* Black overlay with 40% opacity */}
<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 items-center justify-center h-full p-4">
<h1 className="text-7xl md:text-9xl font-bold text-center p-8 text-white">ABOUT US</h1>
<div className="flex w-full justify-center align-middle mt-10 md:px-36 relative z-10">
<p className="text-l md:text-xl text-gray-200 w-full"> {/* Change text color for better contrast */}
How it works..
Our name says it all!
Founder, Jonathan Li, shares a passion for board games, boba, and
<h1 className="text-5xl sm:text-6xl md:text-8xl lg:text-9xl font-bold text-center p-4 text-white">ABOUT US</h1>
<div className="flex w-full justify-center items-start mt-8 md:mt-10 md:px-8 lg:px-36 relative z-10">
<p className="text-base sm:text-lg md:text-xl text-gray-200 w-full leading-relaxed text-justify p-4">
How it works...<br />
Our name says it all! Founder, Jonathan Li, shares a passion for board games, boba, and
delicious food, so he combined them all to become Sip & Play, Park Slope’s
first board game cafe. It is a straightforward concept, come in with your
first board game cafe. It is a straightforward concept: come in with your
friends and family to play any board game from our library of <span className="text-amber-600">300+ games!</span>
We hope when you visit, you also enjoy our coffee, espresso, boba,
sandwiches, and snacks!
<br />
<br />
Hours and Location
<br /><br />
<strong>Hours and Location:</strong><br />
New opening hours:<br />
Sunday: 10am-11pm <br />
Mon-Thurs: 11am-11pm <br />
Expand Down
64 changes: 25 additions & 39 deletions frontend/src/components/ui/Landing.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,41 @@
import React from "react";
import Typewriter from "typewriter-effect";

import heropic from "../../assets/landing/hero pic.jpg";
import coffecup from "../../assets/landing/coffecup.png";


export default function Landing() {
return (
<div>
<section className="relative pb-24 h-screen-dvh w-screen bg-cover bg-center overflow-hidden">
<div className="flex-col md:flex pt-20 z-1">
{/* Text Content */}
<div className="w-screen p-4 md:w-1/2 mb-6 md:mb-0 text-center md:text-left z-10 pt-14">
<h1 className="text-6xl md:text-9xl font-bold">
A unique café experience awaits you
<div className="flex flex-col md:flex-row items-center pt-10 md:pt-20 z-1">

<div className="w-full md:w-1/2 p-4 text-center md:text-left z-10">
<h1 className="text-4xl sm:text-6xl md:text-9xl font-bold leading-tight">
<Typewriter
options={{
strings: ["A unique café experience awaits you"],
autoStart: true,
loop: true,
delay: 75,
}}
/>
</h1>

</div>
<div>
<div className="flex justify-center pt-64 z-0">
<div className="absolute flex justify-center md:w-2/4 md:left-2/4 rotate-12 -bottom-20">
<img src={heropic} alt="" className="w-2/4" />
</div>
<div className="absolute flex justify-center md:w-2/4 md:left-2/4 -rotate-12 -bottom-16">
<img src={heropic} alt="" className="w-2/4" />
</div>

<div className="flex justify-center w-full mt-10 md:mt-0">
<div className="absolute flex justify-center w-2/4 md:w-2/4 rotate-12 -bottom-20">
<img src={heropic} alt="Hero" className="w-full max-w-[400px] mx-auto" />
</div>
<div className="absolute flex justify-center w-2/4 md:w-2/4 -rotate-12 -bottom-16">
<img src={heropic} alt="Hero" className="w-full max-w-[400px] mx-auto" />
</div>
</div>
</div>
</div>
</section>


<section className="flex flex-row justify-center items-center p-32">
{/* <div className="w-3/5 p-28 mt-20">
<h1 className="text-8xl font-bold text-black ">
Our name says it all!
</h1>
<p className="text-black text-2xl">
Founder, Jonathan Li, shares a passion for board games, boba, and
delicious food, so he combined them all to become Sip & Play, Park
Slope’s first board game cafe. It is a straightforward concept: come
in with your friends and family to play any board game from our
library of 300+ games! We hope when you visit, you also enjoy our
coffee, espresso, boba, sandwiches, and snacks!
</p>
<ul className="text-xl mt-4">
<li>New opening hours:</li>
<li>Sunday: 10am-11pm</li>
<li>Mon-Thurs: 11am-11pm</li>
<li>Fri: 11am-midnight</li>
<li>Sat: 10am-midnight</li>
</ul>
<button className="p-2 border-2 border-slate-500">Learn more↗️</button>
</div> */}

<section className="flex flex-col md:flex-row justify-center items-center py-16 md:py-32 px-4 md:px-32 relative">
<div className="w-1/2 absolute p-4 md:right-40 m-auto">
<img src={coffecup} alt="" className="w-96 rotate-12"/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ui/ReviewCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const ReviewCarousel = () => {
className="flex transition-transform duration-300 ease-in-out"
style={{
transform: `translateX(-${currentIndex * (100 / 4)}%)`,
width: `${reviews.length * (100 / 4)}%`,
width: `${reviews.length * (100 /4)}%`,
}}
>
{reviews.map((review, index) => (
Expand Down
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.