Skip to content

Commit

Permalink
ud
Browse files Browse the repository at this point in the history
  • Loading branch information
@nathan00z
nathan00z committed May 22, 2024
1 parent 6f76d03 commit b5b5c2e
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 77 deletions.
22 changes: 22 additions & 0 deletions package-lock.json
View file

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

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"react": "^18.3.1",
"react-bootstrap": "^2.10.2",
"react-dom": "^18.3.1",
"react-responsive-carousel": "^3.2.23",
"react-scripts": "5.0.1",
"react-scroll": "^1.9.0",
"web-vitals": "^2.1.4"
Expand Down
151 changes: 77 additions & 74 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
// src/App.js
import React, { useState } from 'react';
import Header from './components/Header';
import Card from './components/Card';
import drycleaningImage from './components/img/drycleaning.svg';
import tailoringImage from './components/img/tailoring.svg';
import shoeRepairImage from './components/img/shoe-repair.svg';
import drycleaningImage1 from './components/img/drycleaning.svg';
import example1 from './components/gallery/example2.jpg';
import tailoringImage1 from './components/img/tailoring.svg';
import example2 from './components/gallery/example3.jpg';
import shoeRepairImage1 from './components/img/shoe-repair.svg';
// import shoeRepairImage2 from './components/gallery/intro-section-bg.png';
import Footer from './components/Footer';
import location from './components/img/location.svg';
import './components/cards.css';
import './components/app.css';
import './components/intro-sect.css'; // New CSS file for contact section
import './components/location.css'; // New CSS file for location section
import './components/contact.css'; // New CSS file for contact section
import logo from './components/img/logo3.svg'; // Ensure this path is correct
import './components/intro-sect.css';
import './components/location.css';
import './components/contact.css';
import logo from './components/img/logo3.svg';

