Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Deepak #15

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Deepak #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
30ca955
made the contactus page
deepakbhagatiitr Jun 15, 2024
88935bf
responsive done
deepakbhagatiitr Jun 21, 2024
c01b07f
fix mobile view issue
deepakbhagatiitr Jun 22, 2024
ba95f69
sponserpage done
deepakbhagatiitr Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ yarn dev
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
Open [http://localhost:8080](http://localhost:8080) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:8080/api/hello](http://localhost:8080/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

Expand Down
223 changes: 168 additions & 55 deletions frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
"check-lint": "eslint . --ext ts --ext tsx --ext js"
},
"dependencies": {
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"@tanstack/react-query": "4.33.0",
"@types/node": "20.4.8",
"@types/react": "18.2.18",
Expand All @@ -20,6 +22,7 @@
"dotenv": "^16.3.1",
"eslint": "^8.50.0",
"eslint-config-next": "13.4.12",
"frontend": "file:",
"lodash": "4.17.21",
"next": "13.4.12",
"postcss": "8.4.27",
Expand All @@ -34,4 +37,4 @@
"eslint-config-prettier": "9.0.0",
"prettier": "3.0.3"
}
}
}
86 changes: 43 additions & 43 deletions frontend/pages/blog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Blogs = () => {
(res: any) => {
setResults(res.data.results);
},
(err:any) => {
(err: any) => {
console.log("Mutation error:", err);
},
);
Expand All @@ -26,18 +26,18 @@ const Blogs = () => {
setCurrentPage((prevPage) => prevPage - 1);
}
};
const debouncedSearch = debounce((query) => {}, 500);
const handleSearchInput = (e:any) => {
const debouncedSearch = debounce((query) => { }, 500);
const handleSearchInput = (e: any) => {

const query = e.target.value;
setSearchText(query);
debouncedSearch(query);
};
useEffect(() => {
if (searchText.length >= 3 || searchText.length === 0) {
mutate({currentPage,pageSize,searchText});
mutate({ currentPage, pageSize, searchText });
}
}, [currentPage,searchText]);
}, [currentPage, searchText]);
const styleObj = {
background: "rgba(0, 0, 0, 0.10)",
borderRadius: "1.5rem",
Expand All @@ -52,45 +52,45 @@ const Blogs = () => {
borderRadius: "12px",
background: "rgb(124,115,105)",
};


return (
<>
<div
className="bg bg-cover bg-blur h-screen min-w-screen bg-center "
className="h-screen bg-center bg-cover bg bg-blur min-w-screen "
style={{ backgroundImage: "url('/bg.png')" }}
>
<div className="flex items-center xs:h-[8vh] sm:h-[8vh] justify-center ">
<div className="flex items-center xs:h-[8vh] sm:h-[8vh] justify-center ">
<div className="flex justify-between md:hidden sm:w-[90vw] xs:w-[90%] ml:hidden ">
<button
className=" ml-3 mt-3 flex items-center justify-center rounded-full w-8 h-8"
style={{ background: "rgba(255, 255, 255, 0.20)" }}
>
<Link href="">
<img
src="/clarity_arrow-line.svg"
className="md:hidden ml:hidden"
/>
</Link>
</button>
<button
className=" mr-3 mt-3 flex items-center justify-center rounded-full w-8 h-8 "
style={{ background: "rgba(255, 255, 255, 0.20)" }}
>
<Link href="">
<img src="/charm.svg" className="md:hidden ml:hidden" />
</Link>
</button>
<button
className="flex items-center justify-center w-8 h-8 mt-3 ml-3 rounded-full "
style={{ background: "rgba(255, 255, 255, 0.20)" }}
>
<Link href="">

<img
src="/clarity_arrow-line.svg"
className="md:hidden ml:hidden"
/>
</Link>
</button>
<button
className="flex items-center justify-center w-8 h-8 mt-3 mr-3 rounded-full "
style={{ background: "rgba(255, 255, 255, 0.20)" }}
>
<Link href="">

<img src="/charm.svg" className="md:hidden ml:hidden" />
</Link>
</button>
</div>
</div>
<div className="w-full relative h-[80%] sm:h-[88%] flex justify-center">
<div
className="w-[68%] md:w-[72%] xs:w-[90%] sm:w-[90%] bg-cover bg-center flex items-start pt-10 pl-14 pb-0 pr-14 xs:pl-3 sm:pl-4 md:pr-6 xs:pt-7 sm:pt-7 md:pt-10 xs:pr-4 sm:pr-5 md:pl-6 flex-col gap-5 sm:gap-3 xs:gap-2 text-3xl mt-10 "
style={blogStyle}
>
<div className="text-white text-4xl sm:text-3xl xs:text-xl">
<div className="text-4xl text-white sm:text-3xl xs:text-xl">
Blogs
</div>
<div className="flex px-3 py-3 w-[100%]" style={Search}>
Expand Down Expand Up @@ -119,10 +119,10 @@ const Blogs = () => {
className="rounded-2xl w-[100%] transition-transform duration-300 transform hover:scale-105"
/>
<div className="">
<div className="text-white text-2xl md:text-xl sm:text-xl xs:text-sm font-medium">
<div className="text-2xl font-medium text-white md:text-xl sm:text-xl xs:text-sm">
{result?.title}
</div>
<div className="text-white text-xl sm:text-sm xs:text-xs ">
<div className="text-xl text-white sm:text-sm xs:text-xs ">
by {result?.name}
</div>
</div>
Expand All @@ -133,11 +133,11 @@ const Blogs = () => {
</div>
</div>
</div>
{}
<div className="w-full flex justify-center items-center mt-auto mb-2">
{ }
<div className="flex items-center justify-center w-full mt-auto mb-2">
{currentPage > 1 && (
<button
className="mx-2 text-2xl text-white px-2 py-2 rounded hover:text-black-600 disabled:bg-300"
className="px-2 py-2 mx-2 text-2xl text-white rounded hover:text-black-600 disabled:bg-300"
onClick={handlePreviousPage}
disabled={currentPage === 1}
>
Expand All @@ -146,42 +146,42 @@ const Blogs = () => {
)}
{results.length === pageSize && (
<button
className="mx-2 text-2xl text-white py-2 rounded hover:text-black-600 disabled:bg-300"
className="py-2 mx-2 text-2xl text-white rounded hover:text-black-600 disabled:bg-300"
onClick={handleNextPage}
>
Next Page
</button>
)}
</div>

<div className="flex xs:hidden sm:hidden align-center justify-center mt-12 mb-0">
<div className="flex justify-center mt-12 mb-0 xs:hidden sm:hidden align-center">
<div
className="inline-flex px-2 py-4 items-start gap-2 rounded-3xl shadow-md shadow-slate-100 backdrop-blur-2xl"
className="inline-flex items-start gap-2 px-2 py-4 shadow-md rounded-3xl shadow-slate-100 backdrop-blur-2xl"
style={styleObj}
>
<a href="">
<img
className="h-5 w-5 mx-2 shrink-0"
className="w-5 h-5 mx-2 shrink-0"
src="/contactUs.svg"
alt=""
/>
</a>
<a href="">
<img
className="h-5 w-5 mx-2 shrink-0"
className="w-5 h-5 mx-2 shrink-0"
src="/fluentPeople.svg"
alt=""
/>
</a>
<a href="">
<img className="h-5 w-5 mx-2 shrink-0" src="/home.svg" alt="" />
<img className="w-5 h-5 mx-2 shrink-0" src="/home.svg" alt="" />
</a>
<a href="">
<img className="h-5 w-5 mx-2 shrink-0" src="/info.svg" alt="" />
<img className="w-5 h-5 mx-2 shrink-0" src="/info.svg" alt="" />
</a>
<a href="">
<img
className="h-5 w-5 mx-2 shrink-0"
className="w-5 h-5 mx-2 shrink-0"
src="/lightBulb.svg"
alt=""
/>
Expand Down
116 changes: 116 additions & 0 deletions frontend/pages/contact/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
// pages/index.js
import Head from 'next/head'
import img from 'next/image';
import Link from "next/link";
export default function Home() {
return (
<div className="flex flex-col min-h-screen space-y-8 bg-center bg-no-repeat bg-cover" style={{ backgroundImage: "url('/bg.png')" }}>
<Head>
<title>Contact Page</title>
</Head>
<div className="flex items-center justify-center mt-8 md:hidden ml:hidden">
<div className="flex justify-between w-full max-w-md px-4 mg:w-[90vw] sm:w-[90vw] xs:w-[90%]">
<button
className="flex items-center justify-center w-10 h-10 bg-white rounded-full bg-opacity-20"
>
<Link href="/">
<img
src="/clarity_arrow-line.svg"
className="w-6 h-6"
alt="Arrow"
/>
</Link>
</button>
<button
className="flex items-center justify-center w-10 h-10 bg-white rounded-full bg-opacity-20"
>
<Link href="/">
<img
src="/charm.svg"
className="w-6 h-6"
alt="Charm"
/>
</Link>
</button>
</div>
</div>
<div className="flex items-center justify-center text-center mb-9 md:mb-4">
<h1 className="px-5 py-3 mx-auto text-xl font-semibold shadow-lg rounded-2xl backdrop-blur-md" style={{ boxShadow: '0 -4px 6px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1)' }}>
Get in touch
</h1>

</div>
<div className="flex flex-col w-full pb-0 mx-auto lp:w-8/12 ml:w-11/12 md:p-10 md:pb-16 ml:pt-4 ml:pb-16">
<div className="grid hidden w-full grid-cols-2 gap-4 mx-auto mb-10 mh:grid-cols-3 mh:w-8/12 justify-items-center sm:grid-cols-2 lg:grid-cols-3 lg:w-8/12 ml:grid">
<Link href="mailto:example@example.com" className="flex items-center justify-center bg-blue-100 rounded-full w-36 h-36">
<img src="images/mail.png" alt="Mail" className="w-full h-full" />
</Link>
<Link href="tel:+123456789" className="flex items-center justify-center bg-green-100 rounded-full w-36 h-36">
<img src="images/phone.png" alt="Phone" className="w-full h-full" />
</Link>
<Link href="https://twitter.com" className="flex items-center justify-center bg-blue-100 rounded-full w-36 h-36">
<img src="images/twitter.png" alt="Twitter" className="w-full h-full" />
</Link>
</div>

<div className="grid hidden w-full grid-cols-2 gap-4 mx-auto mh:grid-cols-4 justify-items-center sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:w-11/12 ml:grid">
<Link href="https://linkedin.com" className="flex items-center justify-center rounded-full h-36 w-36">
<img src="images/linkedin.png" alt="LinkedIn" className="w-full h-full" />
</Link>
<Link href="https://facebook.com" className="flex items-center justify-center rounded-full h-36 w-36">
<img src="images/fb.png" alt="Facebook" className="w-full h-full" />
</Link>
<Link href="https://instagram.com" className="flex items-center justify-center rounded-full h-36 w-36">
<img src="images/insta.png" alt="Instagram" className="w-full h-full" />
</Link>
<Link href="https://maps.google.com" className="flex items-center justify-center rounded-full h-36 w-36">
<img src="images/map.png" alt="Google Maps" className="w-full h-full" />
</Link>
</div>
<div className="flex flex-wrap items-center justify-center w-full gap-16 mx-auto mg:px-5 ms:px-5 mg:mb-8 sd:w-11/12 ml:hidden md:w-10/12 ">
<Link href="mailto:example@example.com" className="flex items-center justify-center bg-blue-100 rounded-full w-28 h-28 mg:w-24 mg:h-24 ms:w-[7rem] ms:h-[7rem]">
<img src="images/mail.png" alt="Mail" className="w-full h-full" />
</Link>
<Link href="tel:+123456789" className="flex items-center justify-center bg-green-100 rounded-full w-28 h-28 mg:w-24 mg:h-24 ms:w-[7rem] ms:h-[7rem]">
<img src="images/phone.png" alt="Phone" className="w-full h-full" />
</Link>
<Link href="https://twitter.com" className="flex items-center justify-center bg-blue-100 rounded-full w-28 h-28 mg:w-24 mg:h-24 ms:w-[7rem] ms:h-[7rem]">
<img src="images/twitter.png" alt="Twitter" className="w-full h-full" />
</Link>
<Link href="https://linkedin.com" className="flex items-center justify-center bg-blue-100 rounded-full w-28 h-28 mg:w-24 mg:h-24 ms:w-[7rem] ms:h-[7rem]">
<img src="images/linkedin.png" alt="LinkedIn" className="w-full h-full" />
</Link>
<Link href="https://facebook.com" className="flex items-center justify-center bg-green-100 rounded-full w-28 h-28 mg:w-24 mg:h-24 ms:w-[7rem] ms:h-[7rem]">
<img src="images/fb.png" alt="Facebook" className="w-full h-full" />
</Link>
<Link href="https://instagram.com" className="flex items-center justify-center bg-blue-100 rounded-full w-28 h-28 mg:w-24 mg:h-24 ms:w-[7rem] ms:h-[7rem]">
<img src="images/insta.png" alt="Instagram" className="w-full h-full" />
</Link>
<Link href="https://maps.google.com" className="flex items-center justify-center bg-green-100 rounded-full w-28 h-28 mg:w-24 mg:h-24 ms:w-[7rem] ms:h-[7rem]">
<img src="images/map.png" alt="Google Maps" className="w-full h-full" />
</Link>
</div>
</div>
<div className="flex items-center justify-center">

<div className="inline-flex items-center hidden gap-2 px-4 py-2 shadow-md rounded-3xl backdrop-blur-2xl md:flex ml:flex" style={{ background: 'rgba(0, 0, 0, 0.10)', borderRadius: '1.5rem', boxShadow: '2px 2px 2px 0px rgba(255, 255, 255, 0.05) inset, -1px -1px 4px 0px rgba(255, 255, 255, 0.05) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.10)' }}>
<Link href="" className="flex items-center justify-center w-10 h-10 bg-blue-700 rounded-full">
<img className="w-5 h-5 shrink-0" src="/home.svg" alt="Home" />
</Link>
<Link href="">
<img className="w-5 h-5 mx-2 shrink-0" src="/info.svg" alt="Info" />
</Link>
<Link href="">
<img className="w-5 h-5 mx-2 shrink-0" src="/lightBulb.svg" alt="Light Bulb" />
</Link>
<Link href="">
<img className="w-5 h-5 mx-2 shrink-0" src="/fluentPeople.svg" alt="People" />
</Link>
<Link href="">
<img className="w-5 h-5 mx-2 shrink-0" src="/contactUs.svg" alt="Contact Us" />
</Link>
</div>
</div>
</div>
)
}
Loading