Skip to content

Instantly share code, notes, and snippets.

@Piyush-linux

Piyush-linux/readme.md

Last active July 16, 2024 05:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Piyush-linux/d7c97d74fe3305ccb4e47ed90efce0bd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Piyush-linux/d7c97d74fe3305ccb4e47ed90efce0bd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

Modification in PetMe-Prod

  • OurService
  • Hero
@Piyush-linux
Copy link
Author

Piyush-linux commented Jul 16, 2024

Our Services

  • components/OurService/Card.jsx
import React from 'react';
export default function Card(props) {
  return (
    <section className="w-full sm:w-[65%] bg-white h-fit p-6 rounded-xl space-y-4  border-2 border-white hover:border-amber-600 hover:cursor-pointer">
      {/*title*/}
      <div className="text-xl font-bold">  {props.title} </div>
      {/*content*/}
      <div className="leading-normal text-gray-500 text-sm text-justify">
        {props.content}
      </div>
    </section>
  );
}
  • components/OurService/index.jsx
/* eslint-disable react/no-unescaped-entities */
import React from 'react';
import ourServiceCover from "../../assets/images/ourServiceCover.jpg";
import Card from "./Card.jsx";
export default function OurService() {
  return (
    <section className="w-full h-full p-6 mb-6">

      {/*title*/}
      <div className="text-4xl font-bold text-center my-10 py-3">Our Service</div>

      <div className="grid sm:grid-cols-3 gap-6 place-items-center">
        {/*c1*/}
        <div className="grid justify-items-end space-y-10">
          <Card title="Adoption Counseling" content="Our experienced team understands that adopting a pet is a significant decision. We offer personalized counseling sessions to help you find the perfect match for your lifestyle, preferences, and needs" />
          <Card title="Matchmaking" content="We believe that the key to a successful adoption is finding the right match. Through careful matchmaking, we consider factors such as temperament, activity level, and compatibility with other pets and family members" />
          <Card title="Health and Wellness" content="The well-being of our animals is our top priority. Before they are available for adoption, all pets receive thorough veterinary examinations, vaccinations, and any necessary medical treatments" />
        </div>
        {/*c2*/}
        <div>
          <div className="h-full">
            <img src={ourServiceCover} className="h-[85vh] w-full object-cover rounded-2xl" alt="Dog Image" />
          </div>
        </div>
        {/*c3*/}
        <div className="grid justify-items-left space-y-10">
          <Card title="Behavioral Support" content="Adjusting to a new home can be challenging for pets, which is why we offer ongoing behavioral support to adopters." />
          <Card title="Post-Adoption Follow-Up" content="Our commitment to our animals doesn't end when they leave our facility. We conduct post-adoption follow-up checks to ensure that both pets and adopters are thriving in their new environment" />
          <Card title="Community Events and Resources" content="Join our vibrant community of pet lovers and enthusiasts! We host regular events, workshops, and educational seminars on topics ranging from pet care basics to advanced training techniques" />
        </div>
      </div>
    </section>
  );
}

@Piyush-linux
Copy link
Author

Piyush-linux commented Jul 16, 2024

Hero

  • /components/Hero/index.jsx
import React from 'react';

function Sample() {

    return (
        <div className="h-auto bg-gradient-to-t from-rose-100 to-white">
            <div className="block sm:flex h-full py-10 sm:h-[80vh] justify-between w-3/4 mx-auto">
                <div className="flex h-auto items-center justify-center">
                    <div className="">
                        <div className="text-center sm:text-left text-2xl sm:text-5xl sm:leading-snug font-extrabold font-sans text-slate-700">
                            Find Your <span className="text-[#FA4D56]">Furry</span> Friend <br />
                            Adopt, Love,  <br />
                            Transform Lives !
                        </div>
                        <button className="bg-[#FA4D56] mx-auto sm:mx-0 mt-6 text-sm  sm:text-md px-4 py-2 rounded-lg text-white border-2 font-sans font-bold flex items-center space-x-2 hover:bg-rose-50 hover:text-[#FA4D56] hover:border-[#FA4D56] ">
                            <svg xmlns="http://www.w3.org/2000/svg" className="w-10 h-10" viewBox="0 0 100 100"><path fill="currentColor" d="M34.848 40.708c0-5.6-4.542-10.141-10.143-10.141c-5.601 0-10.141 4.541-10.141 10.141c0 5.604 4.539 10.143 10.141 10.143s10.143-4.539 10.143-10.143m40.445-8.16c-5.6 0-10.141 4.541-10.141 10.141c0 5.604 4.541 10.141 10.141 10.141c5.601 0 10.142-4.537 10.142-10.141c0-5.6-4.54-10.141-10.142-10.141m-9.211 21.43c-.705-.869-1.703-1.875-2.849-2.93c-3.058-3.963-7.841-6.527-13.233-6.527c-4.799 0-9.113 2.032-12.162 5.27c-1.732 1.507-3.272 2.978-4.252 4.188l-.656.801c-3.06 3.731-6.869 8.373-6.841 16.25c.027 7.315 5.984 13.27 13.278 13.27a13.14 13.14 0 0 0 10.467-5.159a13.137 13.137 0 0 0 10.47 5.159c7.291 0 13.247-5.954 13.275-13.27c.028-7.877-3.782-12.519-6.841-16.25z" /><circle cx="50.703" cy="26.877" r="11.175" fill="currentColor" /></svg>
                            <span>Adopt Me</span>
                        </button>
                    </div>
                </div>
                <div className="hidden sm:visible h-full sm:flex justify-center items-center">
                    <div className="hero-blob"></div>
                </div>
            </div>
        </div>

    );
}

export default Sample;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment