Homepage

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

@@ -0,0 +1,7 @@
+import { createBoard } from '@wixc3/react-board';
+import { TestNewComponent } from '../../../src/components/test-new-component/test-new-component';
+
+export default createBoard({
+    name: 'TestNewComponent',
+    Board: () => <TestNewComponent />,
+});

_codux/boards/test-product/test-product.board.tsx

@@ -0,0 +1,7 @@
+import { createBoard } from '@wixc3/react-board';
+import { TestProduct } from '../../../src/components/test-product/test-product';
+
+export default createBoard({
+    name: 'TestProduct',
+    Board: () => <TestProduct />,
+});

app/root.module.scss

@@ -18,3 +18,9 @@
 .navigationProgressBar {
     --color: #7d6283;
 }
+.div1 {
+    width: 100%;
+    height: 100px;
+    align-content: start;
+    background-color: #ea1d1d;
+}

app/root.tsx

@@ -75,14 +75,14 @@ export default function App() {
         <EcomApiContextProvider tokens={wixSessionTokens}>
             <CartOpenContextProvider>
                 <div className={styles.root}>
-                    <Header />
+                    <Header  />
                     <main className={styles.main}>
                         <Outlet />
                     </main>
                     <Footer />
                 </div>
                 <Cart />
-                <NavigationProgressBar className={styles.navigationProgressBar} />
+                <NavigationProgressBar  className={styles.navigationProgressBar} />
                 <Toaster />
             </CartOpenContextProvider>
         </EcomApiContextProvider>

app/routes/_index/route.module.scss

@@ -0,0 +1,40 @@
+.header1 {
+    font: var(--heading1);
+    color: var(--text-color);
+    max-width: 70vw;
+}
+.div1 {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.hero {
+    height: 100vh;
+    display: grid;
+    grid-template-rows: max-content max-content max-content 1fr;
+    gap: 20px;
+    padding-right: 0px;
+    padding-left: 0px;
+}
+.newIn {
+    height: 100vh;
+    background-color: #da3838;
+}
+.categories {
+}
+.bestSellers {
+}
+.colorSelector {
+}
+.spotlight {
+}
+.review {
+}
+.header2 {
+    font: var(--heading1);
+    grid-row: 1 / 2;
+    grid-column: 1 / 2;
+    height: max-content;
+}
+.p1 {
+    font: var(--heading4);
+}

app/routes/_index/route.tsx

@@ -2,26 +2,58 @@ import type { MetaFunction } from '@remix-run/react';
 import { CategoryLink } from '~/src/components/category-link/category-link';
 import { FeaturedProductsSection } from '~/src/components/featured-products-section/featured-products-section';
 import { LabelWithArrow } from '~/src/components/label-with-arrow/label-with-arrow';
+import { TestNewComponent } from '~/src/components/test-new-component/test-new-component';
 import { BackgroundParallax, FadeIn, FloatIn } from '~/src/components/visual-effects';
+import { useRef } from 'react';
+import styles from './route.module.scss';
+import classNames from 'classnames';
 
 export default function HomePage() {
+    const newInRef = useRef(null);
+    function anchorToNewIn() {
+        console.log('xx');
+        newInRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
     return (
         <div>
-            <div className="heroBanner">
-                <img
-                    src="https://static.wixstatic.com/media/32aab9_2c3c65e142434906992aedb17db53566~mv2.jpg"
-                    className="heroBannerImage"
-                    alt=""
+            <section className={styles.hero}>
+                <h1 className={styles.header2}>Shop The Top Brand Electronic.</h1>
+                <p className={styles.p1}>Get more for your money with every purchase!</p>
+                <LabelWithArrow
+                    className={styles.labelWithArrow}
+                    onClick={anchorToNewIn}
+
+                    btLabel="Shop Now"
+
+                    bgColor1="#000000"
+                    horizontalSpacing="30"
+                    verticalSpacing="12"
+                    bgColor2="#ffffff"
+                    text="Buy Now"
+                />
+            </section>
+            <section ref={newInRef} className={styles.newIn}>
+                <FeaturedProductsSection
+                    className="alternateBackground"
+                    categorySlug="new-in"
+                    title="New In"
+                    description="Embrace a sustainable lifestyle with our newest drop-ins."
+                    productCount={4}
                 />
-                <div className="heroBannerOverlay">
+            </section>
+            <section className={styles.categories}>section3</section>
+            <section className={styles.bestSellers}>section4</section>
+            <section className={styles.colorSelector}>section5</section>
+            <section className={styles.spotlight}>section5</section>
+            <section className={styles.review}>section5</section>
+            <div className={classNames('heroBanner', styles.div1)}>
+                <div>
                     <div className="heroBannerSubtitle">ReClaim</div>
-                    <h1 className="heroBannerTitle">Reuse. Repurpose. Relove.</h1>
-                    <CategoryLink categorySlug="all-products">
-                        <LabelWithArrow>Shop Collections</LabelWithArrow>
-                    </CategoryLink>
+                    <h1 className={styles.header1}>Shop The Top Brand Electronic.</h1>
+                    <CategoryLink categorySlug="all-products"></CategoryLink>
                 </div>
+                <LabelWithArrow className={styles.labelWithArrow}>Shop Collections</LabelWithArrow>
             </div>
-
             <div className="textBannerSection">
                 <FadeIn className="textBanner" duration={1.8}>
                     <div className="textBannerSubtitle">Products of the highest standards</div>
@@ -33,12 +65,11 @@ export default function HomePage() {
                     </CategoryLink>
                 </FadeIn>
             </div>
-
             <div className="cardsSection">
                 <CategoryLink categorySlug="kitchen-essentials" className="linkCard">
                     <img
                         className="linkCardBackground"
-                        src="https://static.wixstatic.com/media/c837a6_c05a03f48fbd49e7b5046d1b18c930eb~mv2.jpg/v1/fill/w_547,h_730,q_90/c837a6_c05a03f48fbd49e7b5046d1b18c930eb~mv2.jpg"
+                        src="https://static.wixstatic.com/media/4da84e_f55bb718fbd0473381a349b611c5acd4~mv2.jpg/v1/fit/w_640,h_640/Headphones-01-Header_edited 1.jpg.jpg"
                         alt=""
                     />
                     <div className="linkCardTitle">Kitchen</div>
@@ -61,14 +92,6 @@ export default function HomePage() {
                 </CategoryLink>
             </div>
 
-            <FeaturedProductsSection
-                className="alternateBackground"
-                categorySlug="new-in"
-                title="New In"
-                description="Embrace a sustainable lifestyle with our newest drop-ins."
-                productCount={4}
-            />
-
             <BackgroundParallax
                 className="floatingCardBackground"
                 backgroundImageUrl="https://static.wixstatic.com/media/c837a6_cae4dbe5a7ee4637b7d55d9bd5bd755d~mv2.png/v1/fill/w_1178,h_974,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/c837a6_cae4dbe5a7ee4637b7d55d9bd5bd755d~mv2.png"
@@ -92,7 +115,8 @@ export default function HomePage() {
             </BackgroundParallax>
 
             <FeaturedProductsSection
-                categorySlug="best-sellers"
+                onClick={anchorToNewIn}
+                categorySlug="mobile"
                 title="Best Sellers"
                 description="When quality is eco-friendly. Explore our top picks."
                 productCount={4}

app/routes/home-page/route.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+export default function Homepage() {
+    return (
+        <div>
+            <main>
+                <section>
+                    <h1>Shop top brands</h1>
+                </section>
+                <section>
+                    <div>products gallery</div>
+                </section>
+                <section>
+                    <div>new in gallery</div>
+                </section>
+            </main>
+        </div>
+    );
+}

app/routes/playground-page/route.module.scss

@@ -0,0 +1,16 @@
+.playground {
+    height: 300px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 10px;
+}
+.product-image {
+    width: 100%;
+    height: auto;
+}
+.div1 {
+    grid-row: 1 / 2;
+    grid-column: 2 / 3;
+}

app/routes/playground-page/route.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import styles from './route.module.scss';
+import { TestProduct } from '~/src/components/test-product/test-product';
+export default function Playgroundpage() {
+    return (
+        <section className={styles.playground}>
+            <TestProduct productName="tv " />
+            <TestProduct productName="radio " />
+        </section>
+    );
+}

codux.config.json

@@ -1,56 +1,70 @@
 {
-  "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
-  "boardGlobalSetup": "./_codux/boards-global-setup.ts",
-  "componentsDiscovery": {
-    "include": ["src/**"],
-    "exclude": ["_codux/component-templates/**"]
-  },
-  "boardsPath": "_codux/boards",
-  "newComponent": {
-    "componentsPath": "src/components",
-    "templatesPath": "_codux/component-templates"
-  },
-  "newBoard": {
-    "templatesPath": "_codux/board-templates"
-  },
-  "safeRender": {
-    "maxInstancesPerComponent": 1000
-  },
-  "scripts": {
-    "install": {
-      "title": "Install",
-      "description": "Run install",
-      "command": "npm i",
-      "trigger": ["checkout", "pull", "setup"]
+    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
+    "boardGlobalSetup": "./_codux/boards-global-setup.ts",
+    "componentsDiscovery": {
+        "include": [
+            "src/**"
+        ],
+        "exclude": [
+            "_codux/component-templates/**"
+        ]
+    },
+    "boardsPath": "_codux/boards",
+    "newComponent": {
+        "componentsPath": "src/components",
+        "templatesPath": "_codux/component-templates"
+    },
+    "newBoard": {
+        "templatesPath": "_codux/board-templates"
+    },
+    "safeRender": {
+        "maxInstancesPerComponent": 1000
+    },
+    "scripts": {
+        "install": {
+            "title": "Install",
+            "description": "Run install",
+            "command": "npm i",
+            "trigger": [
+                "checkout",
+                "pull",
+                "setup"
+            ]
+        }
+    },
+    "styling": {
+        "solution": "scss modules"
+    },
+    "styleFilesConfig": {
+        "commonStyleFilePattern": "**/styles/**"
+    },
+    "resolve": {
+        "alias": {
+            "~/*": "./*",
+            "node:fs": false,
+            "node:fs/promises": false,
+            "node:path": false,
+            "node:crypto": false,
+            "crypto": false,
+            "node:stream": false,
+            "stream": false,
+            "node:os": false,
+            "node:util": false,
+            "node:events": false,
+            "node:url": false,
+            "node:buffer": false,
+            "node:assert": false
+        }
+    },
+    "svgLoader": "both",
+    "previewConfiguration": {
+        "environmentVariables": {},
+        "envFile": ".env"
+    },
+    "externalProviders": {
+        "wix": {
+            "projectId": "c4807c6a-1290-43df-b708-1b08e5934ac2",
+            "metaSiteId": "08e30548-2cf4-44dd-b600-ea40d0402bdf"
+        }
     }
-  },
-  "styling": {
-    "solution": "scss modules"
-  },
-  "styleFilesConfig": {
-    "commonStyleFilePattern": "**/styles/**"
-  },
-  "resolve": {
-    "alias": {
-      "~/*": "./*",
-      "node:fs": false,
-      "node:fs/promises": false,
-      "node:path": false,
-      "node:crypto": false,
-      "crypto": false,
-      "node:stream": false,
-      "stream": false,
-      "node:os": false,
-      "node:util": false,
-      "node:events": false,
-      "node:url": false,
-      "node:buffer": false,
-      "node:assert": false
-    }
-  },
-  "svgLoader": "both",
-  "previewConfiguration": {
-    "environmentVariables": {},
-    "envFile": ".env"
-  }
-}
+}