About.jsx

import React from "react";
import stars from "../assets/stars.png";

const About = () => {
  return (
    <div
      name="über uns"
      className="w-full h-screen bg-gradient-to-b from-gray-800 to-black text-white"
    >
      <div className="max-w-screen-lg p-4 mx-auto flex flex-col justify-center w-full h-full">
        <div>
          <p className="text-4xl font-bold inline border-b-4 border-gray-500">
            Über uns
          </p>
        </div>

        <p className="text-xl mt-14">
          Die Unik Umzüge GmbH ist seit vielen Jahren erfolgreich in den Bereichen Umzüge, Transporte, 
          Entsorgungen und Räumungen tätig. Bei uns steht die Kundenzufriedenheit an erster Stelle. 
          Jeder Umzug ist einzigartig. Als Kunde erhalten Sie stets unsere volle 
          Aufmerksamkeit. <br /> <br />
          Und da Sie als Kunde uns so wichtig sind, stellen wir Ihnen folgendes vor...
        </p>
        <br />

        <div>
          <p className="text-2xl font-bold inline border-b-4 border-gray-500">
            Das Rund-Um-Sorglos - Paket
          </p>
        </div>
        
        <br />
        <p className="text-xl">
          ...und dieser Name ist Programm! <br />
          Bei Annahme dieser Offerte stehen Ihnen alle Ressourcen zur Verfügung 
          - und das <span className="border-b-4 border-gray-500 font-bold">kostenlos!</span> <br /><br />
          • verschiedene Kartonboxen <br />
          • Luftpolsterfolie <br />
          • Seidenpapier <br />
          • Klebeband <br /><br />
          Und das Alles wird kostenlos zu Ihnen nach Hause geliefert und nach dem erfolgreichen
          Umzug auch wieder von uns abgeholt!
        </p>
          <div className="flex flex-col pb-10">
            <a className="flex flex-col" href="https://www.google.com/search?q=unik+umz%C3%BCge+gmbh&sxsrf=ALiCzsZ7kV7HA1rkMUui08sOueQJ4IlyKw%3A1660753098289&source=hp&ei=yhT9YqXGDuGIur4Ppci7aA&iflsig=AJiK0e8AAAAAYv0i2t-F8iuSlEQDESiKn3xtXlMBGL2V&oq=unik+um&gs_lcp=Cgdnd3Mtd2l6EAMYADIECCMQJzIECCMQJzILCC4QgAQQxwEQrwEyCAgAEB4QFhAKMgYIABAeEBYyBggAEB4QFjIGCAAQHhAWMgYIABAeEBYyBggAEB4QFjIICAAQHhAWEAo6CwgAEIAEELEDEIMBOhEILhCABBCxAxCDARDHARDRAzoFCAAQgAQ6CwguEIAEELEDEIMBOggIABCABBCxAzoFCC4QgAQ6BQgAEMsBOgUILhDLAVAAWMAHYJ8OaABwAHgAgAG3AYgBnQaSAQM0LjOYAQCgAQE&sclient=gws-wiz#lrd=0x4791b91582d08be7:0xeb0949cccfb27b98,1,,," target="_blank">
              <img className="w-64 mt-10 mx-auto" src={stars} alt="" />
              <p className="text-lg items-center mx-auto">5 Sterne</p>
              <p className="text-md items-center mx-auto">30+ Google Bewertungen</p>
            </a>
        </div>
      </div>
    </div>
  );
};

export default About;

app.js

import About from "./components/About";
import Contact from "./components/Contact";
import Services from "./components/Services";
import Home from "./components/Home";
import NavBar from "./components/NavBar";
import SocialLinks from "./components/SocialLinks";
import MobileSocialLinks from "./components/MobileSocialLinks";
import Footer from "./components/footer";

function App() {
  return (
    <div>
      <NavBar />
      <Home />
      <About />
      <Services />
      <Contact />
      <Footer />

      <SocialLinks />
      <MobileSocialLinks />
    </div>
  );
}

export default App;

Home.jsx

import React from "react";
import Logo from "../assets/logo.png";
import { MdOutlineKeyboardArrowRight } from "react-icons/md";
import { Link } from "react-scroll";

const Home = () => {
  return (
    <div
      name="startseite"
      className="h-screen w-full bg-gradient-to-b from-black via-black to-gray-800"
    >
      <div className="max-w-screen-lg mx-auto flex flex-col items-center justify-center h-full px-4 md:flex-row">
      <div>
          <img
            src={Logo}
            alt="Logo"
            className="rounded-2xl mx-auto w-2/3 md:w-full mt-20 md:mt-0 md:ml-4"
          />
        </div>
        <div className="flex flex-col justify-center h-full md:ml-20">
          <h2 className="text-4xl sm:text-7xl font-bold text-white">
            Unik Umzüge
          </h2>
          <p className="text-gray-500 pt-4 pb-2 max-w-md">
            Deine Profis im Bereich Umzug, Transport, Entsorgung und Räumung!
          </p>
          <p className="text-gray-500 pb-2 max-w-md">
            Sie wollen einen qualitativ hochwertigen und dennoch preiswerten Umzug? 
            Kein Problem! Das steht bei uns an der Tagesordnung!
          </p>
          <p className="text-gray-500 pb-4 max-w-md">
            Fordern Sie noch heute Ihre kostenlose und unverbindliche Offerte an 
            und überzeugen Sie sich selbst!
          </p>
          <div>
            <Link
              to="kontakt"
              smooth
              duration={500}
              className="group text-white w-fit px-6 py-3 my-2 flex items-center rounded-md bg-gradient-to-r from-cyan-500 to-blue-500 cursor-pointer"
            >
              Offerte anfordern
              <span className="group-hover:rotate-90 duration-300">
                <MdOutlineKeyboardArrowRight size={25} className="ml-1" />
              </span>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);