Skip to content

Commit 73ec044

Browse files
yanivhamagnivyanivhamagniv
authored
Merge branch 'main' into Homepage
2 parents e1bae78 + 7a981a3 commit 73ec044

13 files changed

Lines changed: 167 additions & 82 deletions

File tree

‎_codux/boards/test-new-component/test-new-component.board.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createBoard } from '@wixc3/react-board';
2+
import { TestNewComponent } from '../../../src/components/test-new-component/test-new-component';
3+
4+
export default createBoard({
5+
name: 'TestNewComponent',
6+
Board: () => <TestNewComponent />,
7+
});

‎app/root.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,14 @@ export default function App() {
7575
<EcomApiContextProvider tokens={wixSessionTokens}>
7676
<CartOpenContextProvider>
7777
<div className={styles.root}>
78-
<Header />
78+
<Header />
7979
<main className={styles.main}>
8080
<Outlet />
8181
</main>
8282
<Footer />
8383
</div>
8484
<Cart />
85-
<NavigationProgressBar className={styles.navigationProgressBar} />
85+
<NavigationProgressBar className={styles.navigationProgressBar} />
8686
<Toaster />
8787
</CartOpenContextProvider>
8888
</EcomApiContextProvider>

‎app/routes/_index/route.module.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99

1010
.hero {
1111
height: 100vh;
12+
display: grid;
13+
grid-template-rows: max-content max-content max-content 1fr;
14+
gap: 20px;
15+
padding-right: 0px;
16+
padding-left: 0px;
1217
}
1318
.newIn {
1419
height: 100vh;
@@ -26,6 +31,9 @@
2631
}
2732
.header2 {
2833
font: var(--heading1);
34+
grid-row: 1 / 2;
35+
grid-column: 1 / 2;
36+
height: max-content;
2937
}
3038
.p1 {
3139
font: var(--heading4);

‎app/routes/_index/route.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { MetaFunction } from '@remix-run/react';
22
import { CategoryLink } from '~/src/components/category-link/category-link';
33
import { FeaturedProductsSection } from '~/src/components/featured-products-section/featured-products-section';
44
import { LabelWithArrow } from '~/src/components/label-with-arrow/label-with-arrow';
5+
import { TestNewComponent } from '~/src/components/test-new-component/test-new-component';
56
import { BackgroundParallax, FadeIn, FloatIn } from '~/src/components/visual-effects';
67
import { useRef } from 'react';
78
import styles from './route.module.scss';
@@ -10,6 +11,7 @@ import classNames from 'classnames';
1011
export default function HomePage() {
1112
const newInRef = useRef(null);
1213
function anchorToNewIn() {
14+
console.log('xx');
1315
newInRef.current.scrollIntoView({ behavior: 'smooth' });
1416
}
1517
return (
@@ -20,10 +22,14 @@ export default function HomePage() {
2022
<LabelWithArrow
2123
className={styles.labelWithArrow}
2224
onClick={anchorToNewIn}
25+
2326
btLabel="Shop Now"
27+
2428
bgColor1="#000000"
25-
horizontalSpacing="20"
29+
horizontalSpacing="30"
2630
verticalSpacing="12"
31+
bgColor2="#ffffff"
32+
text="Buy Now"
2733
/>
2834
</section>
2935
<section ref={newInRef} className={styles.newIn}>
@@ -63,7 +69,7 @@ export default function HomePage() {
6369
<CategoryLink categorySlug="kitchen-essentials" className="linkCard">
6470
<img
6571
className="linkCardBackground"
66-
src="https://static.wixstatic.com/media/c837a6_c05a03f48fbd49e7b5046d1b18c930eb~mv2.jpg/v1/fill/w_547,h_730,q_90/c837a6_c05a03f48fbd49e7b5046d1b18c930eb~mv2.jpg"
72+
src="https://static.wixstatic.com/media/4da84e_f55bb718fbd0473381a349b611c5acd4~mv2.jpg/v1/fit/w_640,h_640/Headphones-01-Header_edited 1.jpg.jpg"
6773
alt=""
6874
/>
6975
<div className="linkCardTitle">Kitchen</div>
@@ -109,6 +115,7 @@ export default function HomePage() {
109115
</BackgroundParallax>
110116

111117
<FeaturedProductsSection
118+
onClick={anchorToNewIn}
112119
categorySlug="mobile"
113120
title="Best Sellers"
114121
description="When quality is eco-friendly. Explore our top picks."

‎src/components/featured-products-section/featured-products-section.module.scss‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,13 @@
4444
justify-items: center;
4545
align-content: end;
4646
align-items: end;
47+
48+
gap: 16px;
49+
width: max-content;
50+
align-items: end;
51+
justify-content: center;
52+
justify-items: center;
53+
4754
}
4855

4956
@media (max-width: 1024px) {
@@ -79,5 +86,11 @@
7986
gap: 26px 10px;
8087
}
8188
}
82-
.productLink {
89+
90+
.productLink {}
91+
92+
.div1 {
93+
height: 800px;
94+
align-content: end;
95+
8396
}

‎src/components/featured-products-section/featured-products-section.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const FeaturedProductsSection = (props: FeaturedProductsSectionProps) =>
2727
{description ?? category?.description}
2828
</div>
2929
</FadeIn>
30+
3031
<Reveal className={styles.products} direction="down" duration={1.4}>
3132
{products
3233
? products.items.map((product) => (
@@ -48,6 +49,28 @@ export const FeaturedProductsSection = (props: FeaturedProductsSectionProps) =>
4849
<ProductCardSkeleton key={i} />
4950
))}
5051
</Reveal>
52+
53+
<div className={styles.div1}>
54+
<Reveal className={styles.products} direction="down" duration={1.4}>
55+
{products
56+
? products.items.map((product) => (
57+
<ProductLink key={product._id} productSlug={product.slug!}>
58+
<ProductCard
59+
name={product.name!}
60+
imageUrl={getProductImageUrl(product, { minHeight: 700 })}
61+
price={product.priceData?.formatted?.price}
62+
discountedPrice={
63+
product.priceData?.formatted?.discountedPrice
64+
}
65+
ribbon={product.ribbon ?? undefined}
66+
/>
67+
</ProductLink>
68+
))
69+
: Array.from({ length: productCount }).map((_, i) => (
70+
<ProductCardSkeleton key={i} />
71+
))}
72+
</Reveal>
73+
</div>
5174
</div>
5275
);
5376
};

‎src/components/label-with-arrow/label-with-arrow.module.scss‎

Lines changed: 45 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,54 @@
1-
.root {
2-
background-color: var(--text-color);
3-
--hover-letter-spacing: 0.15em;
4-
display: grid;
5-
width: min-content;
6-
align-items: center;
7-
font: var(--heading5);
8-
font-size: 24px;
9-
letter-spacing: 0.04em;
10-
text-align: left;
11-
cursor: pointer;
12-
padding: 0px;
13-
justify-items: center;
14-
color: var(--primary1);
15-
border-radius: 360px;
16-
box-sizing: border-box;
17-
clip-path: border-box;
18-
grid-template-columns: var(--horizontalSpacing) min-content var(--horizontalSpacing);
19-
grid-template-rows: var(--verticalSpacing) 1fr var(--verticalSpacing);
20-
}
21-
22-
.label {
23-
display: flex;
24-
white-space: nowrap;
25-
26-
z-index: 1;
27-
28-
height: 100%;
29-
align-items: center;
30-
box-sizing: border-box;
31-
border-radius: 360px;
32-
mix-blend-mode: exclusion;
33-
grid-row: 2 / 3;
34-
grid-column: 2 / 3;
35-
}
36-
37-
.icon {
38-
width: 50px;
39-
max-width: unset;
40-
}
41-
42-
@keyframes buttonHover {
1+
@keyframes bgbuttonHover {
432
0% {
44-
transform: translateY(-5px);
3+
background-position-y: 0%;
454
}
465
100% {
47-
transform: translateY(calc(-33.333%));
6+
background-position-y: 50%;
487
}
498
}
50-
@keyframes buttonOut {
9+
@keyframes bgbuttonOut {
5110
0% {
52-
transform: translateY(calc(-33.333%));
11+
background-position-y: 50%;
5312
}
5413
100% {
55-
transform: translateY(calc(-66.666%));
14+
background-position-y: 100%;
5615
}
5716
}
58-
.movingUp {
59-
background: linear-gradient(
60-
var(--bgColor1) 33.333%,
61-
var(--bgColor2) 33.33%,
62-
var(--bgColor2) 66.66%,
63-
var(--bgColor1) 66.666%
64-
);
65-
66-
height: calc(300% + 30px);
67-
width: calc(100% + 20px);
68-
transform: translateY(-5px);
69-
animation-duration: 0.3s;
17+
.root {
18+
display: flex;
19+
user-select: none;
20+
border-radius: 360px;
21+
box-sizing: border-box;
22+
cursor: pointer;
23+
width: max-content;
24+
align-items: center;
25+
font: var(--heading5);
26+
font-size: 24px;
27+
letter-spacing: 0.04em;
28+
text-align: center;
29+
animation-duration: 0.0s;
7030
animation-fill-mode: backwards;
7131
animation-iteration-count: 1;
72-
animation-timing-function: ease-out;
73-
align-self: start;
32+
animation-timing-function: ease-in-out;
7433
animation-play-state: running;
75-
animation-name: buttonOut;
76-
grid-row: 1 / 4;
77-
grid-column: 1 / 4;
34+
animation-name: bgbuttonOut;
35+
background-size: 100% 300%;
36+
background-image: linear-gradient(var(--bgColor1) 33.333%, var(--bgColor2) 33.33%, var(--bgColor2) 66.66%, var(--bgColor1) 66.666%);
37+
padding: var(--verticalSpacing) var(--horizontalSpacing);
38+
color: var(--primary1);
39+
border: solid 1px var(--bgColor1);
40+
background-position-y: 100%;
7841
}
79-
.root:hover .movingUp {
42+
.root[loaded="true"]{
43+
animation-duration: 0.3s;
44+
}
45+
.root:hover {
8046
animation-duration: 0.3s;
8147
animation-fill-mode: forwards;
82-
animation-name: buttonHover;
83-
animation-timing-function: ease-in;
48+
animation-name: bgbuttonHover;
49+
animation-timing-function: ease-in-out;
8450
}
51+
8552
.border {
8653
border: solid 1px var(--bgColor1);
8754
border-radius: 360px;
@@ -92,4 +59,15 @@
9259
grid-column: 1 / 4;
9360
font-weight: 800;
9461
font: var(--heading5);
62+
63+
.root > span{
64+
mix-blend-mode: exclusion;
65+
white-space: nowrap;
66+
9567
}
68+
69+
.icon {
70+
width: 50px;
71+
max-width: unset;
72+
}
73+

‎src/components/label-with-arrow/label-with-arrow.tsx‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,50 @@
11
import styles from './label-with-arrow.module.scss';
22
import classNames from 'classnames';
3+
import { useState } from 'react';
34
import { FC, HTMLAttributes } from 'react';
5+
46
export interface LabelWithArrowProps {
7+
onClick?(): void;
8+
className?: string;
9+
/** @visualizer color */
510
bgColor1?: string;
11+
/** @visualizer color */
612
bgColor2?: string;
7-
verticalSpacing?:string;
8-
horizontalSpacing?:string;
9-
className?: string;
10-
btLabel?: string;
13+
verticalSpacing?: number;
14+
horizontalSpacing?: number;
15+
text?: string;
1116
}
17+
export const LabelWithArrow = ({
18+
onClick,
19+
className,
20+
bgColor1,
21+
bgColor2,
22+
text,
23+
verticalSpacing,
1224

13-
export const LabelWithArrow = ({ className, bgColor1, bgColor2, btLabel, verticalSpacing,horizontalSpacing }: LabelWithArrowProps) => {
25+
horizontalSpacing,
26+
}: LabelWithArrowProps) => {
27+
const [animationBegin, setAnimationBegin] = useState(0);
28+
const onAnimationEnd = function (e) {
29+
if (animationBegin == 0) {
30+
e.target.setAttribute('loaded', 'true');
31+
setAnimationBegin(animationBegin + 1);
32+
console.log('onAnimationEnd');
33+
}
34+
};
1435
return (
1536
<div
37+
onClick={onClick}
38+
onAnimationEnd={onAnimationEnd}
1639
style={{
1740
'--bgColor1': bgColor1 ? `${bgColor1}` : '#000000',
1841
'--bgColor2': bgColor2 ? `${bgColor2}` : '#ffffff',
19-
'--verticalSpacing': verticalSpacing ? `${verticalSpacing}px` : '20px',
42+
'--verticalSpacing': verticalSpacing ? `${verticalSpacing}px` : '20px',
2043
'--horizontalSpacing': horizontalSpacing ? `${horizontalSpacing}px` : '20px',
2144
}}
2245
className={classNames(styles.root, className)}
2346
>
24-
<div className={styles.movingUp}></div>
25-
<div className={styles.label}>{btLabel}</div>
26-
<div className={styles.border}></div>
47+
<span>{text}</span>
2748
</div>
2849
);
2950
};

‎src/components/product-card/product-card.module.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
.skeleton > .imageWrapper {
7070
background: #f1ede7;
7171
}
72+
7273
.variant {
7374
font: var(--paragraph2);
7475
}
@@ -85,4 +86,13 @@
8586
}
8687
.labelWithArrow {
8788
margin: 20px;
89+
=======
90+
.div1 {
91+
width: 22vw;
92+
&:hover {
93+
transition: all 0.3s ease;
94+
width: 25vw;
95+
}
96+
align-content: end;
97+
8898
}

‎src/components/product-card/product-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const ProductCard = ({
6666
};
6767

6868
export const ProductCardSkeleton = () => (
69-
<div className={styles.skeleton}>
69+
<div className={classNames(styles.skeleton, styles.div1)}>
7070
<div className={styles.imageWrapper} />
7171
<div className={styles.name}>&nbsp;</div>
7272
<div className={styles.price}>&nbsp;</div>

0 commit comments

Comments
 (0)