const App = () => {
const [activeCard, setActiveCard] = useState(null);
Expand All @@ -28,21 +30,24 @@ const App = () => {
const cardsData = [
{
id: 1,
frontImage: drycleaningImage,
frontImage: drycleaningImage1,
images: [example1, example2],
title: 'Professional Cleaning',
description:
"We provide dry cleaning for all types of fabrics, from everyday wear to delicate garments. Our gentle techniques effectively remove stains and odors while preserving your clothing's integrity and appearance.",
},
{
id: 2,
frontImage: tailoringImage,
frontImage: tailoringImage1,
images: [example1, example2],
title: 'Expert Tailoring',
description:
'Discover expert tailoring services that ensure your garments fit perfectly. Our skilled tailors handle everything from simple adjustments to complex alterations with precision and care.',
},
{
id: 3,
frontImage: shoeRepairImage,
frontImage: shoeRepairImage1,
images: [example1, example2],
title: 'Shoe Care',
description:
'Extend the life of your footwear with our professional shoe repair services. From heel replacements to sole repairs, our experts rejuvenate your shoes with high-quality craftsmanship.',
Expand Down Expand Up @@ -101,73 +106,71 @@ const App = () => {
</section>

<section id="services" className="services-section text-center bg-light text-white">
<h2 className="text-3xl font-bold mb-4">Our Services</h2>
<p className="text-lg mb-8">Providing top-notch care for your clothes and shoes</p>
<h2 className="text-3xl font-bold mb-4">Our Services</h2>
<p className="text-lg mb-8">Providing top-notch care for your clothes and shoes</p>

<div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8">
{cardsData.map((card) => (
<div
className={`group card ${activeCard && activeCard !== card.id ? 'hidden' : ''} ${
activeCard === card.id ? 'shift-left' : ''
}`}
key={card.id}
>
<Card
id={card.id}
frontImage={card.frontImage}
title={card.title}
description={card.description}
onToggle={handleToggle}
isActive={activeCard === card.id}
/>
</div>
))}
</div>
</section>
<div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8">
{cardsData.map((card) => (
<div
className={`group card ${activeCard && activeCard !== card.id ? 'hidden' : ''} ${
activeCard === card.id ? 'shift-left' : ''
}`}
key={card.id}
>
<Card
id={card.id}
frontImage={card.frontImage}
images={card.images}
title={card.title}
description={card.description}
onToggle={handleToggle}
isActive={activeCard === card.id}
/>
</div>
))}
</div>
</section>

<section id="location" className="location-section text-black bg-white py-12">
<h2 className="location-header text-4xl font-bold mb-8 text-center">Our Location</h2>

<div className="container mx-auto px-4">
<div className="content-container flex flex-wrap md:flex-nowrap justify-center md:justify-between mb-8">
<div className="map-container w-full md:w-1/2 md:pr-4 mb-8 md:mb-0">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d110796.40281066156!2d-95.63778030273434!3d29.795344999999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8640c423a3d2c387%3A0x383217f82cf1838a!2sBright%20Cleaners!5e0!3m2!1sen!2sus!4v1716040031132!5m2!1sen!2sus"
width="900"
height="450"
style={{ border: 0 }}
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="Bright Cleaners Location"
></iframe>
</div>
<div className="hours-container md:w-1/2 md:pl-4">
<div className="address-container flex flex-col items-center md:flex-row md:justify-center mt-8">
<div className="marker-icon-container mr-2 mb-2 md:mb-0">
<img src={location} alt="Marker Icon" className="h-6 w-6" />
</div>
<div className="address-details">
<h3 className="text-2xl font-semibold mb-2">Address</h3>
<p>1234 Clean St.</p>
<p>Houston, TX 77001</p>
</div>
</div>
<h3 className="text-2xl font-semibold mb-4">Operating Hours</h3>
<p>Sunday: Closed</p>
<p>Monday: 9:00 AM - 6:00 PM</p>
<p>Tuesday: 9:00 AM - 6:00 PM</p>
<p>Wednesday: 9:00 AM - 6:00 PM</p>
<p>Thursday: 9:00 AM - 6:00 PM</p>
<p>Friday: 9:00 AM - 6:00 PM</p>
<p>Saturday: Closed</p>
</div>
</div>
</div>
</section>


<h2 className="location-header text-4xl font-bold mb-8 text-center">Our Location</h2>

<div className="container mx-auto px-4">
<div className="content-container flex flex-wrap md:flex-nowrap justify-center md:justify-between mb-8">
<div className="map-container w-full md:w-1/2 md:pr-4 mb-8 md:mb-0">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d110796.40281066156!2d-95.63778030273434!3d29.795344999999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8640c423a3d2c387%3A0x383217f82cf1838a!2sBright%20Cleaners!5e0!3m2!1sen!2sus!4v1716040031132!5m2!1sen!2sus"
width="900"
height="450"
style={{ border: 0 }}
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="Bright Cleaners Location"
></iframe>
</div>
<div className="hours-container md:w-1/2 md:pl-4">
<div className="address-container flex flex-col items-center md:flex-row md:justify-center mt-8">
<div className="marker-icon-container mr-2 mb-2 md:mb-0">
<img src={location} alt="Marker Icon" className="h-6 w-6" />
</div>
<div className="address-details">
<h3 className="text-2xl font-semibold mb-2">Address</h3>
<p>1234 Clean St.</p>
<p>Houston, TX 77001</p>
</div>
</div>
<h3 className="text-2xl font-semibold mb-4">Operating Hours</h3>
<p>Sunday: Closed</p>
<p>Monday: 9:00 AM - 6:00 PM</p>
<p>Tuesday: 9:00 AM - 6:00 PM</p>
<p>Wednesday: 9:00 AM - 6:00 PM</p>
<p>Thursday: 9:00 AM - 6:00 PM</p>
<p>Friday: 9:00 AM - 6:00 PM</p>
<p>Saturday: Closed</p>
</div>
</div>
</div>
</section>

<section id="contact" className="contact-section text-white py-12">
<div className="container mx-auto px-4">
Expand Down
24 changes: 21 additions & 3 deletions src/components/Card.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
// src/components/Card.js
import React, { useState, useEffect } from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import circleImage from './img/circle.svg';
import './cards.css';

const Card = ({ id, frontImage, title, description, onToggle, isActive }) => {
const Card = ({ id, frontImage, images, title, description, onToggle, isActive }) => {
const [flipped, setFlipped] = useState(false);

useEffect(() => {
Expand Down Expand Up @@ -40,6 +41,8 @@ const Card = ({ id, frontImage, title, description, onToggle, isActive }) => {
<h2 className="text-black title-font">{title}</h2>
<div className="divider"></div>
<p className="text-black description-font">{description}</p>
</div>
<div className="text-content">
<button id={`button-${id}`} className="button-text" onClick={handleToggle}>
{isActive ? 'See less ←' : 'See more →'}
</button>
Expand All @@ -49,7 +52,22 @@ const Card = ({ id, frontImage, title, description, onToggle, isActive }) => {
{isActive && (
<div className="expanded-content show">
<div className="circle2"><img src={circleImage} alt="Decorative circle icon" /></div>

<div className="carousel-container">
<Carousel
showThumbs={false}
showIndicators={true}
showStatus={false}
infiniteLoop={true}
useKeyboardArrows={true}
dynamicHeight={true}
>
{images.map((image, index) => (
<div key={index}>
<img src={image} alt={`${title} ${index + 1}`} />
</div>
))}
</Carousel>
</div>
</div>
)}
</div>
Expand Down
45 changes: 45 additions & 0 deletions src/components/cards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,29 @@
transition: left 0.5s ease-in-out;
}


.carousel-container {
width: 100%; /* Make sure the carousel takes the full width */
max-width: 600px; /* Adjust max width as needed */
height: auto;
/* You can also set a fixed height if needed */
max-height: 400px; /* Adjust as needed */
}

.carousel .slide img {
max-width: 100%;
height: auto; /* Maintain aspect ratio */
object-fit: contain; /* Ensures the image covers the area without distortion */
border-radius: 10px;

}

.carousel .control-arrow,
.carousel .carousel-status {
display: none; /* Hide arrows and status */
}


.expanded-content.show {
display: flex;
}
Expand All @@ -163,6 +186,8 @@
}




/* Mobile view */
@media (max-width: 768px) {
.container {
Expand Down Expand Up @@ -217,6 +242,26 @@
border-radius: 10px;
}


.carousel-container {
width: 100%; /* Make sure the carousel takes the full width */
max-width: 600px; /* Adjust max width as needed */
height: auto;
/* You can also set a fixed height if needed */
max-height: 400px; /* Adjust as needed */
}

.carousel .slide img {
max-width: 100%;
height: auto; /* Maintain aspect ratio */
object-fit: contain; /* Ensures the image covers the area without distortion */
}

.carousel .control-arrow,
.carousel .carousel-status {
display: none; /* Hide arrows and status */
}

.group.shift-left {
position: relative;
transform: none;
Expand Down
Binary file added src/components/gallery/example2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/components/gallery/example3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b5b5c2e

Please sign in to comment.