├── assets
    ├── image
    ├── GSSoC-Ext.png
    └── hacktoberfest.png
├── src
    ├── assets
    │   ├── favicon.png
    │   └── contactPageBg.jpg
    ├── lib
    │   └── utils.ts
    ├── componenets
    │   ├── SparkelIcons.jsx
    │   ├── container
    │   │   └── Container.jsx
    │   ├── Logo.jsx
    │   ├── Button.jsx
    │   ├── AiChatbot.jsx
    │   ├── index.js
    │   ├── Select.jsx
    │   ├── Input.jsx
    │   ├── TrendingTopicHomePage.jsx
    │   ├── AuthLayout.jsx
    │   ├── Header
    │   │   └── LogoutBtn.jsx
    │   ├── RTE.jsx
    │   ├── ForgotPasswordModal.jsx
    │   ├── SearchBar.jsx
    │   ├── PostCard.jsx
    │   ├── Login.jsx
    │   ├── Signup.jsx
    │   └── GoogleTranslator.jsx
    ├── store
    │   ├── store.js
    │   └── authSlice.js
    ├── pages
    │   ├── Signup.jsx
    │   ├── Login.jsx
    │   ├── AddPost.jsx
    │   ├── Error404.jsx
    │   ├── Home.jsx
    │   ├── Features.jsx
    │   ├── Feedback.css
    │   ├── EditPost.jsx
    │   ├── FAQ.jsx
    │   ├── SupportPage.jsx
    │   ├── Category.jsx
    │   ├── ContactUsBG.jsx
    │   ├── Presskit.css
    │   ├── FeedBackPage.jsx
    │   ├── AllPost.jsx
    │   └── Presskit.jsx
    ├── config
    │   └── config.js
    ├── api
    │   └── chatbot.js
    ├── components
    │   └── ui
    │   │   ├── label.tsx
    │   │   ├── textarea.tsx
    │   │   ├── badge.tsx
    │   │   ├── Chatbot.jsx
    │   │   ├── popover.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── accordion.tsx
    │   │   ├── BackToTopButton.tsx
    │   │   ├── dialog.tsx
    │   │   ├── alert-dialog.tsx
    │   │   ├── command.tsx
    │   │   ├── navigation-menu.tsx
    │   │   └── select.tsx
    ├── utils
    │   └── ai.js
    ├── App.jsx
    ├── index.css
    ├── appwrite
    │   └── auth.js
    └── App.css
├── postcss.config.js
├── server
    ├── .env.example
    ├── routes
    │   ├── feedbackRoute.js
    │   ├── contactRoute.js
    │   ├── storiesRoutes.js
    │   ├── newsletterRoute.js
    │   └── discussionRoutes.js
    ├── models
    │   ├── postModel.js
    │   ├── discussion.js
    │   ├── Newsletter.js
    │   ├── contact.js
    │   └── feedback.js
    ├── utils
    │   └── db.js
    ├── package.json
    ├── controller
    │   ├── postsController.js
    │   ├── newsletterController.js
    │   ├── feedbackController.js
    │   ├── contactController.js
    │   └── discussionController.js
    ├── app.js
    ├── generateFromAi.py
    ├── sendSuscribedMail.js
    └── sendContactDetailsToAdmin.js
├── vite.config.js
├── .env.sample
├── .gitignore
├── components.json
├── index.html
├── .eslintrc.cjs
├── .github
    ├── workflows
    │   ├── greetings.yml
    │   └── update-readme.yml
    └── scripts
    │   └── update_structure.py
├── public
    ├── service-worker.js
    └── offline.html
├── tsconfig.json
├── package.json
├── repo_structure.txt
├── PROJECT_STRUCTURE.md
├── tailwind.config.js
├── README.md
├── env.md
└── CODE_OF_CONDUCT.md


/assets/image:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/assets/GSSoC-Ext.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anuj123upadhyay/MegaBlog/HEAD/assets/GSSoC-Ext.png


--------------------------------------------------------------------------------
/assets/hacktoberfest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anuj123upadhyay/MegaBlog/HEAD/assets/hacktoberfest.png


--------------------------------------------------------------------------------
/src/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anuj123upadhyay/MegaBlog/HEAD/src/assets/favicon.png


--------------------------------------------------------------------------------
/src/assets/contactPageBg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anuj123upadhyay/MegaBlog/HEAD/src/assets/contactPageBg.jpg


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/server/.env.example:
--------------------------------------------------------------------------------
1 | MONGO_URI=mongodb://localhost:27017/megaBlog
2 | JWT_SECRET=scijyasfy7dsvegdffvbfbfgg435tgrsnbgfgn
3 | PORT=5000
4 | EMAIL_ID=
5 | PASS_KEY=
6 | ADMIN_EMAIL_ID=


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/componenets/SparkelIcons.jsx:
--------------------------------------------------------------------------------
1 | // src/components/SparklesIcon.jsx
2 | import React from "react";
3 | 
4 | const SparkelIcons = () => {
5 |   return <span>✨</span>; // Or your icon design
6 | };
7 | 
8 | export default SparkelIcons;
9 | 


--------------------------------------------------------------------------------
/src/componenets/container/Container.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Container({children}) {
 4 |   return (
 5 |     <div className='w-full'>
 6 |       {children}
 7 |     </div>
 8 |   )
 9 | }
10 | 
11 | export default Container
12 | 


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
 1 | import {configureStore} from '@reduxjs/toolkit'
 2 | import authSlice from './authSlice';
 3 | 
 4 | 
 5 | const store = configureStore({
 6 |     reducer:{
 7 |         auth : authSlice
 8 |     }
 9 | })
10 | export default store;
11 | 


--------------------------------------------------------------------------------
/server/routes/feedbackRoute.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import { submitFeedback } from '../Controller/feedbackController.js';
3 | const router = express.Router();
4 | 
5 | router.post('/submitFeedback', submitFeedback);
6 | 
7 | export default router;   
8 | 


--------------------------------------------------------------------------------
/src/pages/Signup.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Signup as SignUp } from '../componenets'
 3 | 
 4 | function Signup() {
 5 |   return (
 6 |     <div className='py-8'>
 7 |         <SignUp/>
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default Signup
13 | 


--------------------------------------------------------------------------------
/src/pages/Login.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Login as LoginComponent } from '../componenets'
 3 | 
 4 | function Login() {
 5 |   return (
 6 |     <div className='py-8'>
 7 |       <LoginComponent/>
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default Login
13 | 


--------------------------------------------------------------------------------
/server/routes/contactRoute.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import { getContact, saveContact } from "../controller/contactController.js";
3 | const router = express.Router();
4 | 
5 | router.post("/saveContact", saveContact);
6 | router.get("/saveContact", getContact);
7 | 
8 | export default router;
9 | 


--------------------------------------------------------------------------------
/server/routes/storiesRoutes.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import { getPosts, savePost } from "../controller/postsController.js";
 3 | 
 4 | const router = express.Router();
 5 | 
 6 | router.get("/getposts", getPosts);
 7 | router.post("/saveposts", savePost);
 8 | 
 9 | export default router;
10 | 


--------------------------------------------------------------------------------
/server/routes/newsletterRoute.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | const router = express.Router();
3 | import { getNewsletter, saveNewsletter } from "../controller/newsletterController.js";
4 | 
5 | router.post("/suscribe", saveNewsletter);
6 | router.get("/getNewsletter", getNewsletter);
7 | 
8 | export default router;
9 | 


--------------------------------------------------------------------------------
/src/pages/AddPost.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Container, PostForm } from '../componenets'
 3 | 
 4 | function AddPost() {
 5 |   return (
 6 |     <div className='py-8 px-12'>
 7 |         <Container>
 8 |             <PostForm />
 9 |         </Container>
10 |     </div>
11 |   )
12 | }
13 | 
14 | export default AddPost


--------------------------------------------------------------------------------
/server/models/postModel.js:
--------------------------------------------------------------------------------
 1 | // postModel.js
 2 | import mongoose from "mongoose";
 3 | 
 4 | const postSchema = new mongoose.Schema({
 5 |     title: String,
 6 |     content: String,
 7 |     category: String,
 8 |     date: { type: Date, default: Date.now },
 9 | });
10 | 
11 | const Post = mongoose.model("Post", postSchema);
12 | 
13 | export default Post;
14 | 


--------------------------------------------------------------------------------
/.env.sample:
--------------------------------------------------------------------------------
 1 | VITE_APPWRITE_ENDPOINT=
 2 | VITE_APPWRITE_PROJECT_ID=
 3 | VITE_APPWRITE_DATABASE_ID=
 4 | VITE_APPWRITE_COLLECTION_ID=
 5 | VITE_APPWRITE_NEWSLETTER_COLLECTION_ID=
 6 | VITE_APPWRITE_BUCKET_ID=
 7 | VITE_APPWRITE_FUNCTION_ID=
 8 | VITE_APPWRITE_URL=
 9 | 
10 | EMAIL_SERVICE=
11 | EMAIL_FROM=
12 | EMAIL_PASS=
13 | EMAIL_USER=
14 | APPWRITE_API_KEY=
15 | 


--------------------------------------------------------------------------------
/src/componenets/Logo.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Badge } from '../components/ui/badge'
 3 | 
 4 | function Logo({width = '100px'}) {
 5 |   return (
 6 |     <div>
 7 |       <Badge>
 8 |         <div className='text-xl mb-1'>
 9 |           MegaBlog
10 |           </div>
11 |           </Badge>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default Logo
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | .env
26 | 
27 | .vercel
28 | 


--------------------------------------------------------------------------------
/server/routes/discussionRoutes.js:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | const router = express.Router();
 3 | 
 4 | import { getQuestions, saveQuestion, addAnswerToQuestion } from '../controller/discussionController.js';
 5 | 
 6 | router.get('/getQuestion', getQuestions);
 7 | 
 8 | router.post('/postQuestion', saveQuestion);
 9 | 
10 | router.put('/:id/answer', addAnswerToQuestion);
11 | 
12 | export default router;
13 | 


--------------------------------------------------------------------------------
/server/utils/db.js:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | import dotenv from "dotenv";
 3 | dotenv.config();
 4 | 
 5 | const connectDB = async () => {
 6 |     try {
 7 |         await mongoose.connect(process.env.MONGO_URI);
 8 |         console.log("MongoDB Connected");
 9 |     } catch (error) {
10 |         console.error("Database connection error:", error);
11 |         process.exit(1);
12 |     }
13 | };
14 | 
15 | export default connectDB;
16 | 


--------------------------------------------------------------------------------
/src/componenets/Button.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Button({
 4 |     children,
 5 |     type = 'button',
 6 |     bgColor = "bg-blue-600",
 7 |     textColor = 'text-white',
 8 |     className = '',
 9 |     ...props
10 | 
11 | }) {
12 |   return (
13 |     <button className={`px-4 py-2 rounded-lg ${className} ${bgColor} ${textColor}`} {...props}>
14 | 
15 |         {children}
16 |         
17 |     </button>
18 |   )
19 | }
20 | 
21 | export default Button
22 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "src/index.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   }
20 | }


--------------------------------------------------------------------------------
/server/models/discussion.js:
--------------------------------------------------------------------------------
 1 | import mongoose from 'mongoose';
 2 | 
 3 | // Define the schema for a question
 4 | const discussionSchema = new mongoose.Schema({
 5 |     content: {
 6 |         type: String,
 7 |         required: true,
 8 |     },
 9 |     answered: {
10 |         type: Boolean,
11 |         default: false,
12 |     },
13 |     answer: {
14 |         type: String,
15 |         default: '',
16 |     },
17 | }, { timestamps: true });
18 | 
19 | const Question = mongoose.model('Question', discussionSchema);
20 | 
21 | export default Question;
22 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="dark">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <meta name="google-site-verification" content="8pOwrpi6P8z_jlkzboydtZC8T8NM-NIPfDfCHk2lgB4" />
 8 |     <title>MegaBlog</title>
 9 |   </head>
10 |   <body class="bg-scale-400">
11 |     <div id="root"></div>
12 |     <script type="module" src="/src/main.jsx"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "server",
 3 |   "version": "1.0.0",
 4 |   "main": "app.js",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "nodemon app.js"
 9 |   },
10 |   "keywords": [
11 |     "megablog"
12 |   ],
13 |   "author": "",
14 |   "license": "ISC",
15 |   "description": "",
16 |   "dependencies": {
17 |     "cors": "^2.8.5",
18 |     "dotenv": "^16.4.5",
19 |     "express": "^4.21.1",
20 |     "mongoose": "^8.8.0",
21 |     "nodemailer": "^6.9.16",
22 |     "nodemon": "^3.1.7"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/server/models/Newsletter.js:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | const newsletterSchema = new mongoose.Schema({
 4 |     name: {
 5 |         type: String,
 6 |         required: true,
 7 |         trim: true
 8 |     },
 9 |     email: {
10 |         type: String,
11 |         required: true,
12 |         trim: true,
13 |         match: [/^\S+@\S+\.\S+$/, "Please enter a valid email address"]
14 |     },
15 |     subscribedAt: {
16 |         type: Date,
17 |         default: Date.now
18 |     }
19 | });
20 | 
21 | const Newsletter = mongoose.model("Newsletter", newsletterSchema);
22 | 
23 | export default Newsletter;
24 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react-refresh/only-export-Components': [
16 |       'warn',
17 |       { allowConstantExport: true },
18 |     ],
19 |   },
20 | }
21 | 


--------------------------------------------------------------------------------
/src/store/authSlice.js:
--------------------------------------------------------------------------------
 1 | import {createSlice}  from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |     status: false,
 5 |     userData: null
 6 | }
 7 | 
 8 | 
 9 | const authSlice = createSlice({
10 |     name:"auth",
11 |     initialState,
12 |     reducers:{
13 |         login: (state,action) =>{
14 |             state.status = true,
15 |             state.userData = action.payload.userData;
16 |         },
17 |         logout: (state)=>{
18 |             state.status  = false;
19 |             state.userData = null;
20 |         }
21 |     }
22 | })
23 | 
24 | export const {login,logout} = authSlice.actions;
25 | 
26 | export default authSlice.reducer;
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/.github/workflows/greetings.yml:
--------------------------------------------------------------------------------
 1 | name: Greetings
 2 | 
 3 | on: [pull_request_target, issues]
 4 | 
 5 | jobs:
 6 |   greeting:
 7 |     runs-on: ubuntu-latest
 8 |     permissions:
 9 |       issues: write
10 |       pull-requests: write
11 |     steps:
12 |     - uses: actions/first-interaction@v1
13 |       with:
14 |         repo-token: ${{ secrets.GITHUB_TOKEN }}
15 |         issue-message: "👋 Thank you for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!"
16 |         pr-message: " 🎉 Thank you for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better"
17 | 


--------------------------------------------------------------------------------
/src/componenets/AiChatbot.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | 
 3 | const AiChatbot = () => {
 4 |     useEffect(() => {
 5 |         window.embeddedChatbotConfig = {
 6 |             chatbotId: "SiX5OMRAbSuoa7OrpiZ0b",
 7 |             domain: "www.chatbase.co"
 8 |         };
 9 | 
10 |         const script = document.createElement('script');
11 |         script.src = "https://www.chatbase.co/embed.min.js";
12 |         script.chatbotId = "SiX5OMRAbSuoa7OrpiZ0b";
13 |         script.domain = "www.chatbase.co";
14 |         script.defer = true;
15 | 
16 |         document.body.appendChild(script);
17 | 
18 |         return () => {
19 |             document.body.removeChild(script);
20 |         };
21 |     }, []);
22 | 
23 |     return null;
24 | };
25 | 
26 | export default AiChatbot;
27 | 


--------------------------------------------------------------------------------
/src/config/config.js:
--------------------------------------------------------------------------------
 1 | const conf = {
 2 |     appwriteUrl: String(import.meta.env.VITE_APPWRITE_URL),
 3 |     appwriteProjectId: String(import.meta.env.VITE_APPWRITE_PROJECT_ID),
 4 |     appwriteDatabaseId: String(import.meta.env.VITE_APPWRITE_DATABASE_ID),
 5 |     appwriteCollectionId: String(import.meta.env.VITE_APPWRITE_COLLLECTION_ID),
 6 |     appwriteNewsLetterCollectionId:String(import.meta.env.VITE_APPWRITE_NEWSLETTER_COLLECTION_ID),
 7 |     appwriteBucketId: String(import.meta.env.VITE_APPWRITE_BUCKET_ID),
 8 |     appwriteFunctionId:String(import.meta.env.VITE_APPWRITE_FUNCTION_ID),
 9 |     appwriteTrendinTopicCollectionId:String(import.meta.env.VITE_APPWRITE_TRENDING_TOPIC_COLLECTION_ID),
10 |     appwriteHuggingFaceAcessToken:String(import.meta.env.VITE_HUGGINGFACE_ACCESS_TOKEN)
11 | }
12 | 
13 | export default conf


--------------------------------------------------------------------------------
/src/componenets/index.js:
--------------------------------------------------------------------------------
 1 | import Header from "./Header/Header";
 2 | import Footer from "./Footer/Footer";
 3 | import Container from "./container/Container";
 4 | import Logo from './Logo'
 5 | import LogoutBtn from "./Header/LogoutBtn";
 6 | import Button from "./Button"
 7 | import Input from "./Input";
 8 | import RTE from "./RTE"
 9 | import Signup from "./Signup";
10 | import Login from "./Login"
11 | import PostCard from "./PostCard";
12 | import PostForm from './postForm/PostForm'
13 | import AuthLayout from "./AuthLayout";
14 | import Select from "./Select";
15 | 
16 | 
17 | export {
18 |     Header,
19 |     Footer,
20 |     Container,
21 |     Logo,
22 |     LogoutBtn,
23 |     Button,
24 |     Input,
25 |     RTE,
26 |     Signup,
27 |     Login,
28 |     PostCard,
29 |     PostForm,
30 |     AuthLayout,
31 |     Select
32 | }


--------------------------------------------------------------------------------
/src/api/chatbot.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | export default async function handler(req, res) {
 4 | const { message } = req.body;
 5 | 
 6 | try {
 7 |     const response = await axios.post(
 8 |     'https://api.openai.com/v1/chat/completions',
 9 |     {
10 |         model: 'gpt-4',
11 |         messages: [{ role: 'user', content: message }],
12 |     },
13 |     {
14 |         headers: {
15 |         'Content-Type': 'application/json',
16 |         Authorization: `Bearer ${process.env.VITE_OPENAI_API_KEY}`,
17 |         },
18 |     }
19 |     );
20 | 
21 |     const reply = response.data.choices[0].message.content;
22 |     res.status(200).json({ reply });
23 | } catch (error) {
24 |     console.error('Error communicating with OpenAI:', error);
25 |     res.status(500).json({ error: 'Internal Server Error' });
26 | }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/componenets/Select.jsx:
--------------------------------------------------------------------------------
 1 | import React, {useId} from 'react'
 2 | 
 3 | function Select({
 4 |     label,
 5 |      options, 
 6 |      className = '',
 7 |      ...props
 8 | }, ref) {
 9 | 
10 |     const id  = useId()
11 |   return (
12 |     <div className='w-full'>
13 |       { label && <label htmlFor={id} className=''></label>}
14 |       <select
15 |       {...props}
16 |       ref={ref}
17 |       id={id}
18 |       className={`px-3 py-2 rounded-lg bg-white text-black outline-none focus:bg-gray-50 duration-200 border border-gray-200 w-full ${className}`}
19 |       >
20 |         {options ?.map((option)=>(
21 |             <option key={option} value={option}>
22 |                 {option}
23 |             </option>
24 |         ))}
25 |       </select>
26 |     </div>
27 |   )
28 | }
29 | 
30 | export default React.forwardRef(Select)
31 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "../../lib/utils"
 6 | 
 7 | const labelVariants = cva(
 8 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 9 | )
10 | 
11 | const Label = React.forwardRef<
12 |   React.ElementRef<typeof LabelPrimitive.Root>,
13 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
14 |     VariantProps<typeof labelVariants>
15 | >(({ className, ...props }, ref) => (
16 |   <LabelPrimitive.Root
17 |     ref={ref}
18 |     className={cn(labelVariants(), className)}
19 |     {...props}
20 |   />
21 | ))
22 | Label.displayName = LabelPrimitive.Root.displayName
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/server/controller/postsController.js:
--------------------------------------------------------------------------------
 1 | // postsController.js
 2 | import Post from "../models/postModel.js";
 3 | 
 4 | // Fetch all posts
 5 | export const getPosts = async (req, res) => {
 6 |     try {
 7 |         const posts = await Post.find();
 8 |         res.status(200).json(posts);
 9 |     } catch (error) {
10 |         res.status(500).json({ message: "Error fetching posts", error });
11 |     }
12 | };
13 | 
14 | // Save a new post
15 | export const savePost = async (req, res) => {
16 |     const { title, content, category, date } = req.body;
17 | 
18 |     try {
19 |         const newPost = new Post({ title, content, category, date });
20 |         const savedPost = await newPost.save();
21 |         res.status(201).json(savedPost);
22 |     } catch (error) {
23 |         res.status(500).json({ message: "Error saving post", error });
24 |     }
25 | };
26 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "../../lib/utils";
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/server/models/contact.js:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | const contactSchema = new mongoose.Schema({
 4 |     name: {
 5 |         type: String,
 6 |         required: true,
 7 |         trim: true
 8 |     },
 9 |     phone: {
10 |         type: String,
11 |         required: true,
12 |         trim: true,
13 |         match: [/^\+?[1-9]\d{1,14}$/, "Please enter a valid phone number"]
14 |     },
15 |     email: {
16 |         type: String,
17 |         required: true,
18 |         trim: true,
19 |         match: [/^\S+@\S+\.\S+$/, "Please enter a valid email address"]
20 |     },
21 |     message: {
22 |         type: String,
23 |         required: true,
24 |         trim: true
25 |     },
26 |     createdAt: {
27 |         type: Date,
28 |         default: Date.now
29 |     }
30 | });
31 | 
32 | const Contact = mongoose.model("Contact", contactSchema);
33 | 
34 | export default Contact;
35 | 


--------------------------------------------------------------------------------
/src/componenets/Input.jsx:
--------------------------------------------------------------------------------
 1 | import React, {useId} from 'react'
 2 | 
 3 | const Input = React.forwardRef(function Input({
 4 |     label,
 5 |     type = "text",
 6 |     className = "",
 7 |     ...props
 8 | },ref){
 9 |     const id = useId()
10 |     return (
11 |         <div className='w-full '>
12 |             {label && 
13 |             <label htmlFor={id} className="w-full ">
14 |             <p className="text-[0.875rem] text-richblack-600 mb-1 leading-[1.375rem] flex flex-1">
15 |               {label}
16 |               <sup className="text-pink-400">*</sup>
17 |             </p>
18 |             </label>
19 |             }
20 |             <input 
21 |             type={type}
22 |             className={` px-3 py-2 rounded-lg bg-white text-black outline-none focus:bg-gray-50 duration-200 border border-gray-200 w-full ${className}`}
23 |             ref = {ref}
24 |             {...props}
25 |             id={id}
26 |             />
27 |         </div>
28 |     )
29 | })
30 | 
31 | export default Input
32 | 


--------------------------------------------------------------------------------
/server/app.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import dotenv from "dotenv";
 3 | import connectDB from "./utils/db.js";
 4 | import cors from "cors";
 5 | import newsletterRoutes from "./routes/newsletterRoute.js";
 6 | import feedbackRoutes from "./routes/feedbackRoute.js";
 7 | import contactRoute from "./routes/contactRoute.js";
 8 | import discussion from "./routes/discussionRoutes.js";
 9 | import stories from "./routes/storiesRoutes.js";
10 | 
11 | 
12 | dotenv.config();
13 | const app = express();
14 | connectDB();
15 | 
16 | app.use(express.json());
17 | 
18 | // To avoid cross-origin error
19 | app.use(cors());
20 | 
21 | // Use the imported routes
22 | app.use("/api/v1/newsletter", newsletterRoutes);
23 | app.use("/api/feedback", feedbackRoutes);
24 | app.use("/api/contact", contactRoute);
25 | app.use("/api/discussion", discussion);
26 | app.use("/api/stories", stories);
27 | 
28 | const PORT = process.env.PORT || 5000;
29 | app.listen(PORT, () => {
30 |     console.log(`Server running on port ${PORT}`);
31 | });
32 | 


--------------------------------------------------------------------------------
/src/utils/ai.js:
--------------------------------------------------------------------------------
 1 | import conf from "../config/config";
 2 | import { HfInference } from "@huggingface/inference";
 3 | 
 4 | // Create a new HuggingFace Inference instance
 5 | const Hf = new HfInference(conf.appwriteHuggingFaceAcessToken);
 6 | 
 7 | // IMPORTANT! Set the runtime to edge
 8 | export const runtime = "edge";
 9 | 
10 | // Function to call Hugging Face API for trending topics
11 | export const callAI = async (prompt) => {
12 |     try {
13 |         // Using HfInference for text generation
14 |         const result = await Hf.textGeneration({
15 |             model: "mistralai/Mistral-7B-Instruct-v0.2",
16 |             inputs: prompt,
17 |             parameters: {
18 |                 max_new_tokens: 500,  // Adjust the length as needed
19 |             }
20 |         });
21 | 
22 |         return result.generated_text;  // This will return the generated text from the model
23 |     } catch (error) {
24 |         console.error("Error calling Hugging Face API: ", error);
25 |         throw error;
26 |     }
27 | };
28 | 


--------------------------------------------------------------------------------
/server/controller/newsletterController.js:
--------------------------------------------------------------------------------
 1 | import NewsLetter from "../models/Newsletter.js";
 2 | import { sendMailToSubscriber } from "../sendSuscribedMail.js";
 3 | 
 4 | export async function saveNewsletter(req, res) {
 5 |     try {
 6 |         const { email } = req.body;
 7 | 
 8 |         if (!email) {
 9 |             return res.status(400).json({ message: "All fields are required." });
10 |         }
11 | 
12 |         // Create new contact document
13 |         const newNewsLetter = new NewsLetter({ email });
14 |         sendMailToSubscriber(newNewsLetter)
15 |         await newNewsLetter.save();
16 |         res
17 |             .status(201)
18 |             .json({ message: "Contact form submitted successfully!", newNewsLetter });
19 |     } catch (error) {
20 |         console.error("Error saving contact form:", error);
21 |         res.status(500).json({ message: "Failed to submit contact form.", error });
22 |     }
23 | }
24 | 
25 | export async function getNewsletter(req, res) {
26 |     res.send('hello newsletter')
27 | }
28 | 


--------------------------------------------------------------------------------
/server/controller/feedbackController.js:
--------------------------------------------------------------------------------
 1 | import FeedbackForm from '../models/feedback.js';
 2 | 
 3 | const submitFeedback = async (req, res) => {
 4 |     const {
 5 |         Name,
 6 |         Email,
 7 |         Subject,
 8 |         Date,
 9 |         Device,
10 |         Priority,
11 |         Suggestions,
12 |         Feedback,
13 |         Rating
14 |     } = req.body;
15 | 
16 |     const feedbackData = {
17 |         name: Name,
18 |         email: Email,
19 |         subject: Subject,
20 |         dateOfVisit: Date,
21 |         deviceUsed: Device,
22 |         priorityLevel: Priority,
23 |         suggestions: Suggestions,
24 |         feedback: Feedback,
25 |         rating: Rating,
26 |     };
27 | 
28 |     try {
29 |         const feed = new FeedbackForm(feedbackData);
30 |         await feed.save();
31 |         res.status(200).json({ status: 200, message: 'feedback form submitted successfully.' });
32 |     } catch (error) {
33 |         console.error("Error in submitting feedback form:", error);
34 |         res.status(500).json({ error: "Feedback form not submitted successfully." });
35 |     }
36 | };
37 | 
38 | export { submitFeedback };
39 | 


--------------------------------------------------------------------------------
/src/pages/Error404.jsx:
--------------------------------------------------------------------------------
 1 | /** @format */
 2 | 
 3 | import React from "react";
 4 | import { Link } from "react-router-dom";
 5 | 
 6 | const Error404 = () => {
 7 | 	return (
 8 | 		<section className="bg-white">
 9 | 			<div className="container" style={{ display: "flex", justifyContent: "center", height: "100vh", alignItems: "center", width: "100%" }}>
10 | 				<div className="text-center">
11 | 					<div
12 | 						className="bg-image"
13 | 						style={{
14 | 							height: "400px",
15 | 							backgroundPosition: "center",
16 | 							backgroundImage:
17 | 								"url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif)",
18 | 						}}>
19 | 					</div>
20 | 					<div className="mt-3">
21 | 						<h3 className="display-6 mb-1 fw-semibold">
22 | 							Looks like you're lost
23 | 						</h3>
24 | 
25 | 						<p className="fw-semibold">
26 | 							The page you are looking for is not available!
27 | 						</p>
28 | 
29 | 						<Link
30 | 							to="/"
31 | 							className="btn btn-success btn-lg my-4">
32 | 							Home
33 | 						</Link>
34 | 					</div>
35 | 				</div>
36 | 			</div>
37 | 		</section>
38 | 	);
39 | };
40 | 
41 | export default Error404;
42 | 


--------------------------------------------------------------------------------
/server/controller/contactController.js:
--------------------------------------------------------------------------------
 1 | import Contact from "../models/contact.js";
 2 | import { sendMailToAdmin } from "../sendContactDetailsToAdmin.js";
 3 | 
 4 | export async function saveContact(req, resp) {
 5 |     try {
 6 |         // Destructuring to get the fields from the request body
 7 |         const { name, phone, email, message } = req.body;
 8 | 
 9 |         // Check if all fields are provided
10 |         if (!name || !phone || !email || !message) {
11 |             return resp.status(400).json({ message: "All fields are required." });
12 |         }
13 | 
14 |         // Create new contact document
15 |         const newContact = new Contact({ name, phone, email, message });
16 | 
17 |         // Save contact form data to the database
18 |         await newContact.save();
19 | 
20 |         sendMailToAdmin(newContact)
21 | 
22 |         // Respond with success message
23 |         resp
24 |             .status(201)
25 |             .json({ message: "Contact form submitted successfully!", newContact });
26 |     } catch (error) {
27 |         console.error("Error saving contact form:", error);
28 |         resp.status(500).json({ message: "Failed to submit contact form.", error });
29 |     }
30 | }
31 | 
32 | export async function getContact(req, resp) {
33 |     resp.send('hello contact');
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "../../lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/src/components/ui/Chatbot.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import axios from 'axios';
 3 | 
 4 | const Chatbot = () => {
 5 | const [messages, setMessages] = useState([]);
 6 | const [input, setInput] = useState('');
 7 | 
 8 | const handleSend = async () => {
 9 |     if (!input) return;
10 | 
11 |     const userMessage = { role: 'user', content: input };
12 |     setMessages([...messages, userMessage]);
13 | 
14 |     try {
15 |     const response = await axios.post('/api/chatbot', { message: input });
16 |     const botMessage = { role: 'bot', content: response.data.reply };
17 |     setMessages([...messages, userMessage, botMessage]);
18 |     } catch (error) {
19 |     console.error('Error fetching chatbot response:', error);
20 |     }
21 | 
22 |     setInput('');
23 | };
24 | 
25 | return (
26 |     <div className="chatbot">
27 |     <div className="chat-window">
28 |         {messages.map((msg, index) => (
29 |         <div key={index} className={`message ${msg.role}`}>
30 |             {msg.content}
31 |         </div>
32 |         ))}
33 |     </div>
34 |     <input
35 |         type="text"
36 |         value={input}
37 |         onChange={(e) => setInput(e.target.value)}
38 |         placeholder="Ask me anything..."
39 |     />
40 |     <button onClick={handleSend}>Send</button>
41 |     </div>
42 | );
43 | };
44 | 
45 | export default Chatbot;
46 | 


--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Popover = PopoverPrimitive.Root
 7 | 
 8 | const PopoverTrigger = PopoverPrimitive.Trigger
 9 | 
10 | const PopoverAnchor = PopoverPrimitive.Anchor
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ))
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
30 | 
31 | export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
32 | 


