Redesign interior

src/app/contacts/contacts.tsx

@@ -48,9 +48,10 @@ export default function Contacts() {
  mb={[0, 10]}
  mx="auto"
  width="100%"
- maxWidth="1000px"
- border={[null, "1px dashed"]}
+ maxWidth="container.max"
+ borderRadius="20px"
  flexDirection={["column", "row"]}
+ bg="bgPrimary"
  >
  <Flex
  flexDirection="column"
@@ -113,16 +114,15 @@ export default function Contacts() {
  mt={4}
  isLoading={isSubmitting}
  type="submit"
- bg="black"
- color="white"
+ bg="textPrimaryWhite"
+ color="textPrimary"
  borderRadius="8px"
- fontWeight={400}
+ fontWeight={600}
  fontSize="20px"
  px={7}
  height="44px"
  width={["100%", null]}
  _hover={{
- bg: "gray.800",
  color: "brand.blue",
  }}
  >

src/app/fonts.ts

@@ -1,11 +1,17 @@
 // app/fonts.ts
-import { Oswald } from "next/font/google";
+import { Inter, Oswald } from "next/font/google";
 
 const oswald = Oswald({
  subsets: ["latin"],
  variable: "--font-oswald",
 });
 
+const inter = Inter({
+ subsets: ["latin"],
+ variable: "--font-inter",
+});
+
 export const fonts = {
  oswald,
+ inter,
 };

src/app/home.tsx

@@ -1,15 +1,14 @@
 "use client";
 
-import { Box, Button, Flex, Heading } from "@chakra-ui/react";
+import { Box, Button, Flex, Heading, Image, Text } from "@chakra-ui/react";
 
 import { Link } from "@/components/link";
 import { SocialMediaLinks } from "@/components/SocialMediaLinks";
 
-export const Home = () => {
+const HeroBlock = () => {
  return (
  <Box
- bgColor="red"
- bg="linear-gradient(rgba(26,26,26,0.25), rgba(26,26,26,0.25)), url(/images/bg-image.png)"
+ bg="linear-gradient(rgba(26,26,26,0.35), rgba(26,26,26,0.35)), url(/images/bg-image.png)"
  bgRepeat="no-repeat"
  bgPosition={["25% 75%", "center, center"]}
  bgSize="cover"
@@ -21,30 +20,32 @@ export const Home = () => {
  height="100%"
  px={["16px", "80px"]}
  pb={[4, 10]}
+ maxWidth="container.max"
+ mx="auto"
  >
- <Flex minHeight={["152px", "186px"]}></Flex>
+ <Flex minHeight={["152px", "188px"]}></Flex>
  <Flex flexDirection="column" height="100%" justifyContent="center">
  <Heading
- fontSize={["26px", "60px"]}
- fontWeight={400}
+ fontSize={["26px", "36px"]}
+ fontWeight={500}
  color="textPrimaryWhite"
- maxWidth={["240px", "600px"]}
+ maxWidth={["240px", "400px"]}
  >
- Nowoczesne podejście do aranżacji wnętrz
+ Tworzymy komfort dla naszych klientów
  </Heading>
  <Link href="/services/order" mt="120px" width="max-content">
  <Button
  width="max-content"
  height={["48px", "60px"]}
- px={["40px", "70px"]}
+ px={["40px", "40px"]}
  background="black"
  color="textPrimaryWhite"
  fontSize={["20px", "24px"]}
- borderRadius={8}
+ borderRadius="full"
  transition="0.2s"
- fontWeight={400}
+ fontWeight={600}
  _hover={{
- background: "brand.blue",
+ color: "brand.blue",
  }}
  >
  Wycena Online
@@ -75,3 +76,126 @@ export const Home = () => {
  </Box>
  );
 };
+
+const FastBlock = () => {
+ return (
+ <Flex px={[4, 10]} mt={[5, 10]} justifyContent="center">
+ <Flex bg="bgPrimary" borderRadius="20px">
+ <Flex
+ flexDirection="column"
+ px={[4, 10]}
+ py={[5, 10]}
+ // mt={-5}
+ color="textPrimaryWhite"
+ gap={[4, 10]}
+ maxWidth="container.max"
+ mx="auto"
+ >
+ <Heading
+ fontSize={["26px", "36px"]}
+ fontWeight={500}
+ textAlign="center"
+ bg="linear-gradient(0deg, #00A3FF 23.08%, rgba(0, 102, 204, 0.76) 74.04%)"
+ bgClip="text"
+ >
+ Nie trać swojego czasu
+ </Heading>
+ <Flex
+ gap={[4, 10]}
+ justifyContent="space-between"
+ alignItems="center"
+ flexDirection={["column", "row"]}
+ >
+ <Text
+ fontSize={["md", "xl"]}
+ fontWeight={400}
+ width="100%"
+ color="textSecondary"
+ order={[1, 0]}
+ >
+ Jesteśmy zadowoleni, że możemy zaoferować Państwu wygodę i elastyczność: przyjedziemy
+ w dowolne miejsce, które dla Państwa dogodne. Nasz zespół pracowni projektowej wnętrz
+ jest gotowy omówić. Państwa preferencje i zrealizować je w rzeczywistości,
+ gdziekolwiek by się Pan/i nie znajdowali/a. Cenimy Państwa czas i komfort, dlatego
+ jesteśmy gotowi dostosować się do Państwa harmonogramu i lokalizacji, aby proces
+ realizacji Państwa pomysłów był jak najbardziej wygodny.
+ <br></br>
+ Ta usługa jest dostępna w miastach: Warszawa, Łódź, Lublin
+ </Text>
+ <Image
+ order={[0, 1]}
+ src="/images/landing2.png"
+ alt="landing2"
+ height={["", 284]}
+ objectFit="contain"
+ borderRadius="16px"
+ />
+ </Flex>
+ </Flex>
+ </Flex>
+ </Flex>
+ );
+};
+const AboutBlock = () => {
+ return (
+ <Flex
+ flexDirection="column"
+ alignItems="center"
+ p={[4, 10]}
+ maxWidth="container.max"
+ mx="auto"
+ mb={[4, 10]}
+ >
+ <Heading mb={[4, 10]} fontSize={["26px", "36px"]} fontWeight={500} textAlign="center">
+ O Nas
+ </Heading>
+ <Text
+ width="100%"
+ fontSize={["md", "xl"]}
+ fontWeight={400}
+ color="textSecondary"
+ textAlign="center"
+ >
+ Witajcie, w naszym studiu projektowania wnętrz, zlokalizowanym w{" "}
+ <Text as="span" color="textPrimaryWhite">
+ Warszawie
+ </Text>
+ , gdzie doświadczenie i kreatywność są kluczem do tworzenia doskonałych przestrzeni.
+ Jesteśmy zespołem profesjonalistów, zjednoczonych wspólną pasją do designu, gotowych
+ realizować wasze marzenia. Nasze doświadczenie pozwala nam zrozumieć wasze potrzeby i
+ preferencje. Pracujemy z każdym klientem indywidualnie, uwzględniając ich styl życia, gust i
+ ograniczenia budżetowe, aby stworzyć unikalną przestrzeń, odzwierciedlającą ich osobowość. W
+ naszym studiu znajdziesz nie tylko doświadczonych profesjonalistów, ale także inspirującą
+ atmosferę, gdzie każdy pomysł jest omawiany i przekształcany w koncepcję, a każdy detal
+ projektowany jest z miłością i uwagą. Specjalizujemy się w tworzeniu wnętrz, które łączą w
+ sobie funkcjonalność, komfort i estetykę. Bez względu na to, czy potrzebujesz designu dla
+ mieszkania, domu, biura czy restauracji, jesteśmy gotowi zrealizować wasze pomysły, tworząc
+ przestrzeń, która będzie was codziennie cieszyć. Powierzcie nam swoje zaufanie, a wasze
+ mieszkanie, dom, biuro i restauracja staną się miejscem, do którego będziecie chcieli wracać
+ z przyjemnością i dumą. Dodatkowo, choć nasze studio znajduje się w{" "}
+ <Text as="span" color="textPrimaryWhite">
+ Warszawie
+ </Text>
+ , to świadczymy usługi projektowe także w innych miastach, takich jak{" "}
+ <Text as="span" color="textPrimaryWhite">
+ Łódź
+ </Text>
+ ,{" "}
+ <Text as="span" color="textPrimaryWhite">
+ Lublin
+ </Text>{" "}
+ i wiele innych, dostosowując się do potrzeb naszych klientów.
+ </Text>
+ </Flex>
+ );
+};
+
+export const Home = () => {
+ return (
+ <Box width="100%">
+ <HeroBlock />
+ <FastBlock />
+ <AboutBlock />
+ </Box>
+ );
+};

src/app/layout.tsx

@@ -1,8 +1,9 @@
-import { ColorModeScript } from "@chakra-ui/react";
+import { Box, ColorModeScript } from "@chakra-ui/react";
 import type { Metadata } from "next";
 import { Viewport } from "next";
 import Script from "next/script";
 
+import { Footer } from "@/components/footer/footer";
 import { Header } from "@/components/header/header";
 
 import { fonts } from "./fonts";
@@ -17,10 +18,10 @@ export const viewport: Viewport = {
 
 export const metadata: Metadata = {
  title: "Admiral Interior",
- description: "Admiral Interior — Nowoczesne podejście do aranżacji wnętrz",
+ description: "Admiral Interior — Tworzymy komfort dla naszych klientów",
  metadataBase: new URL("https://admiralinterior.com"),
  openGraph: {
- description: "Admiral Interior — Nowoczesne podejście do aranżacji wnętrz",
+ description: "Admiral Interior — Tworzymy komfort dla naszych klientów",
  images: ["https://admiralinterior.com/images/bg-image.png"],
  },
  twitter: {
@@ -29,11 +30,17 @@ export const metadata: Metadata = {
  robots: "all",
 };
 
+export { fonts };
+
 const isProd = process.env.NODE_ENV === "production";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
- <html lang="en" suppressHydrationWarning={true} className={fonts.oswald.className}>
+ <html
+ lang="en"
+ suppressHydrationWarning={true}
+ className={`${fonts.inter.className} ${fonts.inter.variable} ${fonts.oswald.variable}`}
+ >
  <head>
  <meta name="googlebot" content="all" />
 
@@ -58,7 +65,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
  <body suppressHydrationWarning={true}>
  <Providers>
  <ColorModeScript initialColorMode={theme.config.initialColorMode} />
- <Header>{children}</Header>
+ <Box>
+ <Header />
+ {children}
+ <Footer />
+ </Box>
  <NavigationEvents />
  </Providers>
  </body>

src/app/portfolio/portfolio.tsx

@@ -7,7 +7,7 @@ import { PortfolioProjects } from "@/constants/portfolio";
 
 export const Portfolio = () => {
  return (
- <Flex flexWrap="wrap" p={[4, 2]} gap={[4, 2]} mt={[3, "52px"]} pb="16px">
+ <Flex flexWrap="wrap" p={[4, 2]} gap={[4, 2]} mt={[4, "52px"]} pb="16px">
  {PortfolioProjects.map(({ name, image, projectId, description }) => {
  return (
  <Link href={`/portfolio/${projectId}`} key={name} width={["100%", "calc(50% - 4px)"]}>
@@ -20,6 +20,7 @@ export const Portfolio = () => {
  borderRadius={["8px", null]}
  boxShadow={["0px 4px 6px 0px rgba(0, 0, 0, 0.25)", null]}
  pb={[4, 0]}
+ bg="bgPrimary"
  >
  <Image
  src={image}