1import Image from "next/image";
2import Link from "next/link";
3
4        // remember to insert your image here
5
6
7const TextLeftHero = () => {
8  return (
9    <header
10      id="glowna"
11      className="flex flex-col lg:flex-row justify-center gap-4 items-center lg:px-48 min-h-screen max-w-screen py-24 pb-12 shadow-2xl bg-neutral-800"
12    >
13      <div className="flex flex-col justify-center items-start lg:max-w-[40vw] p-4 gap-8">
14        <h1 className="text-4xl lg:text-6xl font-bold  text-white">
15          Knowledge and specialists are the key to be secure
16        </h1>
17        <p className="text-xl text-neutral-100">Be safe on the internet</p>
18        <Link
19          href=""
20          className="p-4 px-6 bg-gradient-to-br from-orange-500 bg-yellow-400 font-semibold text-white duration-200 transition-all hover:scale-105 active:scale-95"
21        >
22          Take Action
23        </Link>
24      </div>
25      <Image
26        width={800}
27        height={700}
28        src="/components/hero/safe.png"
29        alt="Laptop Bezpiecznie"
30        className="w-[80vw] lg:max-w-[50%] lg:w-full"
31      />
32    </header>
33  );
34};
35
36export default TextLeftHero;

1import Image from "next/image";
2import Link from "next/link";
3import React from "react";
4
5// remember to add next.config.js file for images from 3rd party websites to work
6
7const CenterTextBgImage = () => {
8  return (
9    <header className="w-full relative min-h-screen flex flex-col justify-center items-center gap-6 p-4 py-24 overflow-hidden text-center z-20 text-white">
10      <h1 className="text-5xl lg:text-7xl font-bold">
11        The Future of Innovation
12      </h1>
13      <p className="text-xl max-w-xl">
14        Explore how cutting-edge solutions are transforming the world around us.
15        Step into the world of innovation and learn more about the future of
16        technology.
17      </p>
18      <div className="flex flex-wrap gap-4 items-center justify-center">
19        <Link
20          href="#"
21          className="p-4 px-6 bg-white text-black font-bold text-lg hover:bg-neutral-300 active:scale-105 transition-all duration-200"
22        >
23          Learn More
24        </Link>
25        <Link
26          href="#"
27          className="p-4 px-6 text-white border-4 scale-95 border-white font-bold text-lg hover:bg-neutral-300/10 active:scale-105 transition-all duration-200"
28        >
29          Sign Up
30        </Link>
31      </div>
32      <Image
33        width={1920}
34        height={1080}
35        alt="Technology image from unsplash"
36        src="https://images.unsplash.com/photo-1605810230434-7631ac76ec81?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
37        className="absolute w-full h-full top-0 left-0 z-[-1] object-cover brightness-50"
38      />
39    </header>
40  );
41};
42
43export default CenterTextBgImage;
44

1"use client";
2import Link from "next/link";
3import { FaArrowRight } from "react-icons/fa";
4import Image from "next/image";
5import { useEffect, useRef } from "react";
6import { motion, useAnimation, useInView } from "framer-motion";
7
8// to make it work as a server component simply move <Reveal /> component to other file and delete 'use client' from the top of the file and everything will be fine
9
10const MarginAround = () => {
11  return (
12    <header className="min-h-[90vh] bg-cover h-fit m-6 lg:m-12 my-16 lg:my-20 rounded-3xl flex flex-col lg:flex-row items-end justify-between overflow-hidden bg-fixed bg-[url(https://images.unsplash.com/photo-1505133078601-a8b623c0517b?q=80&w=2129&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)]">
13      <section className="flex flex-col lg:h-[90vh] gap-12 items-start justify-start lg:w-1/2 p-6 py-12 lg:p-24 lg:py-36">
14        <Reveal>
15          <h1 className="text-6xl lg:text-8xl font-bold text-white max-w-4xl p-2">
16            We build places for your memories
17          </h1>
18        </Reveal>
19
20        <Link
21          href=""
22          className="py-2 px-6 bg-transparent text-center text-neutral-900 font-bold transition-all duration-300 bg-white rounded-xl
23            flex items-center justify-center gap-4
24            hover:bg-gray-200
25            active:translate-x-[4px] active:translate-y-[4px] active:shadow-none
26            "
27        >
28          Book a free call
29        </Link>
30      </section>
31
32      <section className=" flex items-end justify-end">
33        <div className="flex w-fit p-4 lg:p-8 bg-black/40 lg:rounded-tl-xl flex-col lg:flex-row text-white">
34          <div className="flex flex-col gap-12">
35            <Reveal>
36              <p className="max-w-md text-2xl text-start">
37                Construction company with years of experience and tons of happy
38                client to back it up
39              </p>
40            </Reveal>
41            <Reveal>
42              <Link
43                href=""
44                className="flex items-center justify-start gap-4 text-xl hover:border-b-2 pb-2 border-white w-fit"
45              >
46                Check out some images
47                <FaArrowRight />
48              </Link>
49            </Reveal>
50          </div>
51        </div>
52      </section>
53    </header>
54  );
55};
56
57export default MarginAround;
58
59interface Props {
60  children: JSX.Element;
61  width?: "fit-content" | "100%";
62}
63
64const Reveal = ({ children, width = "fit-content" }: Props) => {
65  const ref: any = useRef();
66  const isInView = useInView(ref, { once: true, amount: 0.2 });
67
68  const mainControls = useAnimation();
69  const slideControls = useAnimation();
70
71  useEffect(() => {
72    if (isInView) {
73      mainControls.start("visible");
74      slideControls.start("visible");
75    }
76  }, [isInView]);
77
78  return (
79    <div ref={ref} style={{ position: "relative", width, overflow: "hidden" }}>
80      <motion.div
81        variants={{
82          hidden: {
83            opacity: 0,
84            y: 75,
85          },
86          visible: {
87            opacity: 1,
88            y: 0,
89          },
90        }}
91        initial="hidden"
92        animate={mainControls}
93        transition={{ duation: 0.5, delay: 0.25 }}
94      >
95        {children}
96      </motion.div>
97      <motion.div
98        variants={{
99          hidden: { left: 0 },
100          visible: { left: "100%" },
101        }}
102        initial="hidden"
103        animate={slideControls}
104        transition={{ duration: 0.5, ease: "easeIn" }}
105        className="absolute top-1 bottom-1 left-1 right-1 bg-orange-500 z-20"
106      />
107    </div>
108  );
109};
110