--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import service from "../appwrite/configAppwrite";
 3 | import { Container, PostCard } from "../componenets";
 4 | import Hero from "../componenets/Hero/Hero";
 5 | 
 6 | function Home() {
 7 |   const [posts, setPosts] = useState([]);
 8 | 
 9 |   useEffect(() => {
10 |     service.getPosts().then((posts) => {
11 |       if (posts) {
12 |         setPosts(posts.documents);
13 |       }
14 |     });
15 |   }, []);
16 | 
17 |   if (posts.length === 0) {
18 |     return (
19 |       <div className="w-full text-center">
20 |         <Container>
21 |           <Hero />
22 |           {/* <div className="flex flex-wrap">
23 |                         <div className="p-2 w-full">
24 |                             <h1 className="text-2xl font-bold hover:text-gray-500">
25 |                                 Login to read posts
26 |                             </h1>
27 |                         </div>
28 |                     </div> */}
29 |         </Container>
30 |       </div>
31 |     );
32 |   }
33 |   return (
34 |     <div className="w-full py-8">
35 |       <Container>
36 |         <div className="flex flex-wrap">
37 |           {posts.map((post) => (
38 |             <div key={post.$id} className="p-2 w-1/4">
39 |               <PostCard {...post} />
40 |             </div>
41 |           ))}
42 |         </div>
43 |       </Container>
44 |     </div>
45 |   );
46 | }
47 | 
48 | export default Home;
49 | 


--------------------------------------------------------------------------------
/server/models/feedback.js:
--------------------------------------------------------------------------------
 1 | import mongoose from 'mongoose';
 2 | 
 3 | const feedbackSchema = new mongoose.Schema({
 4 |     name: {
 5 |         type: String,
 6 |         required: true,
 7 |         trim: true,
 8 |     },
 9 |     email: {
10 |         type: String,
11 |         required: true,
12 |         trim: true,
13 |         match: [/\S+@\S+\.\S+/, 'Email is invalid'],
14 |     },
15 |     subject: {
16 |         type: String,
17 |         required: true,
18 |         trim: true,
19 |     },
20 |     dateOfVisit: {
21 |         type: Date,
22 |         required: true,
23 |     },
24 |     deviceUsed: {
25 |         type: String,
26 |         required: true,
27 |         enum: ['Desktop', 'Mobile', 'Tablet'],
28 |     },
29 |     priorityLevel: {
30 |         type: String,
31 |         required: true,
32 |         enum: ['Low', 'Medium', 'High'],
33 |     },
34 |     suggestions: {
35 |         type: String,
36 |         trim: true,
37 |         required: true,
38 |         maxlength: 500,
39 |     },
40 |     feedback: {
41 |         type: String,
42 |         trim: true,
43 |         required: true,
44 |         maxlength: 1000,
45 |     },
46 |     rating: {
47 |         type: Number,
48 |         min: 1,
49 |         max: 10,
50 |         required: true,
51 |     },
52 |     createdAt: {
53 |         type: Date,
54 |         default: Date.now,
55 |     }
56 | });
57 | 
58 | const Feedback = mongoose.model('Feedback', feedbackSchema);
59 | 
60 | export default Feedback;
61 | 


--------------------------------------------------------------------------------
/src/componenets/TrendingTopicHomePage.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from 'react-router-dom'; // Import Link from react-router-dom
 2 | import Button from './Button'; // Button component for styling
 3 | import SparkelIcons from './SparkelIcons'; // Sparkle icon component
 4 | 
 5 | const TrendingTopicHomePage = () => {
 6 |   return (
 7 |     <>
 8 |       
 9 |           <div class="relative overflow-hidden border-b w-full bg-indigo-600 mb-2">
10 |   <div class="px-6 py-8 sm:px-6 sm:py-20">
11 |     <div class="max-w-4xl mx-auto text-center">
12 |       <h2 class="text-2xl font-semibold text-black sm:text-4xl dark:text-white">
13 |         ✨ Discover Inspiring Ideas for Your Next Blog Post ✨
14 |       </h2>
15 |       <p class="max-w-xl mx-auto mt-3 text-gray-700 sm:mt-6 sm:text-lg dark:text-gray-300">
16 |         Uncover unique topics and spark creativity for your blog with these hand-picked ideas.
17 |       </p>
18 | 
19 |         {/* Button to navigate to /gen-topic */}
20 |         <div className="flex justify-center mt-8">
21 |           <Link to="/gen-topic">
22 |             <Button className="bg-white text-blue-700 py-3 px-7 rounded-lg w-fit flex items-center hover:bg-blue-300 hover:text-white  transition-all duration-300">
23 |               <span>Generate Trending Topics</span>
24 |               <SparkelIcons height={20} className="ml-3" />
25 |             </Button>
26 |           </Link>
27 |         </div>
28 |       </div>
29 |     </div> 
30 |     </div>
31 | 
32 | 
33 |     </>
34 |     
35 |   );
36 | };
37 | 
38 | export default TrendingTopicHomePage;
39 | 


--------------------------------------------------------------------------------
/server/controller/discussionController.js:
--------------------------------------------------------------------------------
 1 | import Question from '../models/discussion.js';
 2 | 
 3 | export const getQuestions = async (req, res) => {
 4 |     try {
 5 |         const questions = await Question.find();
 6 |         res.json(questions);
 7 |     } catch (error) {
 8 |         res.status(500).json({ error: 'Failed to retrieve questions' });
 9 |     }
10 | };
11 | 
12 | // Save a new question to MongoDB
13 | export const saveQuestion = async (req, res) => {
14 |     try {
15 |         const { content } = req.body;
16 | 
17 |         const newQuestion = new Question({
18 |             content,
19 |         });
20 | 
21 |         await newQuestion.save();
22 | 
23 |         res.status(201).json(newQuestion);
24 |     } catch (error) {
25 |         res.status(500).json({ error: 'Failed to save question' });
26 |     }
27 | };
28 | 
29 | export const addAnswerToQuestion = async (req, res) => {
30 |     try {
31 |         const questionId = req.params.id;
32 |         const { answer } = req.body;
33 |         console.log(questionId)
34 |         console.log(answer)
35 | 
36 |         const updatedQuestion = await Question.findByIdAndUpdate(
37 |             questionId,
38 |             { answered: true, answer },
39 |             { new: true }
40 |         );
41 | 
42 |         if (updatedQuestion) {
43 |             res.json(updatedQuestion);
44 |         } else {
45 |             res.status(404).json({ error: 'Question not found' });
46 |         }
47 |     } catch (error) {
48 |         res.status(500).json({ error: 'Failed to update question' });
49 |     }
50 | };
51 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import { useDispatch } from 'react-redux'
 3 | import './App.css'
 4 | import authService from "./appwrite/auth"
 5 | import { login, logout } from "./store/authSlice"
 6 | import { Footer, Header } from './componenets'
 7 | import { Outlet, useLocation } from 'react-router-dom'
 8 | import BackToTopButton from './components/ui/BackToTopButton'
 9 | import Hero from './componenets/Hero/Hero'
10 | import AiChatbot from './componenets/AiChatbot'
11 | 
12 | function App() {
13 |   const [loading, setLoading] = useState(true)
14 |   const dispatch = useDispatch()
15 |   const location = useLocation();
16 | 
17 |   useEffect(() => {
18 |     authService.getCurrentUser()
19 |       .then((userData) => {
20 |         if (userData) {
21 |           dispatch(login({ userData }))
22 |         } else {
23 |           dispatch(logout())
24 |         }
25 |       })
26 |       .finally(() => setLoading(false))
27 |   }, [])
28 | 
29 |   return !loading ? (
30 |     <div className='custom-theme min-h-screen flex flex-wrap content-between '>
31 |       <div className='w-full block'>
32 |         <BackToTopButton />
33 |         <div className="App">
34 |           {/* Other components */}
35 |           <AiChatbot />
36 |         </div>
37 |         {/* <Chatbot /> */}
38 |         <Header />
39 |         <main>
40 |           {location.pathname === "/" ? (
41 |             <Hero />
42 |           ) : (
43 |             <Outlet />
44 |           )}
45 |         </main>
46 |         <Footer />
47 |       </div>
48 |     </div>
49 |   ) : null;
50 | }
51 | 
52 | export default App;


--------------------------------------------------------------------------------
/server/generateFromAi.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, request, jsonify
 2 | from flask_cors import CORS
 3 | import google.generativeai as palm
 4 | import os
 5 | from dotenv import load_dotenv
 6 | 
 7 | app = Flask(__name__)
 8 | CORS(app)  # Enable CORS for all routes
 9 | 
10 | # Load API key from .env file
11 | load_dotenv()
12 | palm_api_key = os.getenv('PALM_API_KEY')  # Get your API key from environment variable
13 | if not palm_api_key:
14 |     raise ValueError("API key is missing. Please set your API key in the environment variables.")
15 | palm.configure(api_key=palm_api_key)
16 | 
17 | @app.route('/generate_trending_titles', methods=['GET'])
18 | def generate_trending_titles():
19 |     try:
20 |         prompt = """
21 |         You are a content generator specialized in creating catchy and engaging blog titles. 
22 |         Please generate 20 trending blog titles that would appeal to a broad audience in the current time. 
23 |         The titles should be innovative, popular, and attention-grabbing.
24 |         """
25 |         model = palm.GenerativeModel('gemini-pro')
26 |         response = model.generate_content(prompt)
27 |         blog_titles = response.text.strip().split("\n")
28 |         return jsonify({"trending_titles": blog_titles[:10]}), 200
29 |     except Exception as e:
30 |         print("Error:", str(e))
31 |         return jsonify({"error": "An error occurred while generating the blog titles."}), 500
32 |  
33 | @app.route('/analyze', methods=['GET'])
34 | def health_check():
35 |     return jsonify({"message": "Server running!"}), 200
36 | 
37 | if __name__ == "__main__":
38 |     app.run(debug=True, port=8000)
39 | 


--------------------------------------------------------------------------------
/.github/workflows/update-readme.yml:
--------------------------------------------------------------------------------
 1 | name: Update Repository structure
 2 | 
 3 | permissions:
 4 |   contents: write
 5 |   pull-requests: write
 6 | 
 7 | on:
 8 |   schedule:
 9 |     - cron: '0 * * * *'  # Run every hour
10 |   workflow_dispatch:  # Allow manual triggering
11 |   push:
12 |     branches:
13 |       - main
14 |       - master
15 | 
16 | jobs:
17 |   detect-and-update-structure:
18 |     runs-on: ubuntu-latest
19 |     steps:
20 |       - name: Checkout repository
21 |         uses: actions/checkout@v2
22 | 
23 |       - name: Set up Python
24 |         uses: actions/setup-python@v2
25 |         with:
26 |           python-version: 3.12
27 | 
28 |       - name: Install dependencies
29 |         run: |
30 |           python -m pip install --upgrade pip
31 |           pip install PyGithub
32 | 
33 |       - name: Run update script
34 |         env:
35 |           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36 |         run: python .github/scripts/update_structure.py
37 | 
38 |       - name: Commit changes
39 |         run: |
40 |           git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
41 |           git config user.name "github-actions[bot]"
42 |           git checkout -b update-structure
43 |           git add .
44 |           git commit -m "Update repo structure"
45 | 
46 |       - name: Push changes and create PR
47 |         env:
48 |           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
49 |         run: |
50 |           git push origin update-structure
51 |           curl -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
52 |                -d '{"title":"Update repo structure","head":"update-structure","base":"main"}' \
53 |                https://api.github.com/repos/${{ github.repository }}/pulls
54 | 


--------------------------------------------------------------------------------
/src/componenets/AuthLayout.jsx:
--------------------------------------------------------------------------------
 1 | // import React from 'react'
 2 | // import { useEffect, useState } from 'react'
 3 | // import { useSelector } from 'react-redux'
 4 | // import { useNavigate } from 'react-router-dom'
 5 | 
 6 | // export default function Protected({children, authentication = true}) {
 7 | 
 8 | //     const navigate = useNavigate()
 9 | //     const [loader, setLoader] = useState(true)
10 | //     const authStatus = useSelector(state=> state.auth.status)
11 | 
12 | //     useEffect(()=>{
13 | //         // TODO : make it more easy to understand
14 | //         // if(authStatus === true){
15 | //         //     navigate("/")
16 | //         // }else if(authStatus === false){
17 | //         //     navigate('/login')
18 | //         // }
19 | 
20 | //         if(authentication && authStatus !== authentication){
21 | //             navigate("/login")
22 | //         }else if(!authentication && authStatus !== authentication){
23 | //             navigate('/')
24 | //         }
25 | 
26 | //         setLoader(false)
27 | //     } , [authStatus, navigate,authentication])
28 | 
29 | //   return  loader ? <h1>Loading...</h1> : <>{children}</>
30 | // }
31 | 
32 | 
33 | import React, { useEffect, useState } from 'react';
34 | import { useSelector } from 'react-redux';
35 | import { useNavigate } from 'react-router-dom';
36 | 
37 | export default function Protected({ children, authentication = true }) {
38 |   const navigate = useNavigate();
39 |   const [loader, setLoader] = useState(true);
40 |   const authStatus = useSelector((state) => state.auth.status);
41 | 
42 |   useEffect(() => {
43 |     if (authentication && authStatus !== true) {
44 |       navigate("/login");
45 |     } else if (!authentication && authStatus === true) {
46 |       navigate('/');
47 |     }
48 |     setLoader(false);
49 |   }, [authStatus, navigate, authentication]);
50 | 
51 |   return loader ? <h1>Loading...</h1> : <>{children}</>;
52 | }


--------------------------------------------------------------------------------
/src/componenets/Header/LogoutBtn.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { useDispatch } from "react-redux";
 3 | import authService from "../../appwrite/auth";
 4 | import { logout } from "../../store/authSlice";
 5 | 
 6 | function LogoutBtn() {
 7 |   const [showModal, setShowModal] = useState(false);
 8 |   const dispatch = useDispatch();
 9 | 
10 |   const logoutHandler = () => {
11 |     authService.logout().then(() => {
12 |       dispatch(logout());
13 |     });
14 |     setShowModal(false); // Close modal after logout
15 |   };
16 | 
17 |   return (
18 |     <>
19 |       {/* Logout Button */}
20 |       <button
21 |         onClick={() => setShowModal(true)} // Show modal when button is clicked
22 |       >
23 |         Logout
24 |       </button>
25 | 
26 |       {/* Confirmation Modal */}
27 |       {showModal && (
28 |         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
29 |           <div className="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
30 |             <h2 className="text-lg font-bold mb-4 text-center">
31 |               Are you sure you want to log out?
32 |             </h2>
33 |             <div className="flex justify-around">
34 |               {/* Cancel Button */}
35 |               <button
36 |                 className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
37 |                 onClick={() => setShowModal(false)}
38 |               >
39 |                 Cancel
40 |               </button>
41 | 
42 |               {/* Confirm Logout Button */}
43 |               <button
44 |                 className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
45 |                 onClick={logoutHandler}
46 |               >
47 |                 Confirm Logout
48 |               </button>
49 |             </div>
50 |           </div>
51 |         </div>
52 |       )}
53 |     </>
54 |   );
55 | }
56 | 
57 | export default LogoutBtn;
58 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | @layer base {
 5 |   :root {
 6 |     /* --background: 0 0% 100%; */
 7 |     /* --foreground: 0 0% 3.9%; */
 8 |     --card: 0 0% 100%;
 9 |     --card-foreground: 0 0% 3.9%;
10 |     --popover: 0 0% 100%;
11 |     --popover-foreground: 0 0% 3.9%;
12 |     /* --primary: 0 0% 9%; */
13 |     /* --primary-foreground: 0 0% 98%; */
14 |     /* --secondary: 0 0% 96.1%; */
15 |     --secondary-foreground: 0 0% 9%;
16 |     --muted: 0 0% 96.1%;
17 |     --muted-foreground: 0 0% 45.1%;
18 |     --accent: 0 0% 96.1%;
19 |     --accent-foreground: 0 0% 9%;
20 |     --destructive: 0 84.2% 60.2%;
21 |     --destructive-foreground: 0 0% 98%;
22 |     --border: 0 0% 89.8%;
23 |     --input: 0 0% 89.8%;
24 |     --ring: 0 0% 3.9%;
25 |     --chart-1: 12 76% 61%;
26 |     --chart-2: 173 58% 39%;
27 |     --chart-3: 197 37% 24%;
28 |     --chart-4: 43 74% 66%;
29 |     --chart-5: 27 87% 67%;
30 |     --radius: 0.5rem}
31 |   .dark {
32 |     /* --background: 0 0% 3.9%;
33 |     --foreground: 0 0% 98%; */
34 |     --card: 0 0% 3.9%;
35 |     --card-foreground: 0 0% 98%;
36 |     --popover: 0 0% 3.9%;
37 |     --popover-foreground: 0 0% 98%;
38 |     --primary: 0 0% 98%;
39 |     --primary-foreground: 0 0% 9%;
40 |     --secondary: 0 0% 14.9%;
41 |     --secondary-foreground: 0 0% 98%;
42 |     --muted: 0 0% 14.9%;
43 |     --muted-foreground: 0 0% 63.9%;
44 |     --accent: 0 0% 14.9%;
45 |     --accent-foreground: 0 0% 98%;
46 |     --destructive: 0 62.8% 30.6%;
47 |     --destructive-foreground: 0 0% 98%;
48 |     --border: 0 0% 14.9%;
49 |     --input: 0 0% 14.9%;
50 |     --ring: 0 0% 83.1%;
51 |     --chart-1: 220 70% 50%;
52 |     --chart-2: 160 60% 45%;
53 |     --chart-3: 30 80% 55%;
54 |     --chart-4: 280 65% 60%;
55 |     --chart-5: 340 75% 55%}
56 | }
57 | @layer base {
58 |   * {
59 |     @apply border-border;
60 |   }
61 |   body {
62 |     @apply bg-background text-foreground;
63 |   }
64 | }


--------------------------------------------------------------------------------
/public/service-worker.js:
--------------------------------------------------------------------------------
 1 | const CACHE_NAME = 'offline-v1';
 2 | const OFFLINE_URL = '/offline.html';
 3 | 
 4 | self.addEventListener('install', (event) => {
 5 |     event.waitUntil(
 6 |         (async () => {
 7 |             const cache = await caches.open(CACHE_NAME);
 8 |             // Cache the offline page
 9 |             await cache.add(new Request(OFFLINE_URL, { cache: 'reload' }));
10 |         })()
11 |     );
12 |     // Force the waiting service worker to become the active service worker
13 |     self.skipWaiting();
14 | });
15 | 
16 | self.addEventListener('activate', (event) => {
17 |     event.waitUntil(
18 |         (async () => {
19 |             // Enable navigation preload if available
20 |             if ('navigationPreload' in self.registration) {
21 |                 await self.registration.navigationPreload.enable();
22 |             }
23 |         })()
24 |     );
25 |     // Tell the active service worker to take control of the page immediately
26 |     self.clients.claim();
27 | });
28 | 
29 | self.addEventListener('fetch', (event) => {
30 |     if (event.request.mode === 'navigate') {
31 |         event.respondWith(
32 |             (async () => {
33 |                 try {
34 |                     // First, try to use the navigation preload response if available
35 |                     const preloadResponse = await event.preloadResponse;
36 |                     if (preloadResponse) {
37 |                         return preloadResponse;
38 |                     }
39 | 
40 |                     // Try to fetch the request from the network
41 |                     return await fetch(event.request);
42 |                 } catch (error) {
43 |                     // If fetch fails (offline), get the offline page from cache
44 |                     const cache = await caches.open(CACHE_NAME);
45 |                     const cachedResponse = await cache.match(OFFLINE_URL);
46 |                     return cachedResponse;
47 |                 }
48 |             })()
49 |         );
50 |     }
51 | });


