From 9c5c285b44e9d9a372ccea7962ae60425350316f Mon Sep 17 00:00:00 2001 From: Anthony Al Lazkani Date: Fri, 20 Dec 2024 23:08:52 +0200 Subject: [PATCH 1/2] Adds new feature page, user interface and user interface enhancement --- docs/exceptions.rst | 2 +- frontend/package-lock.json | 45 ++++- frontend/package.json | 3 +- frontend/src/App.tsx | 19 +-- frontend/src/AppContent.tsx | 26 +++ .../components/URLShortener/URLShortener.css | 157 +++++++++++++++++ .../components/URLShortener/URLShortener.tsx | 112 +++++++++++++ .../src/components/featuresCard/CardProps.ts | 8 + .../components/featuresCard/FeaturesCard.css | 64 +++++++ .../components/featuresCard/FeaturesCard.tsx | 40 +++++ frontend/src/components/navbar/Navbar.css | 3 + frontend/src/components/navbar/Navbar.tsx | 2 +- frontend/src/pages/about/About.css | 0 frontend/src/pages/about/About.tsx | 8 - frontend/src/pages/features/Features.css | 79 +++++++++ frontend/src/pages/features/Features.tsx | 41 +++++ frontend/src/pages/home/Home.css | 158 ------------------ frontend/src/pages/home/Home.tsx | 116 ++----------- 18 files changed, 595 insertions(+), 288 deletions(-) create mode 100644 frontend/src/AppContent.tsx create mode 100644 frontend/src/components/URLShortener/URLShortener.css create mode 100644 frontend/src/components/URLShortener/URLShortener.tsx create mode 100644 frontend/src/components/featuresCard/CardProps.ts create mode 100644 frontend/src/components/featuresCard/FeaturesCard.css create mode 100644 frontend/src/components/featuresCard/FeaturesCard.tsx delete mode 100644 frontend/src/pages/about/About.css delete mode 100644 frontend/src/pages/about/About.tsx create mode 100644 frontend/src/pages/features/Features.css create mode 100644 frontend/src/pages/features/Features.tsx diff --git a/docs/exceptions.rst b/docs/exceptions.rst index 4bdddb9..5f2e008 100644 --- a/docs/exceptions.rst +++ b/docs/exceptions.rst @@ -1,4 +1,4 @@ -Exceptions + Exceptions ========== .. automodule:: shortenit.exceptions diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 441dab0..f48f4b7 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,9 +16,10 @@ "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "axios": "^1.7.9", + "framer-motion": "^11.15.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-icons": "^5.3.0", + "react-icons": "^5.4.0", "react-router-dom": "^7.0.1", "react-scripts": "5.0.1", "react-toastify": "^11.0.1", @@ -7850,6 +7851,32 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.15.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz", + "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==", + "dependencies": { + "motion-dom": "^11.14.3", + "motion-utils": "^11.14.3", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -10668,6 +10695,16 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/motion-dom": { + "version": "11.14.3", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz", + "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==" + }, + "node_modules/motion-utils": { + "version": "11.14.3", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz", + "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -12928,9 +12965,9 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, "node_modules/react-icons": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", - "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", "peerDependencies": { "react": "*" } diff --git a/frontend/package.json b/frontend/package.json index b1b15be..95164d8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,9 +11,10 @@ "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "axios": "^1.7.9", + "framer-motion": "^11.15.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-icons": "^5.3.0", + "react-icons": "^5.4.0", "react-router-dom": "^7.0.1", "react-scripts": "5.0.1", "react-toastify": "^11.0.1", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index bbad931..40ed2c9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,25 +1,20 @@ import React from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import "./App.css"; +import AppContent from "./AppContent"; // Pages & Components -import Navbar from "./components/navbar/Navbar"; -import Footer from "./components/footer/Footer"; -import Home from "./pages/home/Home"; -import About from "./pages/about/About"; -import Contact from "./pages/contact/Contact"; +// import Navbar from "./components/navbar/Navbar"; +// import Footer from "./components/footer/Footer"; +// import Home from "./pages/home/Home"; +// import Features from "./pages/features/Features"; +// import Contact from "./pages/contact/Contact"; function App() { return (
- - - } /> - } /> - } /> - -
+
); diff --git a/frontend/src/AppContent.tsx b/frontend/src/AppContent.tsx new file mode 100644 index 0000000..3a9ad50 --- /dev/null +++ b/frontend/src/AppContent.tsx @@ -0,0 +1,26 @@ +import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom"; +import "./App.css"; +import { AnimatePresence } from "framer-motion"; + +// Pages & Components +import Navbar from "./components/navbar/Navbar"; +import Footer from "./components/footer/Footer"; +import Home from "./pages/home/Home"; +import Features from "./pages/features/Features"; +import Contact from "./pages/contact/Contact"; + +export default function AppContent() { + const location = useLocation(); + return ( + <> + + + + } /> + } /> + } /> + +