add: react wrap balancer

components/Testimonials.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Balancer from "react-wrap-balancer";
 
 const testimonials = [
   [
@@ -79,10 +80,12 @@ export function Testimonials() {
       <div className="mx-auto px-4 sm:px-6 lg:px-8">
         <div className="mx-auto md:text-center">
           <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 sm:text-6xl">
-            Loved by many worldwide.
+            <Balancer>Loved by many worldwide.</Balancer>
           </h1>
           <p className="mx-auto mt-6 max-w-xl text-lg text-slate-700 leading-7">
-            See what our 100,000+ users are saying about the product.
+            <Balancer>
+              See what our 100,000+ users are saying about the product.
+            </Balancer>
           </p>
         </div>
         <ul
@@ -101,7 +104,7 @@ export function Testimonials() {
                       <figure className="relative rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10">
                         <blockquote className="relative">
                           <p className="text-lg tracking-tight text-slate-900">
-                            "{testimonial.content}"
+                            <Balancer>"{testimonial.content}"</Balancer>
                           </p>
                         </blockquote>
                         <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
@@ -134,4 +137,4 @@ export function Testimonials() {
       </div>
     </section>
   );
-}
+}

package.json

@@ -18,6 +18,7 @@
     "react-dom": "18.2.0",
     "react-uploader": "^3.3.0",
     "react-use-measure": "^2.1.1",
+    "react-wrap-balancer": "^0.4.0",
     "request-ip": "^3.3.0",
     "uploader": "^3.3.0"
   },

pages/_app.tsx

@@ -1,11 +1,14 @@
 import { Analytics } from "@vercel/analytics/react";
 import type { AppProps } from "next/app";
 import "../styles/globals.css";
+import { Provider } from "react-wrap-balancer";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
-      <Component {...pageProps} />
+      <Provider>
+        <Component {...pageProps} />
+      </Provider>
       <Analytics />
     </>
   );

pages/index.tsx

@@ -6,6 +6,7 @@ import Footer from "../components/Footer";
 import Header from "../components/Header";
 import SquigglyLines from "../components/SquigglyLines";
 import { Testimonials } from "../components/Testimonials";
+import Balancer from "react-wrap-balancer";
 
 const Home: NextPage = () => {
   return (
@@ -26,17 +27,21 @@ const Home: NextPage = () => {
           customers
         </a>
         <h1 className="mx-auto max-w-4xl font-display text-5xl font-bold tracking-normal text-slate-900 sm:text-7xl">
-          Restoring old photos{" "}
-          <span className="relative whitespace-nowrap text-[#3290EE]">
-            <SquigglyLines />
-            <span className="relative">using AI</span>
-          </span>{" "}
-          for everyone.
+          <Balancer>
+            Restoring old photos{" "}
+            <span className="relative whitespace-nowrap text-[#3290EE]">
+              <SquigglyLines />
+              <span className="relative">using AI</span>
+            </span>{" "}
+            for everyone.
+          </Balancer>
         </h1>
 
         <p className="mx-auto mt-12 max-w-xl text-lg text-slate-700 leading-7">
-          Have old and blurry face photos? Let our AI restore them so those
-          memories can live on. 100% free – restore your photos today.
+          <Balancer>
+            Have old and blurry face photos? Let our AI restore them so those
+            memories can live on. 100% free – restore your photos today.
+          </Balancer>
         </p>
         <Link
           className="bg-black rounded-xl text-white font-medium px-4 py-3 sm:mt-10 mt-8 hover:bg-black/80"

pages/restore.tsx

@@ -14,6 +14,7 @@ import ResizablePanel from "../components/ResizablePanel";
 import Toggle from "../components/Toggle";
 import appendNewToName from "../utils/appendNewToName";
 import downloadPhoto from "../utils/downloadPhoto";
+import Balancer from "react-wrap-balancer";
 
 // Configuration for the uploader
 const uploader = Uploader({
@@ -92,7 +93,7 @@ const Home: NextPage = () => {
           <span className="font-bold">YouTube tutorial</span>.
         </a>
         <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-900 sm:text-6xl mb-5">
-          Restore any face photo
+          <Balancer>Restore any face photo</Balancer>
         </h1>
         <p className="text-slate-500">
           {" "}
@@ -206,4 +207,4 @@ const Home: NextPage = () => {
   );
 };
 
-export default Home;
+export default Home;