--------------------------------------------------------------------------------
/src/componenets/RTE.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Editor } from '@tinymce/tinymce-react'
 3 | import { Controller }  from 'react-hook-form'
 4 | 
 5 | export default function RTE({name , control, label , defaultValue = ""}) {
 6 |   return (
 7 |     <div className='w-full '>
 8 |         { label && < label className='inline-block mb-1 pl-1 '>{label}</label>}
 9 | 
10 |         <Controller 
11 |         name={name || "content"}
12 |         control = {control}
13 |         render = {({field : {onChange}})=>(
14 |             <Editor
15 |             apiKey='k062y3t723co6kcy1ainede6sj4k0yilmv8ftbxfoffsh70v'
16 |             initialValue={defaultValue}
17 |             init={{
18 |                 initialValue: defaultValue,
19 |                 height: 500,
20 |                 menubar: true,
21 |                 plugins: [
22 |                     "image",
23 |                     "advlist",
24 |                     "autolink",
25 |                     "lists",
26 |                     "link",
27 |                     "image",
28 |                     "charmap",
29 |                     "preview",
30 |                     "anchor",
31 |                     "searchreplace",
32 |                     "visualblocks",
33 |                     "code",
34 |                     "fullscreen",
35 |                     "insertdatetime",
36 |                     "media",
37 |                     "table",
38 |                     "code",
39 |                     "help",
40 |                     "wordcount",
41 |                     "anchor",
42 |                 ],
43 |                 toolbar:
44 |                 "undo redo | blocks | image | bold italic forecolor | alignleft aligncenter bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |removeformat | help",
45 |                 content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
46 |                 
47 |             }}
48 |             onEditorChange={onChange}
49 |         />
50 |         )}
51 |         
52 |         />
53 |     </div>
54 |   )
55 | }
56 | 
57 | 
58 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | // {
 2 | //     "compilerOptions": {
 3 | //       "target": "es5", // For broader browser compatibility
 4 | //       "module": "commonjs", // For Node.js compatibility
 5 | //       "outDir": "./dist", // Output directory for compiled JavaScript
 6 | //       "esModuleInterop": true, // Interoperability between CommonJS and ES modules
 7 | //       "forceConsistentCasingInFileNames": true, // Consistent casing in file names
 8 | //       "strict": true, // Strict type checking
 9 | //       "skipLibCheck": true, // Skip type checking for library declarations
10 | //       "resolveJsonModule": true, // Resolve JSON modules
11 | //       "baseUrl": ".", // Base URL for imports (adjust if needed)
12 | //       "paths": {
13 | //         "@/*": ["./src/*"], // Alias for components and utils within src directory
14 | //         "~/*": ["./lib/*"] // Optional alias for a custom "lib" directory
15 | //       }
16 | //     },
17 | //     "include": ["./src/**/*.{ts,tsx}"], // Include TypeScript files within the "src" directory
18 | //     "exclude": ["node_modules", "dist"] // Exclude unnecessary directories
19 | //   }
20 | 
21 | {
22 |   "compilerOptions": {
23 |     "target": "esnext", // Use es6 or esnext for modern environments
24 |     "module": "commonjs", // For Node.js compatibility
25 |     "outDir": "./dist", // Output directory for compiled JavaScript
26 |     "esModuleInterop": true, // Interoperability between CommonJS and ES modules
27 |     "forceConsistentCasingInFileNames": true, // Consistent casing in file names
28 |     "strict": true, // Strict type checking
29 |     "skipLibCheck": true, // Skip type checking for library declarations
30 |     "resolveJsonModule": true, // Resolve JSON modules
31 |     "baseUrl": ".", // Base URL for imports
32 |     "paths": {
33 |       "@/*": ["./src/*"], // Alias for components and utils within src directory
34 |       "~/*": ["./lib/*"] // Optional alias for a custom "lib" directory
35 |     }
36 |   },
37 |   "include": ["./src/**/*.{ts,tsx}"], // Include TypeScript files within the "src" directory
38 |   "exclude": ["node_modules", "dist"] // Exclude unnecessary directories
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "../../lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/src/componenets/ForgotPasswordModal.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { Button, Input } from "./index";
 3 | import authService from "../appwrite/auth";
 4 | import { useForm } from "react-hook-form";
 5 | 
 6 | function ForgotPasswordModal({ isOpen, onClose }) {
 7 |   const { register, handleSubmit } = useForm();
 8 |   const [error, setError] = useState("");
 9 |   const [success, setSuccess] = useState("");
10 | 
11 |   const handleForgotPassword = async (data) => {
12 |     setError("");
13 |     setSuccess("");
14 |     try {
15 |       await authService.resetPassword(data.email);
16 |       setSuccess("Password reset link sent to your email");
17 |     } catch (error) {
18 |       setError(error.message);
19 |     }
20 |   };
21 | 
22 |   if (!isOpen) return null;
23 | 
24 |   return (
25 |     <div className='fixed inset-0 flex items-center justify-center bg-black bg-opacity-50'>
26 |       <div className='bg-white p-6 rounded-lg shadow-lg w-full max-w-md'>
27 |         <h2 className='text-2xl font-bold mb-4'>Forgot Password</h2>
28 |         {error && <p className='text-red-600 mb-4'>{error}</p>}
29 |         {success && <p className='text-green-600 mb-4'>{success}</p>}
30 |         <form onSubmit={handleSubmit(handleForgotPassword)}>
31 |           <div className='space-y-4'>
32 |             <Input
33 |               label='Email: '
34 |               placeholder='Enter your email'
35 |               type='email'
36 |               {...register("email", {
37 |                 required: true,
38 |                 validate: {
39 |                   matchPatern: (value) =>
40 |                     /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
41 |                     "Email address must be a valid address",
42 |                 },
43 |               })}
44 |             />
45 |             <Button type='submit' className='w-full'>
46 |               Send Reset Link
47 |             </Button>
48 |           </div>
49 |         </form>
50 |         <Button onClick={onClose} className='mt-4 w-full'>
51 |           Close
52 |         </Button>
53 |       </div>
54 |     </div>
55 |   );
56 | }
57 | 
58 | export default ForgotPasswordModal;
59 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "../../lib/utils";
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/src/appwrite/auth.js:
--------------------------------------------------------------------------------
 1 | import conf from '../config/config.js';
 2 | import { Client, Account, ID } from "appwrite";
 3 | 
 4 | 
 5 | export class AuthService {
 6 |     client = new Client();
 7 |     account;
 8 | 
 9 |     constructor() {
10 |         this.client
11 |             .setEndpoint(conf.appwriteUrl)
12 |             .setProject(conf.appwriteProjectId);
13 |         this.account = new Account(this.client);
14 | 
15 |     }
16 | 
17 |  
18 |     async createAccount({email, password, name}) {
19 |         console.log(conf)
20 |         console.log(conf.appwriteUrl)
21 |          try {
22 |             const userAccount = await this.account.create(ID.unique(), email, password, name);
23 |             if (userAccount) {
24 |                 // call another method
25 |                 return this.login({ email, password });
26 |             } else {
27 |                 console.log("ban gaya")
28 |                 return userAccount;
29 |             }
30 |         } catch (error) {
31 |             throw error;
32 |         }
33 |     }
34 | 
35 |     async login({ email, password }) {
36 |         try {
37 |             return await this.account.createEmailPasswordSession(email, password);
38 |         } catch (error) {
39 |             throw error;
40 |         }
41 |     }
42 | 
43 |     async updateUserProfile(data) {
44 |         return await this.account.updatePrefs(data); // Modify this based on Appwrite's user structure
45 |     }
46 | 
47 |     async getUserProfile(){
48 |         return await this.account.getPrefs();
49 |     }
50 | 
51 |     async updateName(data){
52 |         return await this.account.updateName(data);
53 |     };
54 | 
55 |     async getCurrentUser() {
56 |         try {
57 |             return await this.account.get();
58 |         } catch (error) {
59 |             console.log("Appwrite serive :: getCurrentUser :: error", error);
60 |         }
61 | 
62 |         return null;
63 |     }
64 | 
65 |     async logout() {
66 | 
67 |         try {
68 |             await this.account.deleteSessions();
69 |         } catch (error) {
70 |             console.log("Appwrite serive :: logout :: error", error);
71 |         }
72 |     }
73 | }
74 | 
75 | const authService = new AuthService();
76 | 
77 | export default authService
78 | 
79 | 


--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 3 | import { ChevronDownIcon } from "@radix-ui/react-icons"
 4 | 
 5 | import { cn } from "../../lib/utils";
 6 | 
 7 | const Accordion = AccordionPrimitive.Root
 8 | 
 9 | const AccordionItem = React.forwardRef<
10 |   React.ElementRef<typeof AccordionPrimitive.Item>,
11 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
12 | >(({ className, ...props }, ref) => (
13 |   <AccordionPrimitive.Item
14 |     ref={ref}
15 |     className={cn("border-b", className)}
16 |     {...props}
17 |   />
18 | ))
19 | AccordionItem.displayName = "AccordionItem"
20 | 
21 | const AccordionTrigger = React.forwardRef<
22 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
23 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
24 | >(({ className, children, ...props }, ref) => (
25 |   <AccordionPrimitive.Header className="flex">
26 |     <AccordionPrimitive.Trigger
27 |       ref={ref}
28 |       className={cn(
29 |         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
30 |         className
31 |       )}
32 |       {...props}
33 |     >
34 |       {children}
35 |       <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
36 |     </AccordionPrimitive.Trigger>
37 |   </AccordionPrimitive.Header>
38 | ))
39 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
40 | 
41 | const AccordionContent = React.forwardRef<
42 |   React.ElementRef<typeof AccordionPrimitive.Content>,
43 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
44 | >(({ className, children, ...props }, ref) => (
45 |   <AccordionPrimitive.Content
46 |     ref={ref}
47 |     className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
48 |     {...props}
49 |   >
50 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
51 |   </AccordionPrimitive.Content>
52 | ))
53 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
54 | 
55 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
56 | 


--------------------------------------------------------------------------------
/src/components/ui/BackToTopButton.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | 
 3 | 
 4 | const BackToTopButton: React.FC = () => {
 5 |     const [isVisible, setIsVisible] = useState<boolean>(false);
 6 |     const [shouldRender, setShouldRender] = useState<boolean>(false); // To control button rendering
 7 | 
 8 |     // Show button when the user scrolls down 300px
 9 |     const toggleVisibility = () => {
10 |         if (window.scrollY > 300) {
11 |             setShouldRender(true); // Start rendering the button
12 |             setIsVisible(true); // Make it visible (for fade-in)
13 |         } else {
14 |             setIsVisible(false); // Hide button (fade-out)
15 |         }
16 |     };
17 | 
18 |     // Scroll to the top of the page
19 |     const scrollToTop = () => {
20 |         window.scrollTo({
21 |             top: 0,
22 |             behavior: 'smooth', // Smooth scroll to the top
23 |         });
24 |     };
25 | 
26 |     useEffect(() => {
27 |         window.addEventListener('scroll', toggleVisibility);
28 | 
29 |         // Cleanup event listener on component unmount
30 |         return () => {
31 |             window.removeEventListener('scroll', toggleVisibility);
32 |         };
33 |     }, []);
34 | 
35 |     // Remove the button from the DOM after fade-out animation ends
36 |     useEffect(() => {
37 |         if (!isVisible) {
38 |             const timeout = setTimeout(() => setShouldRender(false), 500); // Match the animation duration
39 |             return () => clearTimeout(timeout); // Clean up the timeout
40 |         }
41 |     }, [isVisible]);
42 | 
43 |     return (
44 |         <>
45 |             {shouldRender && (
46 |                 <button
47 |                     onClick={scrollToTop}
48 |                     className={`z-50 fixed bottom-12 right-8 text-white font-bold px-5 py-3 rounded-md shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 ${isVisible ? 'animate-fadeInBounce' : 'animate-fadeOutBounce'}`}
49 |                     style={{
50 |                         background: "linear-gradient(135deg, #2c3e50, #34495e)", // dark gradient
51 |                         boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)", // slightly darker shadow for depth
52 |                         right: '6rem',
53 |                     }}
54 |                 >
55 |                     ↑
56 |                 </button>
57 |             )}
58 |         </>
59 |     );
60 | };
61 | 
62 | export default BackToTopButton;


