Skip to content

Commit

Permalink
Merge pull request #16 from armenmerzaian/mods
Browse files Browse the repository at this point in the history 
Ready to publish🎉
  • Loading branch information
@armenmerzaian
armenmerzaian committed May 27, 2023
2 parents d970999 + 45d466b commit 806a7c3
Show file tree
Hide file tree
Showing 39 changed files with 3,683 additions and 2,817 deletions.
6,211 changes: 3,526 additions & 2,685 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"swiper": "^8.4.2"
"swiper": "^9.3.2"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.2",
Expand Down
8 changes: 4 additions & 4 deletions src/components/ActionCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import React from 'react'
import ActionButton from './ActionButton';


export default function ActionCard({image, title, text}) {
export default function ActionCard({img, title, text}) {
return (
<div className="!bg-surface-1 min-w-[272px] mx-2 tablet:w-[611px] rounded-xl min-h-[256px] tablet:min-h-fit tablet:max-h-[184px] laptop:max-h-min flex flex-col tablet:flex-row laptop:flex-col laptop:self-stretch">
<div className="!bg-surface-1 min-w-[272px] mx-2 tablet:w-[611px] rounded-xl min-h-[256px] tablet:min-h-fit tablet:max-h-[240px] laptop:max-h-min flex flex-col tablet:flex-row laptop:flex-col laptop:self-stretch">
<div id="action-card-header" className="flex-grow tablet:flex-grow-0">
<img
src="images/action-card-image.png"
src={img}
alt="action card"
className="object-cover w-full rounded-t-xl tablet:rounded-r-none tablet:rounded-l-xl laptop:rounded-tr-xl laptop:rounded-b-none h-[184px] tablet:min-w-[204px]"
className="object-cover w-full rounded-t-xl tablet:rounded-r-none tablet:rounded-l-xl laptop:rounded-tr-xl laptop:rounded-b-none h-[240px] tablet:min-w-[204px]"
/>
</div>
<div
Expand Down
108 changes: 58 additions & 50 deletions src/components/GalleryCarousel.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,42 @@
import React from 'react'
import React, { useState, useRef, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/effect-cards";
import "swiper/css/navigation";
import "swiper/css/pagination";

import "../styles/GalleryCarousel.css"

// import required modules
import { EffectCards, Navigation, Pagination, navigationNext, navigationPrev } from "swiper";
import "../styles/GalleryCarousel.css";
import {
EffectCards,
Navigation,
Pagination,
navigationNext,
navigationPrev,
} from "swiper";

const gallery = [
"images/in-the-making-studio-0UKym2nB78I-unsplash.jpg",
"images/intenza-fitness-fkS8l7CSGY4-unsplash.jpg",
"images/marek-okon-RdTCTv_iCbE-unsplash.jpg",
"images/rumman-amin-5zoLQUZaWgA-unsplash.jpg",
"images/taru-goyal-lZVBjYeeEu0-unsplash.jpg",
"images/frame_1.jpg",
"images/frame_2.jpg",
"images/frame_3.jpg",
"images/frame_4.jpg",
"images/frame_5.jpg",
];

const swiperStyle = {
export default function GalleryCarousel() {
const [activeSlide, setActiveSlide] = useState(0);
const swiperRef = useRef(null);

}
useEffect(() => {
if (swiperRef.current) {
swiperRef.current.swiper.on("slideChange", () => {
setActiveSlide(swiperRef.current.swiper.realIndex);
});
}
}, []);

export default function GalleryCarousel() {
return (
<Swiper
effect={"cards"}
ref={swiperRef}
effect="cards"
grabCursor={true}
modules={[EffectCards, Navigation, Pagination]}
className="mySwiper"
Expand All @@ -37,47 +47,45 @@ export default function GalleryCarousel() {
}}
pagination={{ clickable: true }}
loop={true}
preloadImages={false}
preloadimages="false"
lazy={{
enabled: true,
loadPrevNext: true,
loadPrevNextAmount: 2,
}}
>
{gallery.map((url, key) => {
return (
<SwiperSlide
key={key}
className="rounded-[24px] laptop:rounded-[40px]"
>
<img src={url} className="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</SwiperSlide>
);
})}
<div className="h-[76px]"></div>

<svg
className="custom-swiper-button-prev cursor-pointer absolute bottom-2 left-[25%] laptop:left-[35%] z-50 swiper-button-disabled"
onClick={navigationPrev}
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
fill="rgb(153 153 153)"
>
<path d="m12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6Z" />
</svg>
{gallery.map((url, key) => (
<SwiperSlide
key={key}
className={`rounded-[24px] laptop:rounded-[40px] ${activeSlide !== key ? "brightness-50" : ""}`}
>
<img src={url} className="swiper-lazy" />
<div className="swiper-lazy-preloader"></div>
</SwiperSlide>
))}

<svg
className="custom-swiper-button-next cursor-pointer absolute bottom-2 right-[25%] laptop:right-[35%] z-50"
onClick={navigationNext}
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
fill="rgb(153 153 153)"
>
<path d="m12 20-1.425-1.4 5.6-5.6H4v-2h12.175l-5.6-5.6L12 4l8 8Z" />
</svg>
<div className="">
<svg
className="custom-swiper-button-prev cursor-pointer absolute bottom-2 left-[15%] laptop:left-[35%] z-50 swiper-button-disabled"
onClick={navigationPrev}
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
fill="rgb(153 153 153)"
>
<path d="m12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6Z" />
</svg>
<svg
className="custom-swiper-button-next cursor-pointer absolute bottom-2 right-[15%] laptop:right-[35%] z-50"
onClick={navigationNext}
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
fill="rgb(153 153 153)"
>
<path d="m12 20-1.425-1.4 5.6-5.6H4v-2h12.175l-5.6-5.6L12 4l8 8Z" />
</svg>
</div>
</Swiper>
);
}
6 changes: 3 additions & 3 deletions src/components/ReviewCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react'

export default function ReviewCard({img, alt, msg, name}) {
export default function ReviewCard({img, msg, name}) {
return (
<div className="relative bg-surface-1 rounded-xl tablet:rounded-2xl w-[327px] max-w-[504px] h-[248px] px-4 py-7 tablet:p-8 tablet:w-[586px] tablet:max-w-[586px] tablet:h-[288px]">
<p className="text-tertiary-light text-center font-light tablet:text-lg tablet:font-regular">
{msg}
</p>
<div className="absolute bottom-8 inset-x-0 p-2 flex justify-center items-center gap-4 tablet:gap-8">
<img src={img} alt={alt} className="w-8 tablet:w-16"/>
<div className="absolute bottom-2 tablet:bottom-8 inset-x-0 p-2 flex justify-center items-center gap-4 tablet:gap-8">
{img}
<h1 className="text-tertiary-light text-xl font-bold tablet:text-2xl">{name}</h1>
</div>
</div>
Expand Down
77 changes: 42 additions & 35 deletions src/components/ReviewCardCarousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,28 @@ export default function ReviewCardCarousel() {

const reviews = [
{
name: "Emily",
img: "images/profile.png",
text: "Had a poster framed and it's absolutely stunning, the colour and attention to detail. This was an old document that I hadn't taken care of and Gregory turned it into a beautiful piece.",
name: "Marilyn Freedman",
text: "I have been a customer of The First Picture Frame for over 20 years. This is a family owned business and the service is excellent. Most of the time I let them pick out the mats and frames for me and it is a collaboration.",
},
{
name: "Duane M",
img: "images/profile.png",
text: "I have had almost every single one of the pictures in my house framed by Aris and some have been dry mounted. If it can be done and done right, this is the place to have it done.",
name: "Greg",
text: "My framed ads were professionally done and exceeded my expectations. This is the place to frame your personal art or prints. Highly recommended!.",
},
{
name: "[NAME]",
img: "images/profile.png",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
name: "Emily",
text: "Had a poster framed and it's absolutely stunning, the colour and attention to detail. This was an old document that I hadn't taken care of and Gregory turned it into a beautiful piece.",
},
{
name: "[NAME2]",
img: "images/profile.png",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
name: "Duane M",
text: "I have had almost every single one of the pictures in my house framed by Aris and some have been dry mounted. If it can be done and done right, this is the place to have it done.",
},
{
name: "[NAME3]",
img: "images/profile.png",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
name: "Mark",
text: "Wonderful, personalized service including going that extra mile for their customer.",
},
{
name: "[NAME4]",
img: "images/profile.png",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
name: "Daniel",
text: "Been going here for years. Absolute pros!",
},
];

Expand All @@ -45,20 +39,20 @@ export default function ReviewCardCarousel() {
<ReviewCard
msg={reviews[0].text}
name={reviews[0].name}
img={reviews[0].img}
img={<ReviewImage character="M" />}
></ReviewCard>
<ReviewCard
msg={reviews[1].text}
name={reviews[1].name}
img={reviews[1].img}
img={<ReviewImage character="G" />}
></ReviewCard>
</div>
</div>
<div className="laptop:hidden flex justify-center">
<ReviewCard
msg={reviews[0].text}
name={reviews[0].name}
img={reviews[0].img}
img={<ReviewImage character="M" />}
></ReviewCard>
</div>
</div>
Expand All @@ -68,20 +62,20 @@ export default function ReviewCardCarousel() {
<ReviewCard
msg={reviews[2].text}
name={reviews[2].name}
img={reviews[2].img}
img={<ReviewImage character="E" />}
></ReviewCard>
<ReviewCard
msg={reviews[3].text}
name={reviews[3].name}
img={reviews[3].img}
img={<ReviewImage character="D" />}
></ReviewCard>
</div>
</div>
<div className="laptop:hidden flex justify-center">
<ReviewCard
msg={reviews[1].text}
name={reviews[1].name}
img={reviews[1].img}
img={<ReviewImage character="G" />}
></ReviewCard>
</div>
</div>
Expand All @@ -91,26 +85,26 @@ export default function ReviewCardCarousel() {
<ReviewCard
msg={reviews[4].text}
name={reviews[4].name}
img={reviews[4].img}
img={<ReviewImage character="M" />}
></ReviewCard>
<ReviewCard
msg={reviews[5].text}
name={reviews[5].name}
img={reviews[5].img}
img={<ReviewImage character="D" />}
></ReviewCard>
</div>
</div>
<div className="laptop:hidden flex justify-center">
<ReviewCard
msg={reviews[2].text}
name={reviews[2].name}
img={reviews[2].img}
img={<ReviewImage character="E" />}
></ReviewCard>
</div>
</div>
<div className="w-fit mx-auto text-neutral-20 flex items-center gap-0.5 mt-[32px] tablet:mt-[56px]">
<span
class={
className={
slide === 0
? "mr-4 p-3 text-neutral-20"
: "cursor-pointer mr-4 p-3 text-neutral-60"
Expand All @@ -133,8 +127,8 @@ export default function ReviewCardCarousel() {
</svg>
</span>
<span
class={
slide == 0
className={
slide === 0
? "material-icons text-primary-55"
: "material-icons text-lg cursor-pointer"
}
Expand All @@ -143,8 +137,8 @@ export default function ReviewCardCarousel() {
fiber_manual_record
</span>
<span
class={
slide == 1
className={
slide === 1
? "material-icons text-primary-55"
: "material-icons text-lg cursor-pointer"
}
Expand All @@ -153,8 +147,8 @@ export default function ReviewCardCarousel() {
fiber_manual_record
</span>
<span
class={
slide == 2
className={
slide === 2
? "material-icons text-primary-55"
: "material-icons text-lg cursor-pointer"
}
Expand All @@ -163,7 +157,7 @@ export default function ReviewCardCarousel() {
fiber_manual_record
</span>
<span
class={
className={
slide === 2
? "material-icons ml-4 p-3 text-neutral-20"
: "material-icons cursor-pointer ml-4 p-3 text-neutral-60"
Expand All @@ -189,3 +183,16 @@ export default function ReviewCardCarousel() {
</div>
);
}


function ReviewImage({character}) {


return (
<div className="!rounded-full p-1 border-2 tablet:p-3 border-primary-75 w-12 h-12 flex justify-center items-center">
<p className="text-primary-75 font-bold text-lg">{character}</p>
</div>
);
}


Loading

1 comment on commit 806a7c3

@vercel
Copy link

@vercel vercel bot commented on 806a7c3 May 27, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

firstpictureframewhse-github-io – ./

firstpictureframewhse-github-io-armenmerzaian.vercel.app
firstpictureframewhse-github-io.vercel.app
firstpictureframewhse-github-io-git-main-armenmerzaian.vercel.app

Please sign in to comment.