diff --git a/Junior/newsletter-sign-up/src/app/ThemeRegistry.tsx b/Junior/newsletter-sign-up/src/app/ThemeRegistry.tsx
index 1fcb60d..629147c 100644
--- a/Junior/newsletter-sign-up/src/app/ThemeRegistry.tsx
+++ b/Junior/newsletter-sign-up/src/app/ThemeRegistry.tsx
@@ -199,7 +199,7 @@ const theme = createTheme({
variants: [
{
props: {
- component: "main",
+ className: "main",
},
style: ({ theme }) =>
theme.unstable_sx({
@@ -237,10 +237,6 @@ const theme = createTheme({
maxWidth: "920px",
minWidth: 0,
overflow: "hidden",
- position: "absolute",
- left: "50%",
- top: "50%",
- transform: "translate(-50%, -50%)",
p: "1rem",
borderRadius: "1.5rem",
display: "flex",
@@ -268,7 +264,7 @@ const theme = createTheme({
},
{
props: {
- component: "main",
+ className: "main",
id: "success",
},
style: ({ theme }) =>
diff --git a/Junior/newsletter-sign-up/src/app/client.tsx b/Junior/newsletter-sign-up/src/app/client.tsx
new file mode 100644
index 0000000..802bf41
--- /dev/null
+++ b/Junior/newsletter-sign-up/src/app/client.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import ThemeRegistry from "./ThemeRegistry";
+import { PropsWithChildren } from "react";
+
+import { useSelectedLayoutSegment } from "next/navigation";
+import FrozenRouter from "@/components/FrozenRouter";
+
+// Client wraps any client/rsc components with AnimatePresence
+export default function Client({ children }: PropsWithChildren) {
+ const segment = useSelectedLayoutSegment();
+ return (
+ console.log("triggered")}
+ >
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/Junior/newsletter-sign-up/src/app/globals.css b/Junior/newsletter-sign-up/src/app/globals.css
index b413373..206e2a6 100644
--- a/Junior/newsletter-sign-up/src/app/globals.css
+++ b/Junior/newsletter-sign-up/src/app/globals.css
@@ -3,3 +3,10 @@
margin: 0;
box-sizing: border-box;
}
+
+body {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/Junior/newsletter-sign-up/src/app/layout.tsx b/Junior/newsletter-sign-up/src/app/layout.tsx
index d8fc174..7406adf 100644
--- a/Junior/newsletter-sign-up/src/app/layout.tsx
+++ b/Junior/newsletter-sign-up/src/app/layout.tsx
@@ -1,8 +1,8 @@
import "./globals.css";
import type { Metadata } from "next";
import ThemeRegistry from "./ThemeRegistry";
-import { Container } from "@mui/material";
-import { usePathname } from "next/navigation";
+import { AnimatePresence, motion } from "framer-motion";
+import Client from "./client";
export const metadata: Metadata = {
title: "Newsletter Sign-up",
@@ -31,7 +31,7 @@ export default function RootLayout({
return (
- {children}
+ {children}
);
diff --git a/Junior/newsletter-sign-up/src/app/signup/page.tsx b/Junior/newsletter-sign-up/src/app/signup/page.tsx
index 8f9f819..6fb2f08 100644
--- a/Junior/newsletter-sign-up/src/app/signup/page.tsx
+++ b/Junior/newsletter-sign-up/src/app/signup/page.tsx
@@ -1,12 +1,14 @@
/* eslint-disable jsx-a11y/alt-text */
+"use client";
import Image from "@/components/Image";
import ListItem from "@/components/ListItem";
import TextField from "@/components/TextField";
import { Container, List, Typography } from "@mui/material";
+import { AnimatePresence, motion } from "framer-motion";
export default function Home() {
return (
-
+
Stay updated!
@@ -21,5 +23,6 @@ export default function Home() {
+ //
);
}
diff --git a/Junior/newsletter-sign-up/src/app/success/page.tsx b/Junior/newsletter-sign-up/src/app/success/page.tsx
index 6e401e3..ca3207f 100644
--- a/Junior/newsletter-sign-up/src/app/success/page.tsx
+++ b/Junior/newsletter-sign-up/src/app/success/page.tsx
@@ -4,6 +4,7 @@ import NextImage from "next/image";
import { Container, Typography } from "@mui/material";
import { useRouter, useSearchParams } from "next/navigation";
import Button from "@/components/Button";
+import { AnimatePresence, motion } from "framer-motion";
const Page = () => {
const params = useSearchParams();
@@ -21,7 +22,7 @@ const Page = () => {
return (
<>
{params.get("mail") !== undefined && (
-
+
{
)}
diff --git a/Junior/newsletter-sign-up/src/components/FrozenRouter.tsx b/Junior/newsletter-sign-up/src/components/FrozenRouter.tsx
new file mode 100644
index 0000000..ff74216
--- /dev/null
+++ b/Junior/newsletter-sign-up/src/components/FrozenRouter.tsx
@@ -0,0 +1,13 @@
+import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context";
+import { useContext, useRef } from "react";
+
+export default function FrozenRouter(props: { children: React.ReactNode }) {
+ const context = useContext(LayoutRouterContext);
+ const frozen = useRef(context).current;
+
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/Junior/newsletter-sign-up/src/components/TextField.tsx b/Junior/newsletter-sign-up/src/components/TextField.tsx
index 38d03f0..1646d58 100644
--- a/Junior/newsletter-sign-up/src/components/TextField.tsx
+++ b/Junior/newsletter-sign-up/src/components/TextField.tsx
@@ -56,7 +56,11 @@ const TextField = () => {
/>