--------------------------------------------------------------------------------
/server/sendSuscribedMail.js:
--------------------------------------------------------------------------------
 1 | import nodemailer from 'nodemailer';
 2 | import dotenv from 'dotenv';
 3 | dotenv.config();
 4 | 
 5 | const sendMailToSubscriber = (userdata) => {
 6 |     const transporter = nodemailer.createTransport({
 7 |         service: "gmail",
 8 |         host: "smtp.gmail.com",
 9 |         port: 587,
10 |         secure: false,
11 |         auth: {
12 |             user: process.env.EMAIL_ID,
13 |             pass: process.env.PASS_KEY,
14 |         },
15 |     });
16 | 
17 |     async function main() {
18 |         await transporter.sendMail({
19 |             from: {
20 |                 name: "MegaBlog",
21 |                 address: process.env.EMAIL_ID,
22 |             },
23 |             to: userdata.email,
24 |             subject: "Welcome to MegaBlog! 🎉 You've successfully subscribed",
25 |             text: "Thank you for subscribing to MegaBlog!",
26 |             html: `
27 |                 <div style="background-color: #f7f7f7; color: #333; padding: 20px; font-family: Arial, sans-serif;">
28 |                     <div style="max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
29 |                         <h2 style="text-align: center; color: #0076b4;">Welcome to MegaBlog, ${userdata.name}!</h2>
30 |                         <p style="font-size: 16px; line-height: 1.6; color: #555;">
31 |                             Hi ${userdata.name},
32 |                         </p>
33 |                         <p style="font-size: 16px; line-height: 1.6; color: #555;">
34 |                             Thank you for subscribing to MegaBlog! You’re now part of a community that receives the latest news, articles, and updates directly in your inbox. We’re excited to have you with us!
35 |                         </p>
36 |                         <p style="font-size: 16px; line-height: 1.6; color: #555;">
37 |                             Stay tuned for our upcoming content, and feel free to explore our latest posts at any time!
38 |                         </p>
39 |                         <p style="font-size: 16px; line-height: 1.6; color: #555;">
40 |                             Best Regards, <br/>
41 |                             The MegaBlog Team
42 |                         </p>
43 |                     </div>
44 |                 </div>
45 |             `,
46 |         });
47 |     }
48 | 
49 |     main().catch(console.error);
50 | };
51 | 
52 | export { sendMailToSubscriber };
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "megaproject",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@fortawesome/fontawesome-svg-core": "^6.6.0",
14 |     "@fortawesome/free-brands-svg-icons": "^6.6.0",
15 |     "@fortawesome/free-regular-svg-icons": "^6.6.0",
16 |     "@fortawesome/free-solid-svg-icons": "^6.6.0",
17 |     "@fortawesome/react-fontawesome": "^0.2.2",
18 |     "@huggingface/inference": "^2.8.1",
19 |     "@radix-ui/react-accordion": "^1.2.1",
20 |     "@radix-ui/react-alert-dialog": "^1.1.2",
21 |     "@radix-ui/react-dialog": "^1.1.2",
22 |     "@radix-ui/react-icons": "^1.3.0",
23 |     "@radix-ui/react-label": "^2.1.0",
24 |     "@radix-ui/react-navigation-menu": "^1.2.1",
25 |     "@radix-ui/react-popover": "^1.1.2",
26 |     "@radix-ui/react-select": "^2.1.2",
27 |     "@radix-ui/react-slot": "^1.1.0",
28 |     "@reduxjs/toolkit": "^2.0.1",
29 |     "@tinymce/tinymce-react": "^5.1.1",
30 |     "ai": "^4.0.13",
31 |     "appwrite": "^16.0.2",
32 |     "axios": "^1.7.9",
33 |     "caniuse-lite": "^1.0.30001668",
34 |     "class-variance-authority": "^0.7.0",
35 |     "clsx": "^2.1.1",
36 |     "cmdk": "^1.0.0",
37 |     "embla-carousel-react": "^8.3.0",
38 |     "esbuild": "^0.24.0",
39 |     "framer-motion": "^11.11.7",
40 |     "html-react-parser": "^5.1.1",
41 |     "lucide-react": "^0.447.0",
42 |     "react": "^18.2.0",
43 |     "react-dom": "^18.2.0",
44 |     "react-hook-form": "^7.49.3",
45 |     "react-hot-toast": "^2.4.1",
46 |     "react-icons": "^5.3.0",
47 |     "react-redux": "^9.1.0",
48 |     "react-responsive": "^10.0.0",
49 |     "react-router-dom": "^6.21.2",
50 |     "react-share": "^5.1.0",
51 |     "react-simple-chatbot": "^0.5.0",
52 |     "react-toastify": "^10.0.6",
53 |     "rollup": "^4.24.4",
54 |     "styled-components": "^4.0.0",
55 |     "tailwind-merge": "^2.5.3",
56 |     "tailwindcss-animate": "^1.0.7"
57 |   },
58 |   "devDependencies": {
59 |     "@types/react": "^18.2.43",
60 |     "@types/react-dom": "^18.2.17",
61 |     "@vitejs/plugin-react": "^4.2.1",
62 |     "autoprefixer": "^10.4.20",
63 |     "eslint": "^8.55.0",
64 |     "eslint-plugin-react": "^7.33.2",
65 |     "eslint-plugin-react-hooks": "^4.6.0",
66 |     "eslint-plugin-react-refresh": "^0.4.5",
67 |     "postcss": "^8.4.49",
68 |     "tailwindcss": "^3.4.14",
69 |     "vite": "^5.4.10"
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/pages/Features.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { motion } from "framer-motion";
 3 | 
 4 | const features = [
 5 |   {
 6 |     title: "Create Engaging Blog Posts",
 7 |     description:
 8 |       "Easily create rich and engaging blog posts with our user-friendly editor. Add multimedia content like images, videos, and more.",
 9 |     icon: "📝",
10 |   },
11 |   {
12 |     title: "Interact with Blogs",
13 |     description:
14 |       "Read, like, and comment on blogs created by others. Engage with the community and share your thoughts.",
15 |     icon: "❤️",
16 |   },
17 |   {
18 |     title: "Explore Blog Categories",
19 |     description:
20 |       "Browse blogs across different categories to discover new content and follow topics that matter to you.",
21 |     icon: "🔍",
22 |   },
23 |   {
24 |     title: "Responsive Design",
25 |     description:
26 |       "Access your favorite blogs anytime, anywhere with our mobile-friendly, responsive design.",
27 |     icon: "📱",
28 |   },
29 |   {
30 |     title: "Customize Your Blog",
31 |     description:
32 |       "Personalize your blog’s theme and layout to reflect your style. Make your blog stand out with ease.",
33 |     icon: "🎨",
34 |   },
35 |   {
36 |     title: "Analytics and Growth Tools",
37 |     description:
38 |       "Track your blog’s performance and use our integrated tools to help grow your audience.",
39 |     icon: "📈",
40 |   },
41 | ];
42 | 
43 | const Features = () => {
44 |   return (
45 |     <div className="max-w-6xl mx-auto p-6 sm:p-8">
46 |       <h2 className="text-3xl sm:text-4xl font-bold text-center mb-8">
47 |         Features We Offer
48 |       </h2>
49 |       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
50 |         {features.map((feature, index) => (
51 |           <motion.div
52 |             key={index}
53 |             initial={{ opacity: 0, y: 20 }}
54 |             animate={{ opacity: 1, y: 0 }}
55 |             transition={{ duration: 0.5, delay: index * 0.2 }}
56 |             whileHover={{ scale: 1.05 }}
57 |             className="feature-card bg-white shadow-lg rounded-lg p-6 hover:shadow-xl transition-shadow duration-300"
58 |           >
59 |             <div className="flex justify-center text-4xl mb-4">
60 |               {feature.icon}
61 |             </div>
62 |             <h3 className="text-xl sm:text-2xl font-semibold text-gray-900 text-center mb-2">
63 |               {feature.title}
64 |             </h3>
65 |             <p className="text-sm sm:text-base text-gray-600 text-center">
66 |               {feature.description}
67 |             </p>
68 |           </motion.div>
69 |         ))}
70 |       </div>
71 |     </div>
72 |   );
73 | };
74 | 
75 | export default Features;
76 | 


--------------------------------------------------------------------------------
/src/componenets/SearchBar.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import service from "../appwrite/configAppwrite";
 3 | 
 4 | 
 5 | function SearchBar() {
 6 |   const [searchTerm, setSearchTerm] = useState("");
 7 | 
 8 |   const handleSearchSubmit = async (e) => {
 9 |     e.preventDefault(); 
10 |     try {
11 |       const response = await service.searchPosts(searchTerm); // Call searchPosts with searchTerm
12 |       console.log("Search Results:", response); 
13 |     } catch (error) {
14 |       console.error("Error during search:", error);
15 |     }
16 |   };
17 | 
18 |   return (
19 |     <>
20 | 
21 |       <div class="flex justify-center items-center lg:w-11/12 w-full rounded-lg">
22 |         <div class="flex relative rounded-md w-full px-4 max-w-xl">
23 |           <input
24 |             type="text"
25 |             name="q"
26 |             id="query"
27 |             placeholder="Tech, Health, etc"
28 |             value={searchTerm}
29 |             onChange={(e) => setSearchTerm(e.target.value)}
30 |             className="w-full p-3 rounded-md placeholder-gray-500 dark:placeholder-gray-300 dark:text-black"
31 |             style={{
32 |               borderTop: "2px solid black",
33 |               borderLeft: "2px solid black",
34 |               borderBottom: "2px solid black",
35 |               borderRight: "none",
36 |             }}
37 |           />
38 |           <button
39 |             onClick={handleSearchSubmit}
40 |             class="inline-flex items-center gap-2 bg-violet-700 text-white text-lg font-semibold py-3 px-6 rounded-r-md"
41 |           >
42 |             <span>search</span>
43 |             <span class="hidden md:block">
44 |               <svg
45 |                 class="text-gray-200 h-5 w-5 p-0 fill-current"
46 |                 xmlns="http://www.w3.org/2000/svg"
47 |                 xmlns:xlink="http://www.w3.org/1999/xlink"
48 |                 version="1.1"
49 |                 x="0px"
50 |                 y="0px"
51 |                 viewBox="0 0 56.966 56.966"
52 |                 // style="enable-background:new 0 0 56.966 56.966;"
53 |                 xml:space="preserve"
54 |                 width="512px"
55 |                 height="512px"
56 |               >
57 |                 <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
58 |               </svg>
59 |             </span>
60 |           </button>
61 |         </div>
62 |       </div>
63 |     </>
64 |   );
65 | }
66 | 
67 | export default SearchBar;
68 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | #root {
  2 |   /* max-width: 1280px; */
  3 |   /* margin: 0 auto; */
  4 |   /* padding: 2rem; */
  5 |   /* text-align: center; */
  6 | }
  7 | 
  8 | .logo {
  9 |   height: 6em;
 10 |   padding: 1.5em;
 11 |   will-change: filter;
 12 |   transition: filter 300ms;
 13 | }
 14 | 
 15 | .logo:hover {
 16 |   filter: drop-shadow(0 0 2em #646cffaa);
 17 | }
 18 | 
 19 | .logo.react:hover {
 20 |   filter: drop-shadow(0 0 2em #61dafbaa);
 21 | }
 22 | 
 23 | @keyframes logo-spin {
 24 |   from {
 25 |     transform: rotate(0deg);
 26 |   }
 27 | 
 28 |   to {
 29 |     transform: rotate(360deg);
 30 |   }
 31 | }
 32 | 
 33 | @media (prefers-reduced-motion: no-preference) {
 34 |   a:nth-of-type(2) .logo {
 35 |     animation: logo-spin infinite 20s linear;
 36 |   }
 37 | }
 38 | 
 39 | .card {
 40 |   padding: 2em;
 41 | }
 42 | 
 43 | .read-the-docs {
 44 |   color: #888;
 45 | }
 46 | 
 47 | @keyframes float {
 48 |   0% {
 49 |     transform: translateY(0);
 50 |   }
 51 | 
 52 |   50% {
 53 |     transform: translateY(-20px);
 54 |   }
 55 | 
 56 |   100% {
 57 |     transform: translateY(0);
 58 |   }
 59 | }
 60 | 
 61 | @keyframes float-reverse {
 62 |   0% {
 63 |     transform: translateY(0);
 64 |   }
 65 | 
 66 |   50% {
 67 |     transform: translateY(20px);
 68 |   }
 69 | 
 70 |   100% {
 71 |     transform: translateY(0);
 72 |   }
 73 | }
 74 | 
 75 | .animate-float {
 76 |   animation: float 4s ease-in-out infinite;
 77 | }
 78 | 
 79 | .animate-float-reverse {
 80 |   animation: float-reverse 4s ease-in-out infinite;
 81 | }
 82 | 
 83 | .white-color {
 84 |   color: white;
 85 | }
 86 | 
 87 | /* New classes for background and text color toggling */
 88 | .dark-mode-bg {
 89 |   background-color: rgba(0, 0, 0, 0.612) !important;
 90 |   color: white;
 91 |   /* Dark mode background */
 92 | }
 93 | 
 94 | 
 95 | .light-text {
 96 |   color: white !important;
 97 |   /* Light text */
 98 | }
 99 | 
100 | /* Transition effect */
101 | .dark-mode-bg,
102 | .light-text {
103 |   transition: color 0.3s ease, background-color 0.3s ease;
104 | } 
105 | body.dark-mode{
106 |   color: white;
107 |   background-color: #212330;
108 | }
109 | body .header.dark-mode{
110 |   color: white;
111 |   background-color: #b70000;
112 | }
113 | .dark-bg {
114 |   background-color: #0000004f;
115 | }
116 | 
117 | .black-text {
118 |   color: black;
119 | }
120 | 
121 | /* Toggle Theme */
122 | 
123 | /* .chatbot {
124 |   position: fixed;
125 |   bottom: 20px;
126 |   right: 20px;
127 |   width: 300px;
128 |   border: 1px solid #ccc;
129 |   border-radius: 8px;
130 |   overflow: hidden;
131 |   background: #fff;
132 | } */
133 | 
134 | .chat-window {
135 |   height: 300px;
136 |   overflow-y: auto;
137 |   padding: 10px;
138 | }
139 | 
140 | .message {
141 |   margin: 5px 0;
142 | }
143 | 
144 | .message.user {
145 |   text-align: right;
146 |   color: #007bff;
147 | }
148 | 
149 | .message.bot {
150 |   text-align: left;
151 |   color: #333;
152 | }
153 | 


--------------------------------------------------------------------------------
/src/componenets/PostCard.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import service from "../appwrite/configAppwrite";
 3 | import { Link } from "react-router-dom";
 4 | import { Badge } from "../components/ui/badge";
 5 | 
 6 | export default function PostCard({
 7 |   $id,
 8 |   title,
 9 |   featuredImage,
10 |   date,
11 |   $createdAt,
12 |   tags,
13 |   metaData,
14 | }) {
15 |   const toPascalCase = (str) => {
16 |     return str
17 |       .toLowerCase()
18 |       .split(/[\s_]+/)
19 |       .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
20 |       .join(" ");
21 |   };
22 | 
23 |   return (
24 |     <article className="flex flex-col items-center overflow-hidden w-full max-w-xs text-center m-auto my-4 rounded-lg shadow-lg transition-transform duration-300 hover:scale-105">
25 |       {/* Image section */}
26 |       <div className="flex justify-center w-full">
27 |         <img
28 |           alt={title}
29 |           src={service.getFilePreview(featuredImage)}
30 |           className="w-full max-h-64 object-cover rounded-t-lg"
31 |         />
32 |       </div>
33 |       
34 |       {/* Content section */}
35 |       <div className="bg-white p-4 sm:p-6 w-full flex flex-col flex-grow">
36 |         <div className="flex justify-between">
37 |           {/* Date section */}
38 |           <time dateTime={$createdAt} className="block text-xs text-gray-500">
39 |             {new Date($createdAt).toLocaleDateString("en-US", {
40 |               day: "numeric",
41 |               month: "short",
42 |               year: "numeric",
43 |             })}
44 |           </time>
45 | 
46 |           <div className="flex flex-wrap gap-2 mb-2 -mt-1">
47 |             {tags.map((tag, index) => (
48 |               <Badge key={index} className="rounded-lg">
49 |                 {toPascalCase(tag)}
50 |               </Badge>
51 |             ))}
52 |           </div>
53 |         </div>
54 | 
55 |         {/* Title section */}
56 |         <Link to={`/post/${$id}`}>
57 |           <h3 className="mt-0.5 text-lg text-gray-900 line-clamp-2">
58 |             {toPascalCase(title)}
59 |           </h3>
60 |         </Link>
61 | 
62 |         <div className="flex flex-col justify-between h-full">
63 |           {/* Description section */}
64 |           <p className="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
65 |             {metaData ||
66 |               "Don't miss out on reading this amazing blog at @MegaBlog!"}
67 |           </p>
68 | 
69 |           <div className="flex justify-center mt-3">
70 |             <Link
71 |               to={`/post/${$id}`}
72 |               className="w-full block rounded-md border border-indigo-600 bg-gradient-to-r cursor-pointer from-green-400 to-blue-500 px-12 py-3 text-center text-sm font-semibold text-white transition-colors duration-300 hover:bg-opacity-80 focus:outline-none focus:ring focus:ring-blue-400 focus:ring-opacity-50"
73 |             >
74 |               Read full blog
75 |             </Link>
76 |           </div>
77 |         </div>
78 |       </div>
79 |     </article>
80 |   );
81 | }
82 | 
83 | 


--------------------------------------------------------------------------------
/repo_structure.txt:
--------------------------------------------------------------------------------
  1 | ├── CODE_OF_CONDUCT.md
  2 | ├── PROJECT_STRUCTURE.md
  3 | ├── README.md
  4 | ├── assets/
  5 | │   ├── GSSoC-Ext.png
  6 | │   ├── hacktoberfest.png
  7 | │   └── image
  8 | ├── components.json
  9 | ├── env.md
 10 | ├── index.html
 11 | ├── package-lock.json
 12 | ├── package.json
 13 | ├── postcss.config.js
 14 | ├── public/
 15 | │   ├── offline.html
 16 | │   └── service-worker.js
 17 | ├── repo_structure.txt
 18 | ├── src/
 19 | │   ├── App.css
 20 | │   ├── App.jsx
 21 | │   ├── api/
 22 | │   │   └── chatbot.js
 23 | │   ├── appwrite/
 24 | │   │   ├── auth.js
 25 | │   │   └── configAppwrite.js
 26 | │   ├── assets/
 27 | │   │   ├── contactPageBg.jpg
 28 | │   │   └── favicon.png
 29 | │   ├── componenets/
 30 | │   │   ├── AuthLayout.jsx
 31 | │   │   ├── Button.jsx
 32 | │   │   ├── Chatbot.jsx
 33 | │   │   ├── Footer/
 34 | │   │   │   └── Footer.jsx
 35 | │   │   ├── ForgotPasswordModal.jsx
 36 | │   │   ├── GoogleTranslator.jsx
 37 | │   │   ├── Header/
 38 | │   │   │   ├── Header.jsx
 39 | │   │   │   └── LogoutBtn.jsx
 40 | │   │   ├── Hero/
 41 | │   │   │   └── Hero.jsx
 42 | │   │   ├── Input.jsx
 43 | │   │   ├── Login.jsx
 44 | │   │   ├── Logo.jsx
 45 | │   │   ├── PostCard.jsx
 46 | │   │   ├── RTE.jsx
 47 | │   │   ├── Select.jsx
 48 | │   │   ├── Signup.jsx
 49 | │   │   ├── container/
 50 | │   │   │   └── Container.jsx
 51 | │   │   ├── index.js
 52 | │   │   └── postForm/
 53 | │   │       └── PostForm.jsx
 54 | │   ├── components/
 55 | │   │   └── ui/
 56 | │   │       ├── BackToTopButton.tsx
 57 | │   │       ├── Chatbot.jsx
 58 | │   │       ├── accordion.tsx
 59 | │   │       ├── alert-dialog.tsx
 60 | │   │       ├── badge.tsx
 61 | │   │       ├── button.tsx
 62 | │   │       ├── card.tsx
 63 | │   │       ├── carousel.tsx
 64 | │   │       ├── command.tsx
 65 | │   │       ├── dialog.tsx
 66 | │   │       ├── label.tsx
 67 | │   │       ├── navigation-menu.tsx
 68 | │   │       ├── popover.tsx
 69 | │   │       ├── select.tsx
 70 | │   │       └── textarea.tsx
 71 | │   ├── config/
 72 | │   │   └── config.js
 73 | │   ├── index.css
 74 | │   ├── lib/
 75 | │   │   └── utils.ts
 76 | │   ├── main.jsx
 77 | │   ├── pages/
 78 | │   │   ├── AddPost.jsx
 79 | │   │   ├── AffiliateProgram.jsx
 80 | │   │   ├── AllPost.jsx
 81 | │   │   ├── ContactPage.jsx
 82 | │   │   ├── EditPost.jsx
 83 | │   │   ├── Error404.jsx
 84 | │   │   ├── FAQ.jsx
 85 | │   │   ├── Features.jsx
 86 | │   │   ├── Feedback.css
 87 | │   │   ├── Feedback.jsx
 88 | │   │   ├── HelpPage.jsx
 89 | │   │   ├── Home.jsx
 90 | │   │   ├── LicensingPage.jsx
 91 | │   │   ├── Login.jsx
 92 | │   │   ├── Post.jsx
 93 | │   │   ├── Presskit.css
 94 | │   │   ├── Presskit.jsx
 95 | │   │   ├── Pricing.jsx
 96 | │   │   ├── PrivacyPolicy.jsx
 97 | │   │   ├── ProfilePage.jsx
 98 | │   │   ├── SignIn.jsx
 99 | │   │   ├── SignUpp.jsx
100 | │   │   ├── Signup.jsx
101 | │   │   ├── SupportPage.jsx
102 | │   │   └── TermsAndCondition.jsx
103 | │   └── store/
104 | │       ├── authSlice.js
105 | │       └── store.js
106 | ├── tailwind.config.js
107 | ├── tsconfig.json
108 | └── vite.config.js


--------------------------------------------------------------------------------
/PROJECT_STRUCTURE.md:
--------------------------------------------------------------------------------
  1 | ## Project Structure ✨
  2 | 
  3 | <!-- START_STRUCTURE -->
  4 | ```
  5 | ├── CODE_OF_CONDUCT.md
  6 | ├── PROJECT_STRUCTURE.md
  7 | ├── README.md
  8 | ├── assets/
  9 | │   ├── GSSoC-Ext.png
 10 | │   ├── hacktoberfest.png
 11 | │   └── image
 12 | ├── components.json
 13 | ├── env.md
 14 | ├── index.html
 15 | ├── package-lock.json
 16 | ├── package.json
 17 | ├── postcss.config.js
 18 | ├── public/
 19 | │   ├── offline.html
 20 | │   └── service-worker.js
 21 | ├── repo_structure.txt
 22 | ├── src/
 23 | │   ├── App.css
 24 | │   ├── App.jsx
 25 | │   ├── api/
 26 | │   │   └── chatbot.js
 27 | │   ├── appwrite/
 28 | │   │   ├── auth.js
 29 | │   │   └── configAppwrite.js
 30 | │   ├── assets/
 31 | │   │   ├── contactPageBg.jpg
 32 | │   │   └── favicon.png
 33 | │   ├── componenets/
 34 | │   │   ├── AuthLayout.jsx
 35 | │   │   ├── Button.jsx
 36 | │   │   ├── Chatbot.jsx
 37 | │   │   ├── Footer/
 38 | │   │   │   └── Footer.jsx
 39 | │   │   ├── ForgotPasswordModal.jsx
 40 | │   │   ├── GoogleTranslator.jsx
 41 | │   │   ├── Header/
 42 | │   │   │   ├── Header.jsx
 43 | │   │   │   └── LogoutBtn.jsx
 44 | │   │   ├── Hero/
 45 | │   │   │   └── Hero.jsx
 46 | │   │   ├── Input.jsx
 47 | │   │   ├── Login.jsx
 48 | │   │   ├── Logo.jsx
 49 | │   │   ├── PostCard.jsx
 50 | │   │   ├── RTE.jsx
 51 | │   │   ├── Select.jsx
 52 | │   │   ├── Signup.jsx
 53 | │   │   ├── container/
 54 | │   │   │   └── Container.jsx
 55 | │   │   ├── index.js
 56 | │   │   └── postForm/
 57 | │   │       └── PostForm.jsx
 58 | │   ├── components/
 59 | │   │   └── ui/
 60 | │   │       ├── BackToTopButton.tsx
 61 | │   │       ├── Chatbot.jsx
 62 | │   │       ├── accordion.tsx
 63 | │   │       ├── alert-dialog.tsx
 64 | │   │       ├── badge.tsx
 65 | │   │       ├── button.tsx
 66 | │   │       ├── card.tsx
 67 | │   │       ├── carousel.tsx
 68 | │   │       ├── command.tsx
 69 | │   │       ├── dialog.tsx
 70 | │   │       ├── label.tsx
 71 | │   │       ├── navigation-menu.tsx
 72 | │   │       ├── popover.tsx
 73 | │   │       ├── select.tsx
 74 | │   │       └── textarea.tsx
 75 | │   ├── config/
 76 | │   │   └── config.js
 77 | │   ├── index.css
 78 | │   ├── lib/
 79 | │   │   └── utils.ts
 80 | │   ├── main.jsx
 81 | │   ├── pages/
 82 | │   │   ├── AddPost.jsx
 83 | │   │   ├── AffiliateProgram.jsx
 84 | │   │   ├── AllPost.jsx
 85 | │   │   ├── ContactPage.jsx
 86 | │   │   ├── EditPost.jsx
 87 | │   │   ├── Error404.jsx
 88 | │   │   ├── FAQ.jsx
 89 | │   │   ├── Features.jsx
 90 | │   │   ├── Feedback.css
 91 | │   │   ├── Feedback.jsx
 92 | │   │   ├── HelpPage.jsx
 93 | │   │   ├── Home.jsx
 94 | │   │   ├── LicensingPage.jsx
 95 | │   │   ├── Login.jsx
 96 | │   │   ├── Post.jsx
 97 | │   │   ├── Presskit.css
 98 | │   │   ├── Presskit.jsx
 99 | │   │   ├── Pricing.jsx
100 | │   │   ├── PrivacyPolicy.jsx
101 | │   │   ├── ProfilePage.jsx
102 | │   │   ├── SignIn.jsx
103 | │   │   ├── SignUpp.jsx
104 | │   │   ├── Signup.jsx
105 | │   │   ├── SupportPage.jsx
106 | │   │   └── TermsAndCondition.jsx
107 | │   └── store/
108 | │       ├── authSlice.js
109 | │       └── store.js
110 | ├── tailwind.config.js
111 | ├── tsconfig.json
112 | └── vite.config.js
113 | ```
114 | <!-- END_STRUCTURE -->


--------------------------------------------------------------------------------
/src/pages/Feedback.css:
--------------------------------------------------------------------------------
  1 | /* Container for feedback form */
  2 | .feedback-form-container {
  3 |   background-color: #e9e7e7;
  4 |   border: 3px solid rgb(13, 13, 12);
  5 |   border-radius: 10px;
  6 |   padding: 50px;
  7 |   width: 600px; /* Slightly increased width for a spacious feel */
  8 |   margin: 50px auto;
  9 |   color: rgb(10, 10, 10);
 10 |   text-align: center;
 11 |   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
 12 | }
 13 | 
 14 | /* Form headings */
 15 | .title {
 16 |   margin-bottom: 30px; /* Increased spacing below heading */
 17 |   font-size: 48px; /* Increased font size for the heading */
 18 |   color: #020202;
 19 | }
 20 | 
 21 | /* Input fields styling */
 22 | .name,
 23 | .email,
 24 | .message {
 25 |   margin-top: 30px; /* Increased top margin for space between inputs */
 26 |   width: 100%;
 27 |   padding: 10px; /* Increased padding for larger inputs */
 28 |   background-color: #faf5f5;
 29 |   border: 3px solid rgb(9, 9, 8);
 30 |   border-radius: 5px;
 31 |   color: rgb(21, 20, 20);
 32 |   font-size: 18px; /* Slightly increased font size for input text */
 33 |   box-sizing: border-box;
 34 | }
 35 | 
 36 | textarea {
 37 |   height: 100px; /* Increased height of the textarea */
 38 |   resize: none;
 39 | }
 40 | 
 41 | /* Star rating styling */
 42 | .stars {
 43 |   margin-top: 30px; /* Ensure consistent spacing */
 44 |   display: flex;
 45 |   justify-content: center;
 46 |   margin: 10px 0;
 47 |   gap: 20px;
 48 | }
 49 | 
 50 | .star,
 51 | .star-filled {
 52 |   font-size: 35px; /* Slightly larger stars for better visibility */
 53 |   cursor: pointer;
 54 |   transition: color 0.3s;
 55 | }
 56 | 
 57 | .star {
 58 |   color: rgb(108, 106, 106);
 59 | }
 60 | 
 61 | .star-filled {
 62 |   color: gold;
 63 | }
 64 | 
 65 | /* Submit button */
 66 | .post-button {
 67 |   margin-top: 40px; /* More space between the last input and button */
 68 |   background-color: #031cd8;
 69 |   color: #fdfafa;
 70 |   border: 2px solid black;
 71 |   padding: 15px 30px; /* Bigger button for easier clicking */
 72 |   border-radius: 5px;
 73 |   cursor: pointer;
 74 |   transition: background-color 0.3s;
 75 | }
 76 | 
 77 | .post-button:hover {
 78 |   background-color: #b6c2f3;
 79 |   color: black;
 80 | }
 81 | 
 82 | /* Pop-up overlay styling */
 83 | .popup-overlay {
 84 |   position: fixed;
 85 |   top: 0;
 86 |   left: 0;
 87 |   width: 100%;
 88 |   height: 100%;
 89 |   background-color: rgba(0, 0, 0, 0.6);
 90 |   display: flex;
 91 |   justify-content: center;
 92 |   align-items: center;
 93 | }
 94 | 
 95 | .popup {
 96 |   background-color: #f9f8fb;
 97 |   padding: 28px;
 98 |   border-radius: 10px;
 99 |   text-align: center;
100 |   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
101 |   color: black;
102 | }
103 | 
104 | .popup h3 {
105 |   margin-bottom: 10px;
106 |   color: #0d0d0d;
107 | }
108 | 
109 | .popup p {
110 |   margin-bottom: 20px;
111 |   color: #0f0e0e;
112 | }
113 | 
114 | .close-popup-button {
115 |   background-color: #0a0370;
116 |   color: #fdfbfb;
117 |   border: 2px solid rgb(245, 242, 242);
118 |   padding: 10px 20px;
119 |   border-radius: 5px;
120 |   cursor: pointer;
121 | }
122 | 
123 | /* .close-popup-button:hover {
124 |   background-color: #e3e4e5;
125 | } */
126 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | /** @type {import('tailwindcss').Config} */
  2 | import tailwindcssAnimate from 'tailwindcss-animate'
  3 | export default {
  4 | 	darkMode: ["class"],
  5 | 	content: [
  6 | 		"./index.html",
  7 | 		"./src/**/*.{js,ts,jsx,tsx}",
  8 | 	],
  9 | 	theme: {
 10 |     	extend: {
 11 |     		borderRadius: {
 12 |     			lg: 'var(--radius)',
 13 |     			md: 'calc(var(--radius) - 2px)',
 14 |     			sm: 'calc(var(--radius) - 4px)'
 15 |     		},
 16 |     		colors: {
 17 |     			background: 'hsl(var(--background))',
 18 |     			foreground: 'hsl(var(--foreground))',
 19 |     			card: {
 20 |     				DEFAULT: 'hsl(var(--card))',
 21 |     				foreground: 'hsl(var(--card-foreground))'
 22 |     			},
 23 |     			popover: {
 24 |     				DEFAULT: 'hsl(var(--popover))',
 25 |     				foreground: 'hsl(var(--popover-foreground))'
 26 |     			},
 27 |     			primary: {
 28 |     				DEFAULT: 'hsl(var(--primary))',
 29 |     				foreground: 'hsl(var(--primary-foreground))'
 30 |     			},
 31 |     			secondary: {
 32 |     				DEFAULT: 'hsl(var(--secondary))',
 33 |     				foreground: 'hsl(var(--secondary-foreground))'
 34 |     			},
 35 |     			muted: {
 36 |     				DEFAULT: 'hsl(var(--muted))',
 37 |     				foreground: 'hsl(var(--muted-foreground))'
 38 |     			},
 39 |     			accent: {
 40 |     				DEFAULT: 'hsl(var(--accent))',
 41 |     				foreground: 'hsl(var(--accent-foreground))'
 42 |     			},
 43 |     			destructive: {
 44 |     				DEFAULT: 'hsl(var(--destructive))',
 45 |     				foreground: 'hsl(var(--destructive-foreground))'
 46 |     			},
 47 |     			border: 'hsl(var(--border))',
 48 |     			input: 'hsl(var(--input))',
 49 |     			ring: 'hsl(var(--ring))',
 50 |     			chart: {
 51 |     				'1': 'hsl(var(--chart-1))',
 52 |     				'2': 'hsl(var(--chart-2))',
 53 |     				'3': 'hsl(var(--chart-3))',
 54 |     				'4': 'hsl(var(--chart-4))',
 55 |     				'5': 'hsl(var(--chart-5))'
 56 |     			}
 57 |     		},
 58 |     		keyframes: {
 59 |     			fadeInBounce: {
 60 |     				'0%': {
 61 |     					opacity: '0',
 62 |     					transform: 'translateY(40px)'
 63 |     				},
 64 |     				'100%': {
 65 |     					opacity: '1',
 66 |     					transform: 'translateY(0)'
 67 |     				}
 68 |     			},
 69 |     			fadeOutBounce: {
 70 |     				'0%': {
 71 |     					opacity: '1',
 72 |     					transform: 'translateY(0)'
 73 |     				},
 74 |     				'100%': {
 75 |     					opacity: '0',
 76 |     					transform: 'translateY(40px)'
 77 |     				}
 78 |     			},
 79 |     			'accordion-down': {
 80 |     				from: {
 81 |     					height: '0'
 82 |     				},
 83 |     				to: {
 84 |     					height: 'var(--radix-accordion-content-height)'
 85 |     				}
 86 |     			},
 87 |     			'accordion-up': {
 88 |     				from: {
 89 |     					height: 'var(--radix-accordion-content-height)'
 90 |     				},
 91 |     				to: {
 92 |     					height: '0'
 93 |     				}
 94 |     			}
 95 |     		},
 96 |     		animation: {
 97 |     			fadeInBounce: 'fadeInBounce 0.5s ease-out forwards',
 98 |     			fadeOutBounce: 'fadeOutBounce 0.5s ease-out forwards',
 99 |     			'accordion-down': 'accordion-down 0.2s ease-out',
100 |     			'accordion-up': 'accordion-up 0.2s ease-out'
101 |     		}
102 |     	}
103 |     },
104 | 	plugins: [(tailwindcssAnimate)],
105 | }
106 | 


--------------------------------------------------------------------------------
/src/pages/EditPost.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { Container, PostForm } from "../componenets";
 3 | import service from "../appwrite/configAppwrite";
 4 | import { useNavigate, useParams } from "react-router-dom";
 5 | import EditPostForm from "../componenets/EditPostForm";
 6 | 
 7 | function EditPost() {
 8 |   const [postData, setPostsData] = useState(null);
 9 |   const { slug } = useParams();
10 |   const navigate = useNavigate();
11 |   const [blogId, setBlogId] = useState("");
12 |   const [userId, setUserId] = useState("");
13 | 
14 |   useEffect(() => {
15 |     if (slug) {
16 |       service
17 |         .getPost(slug)
18 |         .then((post) => {
19 |           if (post) {
20 |             setPostsData(post);
21 |             setBlogId(post.$id);
22 |             setUserId(post.userId); // Assuming `userId` is coming from the post object
23 |             console.log("postinfo", post);
24 |             console.log("postinfo", post.$id);
25 |             console.log("user", post.userId);
26 |           } else {
27 |             console.log("Post not found");
28 |           }
29 |         })
30 |         .catch((error) => {
31 |           console.log("Error fetching post:", error);
32 |         });
33 |     } else {
34 |       console.log("Slug is missing or invalid");
35 |     }
36 |   }, [slug]);
37 | 
38 |   //   return post ? (
39 |   //     <div className='py-8'>
40 |   //         <Container>
41 |   //             <PostForm post={post} />
42 |   //         </Container>
43 |   //     </div>
44 |   //   ) : null
45 | 
46 |   return postData ? (
47 |     <>
48 |       <div className="p-6">
49 |         <EditPostForm post={postData} />
50 |       </div>
51 |     </>
52 |   ) : (
53 |     <>
54 |       <div class="animate-pulse block-item shadow-md max-w-full mx-auto mt-20">
55 |         <div class="bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 h-6 rounded-t-3xl"></div>
56 |         <div class="py-4 px-6">
57 |           <div class="flex items-center space-x-2">
58 |             <div class="h-7 w-7 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full"></div>
59 |             <div class="h-3 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full w-1/3"></div>
60 |           </div>
61 |           <div class="my-6">
62 |             <div class="h-5 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full w-3/4"></div>
63 |             <div class="my-4">
64 |               <div class="h-3 my-2 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full w-full"></div>
65 |               <div class="h-3 my-2 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full w-5/6"></div>
66 |               <div class="h-3 my-2 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full w-4/6"></div>
67 |               <div class="h-3 my-2 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full w-5/6"></div>
68 |               <div class="h-3 my-2 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full w-3/6"></div>
69 |               <div class="h-3 my-2 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full w-2/6"></div>
70 |             </div>
71 |           </div>
72 |           <div class="my-4">
73 |             <div class="h-11 bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-lg w-full"></div>
74 |             <div class="h-3 my-4 mx-auto bg-gradient-to-t from-red-700 via-rose-600 to-pink-500 rounded-full w-1/2"></div>
75 |           </div>
76 |         </div>
77 |       </div>
78 |     </>
79 |   );
80 | }
81 | 
82 | export default EditPost;
83 | 


--------------------------------------------------------------------------------
/.github/scripts/update_structure.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | import github
  3 | from github import Github
  4 | 
  5 | # Helper function to recursively build the repo structure and include file extensions
  6 | def get_repo_structure(path='.', prefix=''):
  7 |     structure = []
  8 |     try:
  9 |         items = sorted(os.listdir(path))
 10 |     except FileNotFoundError:
 11 |         print(f"Path not found: {path}")
 12 |         return structure
 13 | 
 14 |     for i, item in enumerate(items):
 15 |         if item.startswith('.'):
 16 |             continue  # Skip hidden files and directories
 17 |         item_path = os.path.join(path, item)
 18 |         is_last = i == len(items) - 1
 19 |         current_prefix = '└── ' if is_last else '├── '
 20 | 
 21 |         if os.path.isdir(item_path):
 22 |             # Directory case
 23 |             structure.append(f"{prefix}{current_prefix}{item}/")
 24 |             next_prefix = prefix + ('    ' if is_last else '│   ')
 25 |             structure.extend(get_repo_structure(item_path, next_prefix))
 26 |         else:
 27 |             # File case with extension
 28 |             file_name, file_extension = os.path.splitext(item)
 29 |             structure.append(f"{prefix}{current_prefix}{file_name}{file_extension}")
 30 |     
 31 |     return structure
 32 | 
 33 | # Function to update the repo_structure.txt file
 34 | def update_structure_file(structure):
 35 |     try:
 36 |         with open('repo_structure.txt', 'w') as f:
 37 |             f.write('\n'.join(structure))
 38 |         print("repo_structure.txt updated successfully.")
 39 |     except IOError as e:
 40 |         print(f"Error writing to repo_structure.txt: {e}")
 41 | 
 42 | # Function to update the README.md with the new structure
 43 | def update_README(structure):
 44 |     try:
 45 |         with open('PROJECT_STRUCTURE.md', 'r') as f:
 46 |             content = f.read()
 47 |     except FileNotFoundError:
 48 |         print("PROJECT_STRUCTURE.md not found.")
 49 |         return
 50 | 
 51 |     start_marker = '<!-- START_STRUCTURE -->'
 52 |     end_marker = '<!-- END_STRUCTURE -->'
 53 |     
 54 |     start_index = content.find(start_marker)
 55 |     end_index = content.find(end_marker)
 56 | 
 57 |     if start_index != -1 and end_index != -1:
 58 |         new_content = (
 59 |             content[:start_index + len(start_marker)] +
 60 |             '\n```\n' + '\n'.join(structure) + '\n```\n' +
 61 |             content[end_index:]
 62 |         )
 63 |         try:
 64 |             with open('PROJECT_STRUCTURE.md', 'w') as f:
 65 |                 f.write(new_content)
 66 |             print("PROJECT_STRUCTURE.md updated with new structure.")
 67 |         except IOError as e:
 68 |             print(f"Error writing to PROJECT_STRUCTURE.md: {e}")
 69 |     else:
 70 |         print("Markers not found in PROJECT_STRUCTURE.md. Structure not updated.")
 71 | 
 72 | # Main function to compare and update repository structure
 73 | def main():
 74 |     gh_token = os.getenv('GH_TOKEN')
 75 |     gh_repo = os.getenv('GITHUB_REPOSITORY')
 76 | 
 77 |     if not gh_token or not gh_repo:
 78 |         print("Environment variables GH_TOKEN and GITHUB_REPOSITORY must be set.")
 79 |         return
 80 | 
 81 |     g = Github(gh_token)
 82 |     repo = g.get_repo(gh_repo)
 83 | 
 84 |     current_structure = get_repo_structure()
 85 | 
 86 |     try:
 87 |         # Fetch the contents of repo_structure.txt from GitHub
 88 |         contents = repo.get_contents("repo_structure.txt")
 89 |         existing_structure = contents.decoded_content.decode().split('\n')
 90 |     except github.GithubException:
 91 |         existing_structure = None
 92 | 
 93 |     if current_structure != existing_structure:
 94 |         update_structure_file(current_structure)
 95 |         update_README(current_structure)
 96 |         print("Repository structure updated.")
 97 |     else:
 98 |         print("No changes in repository structure.")
 99 | 
100 | if __name__ == "__main__":
101 |     main()


--------------------------------------------------------------------------------
/src/pages/FAQ.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { motion } from "framer-motion";
 3 | 
 4 | const FAQ = () => {
 5 |   const [open, setOpen] = useState(null);
 6 | 
 7 |   const toggleFAQ = (index) => {
 8 |     if (open === index) {
 9 |       setOpen(null); // Close if already open
10 |     } else {
11 |       setOpen(index); // Open the clicked one
12 |     }
13 |   };
14 | 
15 |   const faqs = [
16 |     {
17 |       question: "What are the benefits of using your blog platform?",
18 |       answer:
19 |         "Our platform is designed to be easy to use and manage, allowing you to focus on creating high-quality content. We offer a variety of features to help you grow your audience and engage with your readers.",
20 |     },
21 |     {
22 |       question: "How do I create a blog post?",
23 |       answer:
24 |         "Creating a blog post is simple! Just log in to your account, navigate to the 'Create Post' section, and start writing. You can easily add images, videos, and other multimedia content to enhance your posts.",
25 |     },
26 |     {
27 |       question: "Can I customize the look and feel of my blog?",
28 |       answer:
29 |         "Absolutely! We offer a variety of themes and customization options to help you create a blog that reflects your own unique style and brand.",
30 |     },
31 |     {
32 |       question: "How do I promote my blog?",
33 |       answer:
34 |         "We provide several tools and resources to help you promote your blog. You can share your posts on social media, submit them to search engines, and even integrate your blog with other platforms to reach a wider audience.",
35 |     },
36 |     {
37 |       question: "What kind of support do you offer?",
38 |       answer:
39 |         "We have a dedicated support team available to answer your questions and help you with any issues you may encounter. You can reach us through email, live chat, or our knowledge base.",
40 |     },
41 |   ];
42 | 
43 |   return (
44 |     <>
45 |       <motion.div
46 |         initial={{ opacity: 0, y: -50 }}
47 |         animate={{ opacity: 1, y: 0 }}
48 |         transition={{ duration: 0.8, type: "spring" }}
49 |         className="text-center mt-2 mb-2 sm:mt-4"
50 |       >
51 |         <p className="font-bold text-4xl">Frequently Asked Questions</p>
52 |         <p className="text-gray-500 text-sm mt-2 mx-16 ">
53 |           Thank you for visiting our website! We are here to help answer your queries.
54 |         </p>
55 |       </motion.div>
56 |       
57 |       <div className="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
58 |         <div className="space-y-4">
59 |           {faqs.map((faq, index) => (
60 |             <motion.div
61 |               key={index}
62 |               className="border-b border-gray-300 pb-4 cursor-pointer"
63 |               initial={{ opacity: 0, y: 30 }}
64 |               animate={{ opacity: 1, y: 0 }}
65 |               transition={{ duration: 0.6, delay: index * 0.2 }}
66 |               onClick={() => toggleFAQ(index)}
67 |             >
68 |               <h3 className="faq-question text-xl sm:text-2xl font-semibold flex justify-between items-center">
69 |                 {faq.question}
70 |                 <span
71 |                   className={`transition-transform duration-300 transform ${
72 |                     open === index ? "rotate-180" : "rotate-0"
73 |                   }`}
74 |                 >
75 |                   ⌄
76 |                 </span>
77 |               </h3>
78 |               {open === index && (
79 |                 <motion.p
80 |                   className="faq-answer mt-2 text-sm text-left sm:text-base"
81 |                   initial={{ opacity: 0, height: 0 }}
82 |                   animate={{ opacity: 1, height: "auto" }}
83 |                   transition={{ duration: 0.4 }}
84 |                 >
85 |                   {faq.answer}
86 |                 </motion.p>
87 |               )}
88 |             </motion.div>
89 |           ))}
90 |         </div>
91 |       </div>
92 |     </>
93 |   );
94 | };
95 | 
96 | export default FAQ;
97 | 


--------------------------------------------------------------------------------
/src/pages/SupportPage.jsx:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | 
  3 | const SupportPage = () => {
  4 |   const supportOptions = [
  5 |     {
  6 |       title: "FAQs",
  7 |       description: "Find answers to the most commonly asked questions.",
  8 |       icon: "🛠",
  9 |     },
 10 |     {
 11 |       title: "Live Chat",
 12 |       description: "Talk to our support team in real-time.",
 13 |       icon: "💬",
 14 |     },
 15 |     {
 16 |       title: "Email Support",
 17 |       description: "Send us an email for detailed assistance.",
 18 |       icon: "✉️",
 19 |     },
 20 |     {
 21 |       title: "Phone Support",
 22 |       description: "Speak to our support team over the phone.",
 23 |       icon: "📞",
 24 |     },
 25 |     {
 26 |       title: "Community Forum",
 27 |       description: "Join our forum and interact with other users.",
 28 |       icon: "👥",
 29 |     },
 30 |     {
 31 |       title: "Blog Tutorials",
 32 |       description: "Read step-by-step tutorials on our blog.",
 33 |       icon: "📝",
 34 |     },
 35 |   ];
 36 | 
 37 |   return (
 38 |     <>
 39 |       <div className="min-h-screen flex flex-col items-center p-4 ">
 40 |         <div className="lg:w-11/12 w-full rounded-lg">
 41 |           <motion.div
 42 |             initial={{ opacity: 0, y: -50 }}
 43 |             animate={{ opacity: 1, y: 0 }}
 44 |             transition={{ duration: 0.8, type: "spring" }}
 45 |             className="text-center"
 46 |           >
 47 |             <h1 className="text-5xl font-extrabold text-center text-black mb-6">
 48 |               How can we help you?
 49 |             </h1>
 50 |           </motion.div>
 51 | 
 52 |           <motion.div
 53 |             initial={{ opacity: 0, y: 50 }}
 54 |             animate={{ opacity: 1, y: 0 }}
 55 |             transition={{ duration: 0.5, delay: 0.2 }}
 56 |           >
 57 |             <p className="text-lg text-center text-gray-600 mb-6 leading-relaxed">
 58 |               We&apos;re here to assist you with any questions or concerns you
 59 |               may have. Explore the options below, or reach out to us directly.
 60 |             </p>
 61 |           </motion.div>
 62 | 
 63 |           <motion.div
 64 |             initial={{ opacity: 0, y: 50 }}
 65 |             animate={{ opacity: 1, y: 0 }}
 66 |             transition={{ duration: 0.9, delay: 0.4 }}
 67 |           >
 68 |             <div className="flex text-center justify-center items-center">
 69 |               <a
 70 |                 className="block w-[250px] items-center rounded bg-indigo-600 px-12 py-3 text-sm font-medium text-white shadow hover:bg-black focus:outline-none focus:ring active:bg-indigo-600"
 71 |                 href="/contactus"
 72 |               >
 73 |                 Contact Us
 74 |               </a>
 75 |             </div>
 76 |           </motion.div>
 77 | 
 78 |           <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 mx-12 mb-8">
 79 |             {supportOptions.map((option, index) => (
 80 |               <SupportCard
 81 |                 key={index}
 82 |                 title={option.title}
 83 |                 description={option.description}
 84 |                 icon={option.icon}
 85 |               />
 86 |             ))}
 87 |           </div>
 88 |         </div>
 89 |       </div>
 90 |     </>
 91 |   );
 92 | };
 93 | 
 94 | const SupportCard = ({ title, description, icon }) => (
 95 |   <motion.div
 96 |     className="bg-white rounded-xl shadow-lg p-8 transition-transform text-center flex flex-col items-center justify-center"
 97 |     whileHover={{
 98 |       scale: 1.05,
 99 |       rotate: 2,
100 |       boxShadow: "0px 8px 20px rgba(0, 0, 0, 0.2)",
101 |     }}
102 |     initial={{ opacity: 0, y: 50 }}
103 |     animate={{ opacity: 1, y: 0 }}
104 |     transition={{ duration: 0.5, ease: "easeInOut" }}
105 |   >
106 |     <div className="text-6xl mb-4 text-indigo-900">{icon}</div>
107 |     <h3 className="text-xl font-bold text-black mb-2">{title}</h3>
108 |     <p className="text-sm text-gray-500">{description}</p>
109 |   </motion.div>
110 | );
111 | 
112 | export default SupportPage;
113 | 


--------------------------------------------------------------------------------
/server/sendContactDetailsToAdmin.js:
--------------------------------------------------------------------------------
 1 | import nodemailer from 'nodemailer';
 2 | import dotenv from 'dotenv';
 3 | 
 4 | dotenv.config();
 5 | 
 6 | const sendMailToAdmin = async (userdata) => {
 7 |     const transporter = nodemailer.createTransport({
 8 |         service: "gmail",
 9 |         host: "smtp.gmail.com",
10 |         port: 587,
11 |         secure: false, // Use `true` for port 465, `false` for all other ports
12 |         auth: {
13 |             user: process.env.EMAIL_ID, // Your email ID
14 |             pass: process.env.PASS_KEY, // Your email passkey
15 |         },
16 |     });
17 | 
18 |     try {
19 |         await transporter.sendMail({
20 |             from: {
21 |                 name: `Megablog Contact Form - ${new Date().toLocaleString()}`,
22 |                 address: process.env.EMAIL_ID,
23 |             }, // sender address
24 |             to: process.env.ADMIN_EMAIL_ID, // Admin email
25 |             subject: "New Contact Form Submission from Megablog ✔", // Subject line
26 |             text: "Megablog Contact Form Submission", // plain text body
27 |             html: `<div style="background: #f4f4f4; color: #333; height: 100vh; padding: 20px; font-family: Arial, sans-serif;">
28 |                         <div class="heading" style="font-size: 2rem; text-align: center; margin-bottom: 20px; color: #0076b4;">
29 |                             Megablog Contact Form Details
30 |                         </div>
31 |                         <table style="width: 60%; border-collapse: collapse; margin: 0 auto; border: 1px solid #ccc;">
32 |                             <thead>
33 |                                 <tr>
34 |                                     <th style="border: 1px solid #ccc; padding: 10px; text-align:center; background-color: #0076b4; color: white;">
35 |                                         Field
36 |                                     </th>
37 |                                     <th style="border: 1px solid #ccc; padding: 10px; text-align:center; background-color: #0076b4; color: white;">
38 |                                         Value
39 |                                     </th>
40 |                                 </tr>
41 |                             </thead>
42 |                             <tbody>
43 |                                 <tr>
44 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">Name</td>
45 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">${userdata.name}</td>
46 |                                 </tr>
47 |                                 <tr>
48 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">Phone</td>
49 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">${userdata.phone}</td>
50 |                                 </tr>
51 |                                 <tr>
52 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">Email</td>
53 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">${userdata.email}</td>
54 |                                 </tr>
55 |                                 <tr>
56 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">Message</td>
57 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">${userdata.message}</td>
58 |                                 </tr>
59 |                                 <tr>
60 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">Submitted At</td>
61 |                                     <td style="border: 1px solid #ccc; padding: 10px; text-align:center;">${new Date(userdata.createdAt).toLocaleString()}</td>
62 |                                 </tr>
63 |                             </tbody>
64 |                         </table>
65 |                     </div>`, // HTML body
66 |         });
67 |     } catch (error) {
68 |         console.error("Error sending email:", error);
69 |     }
70 | };
71 | 
72 | export { sendMailToAdmin };
73 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | [![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code&size=25&pause=1000&color=F75C7E&center=true&width=900&lines=📝+MegaBlog)](https://git.io/typing-svg)
 3 | 
 4 | ## 📋 Participating Programs
 5 | 
 6 | | Program               | Logo                                                       | Description                                                                                                 |
 7 | |-----------------------|------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|
 8 | | GSSoC'2024-Extd       | <img src="assets/GSSoC-Ext.png" width="120px" alt="GSSoC Logo">       | A coding period from October 1st to October 30th, inviting contributions and offering a rewarding experience. |
 9 | | Hacktoberfest 2024    | <img src="assets/hacktoberfest.png" width="120px" alt="Hacktoberfest Logo"> | Hacktoberfest celebrates open-source, welcoming participants of all levels throughout October.                |
10 | 
11 | <img src="https://www.animatedimages.org/data/media/562/animated-line-image-0184.gif" width="1920" />
12 | 
13 | ## 📊 Project Metrics
14 | 
15 | <table align="center">
16 |     <thead align="center">
17 |         <tr>
18 |             <td><b>🌟 Stars</b></td>
19 |             <td><b>🍴 Forks</b></td>
20 |             <td><b>🐛 Issues</b></td>
21 |             <td><b>🔔 Open PRs</b></td>
22 |             <td><b>🔕 Closed PRs</b></td>
23 |         </tr>
24 |      </thead>
25 |     <tbody>
26 |          <tr>
27 |             <td><img alt="Stars" src="https://img.shields.io/github/stars/anuj123upadhyay/MegaBlog?style=flat&logo=github"/></td>
28 |             <td><img alt="Forks" src="https://img.shields.io/github/forks/anuj123upadhyay/MegaBlog?style=flat&logo=github"/></td>
29 |             <td><img alt="Issues" src="https://img.shields.io/github/issues/anuj123upadhyay/MegaBlog?style=flat&logo=github"/></td>
30 |             <td><img alt="Open Pull Requests" src="https://img.shields.io/github/issues-pr/anuj123upadhyay/MegaBlog?style=flat&logo=github"/></td>
31 |             <td><img alt="Closed Pull Requests" src="https://img.shields.io/github/issues-pr-closed/anuj123upadhyay/MegaBlog?style=flat&color=green&logo=github"/></td>
32 |         </tr>
33 |     </tbody>
34 | </table>
35 | 
36 | <img src="https://www.animatedimages.org/data/media/562/animated-line-image-0184.gif" width="1920" />
37 | 
38 | 
39 | **MegaBlog** is a dynamic, responsive platform for sharing your thoughts and ideas. Built with **React** and **Node.js**, it allows users to write, manage, and comment on blog posts effortlessly.
40 | 
41 | - 🔗 **Check out the project:** [MegaBlog GitHub Repository](https://github.com/anuj123upadhyay/MegaBlog)
42 | - 🌐 **Live Website**: [MegaBlog Live](mega-blog-8587.vercel.app/)
43 | 
44 | ## ✨ Project Structure 
45 | 
46 | Check the project structure here [Project Structure](PROJECT_STRUCTURE.md)
47 | 
48 | ## 🌟 Features
49 | 
50 | - 🖊️ **Create & Edit** your personal blog posts
51 | - 🔑 **JWT Authentication** for secure login
52 | - 🗂️ **Categorize** posts for easy navigation
53 | - 💬 **Comment** and engage with other users
54 | - 🔍 **Search** to quickly find posts
55 | 
56 | ## 🛠️ Tech Stack
57 | 
58 | - **Frontend**: React
59 | - **Backend**: Node.js, Express
60 | - **Database**: MongoDB
61 | - **Authentication**: JWT
62 | 
63 | ## 🚀 Getting Started
64 | 
65 | 1. Clone the repository:
66 | ```bash
67 | git clone https://github.com/anuj123upadhyay/MegaBlog.git
68 | ```
69 | 
70 | 2. Install dependencies:
71 | 
72 | ```bash
73 | npm install
74 | ```
75 | 
76 | 3. Set up environment variables in the `.env` file for MongoDB URI, JWT secret, etc.
77 | 
78 | 4. Start the application:
79 | 
80 | ```bash
81 | npm run dev
82 | ```
83 | 
84 | 5. Visit `http://localhost:3000` to explore!
85 | 
86 | ## 🤝 Contributing
87 | Want to contribute? Follow these steps:
88 | 
89 | 1. Fork the repo
90 | 2. Create a branch (`git checkout -b feature-branch`)
91 | 3. Commit your changes (`git commit -m 'Add a new feature'`)
92 | 4. Push to your branch (`git push origin feature-branch`)
93 | 5. Open a Pull Request
94 | 
95 | ## 📜 License
96 | This project is licensed under the MIT License.
97 | 
98 | ### ⭐ Like this project? Star it on GitHub to show your support!
99 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  3 | import { Cross2Icon } from "@radix-ui/react-icons"
  4 | 
  5 | import { cn } from "../../lib/utils"
  6 | 
  7 | const Dialog = DialogPrimitive.Root
  8 | 
  9 | const DialogTrigger = DialogPrimitive.Trigger
 10 | 
 11 | const DialogPortal = DialogPrimitive.Portal
 12 | 
 13 | const DialogClose = DialogPrimitive.Close
 14 | 
 15 | const DialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <DialogPrimitive.Overlay
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ))
 28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 29 | 
 30 | const DialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof DialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 33 | >(({ className, children, ...props }, ref) => (
 34 |   <DialogPortal>
 35 |     <DialogOverlay />
 36 |     <DialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     >
 44 |       {children}
 45 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 46 |         <Cross2Icon className="h-4 w-4" />
 47 |         <span className="sr-only">Close</span>
 48 |       </DialogPrimitive.Close>
 49 |     </DialogPrimitive.Content>
 50 |   </DialogPortal>
 51 | ))
 52 | DialogContent.displayName = DialogPrimitive.Content.displayName
 53 | 
 54 | const DialogHeader = ({
 55 |   className,
 56 |   ...props
 57 | }: React.HTMLAttributes<HTMLDivElement>) => (
 58 |   <div
 59 |     className={cn(
 60 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 61 |       className
 62 |     )}
 63 |     {...props}
 64 |   />
 65 | )
 66 | DialogHeader.displayName = "DialogHeader"
 67 | 
 68 | const DialogFooter = ({
 69 |   className,
 70 |   ...props
 71 | }: React.HTMLAttributes<HTMLDivElement>) => (
 72 |   <div
 73 |     className={cn(
 74 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 75 |       className
 76 |     )}
 77 |     {...props}
 78 |   />
 79 | )
 80 | DialogFooter.displayName = "DialogFooter"
 81 | 
 82 | const DialogTitle = React.forwardRef<
 83 |   React.ElementRef<typeof DialogPrimitive.Title>,
 84 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 85 | >(({ className, ...props }, ref) => (
 86 |   <DialogPrimitive.Title
 87 |     ref={ref}
 88 |     className={cn(
 89 |       "text-lg font-semibold leading-none tracking-tight",
 90 |       className
 91 |     )}
 92 |     {...props}
 93 |   />
 94 | ))
 95 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 96 | 
 97 | const DialogDescription = React.forwardRef<
 98 |   React.ElementRef<typeof DialogPrimitive.Description>,
 99 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
100 | >(({ className, ...props }, ref) => (
101 |   <DialogPrimitive.Description
102 |     ref={ref}
103 |     className={cn("text-sm text-muted-foreground", className)}
104 |     {...props}
105 |   />
106 | ))
107 | DialogDescription.displayName = DialogPrimitive.Description.displayName
108 | 
109 | export {
110 |   Dialog,
111 |   DialogPortal,
112 |   DialogOverlay,
113 |   DialogTrigger,
114 |   DialogClose,
115 |   DialogContent,
116 |   DialogHeader,
117 |   DialogFooter,
118 |   DialogTitle,
119 |   DialogDescription,
120 | }
121 | 


--------------------------------------------------------------------------------
/src/pages/Category.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import service from "../appwrite/configAppwrite";
  3 | import { useNavigate, useParams } from "react-router-dom";
  4 | import toast, { Toaster } from "react-hot-toast";
  5 | import { WandSparkles } from "lucide-react";
  6 | import PostCard from "../componenets/PostCard";
  7 | import { motion } from 'framer-motion';
  8 | 
  9 | 
 10 | function CategoryPosts() {
 11 |   const [posts, setPosts] = useState([]);
 12 |   const { category } = useParams();
 13 |   const [loading, setLoading] = useState(true);
 14 |   const navigate = useNavigate();
 15 | 
 16 |   useEffect(() => {
 17 |     if (category) {
 18 |       service.getCategory(category).then((post) => {
 19 |         if (post && post.length>0) {
 20 |           setPosts(post);
 21 |           console.log("postssss", posts);
 22 |           toast.success("Posts loaded successfully!");
 23 |         }else {
 24 |           setPosts([])
 25 |           toast.error("No posts found in this category.");
 26 |           // navigate("/");
 27 |         }
 28 |       })
 29 |       .catch((e)=>{
 30 |         console.log("Faile dto loa dthe posts:", error);
 31 |         toast.error("Failed to load posts.");
 32 |       })
 33 |       .finally(()=> setLoading(false) );
 34 | 
 35 |     }else{
 36 |       navigate('/')
 37 |     }
 38 |   }, [category, navigate]);
 39 | 
 40 |   const handleCreateNewBlog = () => {
 41 |     navigate("/add-post");
 42 |   };
 43 | 
 44 |   const handleGoBackHome = () => {
 45 |     navigate("/");
 46 |   };
 47 | 
 48 |   const toPascalCase = (str) => {
 49 |     return str
 50 |       .toLowerCase()
 51 |       .split(/[\s_]+/)
 52 |       .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
 53 |       .join(" ");
 54 |   };
 55 | 
 56 |   if(loading){
 57 |     return <div> Loding posts.....</div>
 58 |   }
 59 | 
 60 |   return posts && posts.length > 0 ? (
 61 |     <>
 62 |     <div className=" flex flex-col items-center p-4 ">
 63 |         <div className="lg:w-11/12 w-full rounded-lg">
 64 |           <motion.div
 65 |             initial={{ opacity: 0, y: -50 }}
 66 |             animate={{ opacity: 1, y: 0 }}
 67 |             transition={{ duration: 0.8, type: "spring" }}
 68 |             className="text-center"
 69 |           >
 70 |             <h1 className="text-5xl font-extrabold text-center text-black mb-6">
 71 |             {toPascalCase(category)}
 72 |             </h1>
 73 |           </motion.div>
 74 | 
 75 |           
 76 |         </div>
 77 |       </div>
 78 |     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 px-12">
 79 |       {posts.map((post) => (
 80 |         <PostCard key={post.$id} {...post} />
 81 |       ))}
 82 |     </div>
 83 |     </>
 84 |   ) : (
 85 |     <div className="fixed inset-0 flex items-center justify-center z-50 backdrop-blur confirm-dialog">
 86 |       <div className="relative px-4 min-h-screen md:flex md:items-center md:justify-center">
 87 |         <div className="opacity-25 w-full h-full absolute z-10 inset-0"></div>
 88 |         <div className="bg-white rounded-lg md:max-w-md md:mx-auto p-4 fixed inset-x-0 bottom-0 z-50 mb-4 mx-4 md:relative shadow-lg">
 89 |           <div className="md:flex items-center">
 90 |             <div className="rounded-full border border-gray-300 flex items-center justify-center w-16 h-16 flex-shrink-0 mx-auto">
 91 |               <WandSparkles size={32} className="text-indigo-500" />
 92 |             </div>
 93 |             <div className="mt-4 md:mt-0 md:ml-6 text-center md:text-left">
 94 |               <p className="font-bold">Nothing Found!</p>
 95 |               <p className="text-sm text-gray-700 mt-1">
 96 |                 This category does not have any blogs currently.
 97 |               </p>
 98 |             </div>
 99 |           </div>
100 |           <div className="text-center md:text-right mt-4 md:flex md:justify-end">
101 |             <button
102 |               id="confirm-create-btn"
103 |               className="block w-full md:inline-block md:w-auto px-4 py-3 md:py-2 bg-indigo-200 text-indigo-700 rounded-lg font-semibold text-sm md:ml-2 md:order-2"
104 |               onClick={handleCreateNewBlog}
105 |             >
106 |               Create a New Blog
107 |             </button>
108 |             <button
109 |               id="confirm-cancel-btn"
110 |               className="block w-full md:inline-block md:w-auto px-4 py-3 md:py-2 bg-gray-200 rounded-lg font-semibold text-sm mt-4 md:mt-0 md:order-1"
111 |               onClick={handleGoBackHome}
112 |             >
113 |               Go Back to Home Page
114 |             </button>
115 |           </div>
116 |         </div>
117 |       </div>
118 |     </div>
119 |   );
120 | }
121 | 
122 | export default CategoryPosts;
123 | 


--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  3 | 
  4 | import { cn } from "../../lib/utils";
  5 | import { buttonVariants } from "../ui/button";
  6 | 
  7 | const AlertDialog = AlertDialogPrimitive.Root
  8 | 
  9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 10 | 
 11 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 12 | 
 13 | const AlertDialogOverlay = React.forwardRef<
 14 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 15 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 16 | >(({ className, ...props }, ref) => (
 17 |   <AlertDialogPrimitive.Overlay
 18 |     className={cn(
 19 |       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |     ref={ref}
 24 |   />
 25 | ))
 26 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 27 | 
 28 | const AlertDialogContent = React.forwardRef<
 29 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 30 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 31 | >(({ className, ...props }, ref) => (
 32 |   <AlertDialogPortal>
 33 |     <AlertDialogOverlay />
 34 |     <AlertDialogPrimitive.Content
 35 |       ref={ref}
 36 |       className={cn(
 37 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 38 |         className
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   </AlertDialogPortal>
 43 | ))
 44 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 45 | 
 46 | const AlertDialogHeader = ({
 47 |   className,
 48 |   ...props
 49 | }: React.HTMLAttributes<HTMLDivElement>) => (
 50 |   <div
 51 |     className={cn(
 52 |       "flex flex-col space-y-2 text-center sm:text-left",
 53 |       className
 54 |     )}
 55 |     {...props}
 56 |   />
 57 | )
 58 | AlertDialogHeader.displayName = "AlertDialogHeader"
 59 | 
 60 | const AlertDialogFooter = ({
 61 |   className,
 62 |   ...props
 63 | }: React.HTMLAttributes<HTMLDivElement>) => (
 64 |   <div
 65 |     className={cn(
 66 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 67 |       className
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | )
 72 | AlertDialogFooter.displayName = "AlertDialogFooter"
 73 | 
 74 | const AlertDialogTitle = React.forwardRef<
 75 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 76 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 77 | >(({ className, ...props }, ref) => (
 78 |   <AlertDialogPrimitive.Title
 79 |     ref={ref}
 80 |     className={cn("text-lg font-semibold", className)}
 81 |     {...props}
 82 |   />
 83 | ))
 84 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 85 | 
 86 | const AlertDialogDescription = React.forwardRef<
 87 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 88 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 89 | >(({ className, ...props }, ref) => (
 90 |   <AlertDialogPrimitive.Description
 91 |     ref={ref}
 92 |     className={cn("text-sm text-muted-foreground", className)}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | AlertDialogDescription.displayName =
 97 |   AlertDialogPrimitive.Description.displayName
 98 | 
 99 | const AlertDialogAction = React.forwardRef<
100 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
101 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
102 | >(({ className, ...props }, ref) => (
103 |   <AlertDialogPrimitive.Action
104 |     ref={ref}
105 |     className={cn(buttonVariants(), className)}
106 |     {...props}
107 |   />
108 | ))
109 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
110 | 
111 | const AlertDialogCancel = React.forwardRef<
112 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
113 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
114 | >(({ className, ...props }, ref) => (
115 |   <AlertDialogPrimitive.Cancel
116 |     ref={ref}
117 |     className={cn(
118 |       buttonVariants({ variant: "outline" }),
119 |       "mt-2 sm:mt-0",
120 |       className
121 |     )}
122 |     {...props}
123 |   />
124 | ))
125 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
126 | 
127 | export {
128 |   AlertDialog,
129 |   AlertDialogPortal,
130 |   AlertDialogOverlay,
131 |   AlertDialogTrigger,
132 |   AlertDialogContent,
133 |   AlertDialogHeader,
134 |   AlertDialogFooter,
135 |   AlertDialogTitle,
136 |   AlertDialogDescription,
137 |   AlertDialogAction,
138 |   AlertDialogCancel,
139 | }
140 | 


--------------------------------------------------------------------------------
/src/componenets/Login.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { Link, useNavigate } from "react-router-dom";
  3 | import { login as authLogin } from "../store/authSlice";
  4 | import { Button, Input, Logo } from "./index";
  5 | import authService from "../appwrite/auth";
  6 | import { useForm } from "react-hook-form";
  7 | import { useDispatch } from "react-redux";
  8 | import ForgotPasswordModal from "./ForgotPasswordModal.jsx";
  9 | 
 10 | function Login() {
 11 |   const navigate = useNavigate();
 12 |   const dispatch = useDispatch();
 13 |   const { register, handleSubmit, watch } = useForm();
 14 |   const [error, setError] = useState("");
 15 |   const [loading, setLoading] = useState(false); // Added loading state
 16 |   const [isForgotPasswordOpen, setIsForgotPasswordOpen] = useState(false); // Added state for modal
 17 | 
 18 |   const login = async (data) => {
 19 |     setError("");
 20 |     setLoading(true); // Set loading to true when the request starts
 21 |     try {
 22 |       const session = await authService.login(data);
 23 |       if (session) {
 24 |         const userData = await authService.getCurrentUser();
 25 |         if (userData) dispatch(authLogin(userData));
 26 |         navigate("/");
 27 |       }
 28 |     } catch (error) {
 29 |       setError(error.message);
 30 |     } finally {
 31 |       setLoading(false); // Set loading to false after the request completes
 32 |     }
 33 |   };
 34 | 
 35 |   const handleForgotPassword = () => {
 36 |     setIsForgotPasswordOpen(true);
 37 |   };
 38 | 
 39 |   return (
 40 |     <div className='flex items-center justify-center w-full'>
 41 |       <div
 42 |         className={`mx-auto w-full max-w-lg bg-gray-100 rounded-xl p-10 border border-black/10`}
 43 |       >
 44 |         <div className='mb-2 flex justify-center'>
 45 |           <span className='inline-block w-full max-w-[100px]'>
 46 |             <Logo width='100%' />
 47 |           </span>
 48 |         </div>
 49 |         <h2 className='text-center text-2xl font-bold leading-tight'>
 50 |           Sign in to your account
 51 |         </h2>
 52 |         <p className='mt-2 text-center text-base text-black/60'>
 53 |           Don&apos;t have any account?&nbsp;
 54 |           <Link
 55 |             to='/signup'
 56 |             className='font-medium text-primary transition-all duration-200 hover:underline'
 57 |           >
 58 |             Sign Up
 59 |           </Link>
 60 |         </p>
 61 |         {error && <p className='text-red-600 mt-8 text-center'>{error}</p>}
 62 |         <form onSubmit={handleSubmit(login)} className='mt-8'>
 63 |           <div className='space-y-5'>
 64 |             <Input
 65 |               label='Email: '
 66 |               placeholder='Enter your email'
 67 |               type='email'
 68 |               {...register("email", {
 69 |                 required: true,
 70 |                 validate: {
 71 |                   matchPatern: (value) =>
 72 |                     /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
 73 |                     "Email address must be a valid address",
 74 |                 },
 75 |               })}
 76 |             />
 77 |             <Input
 78 |               label='Password: '
 79 |               type='password'
 80 |               placeholder='Enter your password'
 81 |               {...register("password", {
 82 |                 required: true,
 83 |               })}
 84 |             />
 85 |             <Button
 86 |               type='submit'
 87 |               className='w-full'
 88 |               disabled={loading} // Disable the button during loading
 89 |             >
 90 |               {loading ? (
 91 |                 <div className='flex items-center justify-center'>
 92 |                   <svg
 93 |                     className='animate-spin h-5 w-5 mr-2 text-white'
 94 |                     xmlns='http://www.w3.org/2000/svg'
 95 |                     fill='none'
 96 |                     viewBox='0 0 24 24'
 97 |                   >
 98 |                     <circle
 99 |                       className='opacity-25'
100 |                       cx='12'
101 |                       cy='12'
102 |                       r='10'
103 |                       stroke='currentColor'
104 |                       strokeWidth='4'
105 |                     ></circle>
106 |                     <path
107 |                       className='opacity-75'
108 |                       fill='currentColor'
109 |                       d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z'
110 |                     ></path>
111 |                   </svg>
112 |                   Signing in...
113 |                 </div>
114 |               ) : (
115 |                 "Sign in"
116 |               )}
117 |             </Button>
118 |             <p className='mt-2 text-center text-base text-black/60'>
119 |               <button
120 |                 type='button'
121 |                 className='font-medium text-primary transition-all duration-200 hover:underline'
122 |                 onClick={handleForgotPassword}
123 |               >
124 |                 Forgot Password?
125 |               </button>
126 |             </p>
127 |           </div>
128 |         </form>
129 |       </div>
130 |       <ForgotPasswordModal
131 |         isOpen={isForgotPasswordOpen}
132 |         onClose={() => setIsForgotPasswordOpen(false)}
133 |       />
134 |     </div>
135 |   );
136 | }
137 | 
138 | export default Login;
139 | 


--------------------------------------------------------------------------------
/src/pages/ContactUsBG.jsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import { motion } from "framer-motion";
  3 | import { useState, useEffect } from "react";
  4 | import ContactPage from "./ContactPage";
  5 | 
  6 | const ContactUsBgSkeleton = () => (
  7 |   <div className="relative h-[600px] bg-gray-100 overflow-hidden border border-gray-300 animate-pulse">
  8 |     <div className="absolute inset-0 grid grid-cols-12 gap-4 bg-[length:60px_60px] bg-gray-200" />
  9 | 
 10 |     {/* Skeleton floating circles */}
 11 |     <div className="absolute top-[-35px] left-[300px] h-36 w-36 bg-gray-300 rounded-full animate-pulse" />
 12 |     <div className="absolute top-[50px] right-[50px] h-[400px] w-[400px] bg-gray-300 rounded-full animate-pulse" />
 13 |     <div className="absolute bottom-10 right-[500px] h-28 w-28 bg-gray-300 rounded-full animate-pulse" />
 14 |     <div className="absolute bottom-[-60px] left-8 h-[200px] w-[200px] bg-gray-300 rounded-full animate-pulse" />
 15 | 
 16 |     {/* Skeleton for text content */}
 17 |     <div className="relative z-10 flex flex-col items-start justify-center h-full pl-12 text-left space-y-4">
 18 |       <div className="h-10 w-3/4 bg-gray-300 rounded-md" />
 19 |       <div className="h-10 w-2/3 bg-gray-300 rounded-md mt-2" />
 20 |       <div className="h-5 w-1/2 bg-gray-300 rounded-md mt-4" />
 21 |       <div className="h-5 w-1/2 bg-gray-300 rounded-md mt-2" />
 22 |       
 23 |       {/* Skeleton for buttons */}
 24 |       <div className="flex space-x-4 mt-8">
 25 |         <div className="h-10 w-24 bg-gray-300 rounded-md" />
 26 |         <div className="h-10 w-24 bg-gray-300 rounded-md" />
 27 |       </div>
 28 |     </div>
 29 |   </div>
 30 | );
 31 | 
 32 | const ContactUsBg = () => {
 33 |   const [loading, setLoading] = useState(true);
 34 | 
 35 |   // Simulate loading delay
 36 |   useEffect(() => {
 37 |     const timer = setTimeout(() => setLoading(false), 2000); // Adjust duration as needed
 38 |     return () => clearTimeout(timer);
 39 |   }, []);
 40 | 
 41 |   if (loading) {
 42 |     return <ContactUsBgSkeleton />;
 43 |   }
 44 | 
 45 |   return (
 46 |     <div className="relative h-[1000px] bg-white flex justify-center items-center overflow-hidden border border-gray-300">
 47 |       <motion.div
 48 |         className="absolute inset-0 grid grid-cols-12 gap-4 bg-[length:60px_60px]"
 49 |         style={{
 50 |           backgroundImage: `
 51 |             linear-gradient(270deg, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 25.1%),
 52 |             linear-gradient(to right, #e2e8f0 0.5px, transparent 3.1px),
 53 |             linear-gradient(to bottom, #e2e8f0 1px, transparent 1px),
 54 |             linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%)`
 55 |         }}
 56 |       >
 57 |         {/* Floating Circles with subtle scaling and hovering animation */}
 58 |         <motion.div
 59 |           className="absolute top-[-35px] left-[300px] h-36 w-36 bg-indigo-500 rounded-full"
 60 |           animate={{ scale: [1, 1.1, 1] }}
 61 |           transition={{ duration: 2, repeat: Infinity }}
 62 |         />
 63 |         <motion.div
 64 |           className="absolute top-[50px] right-[50px] h-[400px] w-[400px] bg-black rounded-full"
 65 |           animate={{ scale: [1, 1.1, 1] }}
 66 |           transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
 67 |         />
 68 |         <motion.div
 69 |           className="absolute top-[750px] right-[50px] h-[400px] w-[400px] bg-black rounded-full"
 70 |           animate={{ scale: [1, 1.1, 1] }}
 71 |           transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
 72 |         />
 73 |         <motion.div
 74 |           className="absolute top-[950px] left-[50px] h-28 w-28 bg-indigo-500 rounded-full"
 75 |           animate={{ scale: [1, 1.1, 1] }}
 76 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 77 |         />
 78 |         <motion.div
 79 |           className="absolute top-[1100px] left-[75px] h-[400px] w-[400px] bg-indigo-500 rounded-full"
 80 |           animate={{ scale: [1, 1.1, 1] }}
 81 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 82 |         />
 83 |         <motion.div
 84 |           className="absolute top-[1900px] left-[75px] h-[200px] w-[200px] bg-indigo-500 rounded-full"
 85 |           animate={{ scale: [1, 1.1, 1] }}
 86 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 87 |         />
 88 |         <motion.div
 89 |           className="absolute top-[200px] left-[50px] h-[200px] w-[200px] bg-black rounded-full"
 90 |           animate={{ scale: [1, 1.1, 1] }}
 91 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 92 |         />
 93 |         <motion.div
 94 |           className="absolute bottom-10 right-[500px] h-28 w-28 bg-indigo-500 rounded-full"
 95 |           animate={{ scale: [1, 1.1, 1] }}
 96 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 97 |         />
 98 |         <motion.div
 99 |           className="absolute bottom-[-60px] left-8 h-[200px] w-[200px] bg-black rounded-full"
100 |           animate={{ scale: [1, 1.1, 1] }}
101 |           transition={{ duration: 2, repeat: Infinity, delay: 0.7 }}
102 |         />
103 |       </motion.div>
104 | 
105 |       {/* Centered White Box */}
106 |       <div className="relative z-10 bg-white -mt-60 -mb-24 rounded-lg shadow-lg p-12 w-[1200px] h-[700px] flex ">
107 |         <div className="w-full">
108 | 
109 |         <ContactPage/>
110 |         </div>
111 |       </div>
112 |     </div>
113 |   );
114 | };
115 | 
116 | export default ContactUsBg;
117 | 


--------------------------------------------------------------------------------
/env.md:
--------------------------------------------------------------------------------
  1 | # Appwrite Environment Setup
  2 | 
  3 | This guide explains how to set up and configure Appwrite for your project, including creating the necessary database, collection, and bucket. You'll also learn how to obtain the required IDs and configure environment variables.
  4 | 
  5 | ## Prerequisites
  6 | 
  7 | 1. You need an [Appwrite](https://appwrite.io) instance. You can either:
  8 |    - Self-host Appwrite on your server.
  9 |    - Use Appwrite's cloud service (recommended for simplicity).
 10 | 
 11 | 2. Access to the [Appwrite Console](https://appwrite.io/docs/console) for managing your project.
 12 | 
 13 | ## Step 1: Set Up Your Appwrite Project
 14 | 
 15 | ### 1.1 Create a New Project
 16 | 1. Login to your Appwrite dashboard.
 17 | 2. Click on **Create Project**.
 18 | 3. Give your project a name and select the platform (Web, Flutter, etc.).
 19 | 4. Once the project is created, you’ll be redirected to the project dashboard.
 20 | 
 21 | **Get the Project ID**:
 22 | - Go to the project settings, and copy the **Project ID**.
 23 | - Set this as `APPWRITE_PROJECT_ID` in your `.env` file.
 24 | 
 25 | ```bash
 26 | APPWRITE_PROJECT_ID=your-appwrite-project-id
 27 | ```
 28 | 
 29 | ## Step 2: Create a Database and Collection
 30 | 
 31 | ### 2.1 Create a Database
 32 | 1. In your project dashboard, navigate to the **Database** section.
 33 | 2. Click on **Create Database** and name it (e.g., `blogDB`).
 34 | 
 35 | **Get the Database ID**:
 36 | - After creating the database, copy the **Database ID**.
 37 | - Set this as `APPWRITE_DATABASE_ID` in your `.env` file.
 38 | 
 39 | ```bash
 40 | APPWRITE_DATABASE_ID=your-appwrite-database-id
 41 | ```
 42 | 
 43 | ### 2.2 Create a Collection
 44 | 1. In the database, create a **Collection**.
 45 | 2. Name the collection (e.g., `posts`).
 46 | 3. Configure the collection to allow **Document Writing**, **Reading**, **Updating**, and **Deleting**.
 47 | 
 48 | **Get the Collection ID**:
 49 | - After creating the collection, copy the **Collection ID**.
 50 | - Set this as `APPWRITE_COLLECTION_ID` in your `.env` file.
 51 | 
 52 | ```bash
 53 | APPWRITE_COLLECTION_ID=your-appwrite-collection-id
 54 | ```
 55 | 
 56 | ### 2.3 Set Collection Attributes
 57 | To store the `title`, `slug`, `content`, `featuredImage`, `status`, and `userId` for your posts, you need to define the following attributes:
 58 | 
 59 | 1. **Title**:
 60 |    - Type: String
 61 |    - Length: 128
 62 |    - Required: Yes
 63 | 
 64 | 2. **Slug**:
 65 |    - Type: String
 66 |    - Length: 128
 67 |    - Required: Yes
 68 |    - Unique: Yes
 69 | 
 70 | 3. **Content**:
 71 |    - Type: String
 72 |    - Length: 5000
 73 |    - Required: Yes
 74 | 
 75 | 4. **Featured Image**:
 76 |    - Type: String
 77 |    - Length: 128
 78 |    - Required: No
 79 | 
 80 | 5. **Status**:
 81 |    - Type: Enum
 82 |    - Values: `active`, `inactive`
 83 |    - Default: `active`
 84 | 
 85 | 6. **User ID**:
 86 |    - Type: String
 87 |    - Length: 36
 88 |    - Required: Yes
 89 | 
 90 | You can create these attributes through the **Attributes** tab when viewing the collection in the Appwrite dashboard.
 91 | 
 92 | ## Step 3: Create a Storage Bucket
 93 | 
 94 | ### 3.1 Create a Bucket
 95 | 1. In the Appwrite console, go to **Storage**.
 96 | 2. Click on **Create Bucket** and name it (e.g., `images`).
 97 | 3. Set the file size limit and allowed file types (e.g., `png`, `jpg`, `jpeg`, `gif`).
 98 | 
 99 | **Get the Bucket ID**:
100 | - After creating the bucket, copy the **Bucket ID**.
101 | - Set this as `APPWRITE_BUCKET_ID` in your `.env` file.
102 | 
103 | ```bash
104 | APPWRITE_BUCKET_ID=your-appwrite-bucket-id
105 | ```
106 | 
107 | ## Step 4: Set Up Permissions
108 | 
109 | ### 4.1 Configure Collection Permissions
110 | - Go to the **Collection** in the Appwrite console.
111 | - Under **Permissions**, set the following permissions:
112 |   - **Create**, **Read**, **Update**, and **Delete** for `role:all`.
113 | 
114 | ### 4.2 Configure Bucket Permissions
115 | - Go to the **Bucket** settings.
116 | - Set **Create**, **Read**, **Update**, and **Delete** permissions for `role:all`.
117 | 
118 | ### 4.3 Document-Level Permissions (Optional)
119 | You can also set document-level permissions when creating a document, ensuring that users can manage their own posts.
120 | 
121 | ## Step 5: Set Environment Variables
122 | 
123 | In your project, create a `.env` file and populate it with the following environment variables:
124 | 
125 | ```bash
126 | APPWRITE_ENDPOINT=https://your-appwrite-instance.appwrite.cloud
127 | APPWRITE_PROJECT_ID=your-appwrite-project-id
128 | APPWRITE_DATABASE_ID=your-appwrite-database-id
129 | APPWRITE_COLLECTION_ID=your-appwrite-collection-id
130 | APPWRITE_BUCKET_ID=your-appwrite-bucket-id
131 | ```
132 | 
133 | - **APPWRITE_ENDPOINT**: The URL of your Appwrite instance.
134 | - **APPWRITE_PROJECT_ID**: The Project ID from Step 1.
135 | - **APPWRITE_DATABASE_ID**: The Database ID from Step 2.
136 | - **APPWRITE_COLLECTION_ID**: The Collection ID from Step 2.
137 | - **APPWRITE_BUCKET_ID**: The Bucket ID from Step 3.
138 | 
139 | ## Step 6: Test the Setup
140 | 
141 | 1. Ensure your project’s environment is using the correct `.env` file.
142 | 2. Run your application and make a test request (e.g., creating a post or uploading an image).
143 | 3. If everything is set up correctly, your Appwrite integration should work smoothly.
144 | 
145 | ---
146 | 
147 | By following these instructions, you should have Appwrite fully integrated and set up with proper environment variables, database, collection, and bucket for file storage.


--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { type DialogProps } from "@radix-ui/react-dialog"
  3 | import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
  4 | import { Command as CommandPrimitive } from "cmdk"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { Dialog, DialogContent } from "@/components/ui/dialog"
  8 | 
  9 | const Command = React.forwardRef<
 10 |   React.ElementRef<typeof CommandPrimitive>,
 11 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 12 | >(({ className, ...props }, ref) => (
 13 |   <CommandPrimitive
 14 |     ref={ref}
 15 |     className={cn(
 16 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 17 |       className
 18 |     )}
 19 |     {...props}
 20 |   />
 21 | ))
 22 | Command.displayName = CommandPrimitive.displayName
 23 | 
 24 | interface CommandDialogProps extends DialogProps {}
 25 | 
 26 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 27 |   return (
 28 |     <Dialog {...props}>
 29 |       <DialogContent className="overflow-hidden p-0">
 30 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 31 |           {children}
 32 |         </Command>
 33 |       </DialogContent>
 34 |     </Dialog>
 35 |   )
 36 | }
 37 | 
 38 | const CommandInput = React.forwardRef<
 39 |   React.ElementRef<typeof CommandPrimitive.Input>,
 40 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 41 | >(({ className, ...props }, ref) => (
 42 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 43 |     <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 44 |     <CommandPrimitive.Input
 45 |       ref={ref}
 46 |       className={cn(
 47 |         "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 48 |         className
 49 |       )}
 50 |       {...props}
 51 |     />
 52 |   </div>
 53 | ))
 54 | 
 55 | CommandInput.displayName = CommandPrimitive.Input.displayName
 56 | 
 57 | const CommandList = React.forwardRef<
 58 |   React.ElementRef<typeof CommandPrimitive.List>,
 59 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 60 | >(({ className, ...props }, ref) => (
 61 |   <CommandPrimitive.List
 62 |     ref={ref}
 63 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | 
 68 | CommandList.displayName = CommandPrimitive.List.displayName
 69 | 
 70 | const CommandEmpty = React.forwardRef<
 71 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 72 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 73 | >((props, ref) => (
 74 |   <CommandPrimitive.Empty
 75 |     ref={ref}
 76 |     className="py-6 text-center text-sm"
 77 |     {...props}
 78 |   />
 79 | ))
 80 | 
 81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 82 | 
 83 | const CommandGroup = React.forwardRef<
 84 |   React.ElementRef<typeof CommandPrimitive.Group>,
 85 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 86 | >(({ className, ...props }, ref) => (
 87 |   <CommandPrimitive.Group
 88 |     ref={ref}
 89 |     className={cn(
 90 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 91 |       className
 92 |     )}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | 
 97 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 98 | 
 99 | const CommandSeparator = React.forwardRef<
100 |   React.ElementRef<typeof CommandPrimitive.Separator>,
101 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
102 | >(({ className, ...props }, ref) => (
103 |   <CommandPrimitive.Separator
104 |     ref={ref}
105 |     className={cn("-mx-1 h-px bg-border", className)}
106 |     {...props}
107 |   />
108 | ))
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110 | 
111 | const CommandItem = React.forwardRef<
112 |   React.ElementRef<typeof CommandPrimitive.Item>,
113 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
114 | >(({ className, ...props }, ref) => (
115 |   <CommandPrimitive.Item
116 |     ref={ref}
117 |     className={cn(
118 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
119 |       className
120 |     )}
121 |     {...props}
122 |   />
123 | ))
124 | 
125 | CommandItem.displayName = CommandPrimitive.Item.displayName
126 | 
127 | const CommandShortcut = ({
128 |   className,
129 |   ...props
130 | }: React.HTMLAttributes<HTMLSpanElement>) => {
131 |   return (
132 |     <span
133 |       className={cn(
134 |         "ml-auto text-xs tracking-widest text-muted-foreground",
135 |         className
136 |       )}
137 |       {...props}
138 |     />
139 |   )
140 | }
141 | CommandShortcut.displayName = "CommandShortcut"
142 | 
143 | export {
144 |   Command,
145 |   CommandDialog,
146 |   CommandInput,
147 |   CommandList,
148 |   CommandEmpty,
149 |   CommandGroup,
150 |   CommandItem,
151 |   CommandShortcut,
152 |   CommandSeparator,
153 | }
154 | 


--------------------------------------------------------------------------------
/src/components/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { ChevronDownIcon } from "@radix-ui/react-icons"
  3 | import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
  4 | import { cva } from "class-variance-authority"
  5 | 
  6 | import { cn } from "../../lib/utils";
  7 | 
  8 | const NavigationMenu = React.forwardRef<
  9 |   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
 10 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 11 | >(({ className, children, ...props }, ref) => (
 12 |   <NavigationMenuPrimitive.Root
 13 |     ref={ref}
 14 |     className={cn(
 15 |       "relative z-10 flex max-w-max flex-1 items-center justify-center",
 16 |       className
 17 |     )}
 18 |     {...props}
 19 |   >
 20 |     {children}
 21 |     <NavigationMenuViewport />
 22 |   </NavigationMenuPrimitive.Root>
 23 | ))
 24 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 25 | 
 26 | const NavigationMenuList = React.forwardRef<
 27 |   React.ElementRef<typeof NavigationMenuPrimitive.List>,
 28 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 29 | >(({ className, ...props }, ref) => (
 30 |   <NavigationMenuPrimitive.List
 31 |     ref={ref}
 32 |     className={cn(
 33 |       "group flex flex-1 list-none items-center justify-center space-x-1",
 34 |       className
 35 |     )}
 36 |     {...props}
 37 |   />
 38 | ))
 39 | NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 40 | 
 41 | const NavigationMenuItem = NavigationMenuPrimitive.Item
 42 | 
 43 | const navigationMenuTriggerStyle = cva(
 44 |   "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 45 | )
 46 | 
 47 | const NavigationMenuTrigger = React.forwardRef<
 48 |   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
 49 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 50 | >(({ className, children, ...props }, ref) => (
 51 |   <NavigationMenuPrimitive.Trigger
 52 |     ref={ref}
 53 |     className={cn(navigationMenuTriggerStyle(), "group", className)}
 54 |     {...props}
 55 |   >
 56 |     {children}{" "}
 57 |     <ChevronDownIcon
 58 |       className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
 59 |       aria-hidden="true"
 60 |     />
 61 |   </NavigationMenuPrimitive.Trigger>
 62 | ))
 63 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 64 | 
 65 | const NavigationMenuContent = React.forwardRef<
 66 |   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
 67 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 68 | >(({ className, ...props }, ref) => (
 69 |   <NavigationMenuPrimitive.Content
 70 |     ref={ref}
 71 |     className={cn(
 72 |       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
 73 |       className
 74 |     )}
 75 |     {...props}
 76 |   />
 77 | ))
 78 | NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 79 | 
 80 | const NavigationMenuLink = NavigationMenuPrimitive.Link
 81 | 
 82 | const NavigationMenuViewport = React.forwardRef<
 83 |   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
 84 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 85 | >(({ className, ...props }, ref) => (
 86 |   <div className={cn("absolute left-0 top-full flex justify-center")}>
 87 |     <NavigationMenuPrimitive.Viewport
 88 |       className={cn(
 89 |         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
 90 |         className
 91 |       )}
 92 |       ref={ref}
 93 |       {...props}
 94 |     />
 95 |   </div>
 96 | ))
 97 | NavigationMenuViewport.displayName =
 98 |   NavigationMenuPrimitive.Viewport.displayName
 99 | 
100 | const NavigationMenuIndicator = React.forwardRef<
101 |   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
102 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
103 | >(({ className, ...props }, ref) => (
104 |   <NavigationMenuPrimitive.Indicator
105 |     ref={ref}
106 |     className={cn(
107 |       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
108 |       className
109 |     )}
110 |     {...props}
111 |   >
112 |     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
113 |   </NavigationMenuPrimitive.Indicator>
114 | ))
115 | NavigationMenuIndicator.displayName =
116 |   NavigationMenuPrimitive.Indicator.displayName
117 | 
118 | export {
119 |   navigationMenuTriggerStyle,
120 |   NavigationMenu,
121 |   NavigationMenuList,
122 |   NavigationMenuItem,
123 |   NavigationMenuContent,
124 |   NavigationMenuTrigger,
125 |   NavigationMenuLink,
126 |   NavigationMenuIndicator,
127 |   NavigationMenuViewport,
128 | }
129 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community includes:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | a representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | .
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/src/pages/Presskit.css:
--------------------------------------------------------------------------------
  1 | /* PressKit.css */
  2 | 
  3 | 
  4 | 
  5 | /* Main Container */
  6 | .presskit-container {
  7 |     max-width: 1200px;
  8 |     margin: 0 auto;
  9 |     padding: 2rem;
 10 |     background-color: #f9f9f9;
 11 |     opacity: 0;
 12 |     animation: fadeIn 1.5s ease-in-out forwards;
 13 |   }
 14 |   
 15 |   /* Title Styles */
 16 |   .presskit-title {
 17 |     font-size: 4rem;
 18 |     font-weight: bold;
 19 |     text-align: center;
 20 |     margin-bottom: 40px;
 21 |     background: linear-gradient(to right, #00090c, #000000);
 22 |     -webkit-background-clip: text;
 23 |     -webkit-text-fill-color: transparent;
 24 |     text-shadow: 2px 2px 5px rgba(1, 9, 17, 0.5);
 25 |     animation: zoomIn 1s ease-in-out;
 26 |   }
 27 | 
 28 |   .btn-div{
 29 |     display: flex;
 30 |     justify-content: center;
 31 |   }
 32 |   
 33 |   /* Section Styles */
 34 |   .presskit-section {
 35 |     margin-bottom: 40px;
 36 |     padding: 2rem;
 37 |     margin-bottom: 2rem;
 38 |     border-bottom: 1px solid #ddd;
 39 |     border-radius: 10px;
 40 |     background: linear-gradient(135deg, #ffffff 0%, #e6f2ff 100%);
 41 |     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 42 |     transition: transform 0.3s ease;
 43 |   }
 44 |   
 45 |   .presskit-section:hover {
 46 |     transform: scale(1.02);
 47 |   }
 48 |   
 49 |   /* Loading Animation */
 50 |   .loading-animation {
 51 |     font-size: 2rem;
 52 |     color: #0073e6;
 53 |     text-align: center;
 54 |     padding: 100px;
 55 |     animation: fadeIn 1.5s ease-in-out infinite alternate;
 56 |   }
 57 |   
 58 |   /* Animations */
 59 |   @keyframes fadeIn {
 60 |     from {
 61 |       opacity: 0;
 62 |     }
 63 |     to {
 64 |       opacity: 1;
 65 |     }
 66 |   }
 67 |   
 68 |   @keyframes zoomIn {
 69 |     from {
 70 |       transform: scale(0.8);
 71 |     }
 72 |     to {
 73 |       transform: scale(1);
 74 |     }
 75 |   }
 76 |   
 77 |   /* Social Media Links */
 78 |   .social-links {
 79 |     display: flex;
 80 |     justify-content: center; /* Center-align the links */
 81 |     gap: 15px;
 82 |     margin-top: 20px;
 83 |   }
 84 |   
 85 |   .social-link {
 86 |     display: inline-block;
 87 |     padding: 10px 20px;
 88 |     font-weight: bold;
 89 |     text-decoration: none;
 90 |     color: #fff;
 91 |     background-color: #0073e6; /* Default background color */
 92 |     border-radius: 50px; /* Rounded corners */
 93 |     transition: transform 0.3s ease, background-color 0.3s ease,
 94 |       box-shadow 0.3s ease;
 95 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
 96 |   }
 97 |   
 98 |   /* Hover effect: change background, scale up slightly, and add shadow */
 99 |   .social-link:hover {
100 |     background-color: #005bb5;
101 |     transform: translateY(-3px) scale(1.05); /* Slightly lift and enlarge the link */
102 |     box-shadow: 0 6px 12px rgba(0, 115, 230, 0.3); /* More pronounced shadow */
103 |   }
104 |   
105 |   /* Different colors for each platform */
106 |   .social-link.twitter {
107 |     background-color: #1da1f2;
108 |   }
109 |   
110 |   .social-link.facebook {
111 |     background-color: #1877f2;
112 |   }
113 |   
114 |   .social-link.linkedin {
115 |     background-color: #0077b5;
116 |   }
117 |   
118 |   .social-link:hover.twitter {
119 |     background-color: #0d95e8;
120 |   }
121 |   
122 |   .social-link:hover.facebook {
123 |     background-color: #145dbf;
124 |   }
125 |   
126 |   .social-link:hover.linkedin {
127 |     background-color: #005582;
128 |   }
129 |   
130 |   /* General Link Styles */
131 |   .presskit-link {
132 |     display: inline-block;
133 |     color: #0073e6;
134 |     font-weight: normal;
135 |     text-decoration: none;
136 |     position: relative;
137 |     padding: 5px 0;
138 |     transition: color 0.3s ease, font-weight 0.3s ease;
139 |   }
140 |   
141 |   /* Hover Effect: Change color and increase font-weight */
142 |   .presskit-link:hover {
143 |     color: #005bb5;
144 |     font-weight: bold;
145 |   }
146 |   
147 |   /* Underline Effect on Hover */
148 |   .presskit-link::after {
149 |     content: "";
150 |     display: block;
151 |     width: 0;
152 |     height: 2px;
153 |     background-color: #005bb5;
154 |     transition: width 0.3s ease;
155 |     position: absolute;
156 |     left: 0;
157 |     bottom: 0;
158 |   }
159 |   
160 |   /* On Hover, underline grows from left to right */
161 |   .presskit-link:hover::after {
162 |     width: 100%;
163 |   }
164 |   
165 |   /* Download Button Styling */
166 |   .download-btn {
167 |     display: inline-block;
168 |     padding: 12px 24px;
169 |     background: linear-gradient(90deg, #0073e6, #00d4ff);
170 |     color: white;
171 |     font-weight: bold;
172 |     text-decoration: none;
173 |     border-radius: 50px;
174 |     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
175 |     transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
176 |     text-align: center;
177 |   }
178 |   
179 |   /* Hover Effect: change color, elevate, and subtle glow */
180 |   .download-btn:hover {
181 |     background: linear-gradient(90deg, #005bb5, #00a3cc);
182 |     color: white;
183 |     transform: translateY(-3px) scale(1.05); /* Slight lift and enlarge */
184 |     box-shadow: 0 8px 15px rgba(0, 115, 230, 0.4); /* Glow effect */
185 |     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
186 |   }
187 | 
188 |   .section-title {
189 |     text-align: center;          /* Centers the title text */
190 |     font-size: 2rem;             /* Adjust the font size as needed */
191 |     margin-bottom: 1rem;
192 |     color: #333;                 /* Text color */
193 |     transition: transform 0.3s ease, color 0.3s ease; /* Transition effect for hover */
194 |   }
195 |   
196 |   /* Hover effect for section titles */
197 |   .section-title:hover {
198 |     transform: scale(1.1);       /* Scale up the title slightly on hover */
199 |     color: #007bff;              /* Change text color on hover (blue in this case) */
200 |   }
201 | 
202 | 
203 | 
204 |   
205 |   


--------------------------------------------------------------------------------
/src/componenets/Signup.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import authService from "../appwrite/auth";
  3 | import { Link, useNavigate } from "react-router-dom";
  4 | import { Button, Input, Logo } from "./index";
  5 | import { useDispatch } from "react-redux";
  6 | import { login } from "../store/authSlice";
  7 | import { useForm } from "react-hook-form";
  8 | import { AiOutlineEyeInvisible, AiOutlineEye } from "react-icons/ai";
  9 | 
 10 | function Signup() {
 11 |   const navigate = useNavigate();
 12 |   const [error, setError] = useState("");
 13 |   const dispatch = useDispatch();
 14 |   const { register, handleSubmit, watch } = useForm();
 15 |   const [showPassword, setShowPassword] = useState(false);
 16 |   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 17 |   const [passwordStrength, setPasswordStrength] = useState("");
 18 | 
 19 |   const create = async (data) => {
 20 |     // console.log(data);
 21 |     setError("");
 22 |     if (data.password !== data.confirmPassword) {
 23 |       setError("Passwords do not match");
 24 |       return;
 25 |     }
 26 | 
 27 |     try {
 28 |       const userData = await authService.createAccount(data);
 29 |  
 30 |       if (userData) {
 31 |         const currentUser = await authService.getCurrentUser();
 32 |         if (currentUser) dispatch(login(currentUser));
 33 |         navigate("/");
 34 |       }
 35 |     } catch (error) {
 36 |       setError(error.message);
 37 |     }
 38 |   };
 39 | 
 40 |   const handlePasswordChange = (e) => {
 41 |     const password = e.target.value;
 42 |     if (password.length < 6) {
 43 |       setPasswordStrength("Weak");
 44 |     } else if (
 45 |       password.length >= 6 &&
 46 |       /\d/.test(password) &&
 47 |       /[A-Z]/.test(password)
 48 |     ) {
 49 |       setPasswordStrength("Strong");
 50 |     } else {
 51 |       setPasswordStrength("Medium");
 52 |     }
 53 |   };
 54 | 
 55 |   return (
 56 |     <div className='flex items-center justify-center'>
 57 |       <div className='mx-auto w-full max-w-lg bg-gray-100 rounded-xl p-10 border border-black/10'>
 58 |         <div className='mb-2 flex justify-center'>
 59 |           <span className='inline-block w-full max-w-[100px]'>
 60 |             <Logo width='100%' />
 61 |           </span>
 62 |         </div>
 63 |         <h2 className='text-center text-2xl font-bold leading-tight'>
 64 |           Sign up to create account
 65 |         </h2>
 66 |         <p className='mt-2 text-center text-base text-black/60'>
 67 |           Already have an account?&nbsp;
 68 |           <Link
 69 |             to='/login'
 70 |             className='font-medium text-primary transition-all duration-200 hover:underline'
 71 |           >
 72 |             Sign In
 73 |           </Link>
 74 |         </p>
 75 |         {error && <p className='text-red-600 mt-8 text-center'>{error}</p>}
 76 | 
 77 |         <form onSubmit={handleSubmit(create)}>
 78 |           <div className='space-y-5'>
 79 |             <Input
 80 |               label='Full Name: '
 81 |               placeholder='Enter your full name'
 82 |               {...register("name", {
 83 |                 required: true,
 84 |               })}
 85 |             />
 86 | 
 87 |             <Input
 88 |               placeholder='Enter your email'
 89 |               type='email'
 90 |               label='Email: '
 91 |               {...register("email", {
 92 |                 required: true,
 93 |                 validate: {
 94 |                   matchPattern: (value) =>
 95 |                     /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
 96 |                     "Email address must be a valid address",
 97 |                 },
 98 |               })}
 99 |             />
100 | 
101 |             <div className='flex flex-col sm:flex-row sm:justify-around gap-2'>
102 |               <div className='relative flex flex-col'>
103 |                 <Input
104 |                   label='Password: '
105 |                   type={showPassword ? "text" : "password"}
106 |                   placeholder='Enter your password'
107 |                   {...register("password", {
108 |                     required: true,
109 |                     onChange: handlePasswordChange,
110 |                   })}
111 |                 />
112 |                 <button
113 |                   type='button'
114 |                   className='absolute right-3 top-9'
115 |                   onClick={() => setShowPassword(!showPassword)}
116 |                 >
117 |                   {showPassword ? (
118 |                     <AiOutlineEye fontSize={24} fill='#AFB2BF' />
119 |                   ) : (
120 |                     <AiOutlineEyeInvisible fontSize={24} fill='#AFB2BF' />
121 |                   )}
122 |                 </button>
123 |                 <p
124 |                   className={`mt-1 text-sm ${passwordStrength === "Strong"
125 |                     ? "text-green-500"
126 |                     : passwordStrength === "Medium"
127 |                       ? "text-yellow-500"
128 |                       : "text-red-500"
129 |                     }`}
130 |                 >
131 |                   Strength: {passwordStrength}
132 |                 </p>
133 |               </div>
134 |               <div className='relative'>
135 |                 <Input
136 |                   label='Confirm Password: '
137 |                   type={showConfirmPassword ? "text" : "password"}
138 |                   placeholder='Confirm your password'
139 |                   {...register("confirmPassword", {
140 |                     required: true,
141 |                   })}
142 |                 />
143 |                 <button
144 |                   type='button'
145 |                   className='absolute right-1 top-9'
146 |                   onClick={() => setShowConfirmPassword(!showConfirmPassword)}
147 |                 >
148 |                   {showConfirmPassword ? (
149 |                     <AiOutlineEye fontSize={24} fill='#AFB2BF' />
150 |                   ) : (
151 |                     <AiOutlineEyeInvisible fontSize={24} fill='#AFB2BF' />
152 |                   )}
153 |                 </button>
154 |               </div>
155 |             </div>
156 |             <Button type='submit' className='w-full'>
157 |               Create Account
158 |             </Button>
159 |           </div>
160 |         </form>
161 |       </div>
162 |     </div>
163 |   );
164 | }
165 | 
166 | export default Signup;
167 | 


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import {
  3 |   CaretSortIcon,
  4 |   CheckIcon,
  5 |   ChevronDownIcon,
  6 |   ChevronUpIcon,
  7 | } from "@radix-ui/react-icons"
  8 | import * as SelectPrimitive from "@radix-ui/react-select"
  9 | 
 10 | import { cn } from "../../lib/utils";
 11 | 
 12 | const Select = SelectPrimitive.Root
 13 | 
 14 | const SelectGroup = SelectPrimitive.Group
 15 | 
 16 | const SelectValue = SelectPrimitive.Value
 17 | 
 18 | const SelectTrigger = React.forwardRef<
 19 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 20 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 21 | >(({ className, children, ...props }, ref) => (
 22 |   <SelectPrimitive.Trigger
 23 |     ref={ref}
 24 |     className={cn(
 25 |       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 26 |       className
 27 |     )}
 28 |     {...props}
 29 |   >
 30 |     {children}
 31 |     <SelectPrimitive.Icon asChild>
 32 |       <CaretSortIcon className="h-4 w-4 opacity-50" />
 33 |     </SelectPrimitive.Icon>
 34 |   </SelectPrimitive.Trigger>
 35 | ))
 36 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 37 | 
 38 | const SelectScrollUpButton = React.forwardRef<
 39 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 40 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 41 | >(({ className, ...props }, ref) => (
 42 |   <SelectPrimitive.ScrollUpButton
 43 |     ref={ref}
 44 |     className={cn(
 45 |       "flex cursor-default items-center justify-center py-1",
 46 |       className
 47 |     )}
 48 |     {...props}
 49 |   >
 50 |     <ChevronUpIcon />
 51 |   </SelectPrimitive.ScrollUpButton>
 52 | ))
 53 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 54 | 
 55 | const SelectScrollDownButton = React.forwardRef<
 56 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 57 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 58 | >(({ className, ...props }, ref) => (
 59 |   <SelectPrimitive.ScrollDownButton
 60 |     ref={ref}
 61 |     className={cn(
 62 |       "flex cursor-default items-center justify-center py-1",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   >
 67 |     <ChevronDownIcon />
 68 |   </SelectPrimitive.ScrollDownButton>
 69 | ))
 70 | SelectScrollDownButton.displayName =
 71 |   SelectPrimitive.ScrollDownButton.displayName
 72 | 
 73 | const SelectContent = React.forwardRef<
 74 |   React.ElementRef<typeof SelectPrimitive.Content>,
 75 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 76 | >(({ className, children, position = "popper", ...props }, ref) => (
 77 |   <SelectPrimitive.Portal>
 78 |     <SelectPrimitive.Content
 79 |       ref={ref}
 80 |       className={cn(
 81 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 82 |         position === "popper" &&
 83 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 84 |         className
 85 |       )}
 86 |       position={position}
 87 |       {...props}
 88 |     >
 89 |       <SelectScrollUpButton />
 90 |       <SelectPrimitive.Viewport
 91 |         className={cn(
 92 |           "p-1",
 93 |           position === "popper" &&
 94 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 95 |         )}
 96 |       >
 97 |         {children}
 98 |       </SelectPrimitive.Viewport>
 99 |       <SelectScrollDownButton />
100 |     </SelectPrimitive.Content>
101 |   </SelectPrimitive.Portal>
102 | ))
103 | SelectContent.displayName = SelectPrimitive.Content.displayName
104 | 
105 | const SelectLabel = React.forwardRef<
106 |   React.ElementRef<typeof SelectPrimitive.Label>,
107 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
108 | >(({ className, ...props }, ref) => (
109 |   <SelectPrimitive.Label
110 |     ref={ref}
111 |     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
112 |     {...props}
113 |   />
114 | ))
115 | SelectLabel.displayName = SelectPrimitive.Label.displayName
116 | 
117 | const SelectItem = React.forwardRef<
118 |   React.ElementRef<typeof SelectPrimitive.Item>,
119 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
120 | >(({ className, children, ...props }, ref) => (
121 |   <SelectPrimitive.Item
122 |     ref={ref}
123 |     className={cn(
124 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
125 |       className
126 |     )}
127 |     {...props}
128 |   >
129 |     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
130 |       <SelectPrimitive.ItemIndicator>
131 |         <CheckIcon className="h-4 w-4" />
132 |       </SelectPrimitive.ItemIndicator>
133 |     </span>
134 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
135 |   </SelectPrimitive.Item>
136 | ))
137 | SelectItem.displayName = SelectPrimitive.Item.displayName
138 | 
139 | const SelectSeparator = React.forwardRef<
140 |   React.ElementRef<typeof SelectPrimitive.Separator>,
141 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
142 | >(({ className, ...props }, ref) => (
143 |   <SelectPrimitive.Separator
144 |     ref={ref}
145 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
146 |     {...props}
147 |   />
148 | ))
149 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
150 | 
151 | export {
152 |   Select,
153 |   SelectGroup,
154 |   SelectValue,
155 |   SelectTrigger,
156 |   SelectContent,
157 |   SelectLabel,
158 |   SelectItem,
159 |   SelectSeparator,
160 |   SelectScrollUpButton,
161 |   SelectScrollDownButton,
162 | }
163 | 


--------------------------------------------------------------------------------
/public/offline.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>You're Offline - MegaBlog</title>
  7 |     <style>
  8 |         * {
  9 |             margin: 0;
 10 |             padding: 0;
 11 |             box-sizing: border-box;
 12 |         }
 13 | 
 14 |         body {
 15 |             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 16 |             background-color: #f9fafb;
 17 |             min-height: 100vh;
 18 |             display: flex;
 19 |             align-items: center;
 20 |             justify-content: center;
 21 |             padding: 2rem;
 22 |         }
 23 | 
 24 |         .offline-container {
 25 |             background: white;
 26 |             padding: 3rem;
 27 |             border-radius: 1rem;
 28 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 29 |             text-align: center;
 30 |             max-width: 32rem;
 31 |             width: 100%;
 32 |         }
 33 | 
 34 |         .icon-container {
 35 |             background-color: #eef2ff;
 36 |             width: 5rem;
 37 |             height: 5rem;
 38 |             border-radius: 50%;
 39 |             display: flex;
 40 |             align-items: center;
 41 |             justify-content: center;
 42 |             margin: 0 auto 2rem;
 43 |             transition: transform 0.2s;
 44 |         }
 45 | 
 46 |         .icon-container:hover {
 47 |             transform: scale(1.05);
 48 |         }
 49 | 
 50 |         .icon {
 51 |             width: 3rem;
 52 |             height: 3rem;
 53 |             color: #4f46e5;
 54 |         }
 55 | 
 56 |         h1 {
 57 |             color: #1f2937;
 58 |             font-size: 2rem;
 59 |             margin-bottom: 1rem;
 60 |             font-weight: 800;
 61 |         }
 62 | 
 63 |         p {
 64 |             color: #6b7280;
 65 |             margin-bottom: 2rem;
 66 |             line-height: 1.7;
 67 |             font-size: 1.1rem;
 68 |         }
 69 | 
 70 |         .button-container {
 71 |             display: flex;
 72 |             gap: 1rem;
 73 |             justify-content: center;
 74 |         }
 75 | 
 76 |         .primary-button {
 77 |             background-color: #4f46e5;
 78 |             color: white;
 79 |             border: none;
 80 |             padding: 0.75rem 2rem;
 81 |             border-radius: 0.5rem;
 82 |             font-weight: 500;
 83 |             cursor: pointer;
 84 |             transition: all 0.2s;
 85 |             font-size: 0.875rem;
 86 |         }
 87 | 
 88 |         .primary-button:hover {
 89 |             background-color: #4338ca;
 90 |             transform: translateY(-1px);
 91 |         }
 92 | 
 93 |         .secondary-button {
 94 |             background-color: white;
 95 |             color: #4f46e5;
 96 |             border: 1px solid #e5e7eb;
 97 |             padding: 0.75rem 2rem;
 98 |             border-radius: 0.5rem;
 99 |             font-weight: 500;
100 |             cursor: pointer;
101 |             transition: all 0.2s;
102 |             font-size: 0.875rem;
103 |         }
104 | 
105 |         .secondary-button:hover {
106 |             background-color: #f9fafb;
107 |             color: #4338ca;
108 |             transform: translateY(-1px);
109 |         }
110 | 
111 |         .status-text {
112 |             margin-top: 2rem;
113 |             font-size: 0.875rem;
114 |             color: #9ca3af;
115 |         }
116 | 
117 |         .pulse {
118 |             display: inline-block;
119 |             width: 0.5rem;
120 |             height: 0.5rem;
121 |             background-color: #4f46e5;
122 |             border-radius: 50%;
123 |             margin-right: 0.5rem;
124 |             animation: pulse 2s infinite;
125 |         }
126 | 
127 |         @keyframes pulse {
128 |             0% {
129 |                 transform: scale(0.95);
130 |                 opacity: 0.5;
131 |             }
132 |             50% {
133 |                 transform: scale(1);
134 |                 opacity: 1;
135 |             }
136 |             100% {
137 |                 transform: scale(0.95);
138 |                 opacity: 0.5;
139 |             }
140 |         }
141 | 
142 |         @media (max-width: 640px) {
143 |             .offline-container {
144 |                 padding: 2rem;
145 |             }
146 | 
147 |             .button-container {
148 |                 flex-direction: column;
149 |             }
150 | 
151 |             h1 {
152 |                 font-size: 1.5rem;
153 |             }
154 | 
155 |             p {
156 |                 font-size: 1rem;
157 |             }
158 |         }
159 |     </style>
160 | </head>
161 | <body>
162 |     <div class="offline-container">
163 |         <div class="icon-container">
164 |             <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
165 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
166 |                     d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" />
167 |             </svg>
168 |         </div>
169 |         <h1>You're Currently Offline</h1>
170 |         <p>Don't worry! You can still access previously loaded content. We'll automatically reconnect when your internet connection is restored.</p>
171 |         <div class="button-container">
172 |             <button onclick="window.location.reload()" class="primary-button">
173 |                 Try Again
174 |             </button>
175 |             <button onclick="window.history.back()" class="secondary-button">
176 |                 Go Back
177 |             </button>
178 |         </div>
179 |         <div class="status-text">
180 |             <span class="pulse"></span>
181 |             Checking connection status...
182 |         </div>
183 |     </div>
184 |     <script>
185 |         // Check if we're back online
186 |         window.addEventListener('online', function() {
187 |             window.location.reload();
188 |         });
189 | 
190 |         // Update status text when offline
191 |         window.addEventListener('offline', function() {
192 |             document.querySelector('.status-text').innerHTML = '<span class="pulse"></span>Waiting for connection...';
193 |         });
194 |     </script>
195 | </body>
196 | </html>


--------------------------------------------------------------------------------
/src/pages/FeedBackPage.jsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | // import FeedbackPageForm from "@/components/Global/FeedbackPageForm";
  3 | import { motion } from "framer-motion";
  4 | import { useState, useEffect } from "react";
  5 | import Feedback from "./Feedback";
  6 | 
  7 | const FeedbackPageSkeleton = () => (
  8 |   <div className="relative h-[600px] bg-gray-100 overflow-hidden border border-gray-300 animate-pulse">
  9 |     <div className="absolute inset-0 grid grid-cols-12 gap-4 bg-[length:60px_60px] bg-gray-200" />
 10 | 
 11 |     {/* Skeleton floating circles */}
 12 |     <div className="absolute top-[-35px] left-[300px] h-36 w-36 bg-gray-300 rounded-full animate-pulse" />
 13 |     <div className="absolute top-[50px] right-[50px] h-[400px] w-[400px] bg-gray-300 rounded-full animate-pulse" />
 14 |     <div className="absolute bottom-10 right-[500px] h-28 w-28 bg-gray-300 rounded-full animate-pulse" />
 15 |     <div className="absolute bottom-[-60px] left-8 h-[200px] w-[200px] bg-gray-300 rounded-full animate-pulse" />
 16 | 
 17 |     {/* Skeleton for text content */}
 18 |     <div className="relative z-10 flex flex-col items-start justify-center h-full pl-12 text-left space-y-4">
 19 |       <div className="h-10 w-3/4 bg-gray-300 rounded-md" />
 20 |       <div className="h-10 w-2/3 bg-gray-300 rounded-md mt-2" />
 21 |       <div className="h-5 w-1/2 bg-gray-300 rounded-md mt-4" />
 22 |       <div className="h-5 w-1/2 bg-gray-300 rounded-md mt-2" />
 23 |       
 24 |       {/* Skeleton for buttons */}
 25 |       <div className="flex space-x-4 mt-8">
 26 |         <div className="h-10 w-24 bg-gray-300 rounded-md" />
 27 |         <div className="h-10 w-24 bg-gray-300 rounded-md" />
 28 |       </div>
 29 |     </div>
 30 |   </div>
 31 | );
 32 | 
 33 | const FeedbackPage = () => {
 34 |   const [loading, setLoading] = useState(true);
 35 | 
 36 |   // Simulate loading delay
 37 |   useEffect(() => {
 38 |     const timer = setTimeout(() => setLoading(false), 2000); // Adjust duration as needed
 39 |     return () => clearTimeout(timer);
 40 |   }, []);
 41 | 
 42 |   if (loading) {
 43 |     return <FeedbackPageSkeleton />;
 44 |   }
 45 | 
 46 |   return (
 47 |     <div className="relative h-[1800px] bg-white flex justify-center items-center overflow-hidden border border-gray-300">
 48 |       <motion.div
 49 |         className="absolute inset-0 grid grid-cols-12 gap-4 bg-[length:60px_60px]"
 50 |         style={{
 51 |           backgroundImage: `
 52 |             linear-gradient(270deg, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 25.1%),
 53 |             linear-gradient(to right, #e2e8f0 0.5px, transparent 3.1px),
 54 |             linear-gradient(to bottom, #e2e8f0 1px, transparent 1px),
 55 |             linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%)`
 56 |         }}
 57 |       >
 58 |         {/* Floating Circles with subtle scaling and hovering animation */}
 59 |         <motion.div
 60 |           className="absolute top-[-35px] left-[300px] h-36 w-36 bg-indigo-500 rounded-full"
 61 |           animate={{ scale: [1, 1.1, 1] }}
 62 |           transition={{ duration: 2, repeat: Infinity }}
 63 |         />
 64 |         <motion.div
 65 |           className="absolute top-[50px] right-[50px] h-[400px] w-[400px] bg-black rounded-full"
 66 |           animate={{ scale: [1, 1.1, 1] }}
 67 |           transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
 68 |         />
 69 |         <motion.div
 70 |           className="absolute top-[750px] right-[50px] h-[400px] w-[400px] bg-black rounded-full"
 71 |           animate={{ scale: [1, 1.1, 1] }}
 72 |           transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
 73 |         />
 74 |         <motion.div
 75 |           className="absolute top-[950px] left-[50px] h-28 w-28 bg-indigo-500 rounded-full"
 76 |           animate={{ scale: [1, 1.1, 1] }}
 77 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 78 |         />
 79 |         <motion.div
 80 |           className="absolute top-[1100px] left-[75px] h-[400px] w-[400px] bg-indigo-500 rounded-full"
 81 |           animate={{ scale: [1, 1.1, 1] }}
 82 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 83 |         />
 84 |         <motion.div
 85 |           className="absolute top-[1900px] left-[75px] h-[200px] w-[200px] bg-indigo-500 rounded-full"
 86 |           animate={{ scale: [1, 1.1, 1] }}
 87 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 88 |         />
 89 |         <motion.div
 90 |           className="absolute top-[2100px] right-[50px] h-[100px] w-[100px] bg-black rounded-full"
 91 |           animate={{ scale: [1, 1.1, 1] }}
 92 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 93 |         />
 94 |         <motion.div
 95 |           className="absolute bottom-10 right-[500px] h-28 w-28 bg-indigo-500 rounded-full"
 96 |           animate={{ scale: [1, 1.1, 1] }}
 97 |           transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
 98 |         />
 99 |         <motion.div
100 |           className="absolute bottom-[-60px] left-8 h-[200px] w-[200px] bg-black rounded-full"
101 |           animate={{ scale: [1, 1.1, 1] }}
102 |           transition={{ duration: 2, repeat: Infinity, delay: 0.7 }}
103 |         />
104 |       </motion.div>
105 | 
106 |       {/* Centered White Box */}
107 |       <div className="relative z-10 bg-white -mt-60 -mb-24 rounded-lg shadow-lg p-12 w-[1200px] h-[1400px] flex ">
108 |         <div className="w-full">
109 |         <div className="text-center">
110 |           <motion.h1
111 |             className="text-5xl font-extrabold bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text"
112 |             initial={{ opacity: 0, y: -50 }}
113 |             animate={{ opacity: 1, y: 0 }}
114 |             transition={{ duration: 0.8 }}
115 |           >
116 |             FeedBack Form
117 |           </motion.h1>
118 | 
119 |           <motion.p
120 |             className="text-gray-600 text-xl mt-4 max-w-3xl mx-auto"
121 |             initial={{ opacity: 0, y: 50 }}
122 |             animate={{ opacity: 1, y: 0 }}
123 |             transition={{ duration: 0.8, delay: 0.2 }}
124 |           >
125 |             Add a new Feedback to hep us grow more and more!
126 |           </motion.p>
127 |         </div>
128 |         <Feedback/>
129 |           {/* <FeedbackPageForm/> */}
130 |           {/* Your form content goes here */}
131 |         </div>
132 |       </div>
133 |     </div>
134 |   );
135 | };
136 | 
137 | export default FeedbackPage;
138 | 


--------------------------------------------------------------------------------
/src/componenets/GoogleTranslator.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect } from "react";
  2 | 
  3 | const GoogleTranslate = () => {
  4 |     useEffect(() => {
  5 |         window.googleTranslateInit = () => {
  6 |             if (!window.google?.translate?.TranslateElement) {
  7 |                 setTimeout(window.googleTranslateInit, 100);
  8 |             } else {
  9 |                 new window.google.translate.TranslateElement({
 10 |                     pageLanguage: 'en',
 11 |                     includedLanguages: 'en,hi,mr,ur,bn,es,ja,ko,zh-CN,es,nl,fr,de,it,ta,te,gu,bho',
 12 |                     layout: window.google.translate.TranslateElement.InlineLayout.HORIZONTAL,
 13 |                     defaultLanguage: 'en',
 14 |                     autoDisplay: false,
 15 |                 }, 'google_element');
 16 |             }
 17 |             cleanUpGadgetText();
 18 |         };
 19 | 
 20 |         const loadGoogleTranslateScript = () => {
 21 |             if (!document.getElementById("google_translate_script")) {
 22 |                 const script = document.createElement("script");
 23 |                 script.type = "text/javascript";
 24 |                 script.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateInit";
 25 |                 script.id = "google_translate_script";
 26 |                 script.onerror = () => console.error('Error loading Google Translate script');
 27 |                 document.body.appendChild(script);
 28 |             }
 29 | 
 30 |         };
 31 |         const cleanUpGadgetText = () => {
 32 |             const gadgetElement = document.querySelector('.goog-te-gadget');
 33 |             if (gadgetElement) {
 34 |                 const textNodes = gadgetElement.childNodes;
 35 |                 textNodes.forEach((node) => {
 36 |                     if (node.nodeType === Node.TEXT_NODE) {
 37 |                         node.textContent = ''; // Clear text content
 38 |                     }
 39 |                 });
 40 |             }
 41 |         };
 42 |         loadGoogleTranslateScript();
 43 | 
 44 |         if (window.google && window.google.translate) {
 45 |             window.googleTranslateInit();
 46 |         }
 47 | 
 48 |         return () => {
 49 |             // Cleanup logic if necessary
 50 |         };
 51 |     }, []);
 52 | 
 53 |     return (
 54 |         <div id="google_element" className="google-translate-container">
 55 |             <style jsx>{`
 56 |                     .goog-te-combo {
 57 |                         background-color: #f0f8ff; /* Soft blue background */
 58 |                         border-radius: 0.75rem; /* Rounded corners */
 59 |                         padding: 0.5rem 0rem;
 60 |                         font-size: 1.1rem;     
 61 |                         transition: all 0.3s ease-in-out; /* Smooth transition */
 62 |                         outline: none;
 63 |                         color: #007bff; /* Blue text */
 64 |                         font-weight: 500; /* Tailwind: font-medium */
 65 |                         cursor: pointer;
 66 |                         text-align: center;
 67 |                     }
 68 | 
 69 |                     .goog-te-combo:hover {
 70 |                         background-color: #e6f0ff; /* Lighter blue on hover */
 71 |                         border-color: #0056b3; /* Darker blue on hover */
 72 |                         color: #0056b3; /* Darker blue text */
 73 |                         transform: scale(1.02); /* Slight scale effect */
 74 |                     }
 75 | 
 76 |                     .goog-logo-link {
 77 |                         display: none !important; /* Hide Google logo */
 78 |                     }
 79 | 
 80 |                     .goog-te-gadget {
 81 |                         color: transparent !important;
 82 |                     }
 83 | 
 84 |                     .goog-te-gadget > span > a {
 85 |                         display: none !important;
 86 |                     }
 87 | 
 88 |                     .goog-te-gadget .goog-te-combo {
 89 |                         color: #007bff !important; /* Blue text */
 90 |                     }
 91 | 
 92 |                     .goog-te-gadget .goog-te-combo:hover {
 93 |                         color: #0056b3 !important; /* Darker blue text on hover */
 94 |                     }
 95 | 
 96 |                     #google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child {
 97 |                         display: none;
 98 |                     }
 99 | 
100 |                     #google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before {
101 |                         content: 'Translate'; /* Custom text */
102 |                         color: #007bff; /* Blue text */
103 |                         font-weight: 600; /* Slightly bolder */
104 |                     }
105 | 
106 |                     .goog-te-banner-frame {
107 |                         display: none !important; /* Hide the banner frame */
108 |                     }
109 | 
110 |                     .goog-te-menu-frame {
111 |                         max-height: 400px !important;
112 |                         overflow-y: auto !important;
113 |                         background-color: #ffffff; /* White background for dropdown */
114 |                         border: 2px solid #007bff; /* Blue border */
115 |                         border-radius: 0.75rem; /* Rounded corners */
116 |                         box-shadow: 0 4px 8px rgba(0, 123, 255, 0.1); /* Soft blue shadow */
117 |                     }
118 | 
119 |                     /* Customize the iframe */
120 |                     .skiptranslate > iframe {
121 |                         height: 0 !important;
122 |                         border-style: none;
123 |                         box-shadow: none;
124 |                     }
125 | 
126 |                     body {
127 |                         position: relative !important;
128 |                         top: 0 !important;
129 |                         background-color: #f8faff; /* Light blue background for website */
130 |                         color: #333; /* Default text color */
131 |                         font-family: 'Inter', sans-serif; /* Clean font for readability */
132 |                     }
133 | 
134 |                     /* Extra hover effects for any clickable elements */
135 |                     a, button {
136 |                         transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease;
137 |                     }
138 | 
139 |                     a:hover, button:hover {
140 |                         color: #0056b3; /* Darker blue on hover */
141 |                         transform: translateY(-3px); /* Slight lift on hover */
142 |                     }
143 |                 `}</style>
144 |         </div>
145 |     );
146 | };
147 | 
148 | export default GoogleTranslate;
149 | 


--------------------------------------------------------------------------------
/src/pages/AllPost.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React, { useState, useEffect } from "react";
  3 | 
  4 | 
  5 | import PostCard from "../componenets/PostCard.jsx"; // Assuming typo fix for 'components'
  6 | import Container from "../componenets/container/Container.jsx";
  7 | 
  8 | 
  9 | import service from "../appwrite/configAppwrite";
 10 | import {
 11 |   Carousel,
 12 |   CarouselContent,
 13 |   CarouselItem,
 14 |   CarouselNext,
 15 |   CarouselPrevious,
 16 | } from "../components/ui/carousel";
 17 | 
 18 | 
 19 | 
 20 | import SearchBar from "../componenets/SearchBar.jsx";
 21 | 
 22 | function AllPosts() {
 23 |   const [posts, setPosts] = useState([]);
 24 |   const [categorizedPosts, setCategorizedPosts] = useState({});
 25 |   
 26 |   // Fetch posts on component mount
 27 |   useEffect(() => {
 28 |     const fetchPosts = async () => {
 29 |       const response = await service.getPosts();
 30 |       if (response && response.documents) {
 31 |         const grouped = groupPostsByCategory(response.documents);
 32 |         setCategorizedPosts(grouped);
 33 |         setPosts(response.documents);
 34 |       } else {
 35 |         setCategorizedPosts({});
 36 |         setPosts([]);
 37 |       }
 38 |     };
 39 |     fetchPosts();
 40 |   }, []);
 41 | 
 42 |   // Group posts by category, defaulting to "Uncategorized"
 43 |   const groupPostsByCategory = (posts) => {
 44 |     return posts.reduce((acc, post) => {
 45 |       const category = post.category || "Uncategorized";
 46 |       if (!acc[category]) {
 47 |         acc[category] = [];
 48 |       }
 49 |       acc[category].push(post);
 50 |       return acc;
 51 |     }, {});
 52 |   };
 53 | 
 54 |   return (
 55 |     <div className="w-full py-8">
 56 |       <Container>
 57 |         <div className="min-h-screen flex flex-col flex-wrap items-center p-4">
 58 |           <div className="lg:w-11/12 w-full rounded-lg">
 59 |             <h1 className="text-5xl font-extrabold text-center text-black mb-6">
 60 |               Visit All Blogs
 61 |             </h1>
 62 |             <p className="text-lg text-gray-600 text-center mb-2 leading-relaxed">
 63 |               Have a look at our Blog Posts.
 64 |             </p>
 65 |             <SearchBar />
 66 |           </div>
 67 | 
 68 |           <div className="px-4 mb-4 w-full">
 69 |             {Object.keys(categorizedPosts).length > 0 ? (
 70 |               Object.keys(categorizedPosts).map((category) => (
 71 |                 <div key={category} className="mb-8">
 72 |                   <h2 className="flex flex-row flex-nowrap items-center mt-16 mb-16">
 73 |                     <span className="flex-grow block border-t border-black"></span>
 74 |                     <span className="flex-none block mx-4 px-4 py-2.5 text-xl rounded leading-none font-medium bg-black text-white">
 75 |                       {category}
 76 |                     </span>
 77 |                     <span className="flex-grow block border-t border-black"></span>
 78 |                   </h2>
 79 | 
 80 |                   {categorizedPosts[category].length > 5 ? (
 81 |                     <Carousel>
 82 |                       <CarouselContent className="-ml-1 mb-4">
 83 |                         {categorizedPosts[category].map((post) => (
 84 |                           <CarouselItem
 85 |                             key={post.$id}
 86 |                             className="pl-4 md:basis-1/2 lg:basis-1/4"
 87 |                           >
 88 |                             <PostCard {...post} />
 89 |                           </CarouselItem>
 90 |                         ))}
 91 |                       </CarouselContent>
 92 |                       <CarouselPrevious
 93 |                         style={{
 94 |                           position: "absolute",
 95 |                           width: "40px",
 96 |                           height: "40px",
 97 |                           top: "50%",
 98 |                           left: "10px",
 99 |                           transform: "translateY(-50%)",
100 |                           display: "flex",
101 |                           justifyContent: "center",
102 |                           alignItems: "center",
103 |                           transition:
104 |                             "background-color 0.3s ease, color 0.3s ease",
105 |                           zIndex: 10,
106 |                           backgroundColor: "rgba(0, 0, 0, 0.5)",
107 |                           color: "white",
108 |                           borderRadius: "50%",
109 |                         }}
110 |                         onMouseEnter={(e) =>
111 |                           (e.currentTarget.style.backgroundColor =
112 |                             "rgba(0, 0, 0, 0.7)")
113 |                         }
114 |                         onMouseLeave={(e) =>
115 |                           (e.currentTarget.style.backgroundColor =
116 |                             "rgba(0, 0, 0, 0.5)")
117 |                         }
118 |                       />
119 |                       <CarouselNext
120 |                         style={{
121 |                           position: "absolute",
122 |                           width: "40px",
123 |                           height: "40px",
124 |                           top: "50%",
125 |                           right: "10px",
126 |                           transform: "translateY(-50%)",
127 |                           display: "flex",
128 |                           justifyContent: "center",
129 |                           alignItems: "center",
130 |                           transition:
131 |                             "background-color 0.3s ease, color 0.3s ease",
132 |                           zIndex: 10,
133 |                           backgroundColor: "rgba(0, 0, 0, 0.5)",
134 |                           color: "white",
135 |                           borderRadius: "50%",
136 |                         }}
137 |                         onMouseEnter={(e) =>
138 |                           (e.currentTarget.style.backgroundColor =
139 |                             "rgba(0, 0, 0, 0.7)")
140 |                         }
141 |                         onMouseLeave={(e) =>
142 |                           (e.currentTarget.style.backgroundColor =
143 |                             "rgba(0, 0, 0, 0.5)")
144 |                         }
145 |                       />
146 |                     </Carousel>
147 |                   ) : (
148 |                     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
149 |                       {categorizedPosts[category].map((post) => (
150 |                         <PostCard key={post.$id} {...post} />
151 |                       ))}
152 |                     </div>
153 |                   )}
154 |                 </div>
155 |               ))
156 |             ) : (
157 |               <p>No posts available at the moment.</p>
158 |             )}
159 |           </div>
160 |         </div>
161 |       </Container>
162 |     </div>
163 |   );
164 | }
165 | 
166 | export default AllPosts;
167 | 
168 | 
169 | 


--------------------------------------------------------------------------------
/src/pages/Presskit.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import "./Presskit.css";
  3 | 
  4 | 
  5 | 
  6 | const PressKit = () => {
  7 |   const [isLoading, setIsLoading] = useState(true);
  8 | 
  9 |   useEffect(() => {
 10 |     // Simulating a delay to show the loading animation
 11 |     const timeout = setTimeout(() => {
 12 |       setIsLoading(false);
 13 |     }, 1000); // You can adjust the delay here
 14 |     return () => clearTimeout(timeout);
 15 |   }, []);
 16 | 
 17 |   if (isLoading) {
 18 |     return <div className="loading-animation">Loading...</div>; // Loading state
 19 |   }
 20 | 
 21 |   return (
 22 |     <div className="presskit-container">
 23 |       <h1 className="presskit-title">Press Kit</h1>
 24 | 
 25 |       {/* Brand Assets Section */}
 26 |       <section className="presskit-section">
 27 |         <h2 className="section-title">Brand Assets</h2>
 28 |         <p className="section-description">
 29 |           Download our brand assets such as logos, fonts, and official imagery.
 30 |           These can be used for media coverage and press mentions.
 31 |         </p>
 32 |         <div  className="btn-div">
 33 |           <a href="/path/to/brand-assets.zip" download className="download-btn">
 34 |             Download Brand Assets
 35 |           </a>
 36 |         </div>
 37 |        
 38 |       </section>
 39 | 
 40 |       {/* Press Releases Section */}
 41 |       <section className="presskit-section">
 42 |         <h2 className="section-title">Press Releases</h2>
 43 |         <p className="section-description">
 44 |           Stay updated with our latest announcements and news. Click below to
 45 |           read or download our press releases.
 46 |         </p>
 47 |         <ul className="presskit-list">
 48 |           <li className="presskit-list-item">
 49 |             <a
 50 |               href="/path/to/press-release-1.pdf"
 51 |               target="_blank"
 52 |               className="presskit-link"
 53 |             >
 54 |               Press Release - Launch Announcement
 55 |             </a>
 56 |           </li>
 57 |           <li className="presskit-list-item">
 58 |             <a
 59 |               href="/path/to/press-release-2.pdf"
 60 |               target="_blank"
 61 |               className="presskit-link"
 62 |             >
 63 |               Press Release - New Features
 64 |             </a>
 65 |           </li>
 66 |         </ul>
 67 |       </section>
 68 | 
 69 |       {/* Company Milestones Section */}
 70 |       <section className="presskit-section milestones">
 71 |         <h2 className="section-title">Company Milestones</h2>
 72 |         <div className="milestones-list">
 73 |           <div className="milestone-item">
 74 |             <span className="milestone-year">2015</span>
 75 |             <p className="milestone-description">
 76 |               Company founded and launched the first product.
 77 |             </p>
 78 |           </div>
 79 |           <div className="milestone-item">
 80 |             <span className="milestone-year">2018</span>
 81 |             <p className="milestone-description">
 82 |               Reached 1 million users across 100+ countries.
 83 |             </p>
 84 |           </div>
 85 |           <div className="milestone-item">
 86 |             <span className="milestone-year">2020</span>
 87 |             <p className="milestone-description">
 88 |               Received the prestigious XYZ Innovation Award.
 89 |             </p>
 90 |           </div>
 91 |         </div>
 92 |       </section>
 93 | 
 94 |       {/* Key Statistics Section */}
 95 |       <section className="presskit-section key-statistics">
 96 |         <h2 className="section-title">Key Statistics</h2>
 97 |         <div className="stats-grid">
 98 |           <div className="stat-item">
 99 |             <span className="stat-number">5M+</span>
100 |             <p className="stat-description">Users worldwide</p>
101 |           </div>
102 |           <div className="stat-item">
103 |             <span className="stat-number">100+</span>
104 |             <p className="stat-description">Countries served</p>
105 |           </div>
106 |           <div className="stat-item">
107 |             <span className="stat-number">50+</span>
108 |             <p className="stat-description">Industry awards</p>
109 |           </div>
110 |         </div>
111 |       </section>
112 | 
113 |       {/* Testimonials Section */}
114 |       <section className="presskit-section testimonials">
115 |         <h2 className="section-title">What People Are Saying</h2>
116 |         <div className="testimonials-grid">
117 |           <blockquote className="testimonial">
118 |             <p>"This is the most innovative product we've seen in years!"</p>
119 |             <footer>- Tech Reviewer, XYZ Media</footer>
120 |           </blockquote>
121 |           <blockquote className="testimonial">
122 |             <p>"An industry game-changer, with outstanding leadership!"</p>
123 |             <footer>- Industry Leader</footer>
124 |           </blockquote>
125 |         </div>
126 |       </section>
127 | 
128 |       {/* FAQ Section */}
129 |       <section className="presskit-section faq">
130 |         <h2 className="section-title">Frequently Asked Questions</h2>
131 |         <ul className="faq-list">
132 |           <li className="faq-item">
133 |             <h4 className="faq-question">
134 |               What does your company specialize in?
135 |             </h4>
136 |             <p className="faq-answer">
137 |               We specialize in innovative tech solutions that transform
138 |               industries.
139 |             </p>
140 |           </li>
141 |           <li className="faq-item">
142 |             <h4 className="faq-question">
143 |               How can I get in touch for media inquiries?
144 |             </h4>
145 |             <p className="faq-answer">
146 |               You can reach our media team at{" "}
147 |               <a href="mailto:press@yourcompany.com">press@Megablog.com</a>.
148 |             </p>
149 |           </li>
150 |         </ul>
151 |       </section>
152 | 
153 |       {/* Social Media Links Section */}
154 |       <section className="presskit-section social-media">
155 |         <h2 className="section-title">Follow Us on Social Media</h2>
156 |         <div className="social-links">
157 |           <a
158 |             href="https://twitter.com"
159 |             className="social-link twitter"
160 |             target="_blank"
161 |             rel="noopener noreferrer"
162 |           >
163 |             Twitter
164 |           </a>
165 |           <a
166 |             href="https://facebook.com"
167 |             className="social-link facebook"
168 |             target="_blank"
169 |             rel="noopener noreferrer"
170 |           >
171 |             Facebook
172 |           </a>
173 |           <a
174 |             href="https://linkedin.com"
175 |             className="social-link linkedin"
176 |             target="_blank"
177 |             rel="noopener noreferrer"
178 |           >
179 |             LinkedIn
180 |           </a>
181 |         </div>
182 |       </section>
183 |     </div>
184 |   );
185 | };
186 | 
187 | 
188 | 
189 | export default PressKit;
190 | 
191 | 
192 | 
193 | 


--------------------------------------------------------------------------------