Customer pages for store and product selection

README.md

@@ -53,18 +53,10 @@ The primary goal is to help users find products efficiently. The core functional
 
 ---
 
-## ⚛ Technology Stack
-
-This project follows a **Monorepo** approach.
-
-- **Frontend**: React with TypeScript.
-- **Backend**: Java.
-- **Database**: PostgreSQL.
-- **API Modeling**: [Smithy](https://smithy.io/2.0/) (Interface Definition Language).
-
 ## 🛠 Build Instructions
 
-TODO
+- Install Smithy CLI
+- Install yarn
 
 ### Execution
 

eslint.config.js

@@ -1,14 +1,14 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     extends: [
       js.configs.recommended,
       tseslint.configs.recommended,
@@ -20,4 +20,4 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
-])
+]);

package.json

@@ -29,8 +29,8 @@
     "react-router-dom": "^7.10.1"
   },
   "devDependencies": {
-    "@inandout/client": "^0.0.1",
     "@eslint/js": "^9.39.1",
+    "@inandout/client": "^0.0.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
@@ -39,6 +39,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "prettier": "3.8.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"

src/App.css

@@ -0,0 +1,44 @@
+/* #root {
+  overflow-x: hidden;
+  background: #FCF4E7;
+} */
+
+@font-face {
+  font-family: 'Creato'; 
+  src: url('./assets/fonts/creato/CreatoDisplay-Medium.otf') format('otf');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Creato';
+  src: url('./assets/fonts/creato/CreatoDisplay-Bold.otf') format('otf');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Creato';
+  src: url('./assets/fonts/creato/CreatoDisplay-ExtraBold.otf') format('otf');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Creato';
+  src: url('./assets/fonts/creato/CreatoDisplay-Black.otf') format('otf');
+  font-weight: 1000;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Creato';
+  src: url('./assets/fonts/creato/CreatoDisplay-BlackItalic.otf') format('otf');
+  font-weight: 1200;
+  font-style: normal;
+  font-display: swap;
+}

src/App.tsx

@@ -0,0 +1,38 @@
+import { ThemeProvider } from "@mui/material/styles";
+import { CssBaseline } from "@mui/material";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+
+import HomePage from "./pages/home-page";
+import StoreSelectionPage from "./pages/store-selection-page";
+import StandSelectionPage from "./pages/stand-selection-page";
+import ItineraryPreviewPage from "./pages/itinerary-preview-page";
+
+import CustomBackground from "./components/background/background";
+import "./app.css";
+import theme from "./themes/theme";
+
+function App() {
+  return (
+    <CustomBackground>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Router>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/stores" element={<StoreSelectionPage />} />
+            <Route
+              path="/stores/:storeId/stands"
+              element={<StandSelectionPage />}
+            />
+            <Route
+              path="/itinerary-preview"
+              element={<ItineraryPreviewPage />}
+            />
+          </Routes>
+        </Router>
+      </ThemeProvider>
+    </CustomBackground>
+  );
+}
+
+export default App;

src/components/background/background.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Stack } from "@mui/material";
+import colors from "../../themes/colors";
+
+const CustomBackground: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <Stack
+      sx={{
+        position: "relative",
+        width: "100%",
+        minHeight: "100vh",
+        overflow: "hidden",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Stack
+        sx={{
+          position: "absolute",
+          inset: 0,
+          zIndex: -100,
+          pointerEvents: "none",
+          backgroundImage: `radial-gradient(
+                        circle at 5% 5%, 
+                        ${colors.greenColor} 10%,         
+                        ${colors.orangeColor} 18%,
+                        ${colors.whiteColor} 38%,
+                        ${colors.whiteColor} 41%,
+                        ${colors.orangeColor} 53%,        
+                        ${colors.greenColor} 80%,        
+                        ${colors.whiteColor} 90%
+                    )`,
+          transform: "scale(1.1)",
+          transformOrigin: "center center",
+        }}
+      />
+      <Stack
+        sx={{
+          position: "relative",
+          zIndex: 10,
+          width: "100%",
+        }}
+      >
+        {children}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default CustomBackground;

src/components/carousel/carousel-container.tsx

@@ -0,0 +1,31 @@
+import { Stack } from "@mui/material";
+
+interface CarouselContainerProps {
+  image: string;
+  zindex?: number;
+}
+
+function CarouselContainer({ image, zindex }: CarouselContainerProps) {
+  return (
+    <Stack
+      sx={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        maxWidth: "200px",
+        maxHeight: "200px",
+        borderRadius: "70px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: zindex,
+        backgroundImage: `url(${image})`,
+        backgroundPosition: "center",
+        filter: `drop-shadow(0.3px 0px 0px rgba(0, 0, 0, 0.5))
+              drop-shadow(0px 0.5px 1.5px rgba(0, 0, 0, 0.5))`,
+      }}
+    />
+  );
+}
+
+export default CarouselContainer;

src/components/carousel/carousel-final.tsx

@@ -0,0 +1,97 @@
+import { Box } from "@mui/material";
+import { motion } from "framer-motion";
+
+import CarouselContainer from "./carousel-container";
+
+import images from "./images";
+
+//asa sa fie si img!!!!
+const size = 200;
+const overlap = -80;
+const offset = 60;
+
+const generateContent = (count: number) => {
+  const imageArray = Object.values(images);
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    url: imageArray[i % imageArray.length],
+  }));
+};
+
+//passing props to each component
+interface ParallaxItemProps {
+  image: string;
+  index: number;
+}
+
+const ParallaxItem = ({ image, index }: ParallaxItemProps) => {
+  const xOffset = index % 2 === 1 ? offset : -offset;
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        width: "100%",
+        marginTop: `${overlap}px`,
+        position: "relative",
+      }}
+    >
+      <Box sx={{ transform: `translateX(${xOffset}px)` }}>
+        <Box
+          sx={{
+            position: "relative",
+            width: `${size}px`,
+            height: `${size}px`,
+          }}
+        >
+          <CarouselContainer image={image} zindex={index} />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+function CarouselElement() {
+  const itemCount = 14;
+  const items = generateContent(itemCount);
+  const dupeItems = [...items, ...items];
+  const startHeight = itemCount * (size + overlap);
+
+  return (
+    <Box
+      sx={{
+        position: "fixed",
+        top: "0px",
+        left: "0px",
+        width: "100%",
+        height: "100%",
+        zIndex: -50,
+        overflow: "hidden",
+        justifyContent: "center",
+        pointerEvents: "none",
+      }}
+    >
+      <motion.div
+        animate={{ y: [-startHeight, 0] }}
+        transition={{
+          duration: 80,
+          repeat: Infinity,
+          repeatType: "loop",
+          ease: "linear",
+        }}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          marginTop: `-${overlap}px`,
+        }}
+      >
+        {dupeItems.map((item, index) => (
+          <ParallaxItem key={index} image={item.url} index={index} />
+        ))}
+      </motion.div>
+    </Box>
+  );
+}
+
+export default CarouselElement;

src/components/carousel/images.ts

@@ -0,0 +1,15 @@
+//url din assets ./../../assets/carousel/
+//200x200 sa arate bn
+
+const EImages = {
+  image1: "./src/assets/images/carousel-images/frigaruie.png",
+  image2: "./src/assets/images/carousel-images/tomato.jpg",
+  image3: "./src/assets/images/carousel-images/grapefruit.jpg",
+  image4: "./src/assets/images/carousel-images/kiwi.jpg",
+  image5: "./src/assets/images/carousel-images/peste.jpg",
+  image6: "./src/assets/images/carousel-images/salata.jpg",
+  image7: "./src/assets/images/carousel-images/pasta.jpg",
+  image8: "./src/assets/images/carousel-images/paine.jpg",
+};
+
+export default EImages;

src/components/choice/choice-page.tsx

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+function Choice() {
+  const [isLandingPage] = useState<boolean>(false);
+  const [isChoicePage] = useState<boolean>(!isLandingPage);
+
+  return isChoicePage ? <></> : null;
+}
+
+export default Choice;