Merge pull request #10 from Craftserve/rozwader/pra-40-sekcja-hero

JakubLobos · web-flow · commit 81947f9d16aa · 2025-08-21T11:01:04.000+02:00
Tasks review
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
         <title>Vitresoft</title>
     </head>
     <body>
-        <div id="root"></div>
+        <div id="root" style="width: 100%"></div>
         <script type="module" src="/src/main.tsx"></script>
     </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,12 +9,10 @@ function App() {
     globalStyles();
 
     return (
-        <>
-            <Routes>
-                <Route path="/" element={<HeroScreen />} />
-                <Route path="/whyus" element={<WhyusScreen />} />
-            </Routes>
-        </>
+        <Routes>
+            <Route path="/" element={<HeroScreen />} />
+            <Route path="/whyus" element={<WhyusScreen />} />
+        </Routes>
     );
 }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -3,7 +3,7 @@
         "title": "Join Us"
     },
     "Contact": {
-        "title": "Contact Us"
+        "title": "Contact"
     },
     "FindOut": {
         "title": "Find Out"
@@ -13,5 +13,9 @@
     },
     "WhyUs": {
         "title": "Why Us"
+    },
+    "ExampleOffer": {
+        "title": "Event Organization",
+        "text": "from 2115 €"
     }
 }
diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
@@ -8,10 +8,11 @@ const DEFAULT_LANG = "en-US";
 
 const userLang = navigator.language || DEFAULT_LANG;
 const resources = {
-  "pl-PL": pl,
+  "pl": pl,
   "en-US": en,
   "en-GB": en,
 };
+console.log(userLang);
 
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
diff --git a/src/i18n/pl.json b/src/i18n/pl.json
@@ -3,7 +3,7 @@
         "title": "Dołącz do nas"
     },
     "Contact": {
-        "title": "Zkontaktuj się"
+        "title": "Skontaktuj się"
     },
     "FindOut": {
         "title": "Dowiedz się"
@@ -13,5 +13,9 @@
     },
     "WhyUs": {
         "title": "Dlaczego my"
+    },
+    "ExampleOffer": {
+        "title": "Organizacja Eventu",
+        "text": "od 9000 pln"
     }
 }
