diff options
Diffstat (limited to 'components')
-rw-r--r-- | components/testimonials.js | 91 | ||||
-rw-r--r-- | components/video.js | 42 |
2 files changed, 0 insertions, 133 deletions
diff --git a/components/testimonials.js b/components/testimonials.js deleted file mode 100644 index cde6ea1..0000000 --- a/components/testimonials.js +++ /dev/null @@ -1,91 +0,0 @@ -import Image from "next/image"; -import React from "react"; -import Container from "./container"; - -import userOneImg from "../public/img/user1.jpg"; -import userTwoImg from "../public/img/user2.jpg"; -import userThreeImg from "../public/img/user3.jpg"; - -const Testimonials = () => { - return ( - <Container> - <div className="grid gap-10 lg:grid-cols-2 xl:grid-cols-3"> - <div className="lg:col-span-2 xl:col-auto"> - <div className="flex flex-col justify-between w-full h-full bg-gray-100 px-14 rounded-2xl py-14 dark:bg-trueGray-800"> - <p className="text-2xl leading-normal "> - Share a real <Mark>testimonial</Mark> - that hits some of your benefits from one of your popular customer. - </p> - - <Avatar - image={userOneImg} - name="Sarah Steiner" - title="VP Sales at Google" - /> - </div> - </div> - <div className=""> - <div className="flex flex-col justify-between w-full h-full bg-gray-100 px-14 rounded-2xl py-14 dark:bg-trueGray-800"> - <p className="text-2xl leading-normal "> - Make sure you only pick the <Mark>right sentence</Mark> - to keep it short and simple. - </p> - - <Avatar - image={userTwoImg} - name="Dylan Ambrose" - title="Lead marketer at Netflix" - /> - </div> - </div> - <div className=""> - <div className="flex flex-col justify-between w-full h-full bg-gray-100 px-14 rounded-2xl py-14 dark:bg-trueGray-800"> - <p className="text-2xl leading-normal "> - This is an <Mark>awesome</Mark> landing page template I've seen. I - would use this for anything. - </p> - - <Avatar - image={userThreeImg} - name="Gabrielle Winn" - title="Co-founder of Acme Inc" - /> - </div> - </div> - </div> - </Container> - ); -} - -function Avatar(props) { - return ( - <div className="flex items-center mt-8 space-x-3"> - <div className="flex-shrink-0 overflow-hidden rounded-full w-14 h-14"> - <Image - src={props.image} - width="40" - height="40" - alt="Avatar" - placeholder="blur" - /> - </div> - <div> - <div className="text-lg font-medium">{props.name}</div> - <div className="text-gray-600 dark:text-gray-400">{props.title}</div> - </div> - </div> - ); -} - -function Mark(props) { - return ( - <> - {" "} - <mark className="text-indigo-800 bg-indigo-100 rounded-md ring-indigo-100 ring-4 dark:ring-indigo-900 dark:bg-indigo-900 dark:text-indigo-200"> - {props.children} - </mark>{" "} - </> - ); -} - -export default Testimonials;
\ No newline at end of file diff --git a/components/video.js b/components/video.js deleted file mode 100644 index ad5618d..0000000 --- a/components/video.js +++ /dev/null @@ -1,42 +0,0 @@ -import { useState } from "react"; -import Container from "./container"; - -const Video = () => { - const [playVideo, setPlayVideo] = useState(false); - return ( - <Container> - <div className="w-full max-w-4xl mx-auto overflow-hidden lg:mb-20 rounded-2xl "> - <div - onClick={() => setPlayVideo(!playVideo)} - className="relative bg-indigo-300 cursor-pointer aspect-w-16 aspect-h-9 bg-gradient-to-tr from-purple-400 to-indigo-700"> - {!playVideo && ( - <button className="absolute inset-auto w-16 h-16 text-white transform -translate-x-1/2 -translate-y-1/2 lg:w-28 lg:h-28 top-1/2 left-1/2"> - <svg - xmlns="http://www.w3.org/2000/svg" - className="w-16 h-16 lg:w-28 lg:h-28" - viewBox="0 0 20 20" - fill="currentColor"> - <path - fillRule="evenodd" - d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" - clipRule="evenodd" - /> - </svg> - <span className="sr-only">Play Video</span> - </button> - )} - {playVideo && ( - <iframe - src="https://www.youtube-nocookie.com/embed/aOq49euWnIo?controls=0&autoplay=1" - title="YouTube video player" - frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowfullscreen></iframe> - )} - </div> - </div> - </Container> - ); -} - -export default Video;
\ No newline at end of file |