diff --git a/src/modules/shared/components/box/index.tsx b/src/modules/shared/components/box/index.tsx
@@ -13,6 +13,9 @@ interface Props {
     margin?: string;
     gap?: string;
     backgroundImage?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    position?: string;
 }
 
 const Box = ({
@@ -27,14 +30,17 @@ const Box = ({
     margin,
     gap,
     backgroundImage,
+    backgroundColor,
+    borderRadius,
+    position,
 }: Props) => {
     return (
         <StyledBox
             display={display}
             direction={direction}
             justifyContent={justifyContent}
             alignItems={alignItems}
-            css={{ height, width, padding, margin, gap, backgroundImage }}
+            css={{ height, width, padding, margin, gap, backgroundImage, backgroundColor, borderRadius, position }}
         >
             {children}
         </StyledBox>
diff --git a/src/modules/shared/components/box/style.ts b/src/modules/shared/components/box/style.ts
@@ -26,6 +26,7 @@ const StyledBox = styled("div", {
             start: { alignItems: "start" },
             center: { alignItems: "center" },
             end: { alignItems: "end" },
+            spaceBetween: { justifyContent: "space-between"}
         },
     },
 });
diff --git a/src/modules/shared/components/button/style.ts b/src/modules/shared/components/button/style.ts
@@ -18,7 +18,7 @@ const StyledButton = styled("button", {
                 backgroundColor: "$black",
                 color: "$border",
                 fontWeight: "bolder",
-                boxShadow: "0px 2px 6px black",
+                boxShadow: "0px 6px 5px rgba(0, 0, 0, 0.33)",
 
                 "&:hover": {
                     background: "#0c0c0cee",
diff --git a/src/modules/shared/components/card/index.tsx b/src/modules/shared/components/card/index.tsx
@@ -5,7 +5,7 @@ import type { CardVariants } from "./style";
 interface Props {
     children: string | React.ReactNode | React.ReactNode[];
     variant: CardVariants["variant"];
-    title: string;
+    title?: string;
     height: string;
     width: string;
     backgroundColor?: string;
@@ -15,7 +15,14 @@ interface Props {
 
 const Card = ({ children, variant, title, height, width, backgroundColor, color, margin }: Props) => {
     return (
-        <StyledCard variant={variant} css={{ height, width, backgroundColor, color, margin }}>
+        <StyledCard variant={variant} css={{ 
+            height, 
+            width, 
+            backgroundColor, 
+            color, 
+            margin,
+        }}
+        >
             <Box
                 display="flex"
                 direction="row"
@@ -39,10 +46,12 @@ const Card = ({ children, variant, title, height, width, backgroundColor, color,
                     <StyledCircleIcon color="danger" />
                 </Box>
             </Box>
-
-            <Box display="flex" width="100%" margin="0px 0px 15px 0px">
-                <StyledTitle>{title}</StyledTitle>
-            </Box>
+            {title && (
+                <Box display="flex" width="100%" margin="0px 0px 15px 0px">
+                    <StyledTitle>{title}</StyledTitle>
+                </Box>
+            )}
+            
             <Box>{children}</Box>
         </StyledCard>
     );
diff --git a/src/modules/shared/components/card/style.ts b/src/modules/shared/components/card/style.ts
@@ -8,23 +8,29 @@ export const StyledCard = styled("div", {
     padding: "0px 20px 30px 20px",
     fontSize: "$md",
     border: "2.5px solid ",
-    overflowY: "auto",
+    overflowY: "hidden",
     backdropFilter: "blur(32px)",
+    boxShadow: "0px 10px 5px rgba(0,0,0,0.1)",
 
     variants: {
         variant: {
             light: {
-                backgroundColor: "#E1E6F14D",
+                backgroundColor: "rgba(225, 230, 241, 0.3)",
                 color: "$black",
                 borderColor: "#E5E5E533",
             },
             dark: {
-                backgroundColor: "#0C0C0C59",
+                backgroundColor: `$black80`,
                 color: "white",
                 borderColor: "#E5E5E533",
             },
         },
     },
+
+    "@sm": {
+        width: "100%",
+        height: "100%",
+    }
 });
 
 export const StyledCircleIcon = styled("div", {
@@ -48,6 +54,7 @@ export const StyledTitle = styled("span", {
     margin: "0",
     lineHeight: "24px",
     textAlign: "left",
+    marginTop: "5px",
 });
 
 export type CardVariants = Stitches.VariantProps<typeof StyledCard>;
diff --git a/src/modules/shared/components/layout/index.tsx b/src/modules/shared/components/layout/index.tsx
@@ -1,11 +1,17 @@
-import StyledLayout from "./style";
+import { WidthWrapper, StyledLayout } from "./style";
 
 interface Props {
     children: React.ReactNode | React.ReactNode[];
 }
 
 const Layout = ({ children }: Props) => {
-    return <StyledLayout>{children}</StyledLayout>;
+    return (
+        <StyledLayout>
+            <WidthWrapper>
+                {children}
+            </WidthWrapper>
+        </StyledLayout>
+    )
 };
 
 export default Layout;
diff --git a/src/modules/shared/components/layout/style.ts b/src/modules/shared/components/layout/style.ts
@@ -1,13 +1,15 @@
 import { styled } from "./../../../../../stitches.config";
 
-const StyledLayout = styled("div", {
+export const StyledLayout = styled("div", {
     minHeight: "100vh",
     width: "100%",
-    maxWidth: "1600px",
-    padding: "0px 20px",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
+
 });
 
-export default StyledLayout;
+export const WidthWrapper = styled("div", {
+    maxWidth: "1000px",
+    width: "100%",
+})
diff --git a/src/modules/shared/components/navbar/style.ts b/src/modules/shared/components/navbar/style.ts
@@ -17,8 +17,10 @@ export const StyledNavbar = styled("nav", {
     padding: "0px 20px",
 
     ".hamburger-menu": {
-        "@lg": { display: "none" },
+        "@xl": { display: "none" },
     },
+
+    zIndex: "1000",
 });
 
 export const LogoWrapStyle = styled("div", {
diff --git a/src/modules/shared/components/row/index.tsx b/src/modules/shared/components/row/index.tsx
@@ -0,0 +1,14 @@
+import Box from "../box";
+import { StyledSpan } from "./style";
+import type { Props } from "./types";
+
+const Row = ({title, text}: Props) => {
+    return (
+        <Box display="flex" direction="row" justifyContent="spaceBetween" alignItems="center" padding="15px 10px 15px 10px" backgroundColor="rgba(217, 217, 217, 0.04)" borderRadius="6px">
+            <StyledSpan style={{fontWeight: 300, width: "60%"}}>{title}</StyledSpan>
+            <StyledSpan style={{width: "40%", textAlign: "end"}}>{text}</StyledSpan>
+        </Box>
+    )
+}
+
+export default Row;
diff --git a/src/modules/shared/components/row/style.ts b/src/modules/shared/components/row/style.ts
@@ -0,0 +1,5 @@
+import { styled } from "@stitches/react";
+
+export const StyledSpan = styled("span", {
+    fontSize: "12pt",
+})
diff --git a/src/modules/shared/components/row/types.ts b/src/modules/shared/components/row/types.ts
@@ -0,0 +1,4 @@
+export interface Props {
+    title: string,
+    text: string,
+}
diff --git a/src/modules/shared/constants/global.style.ts b/src/modules/shared/constants/global.style.ts
@@ -10,5 +10,8 @@ export const globalStyles = globalCss({
         display: "flex",
         justifyContent: "center",
         fontFamily: "$ubuntu",
+        width: "100%",
+        height: "100vh",
+        overflowX: "hidden",
     },
 });
diff --git a/src/modules/shared/containers/Footer/index.tsx b/src/modules/shared/containers/Footer/index.tsx
@@ -0,0 +1,12 @@
+import Box from "../../components/box";
+
+const Footer = () => {
+    return (
+        <Box display="flex" direction="column" justifyContent="center" alignItems="center" padding="20px">
+            <span style={{fontWeight: 700, color: "rgba(12,12,12,1)"}}>Vitresoft 2025</span>
+            <span style={{fontWeight: 400, color: "rgba(12,12,12,1)"}}>Copyright © 2011 - 2025 Craftserve.</span>
+        </Box>
+    )
+}
+
+export default Footer;
diff --git a/src/modules/shared/containers/Offers/index.tsx b/src/modules/shared/containers/Offers/index.tsx
diff --git a/src/modules/shared/containers/Offers/style.ts b/src/modules/shared/containers/Offers/style.ts
diff --git a/src/modules/shared/containers/Welcome/index.tsx b/src/modules/shared/containers/Welcome/index.tsx
diff --git a/src/modules/shared/containers/Welcome/style.ts b/src/modules/shared/containers/Welcome/style.ts
diff --git a/src/screens/HeroScreen/index.tsx b/src/screens/HeroScreen/index.tsx
diff --git a/src/screens/HeroScreen/style.ts b/src/screens/HeroScreen/style.ts
diff --git a/stitches.config.ts b/stitches.config.ts
