├── .eslintrc.json ├── .gitattributes ├── .gitignore ├── LICENSE.md ├── README.md ├── jsconfig.json ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── agency.PNG ├── next.svg └── vercel.svg ├── src ├── app │ ├── about │ │ └── page.jsx │ ├── base.css │ ├── blog │ │ └── page.jsx │ ├── contact │ │ └── page.jsx │ ├── favicon.ico │ ├── globals.css │ ├── layout.jsx │ ├── not-found.jsx │ ├── page.jsx │ ├── process │ │ └── page.jsx │ └── work │ │ └── page.jsx ├── components │ ├── Blockquote.jsx │ ├── Border.jsx │ ├── Build.jsx │ ├── Button.jsx │ ├── Clients.jsx │ ├── ContactDetails.jsx │ ├── ContactForm.jsx │ ├── ContactSection.jsx │ ├── Container.jsx │ ├── Cultures.jsx │ ├── Deliver.jsx │ ├── Discover.jsx │ ├── FadeIn.jsx │ ├── Footer.jsx │ ├── FooterNavigation.jsx │ ├── GridList.jsx │ ├── GridPattern.jsx │ ├── List.jsx │ ├── Logo.jsx │ ├── Offices.jsx │ ├── PageIntro.jsx │ ├── RadioInput.jsx │ ├── RootLayout.jsx │ ├── Section.jsx │ ├── SectionIntro.jsx │ ├── Services.jsx │ ├── SocialMedia.jsx │ ├── StatList.jsx │ ├── StylizedImage.jsx │ ├── TagList.jsx │ ├── Testimonials.jsx │ ├── TextInput.jsx │ └── Values.jsx ├── config │ └── site.js ├── constants │ └── index.jsx ├── fonts │ └── Mona-Sans.var.woff2 └── images │ ├── clients │ ├── bright-path │ │ ├── logo-dark.svg │ │ ├── logo-light.svg │ │ ├── logomark-dark.svg │ │ └── logomark-light.svg │ ├── family-fund │ │ ├── logo-dark.svg │ │ ├── logo-light.svg │ │ ├── logomark-dark.svg │ │ └── logomark-light.svg │ ├── green-life │ │ ├── logo-dark.svg │ │ ├── logo-light.svg │ │ ├── logomark-dark.svg │ │ └── logomark-light.svg │ ├── home-work │ │ ├── logo-dark.svg │ │ ├── logo-light.svg │ │ ├── logomark-dark.svg │ │ └── logomark-light.svg │ ├── mail-smirk │ │ ├── logo-dark.svg │ │ ├── logo-light.svg │ │ ├── logomark-dark.svg │ │ └── logomark-light.svg │ ├── north-adventures │ │ ├── logo-dark.svg │ │ ├── logo-light.svg │ │ ├── logomark-dark.svg │ │ └── logomark-light.svg │ ├── phobia │ │ ├── logo-dark.svg │ │ ├── logo-light.svg │ │ ├── logomark-dark.svg │ │ └── logomark-light.svg │ └── unseal │ │ ├── logo-dark.svg │ │ ├── logo-light.svg │ │ ├── logomark-dark.svg │ │ └── logomark-light.svg │ ├── laptop.jpg │ ├── meeting.jpg │ ├── team │ ├── angela-fisher.jpeg │ ├── benjamin-russel.jpeg │ ├── blake-reid.jpeg │ ├── chelsea-hagon.jpeg │ ├── dries-vincent.jpeg │ ├── emma-dorsey.jpeg │ ├── jeffrey-webb.jpeg │ ├── kathryn-murphy.jpeg │ ├── leonard-krasner.jpeg │ ├── leslie-alexander.jpeg │ ├── michael-foster.jpeg │ └── whitney-francis.jpeg │ └── whiteboard.jpg └── tailwind.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2023 Abdellah Chehri 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Abdullah Agency - Next.js, Tailwind CSS & Framer Motion 2 | 3 | ![Abdullah Agency](/public/agency.PNG) 4 | 5 | Abdullah Agency is a stunning multi-page agency website template developed using Next.js, Tailwind CSS, and Framer Motion. Designed and built by the talented Tailwind CSS team, this template offers a sleek and minimalist appearance while boasting engaging interactive elements and captivating animations powered by Framer Motion. 6 | 7 | ## Features 8 | 9 | - Beautifully designed agency website template. 10 | - Built using Tailwind CSS and Next.js for a seamless development experience. 11 | - Enhanced with delightful animations and transitions through Framer Motion. 12 | - Easy-to-update case studies and blog posts with MDX. 13 | - Production-ready and highly customizable for your agency's specific needs. 14 | - A valuable resource for learning how to build websites with Tailwind CSS and React. 15 | 16 | ## Getting Started 17 | 18 | To run the Abdullah Agency website locally, follow these steps: 19 | 20 | 1. **Clone the repository:** 21 | 22 | ```bash 23 | git clone https://github.com/your-username/abdullah-agency.git 24 | ``` 25 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "studioyt", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "autoprefixer": "10.4.15", 13 | "clsx": "^2.0.0", 14 | "eslint": "8.47.0", 15 | "eslint-config-next": "13.4.18", 16 | "framer-motion": "^10.16.0", 17 | "next": "13.4.18", 18 | "postcss": "8.4.28", 19 | "react": "18.2.0", 20 | "react-dom": "18.2.0", 21 | "react-icons": "^4.10.1", 22 | "tailwindcss": "3.3.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/agency.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrhi/studio/960b05fc58eaa1dbef8daf1a8345bf71bc0bbb3a/public/agency.PNG -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/about/page.jsx: -------------------------------------------------------------------------------- 1 | import ContactSection from "@/components/ContactSection"; 2 | import Container from "@/components/Container"; 3 | import Cultures from "@/components/Cultures"; 4 | import PageIntro from "@/components/PageIntro"; 5 | import { StatList, StatListItem } from "@/components/StatList"; 6 | import React from "react"; 7 | 8 | const AboutPage = () => { 9 | return ( 10 | <> 11 | 12 |

13 | We believe that our strength lies in our collaborative approach, which 14 | puts our clients at the center of everything we do. 15 |

16 |
17 |

18 | Studio was started by three friends who noticed that developer 19 | studios were charging clients double what an in-house team would 20 | cost. Since the beginning, we have been committed to doing things 21 | differently by charging triple instead. 22 |

23 |

24 | At Studio, we’re more than just colleagues — we’re a family. This 25 | means we pay very little and expect people to work late. We want our 26 | employees to bring their whole selves to work. In return, we just 27 | ask that they keep themselves there until at least 6:30pm. 28 |

29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | export default AboutPage; 45 | -------------------------------------------------------------------------------- /src/app/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @font-face { 4 | font-family: "Mona Sans"; 5 | font-weight: 200 900; 6 | font-display: block; 7 | font-style: normal; 8 | font-stretch: 75% 125%; 9 | src: url("../fonts//Mona-Sans.var.woff2"); 10 | } 11 | -------------------------------------------------------------------------------- /src/app/blog/page.jsx: -------------------------------------------------------------------------------- 1 | import PageIntro from "@/components/PageIntro"; 2 | 3 | const BlogPage = () => { 4 | return ( 5 | <> 6 | 7 |

8 | Stay up-to-date with the latest industry news as our marketing teams 9 | finds new ways to re-purpose old CSS tricks articles. 10 |

11 | 12 | 13 | ); 14 | }; 15 | 16 | export default BlogPage; 17 | -------------------------------------------------------------------------------- /src/app/contact/page.jsx: -------------------------------------------------------------------------------- 1 | import ContactDetails from "@/components/ContactDetails"; 2 | import ContactForm from "@/components/ContactForm"; 3 | import Container from "@/components/Container"; 4 | import PageIntro from "@/components/PageIntro"; 5 | 6 | const ContactPage = () => { 7 | return ( 8 | <> 9 | 10 |

We can not wait to hear from you.

11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 19 | ); 20 | }; 21 | 22 | export default ContactPage; 23 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrhi/studio/960b05fc58eaa1dbef8daf1a8345bf71bc0bbb3a/src/app/favicon.ico -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "./base.css"; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/app/layout.jsx: -------------------------------------------------------------------------------- 1 | import RootLayout from "@/components/RootLayout"; 2 | import "./globals.css"; 3 | 4 | export const metadata = { 5 | title: { 6 | template: "Abdullah", 7 | default: "Abdullah", 8 | }, 9 | }; 10 | 11 | export default function Layout({ children }) { 12 | return ( 13 | 17 | 18 | {children} 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/app/not-found.jsx: -------------------------------------------------------------------------------- 1 | import Container from "@/components/Container"; 2 | import FadeIn from "@/components/FadeIn"; 3 | import Link from "next/link"; 4 | import React from "react"; 5 | 6 | const NotFound = () => { 7 | return ( 8 | 9 | 10 |

11 | 404 12 |

13 |

14 | Page not found 15 |

16 |

17 | Sorry, we could ont find the page you are looking for. 18 |

19 | 23 | Go to the home page 24 | 25 | 26 | 27 | ); 28 | }; 29 | 30 | export default NotFound; 31 | -------------------------------------------------------------------------------- /src/app/page.jsx: -------------------------------------------------------------------------------- 1 | import Clients from "@/components/Clients"; 2 | import ContactSection from "@/components/ContactSection"; 3 | import Container from "@/components/Container"; 4 | import FadeIn from "@/components/FadeIn"; 5 | import Services from "@/components/Services"; 6 | import Testimonials from "@/components/Testimonials"; 7 | import logoPhobiaDark from "@/images/clients/phobia/logo-dark.svg"; 8 | 9 | export default function Home() { 10 | return ( 11 |
12 | 13 | 14 |

15 | Make your online presence a reality with us! 16 |

17 |

18 | We are a group of developer working at the intersection of design 19 | and technology. It is a really busy intersection though — a lot of 20 | our staff have been involved in hit and runs. 21 |

22 | 23 | 24 | 25 | 29 | The team at Studio went above and beyond with our onboarding, even 30 | finding a way to access the user microphone without triggering one of 31 | those annoying permission dialogs. 32 | 33 | 34 | 35 |
36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/app/process/page.jsx: -------------------------------------------------------------------------------- 1 | import Build from "@/components/Build"; 2 | import ContactSection from "@/components/ContactSection"; 3 | import Deliver from "@/components/Deliver"; 4 | import Discover from "@/components/Discover"; 5 | import PageIntro from "@/components/PageIntro"; 6 | import Values from "@/components/Values"; 7 | import React from "react"; 8 | 9 | const ProcessPage = () => { 10 | return ( 11 | <> 12 | 13 |

14 | We believe in efficiency and maximizing our resources to provide the 15 | best value to our clients. The primary way we do that is by re-using 16 | the same five projects we’ve been developing for the past decade. 17 |

18 | 19 |
20 | {/* Discover */} 21 | 22 | {/* Build */} 23 | 24 | {/* Deliver */} 25 | 26 |
27 | {/* Values */} 28 | 29 | 30 | 31 | ); 32 | }; 33 | 34 | export default ProcessPage; 35 | -------------------------------------------------------------------------------- /src/app/work/page.jsx: -------------------------------------------------------------------------------- 1 | import PageIntro from "@/components/PageIntro"; 2 | import React from "react"; 3 | 4 | const WorkPage = () => { 5 | return ( 6 | <> 7 | 11 |

12 | We believe in efficiency and maximizing our resources to provide the 13 | best value to our clients. The primary way we do that is by re-using 14 | the same five projects we’ve been developing for the past decade. 15 |

16 | 17 | 18 | ); 19 | }; 20 | 21 | export default WorkPage; 22 | -------------------------------------------------------------------------------- /src/components/Blockquote.jsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import clsx from "clsx"; 3 | import Border from "./Border"; 4 | 5 | function BlockquoteWithImage({ author, image, children, className }) { 6 | return ( 7 |
13 |
14 | {typeof children === "string" ?

{children}

: children} 15 |
16 |
17 | 23 |
24 |
25 | {author.name} 26 | , 27 |
28 | {author.role} 29 |
30 |
31 | ); 32 | } 33 | 34 | function BlockquoteWithoutImage({ author, children, className }) { 35 | return ( 36 | 37 |
38 |
39 | {typeof children === "string" ?

{children}

: children} 40 |
41 |
42 | {author.name}, {author.role} 43 |
44 |
45 | 46 | ); 47 | } 48 | 49 | const Blockquote = (props) => { 50 | if (props.image) { 51 | return ; 52 | } 53 | return ; 54 | }; 55 | 56 | export default Blockquote; 57 | -------------------------------------------------------------------------------- /src/components/Border.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | 3 | const Border = ({ 4 | className, 5 | position = "top", 6 | invert = false, 7 | as: Component = "div", 8 | ...props 9 | }) => { 10 | return ( 11 | 25 | ); 26 | }; 27 | 28 | export default Border; 29 | -------------------------------------------------------------------------------- /src/components/Build.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Section from "./Section"; 3 | import imageLaptop from "@/images/laptop.jpg"; 4 | import Blockquote from "./Blockquote"; 5 | 6 | const Build = () => { 7 | return ( 8 |
9 |
10 |

11 | Based off of the discovery phase, we develop a comprehensive roadmap 12 | for each product and start working towards delivery. The roadmap is an 13 | intricately tangled mess of technical nonsense designed to drag the 14 | project out as long as possible. 15 |

16 |

17 | Each client is assigned a key account manager to keep lines of 18 | communication open and obscure the actual progress of the project. 19 | They act as a buffer between the client’s incessant nagging and the 20 | development team who are hard at work scouring open source projects 21 | for code to re-purpose. 22 |

23 |

24 | Our account managers are trained to only reply to client emails after 25 | 9pm, several days after the initial email. This reinforces the general 26 | aura that we are very busy and dissuades clients from asking for 27 | changes. 28 |

29 |
30 |
34 | Studio_clone were so regular with their progress updates we almost began 35 | to think they were automated! 36 |
37 |
38 | ); 39 | }; 40 | 41 | export default Build; 42 | -------------------------------------------------------------------------------- /src/components/Button.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import clsx from "clsx"; 3 | 4 | const Button = ({ invert, href, className, children, ...props }) => { 5 | className = clsx( 6 | className, 7 | "inline-flex rounded-full px-4 py-1.5 text-sm font-semibold transition", 8 | invert 9 | ? "bg-white text-neutral-950 hover:bg-neutral-200" 10 | : "bg-neutral-950 text-white hover:bg-neutral-800" 11 | ); 12 | 13 | let inner = {children}; 14 | if (href) { 15 | return ( 16 | 17 | {inner} 18 | 19 | ); 20 | } 21 | return ( 22 | 25 | ); 26 | }; 27 | 28 | export default Button; 29 | -------------------------------------------------------------------------------- /src/components/Clients.jsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import logoBrightPath from "../images/clients/bright-path/logo-light.svg"; 3 | import logoFamilyFund from "../images/clients/family-fund/logo-light.svg"; 4 | import logoGreenLife from "../images/clients/green-life/logo-light.svg"; 5 | import logoHomeWork from "../images/clients/home-work/logo-light.svg"; 6 | import logoMailSmirk from "../images/clients/mail-smirk/logo-light.svg"; 7 | import logoNorthAdventures from "../images/clients/north-adventures/logo-light.svg"; 8 | import logoPhobiaLight from "../images/clients/phobia/logo-light.svg"; 9 | import logoUnseal from "../images/clients/unseal/logo-light.svg"; 10 | import Container from "./Container"; 11 | import FadeIn, { FadeInStagger } from "./FadeIn"; 12 | 13 | const clients = [ 14 | ["Phobia", logoPhobiaLight], 15 | ["Family Fund", logoFamilyFund], 16 | ["Unseal", logoUnseal], 17 | ["Mail Smirk", logoMailSmirk], 18 | ["Home Work", logoHomeWork], 19 | ["Green Life", logoGreenLife], 20 | ["Bright Path", logoBrightPath], 21 | ["North Adventures", logoNorthAdventures], 22 | ]; 23 | 24 | const Clients = () => { 25 | return ( 26 |
27 | 28 | 29 |

30 | We have worked with hundreds of amazing people 31 |

32 |
33 | 34 | 35 |
    39 | {clients.map(([client, logo]) => ( 40 |
  • 41 | 42 | {client} 43 | 44 |
    • 45 | ))} 46 |
47 | 48 | 49 |
50 | ); 51 | }; 52 | 53 | export default Clients; 54 | -------------------------------------------------------------------------------- /src/components/ContactDetails.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FadeIn from "./FadeIn"; 3 | import Offices from "./Offices"; 4 | import Border from "./Border"; 5 | import Link from "next/link"; 6 | import SocialMedia from "./SocialMedia"; 7 | 8 | const ContactDetails = () => { 9 | return ( 10 | 11 |

12 | Our offices 13 |

14 |

15 | Prefer doing things in person? We don’t but we have to list our 16 | addresses here for legal reasons. 17 |

18 | 19 | 20 |

21 | Email us 22 |

23 |
24 | {[ 25 | ["Careers", "reactjsbd.com"], 26 | ["Press", "noorjsdivs@gmail.com"], 27 | ].map(([label, email]) => ( 28 |
29 |
{label}
30 |
31 | 35 | {email} 36 | 37 |
38 |
39 | ))} 40 |
41 | 42 | 43 |

44 | Follow us 45 |

46 | 47 | 48 | 49 | ); 50 | }; 51 | 52 | export default ContactDetails; 53 | -------------------------------------------------------------------------------- /src/components/ContactForm.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FadeIn from "./FadeIn"; 3 | import TextInput from "./TextInput"; 4 | import RadioInput from "./RadioInput"; 5 | import Button from "./Button"; 6 | 7 | const ContactForm = () => { 8 | return ( 9 | 10 |
11 |

12 | Work inquiries 13 |

14 |
15 | 16 | 22 | 27 | 28 | 29 |
30 |
31 | Budget 32 |
33 |
34 | 35 | 36 | 37 | 38 |
39 |
40 |
41 | 44 |
45 | 46 | ); 47 | }; 48 | 49 | export default ContactForm; 50 | -------------------------------------------------------------------------------- /src/components/ContactSection.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Container from "./Container"; 3 | import FadeIn from "./FadeIn"; 4 | import Button from "./Button"; 5 | import Offices from "./Offices"; 6 | 7 | const ContactSection = () => { 8 | return ( 9 | 10 | 11 |
12 |

13 | Tell us about your project 14 |

15 |
16 | 19 |
20 |
21 |

22 | Our offices 23 |

24 | 28 |
29 |
30 | 31 | 32 | ); 33 | }; 34 | 35 | export default ContactSection; 36 | -------------------------------------------------------------------------------- /src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | 3 | const Container = ({ as: Component = "div", className, children }) => { 4 | return ( 5 | 6 |
{children}
7 | 8 | ); 9 | }; 10 | 11 | export default Container; 12 | -------------------------------------------------------------------------------- /src/components/Cultures.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SectionIntro from "./SectionIntro"; 3 | import Container from "./Container"; 4 | import { GridList, GridListItem } from "./GridList"; 5 | 6 | const Cultures = () => { 7 | return ( 8 |
9 | 14 |

15 | We are a group of like-minded people who share the same core values. 16 |

17 | 18 | 19 | 20 | 21 | Our team has been with us since the beginning because none of them 22 | are allowed to have LinkedIn profiles. 23 | 24 | 25 | We don’t care when our team works just as long as they are working 26 | every waking second. 27 | 28 | 29 | You never know what someone is going through at home and we make 30 | sure to never find out. 31 | 32 | 33 | 34 |
35 | ); 36 | }; 37 | 38 | export default Cultures; 39 | -------------------------------------------------------------------------------- /src/components/Deliver.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Section from "./Section"; 3 | import imageMeeting from "@/images/meeting.jpg"; 4 | import List, { ListItem } from "./List"; 5 | 6 | const Deliver = () => { 7 | return ( 8 |
9 |
10 |

11 | About halfway through the Build phase, we push each project out by 6 12 | weeks due to a change in{" "} 13 | 14 | requirements 15 | 16 | . This allows us to increase the budget a final time before launch. 17 |

18 |

19 | Despite largely using pre-built components, most of the{" "} 20 | progress{" "} 21 | on each project takes place in the final 24 hours. The development 22 | time allocated to each client is actually spent making augmented 23 | reality demos that go viral on Twitter. 24 |

25 |

26 | We ensure that the main pages of the site are{" "} 27 | 28 | fully functional 29 | {" "} 30 | at launch — the auxiliary pages will, of course, be lorem ipusm shells 31 | which get updated as part of our exorbitant{" "} 32 | 33 | maintenance 34 | {" "} 35 | retainer. 36 |

37 |
38 |

39 | Included in this phase 40 |

41 | 42 | 43 | Our projects always have 100% test coverage, which would be impressive 44 | if our tests weren’t as porous as a sieve. 45 | 46 | 47 | To ensure reliability we only use the best Digital Ocean droplets that 48 | $4 a month can buy. 49 | 50 | 51 | Because we hold the API keys for every critical service your business 52 | uses, you can expect a lifetime of support, and invoices, from us. 53 | 54 | 55 |
56 | ); 57 | }; 58 | 59 | export default Deliver; 60 | -------------------------------------------------------------------------------- /src/components/Discover.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Section from "./Section"; 3 | import imageWhiteboard from "@/images/whiteboard.jpg"; 4 | import { TagList, TagListItem } from "./TagList"; 5 | 6 | const Discover = () => { 7 | return ( 8 |
9 |
10 |

11 | We work closely with our clients to understand their{" "} 12 | needs and 13 | goals, embedding ourselves in their every day operations to understand 14 | what makes their business tick. 15 |

16 |

17 | Our team of private investigators shadow the company director’s for 18 | several weeks while our account managers focus on going through their 19 | trash. Our senior security experts then perform social engineering 20 | hacks to gain access to their{" "} 21 | business 22 | accounts — handing that information over to our forensic accounting 23 | team. 24 |

25 |

26 | Once the full audit is complete, we report back with a comprehensive 27 | plan and, 28 | more importantly, a budget. 29 |

30 |
31 |

32 | Included in this phase 33 |

34 | 35 | In-depth questionnaires 36 | Feasibility studies 37 | Blood samples 38 | Employee surveys 39 | Proofs-of-concept 40 | Forensic audit 41 | 42 |
43 | ); 44 | }; 45 | 46 | export default Discover; 47 | -------------------------------------------------------------------------------- /src/components/FadeIn.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { createContext, useContext } from "react"; 4 | import { motion, useReducedMotion } from "framer-motion"; 5 | const FadeInStaggerContext = createContext(false); 6 | 7 | const viewport = { once: true, margin: "0px 0px -200px" }; 8 | 9 | const FadeIn = (props) => { 10 | const shouldReduceMotion = useReducedMotion(); 11 | const isInStaggerGroup = useContext(FadeInStaggerContext); 12 | return ( 13 | 28 | ); 29 | }; 30 | 31 | export const FadeInStagger = ({ faster = false, ...props }) => { 32 | return ( 33 | 34 | 41 | 42 | ); 43 | }; 44 | 45 | export default FadeIn; 46 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Container from "./Container"; 3 | import FadeIn from "./FadeIn"; 4 | import FooterNavigation from "./FooterNavigation"; 5 | import Logo from "./Logo"; 6 | import Link from "next/link"; 7 | 8 | const ArrowIcon = (props) => { 9 | return ( 10 | 18 | ); 19 | }; 20 | 21 | const NewsletterForm = () => { 22 | return ( 23 |
24 |

25 | Sign up for our newsletter 26 |

27 |

28 | Subscribe to get the latest design news, articles, resources and 29 | inspiration. 30 |

31 |
32 | 39 |
40 | 47 |
48 |
49 |
50 | ); 51 | }; 52 | 53 | const Footer = () => { 54 | return ( 55 | 56 | 57 |
58 | 59 |
60 | 61 |
62 |
63 |
64 | 65 | 66 | Abdullah Agency 67 | 68 | 69 |

70 | © Abdullah Agency Inc. {new Date().getFullYear()} 71 |

72 |
73 | 74 | 75 | ); 76 | }; 77 | 78 | export default Footer; 79 | -------------------------------------------------------------------------------- /src/components/FooterNavigation.jsx: -------------------------------------------------------------------------------- 1 | import { navigation } from "@/constants"; 2 | import Link from "next/link"; 3 | 4 | const FooterNavigation = () => { 5 | return ( 6 | 29 | ); 30 | }; 31 | 32 | export default FooterNavigation; 33 | -------------------------------------------------------------------------------- /src/components/GridList.jsx: -------------------------------------------------------------------------------- 1 | import FadeIn, { FadeInStagger } from "./FadeIn"; 2 | import clsx from "clsx"; 3 | import Border from "./Border"; 4 | 5 | export function GridList({ className, children }) { 6 | return ( 7 | 8 |
    15 | {children} 16 |
17 | 18 | ); 19 | } 20 | 21 | export function GridListItem({ title, children, className, invert = false }) { 22 | return ( 23 |
  • 32 | 33 | 34 | 40 | {title}. 41 | {" "} 42 | {children} 43 | 44 | 45 |
    • 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /src/components/GridPattern.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useId, useRef, useState } from "react"; 4 | import { motion } from "framer-motion"; 5 | function Block({ x, y, ...props }) { 6 | return ( 7 | 12 | ); 13 | } 14 | 15 | const GridPattern = ({ yOffset = 0, interactive = false, ...props }) => { 16 | let id = useId(); 17 | let ref = useRef(); 18 | let currentBlock = useRef(); 19 | let counter = useRef(0); 20 | let [hoveredBlocks, setHoveredBlocks] = useState([]); 21 | let staticBlocks = [ 22 | [1, 1], 23 | [2, 2], 24 | [4, 3], 25 | [6, 2], 26 | [7, 4], 27 | [5, 5], 28 | ]; 29 | return ( 30 | 65 | ); 66 | }; 67 | 68 | export default GridPattern; 69 | -------------------------------------------------------------------------------- /src/components/List.jsx: -------------------------------------------------------------------------------- 1 | import FadeIn, { FadeInStagger } from "./FadeIn"; 2 | import Border from "./Border"; 3 | import clsx from "clsx"; 4 | 5 | const List = ({ className, children }) => { 6 | return ( 7 | 8 |
      9 | {children} 10 |
    11 |     12 | ); 13 | }; 14 | 15 | export const ListItem = ({ title, children }) => { 16 | return ( 17 |
  • 18 | 19 | 20 | {title && ( 21 | {`${title}. `} 22 | )} 23 | {children} 24 | 25 | 26 |
    • 27 | ); 28 | }; 29 | 30 | export default List; 31 | -------------------------------------------------------------------------------- /src/components/Logo.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import Link from "next/link"; 3 | 4 | const Logo = ({ invert, href, className, children, ...props }) => { 5 | className = clsx( 6 | className, 7 | "black", 8 | invert ? "text-white hover:text-blue-600" : "text-black hover:text-blue-600" 9 | ); 10 | const inner = {children}; 11 | if (href) { 12 | return ( 13 | 14 | {inner} 15 | 16 | ); 17 | } 18 | return ( 19 |

    26 | {inner} 27 |

    28 | ); 29 | }; 30 | 31 | export default Logo; 32 | -------------------------------------------------------------------------------- /src/components/Offices.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | 3 | function Office({ name, children, invert = false }) { 4 | return ( 5 |
    11 | 12 | {name} 13 | 14 |
    15 | {children} 16 |
    17 | ); 18 | } 19 | 20 | const Offices = ({ invert = false, ...props }) => { 21 | return ( 22 |
      23 |
    • 24 | 25 | on bay mark 26 |
      27 | Newtown city of Las Vegas 28 |       29 |
      • 30 |
    • 31 | 32 | 13 long Street 33 |
      34 | Downtown, Allyway 35 |       36 |
      • 37 |
    38 | ); 39 | }; 40 | 41 | export default Offices; 42 | -------------------------------------------------------------------------------- /src/components/PageIntro.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Container from "./Container"; 3 | import FadeIn from "./FadeIn"; 4 | import clsx from "clsx"; 5 | 6 | const PageIntro = ({ eyebrow, title, children, centered = false }) => { 7 | return ( 8 | 11 | 12 |

    13 | 14 | {eyebrow} 15 | 16 | - 17 | 23 | {title} 24 | 25 |

    26 |
    32 | {children} 33 |
    34 |     35 |     36 | ); 37 | }; 38 | 39 | export default PageIntro; 40 | -------------------------------------------------------------------------------- /src/components/RadioInput.jsx: -------------------------------------------------------------------------------- 1 | const RadioInput = ({ label, ...props }) => { 2 | return ( 3 | 11 | ); 12 | }; 13 | 14 | export default RadioInput; 15 | -------------------------------------------------------------------------------- /src/components/RootLayout.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { usePathname } from "next/navigation"; 3 | import { useEffect, useId, useRef, useState } from "react"; 4 | import { motion, MotionConfig, useReducedMotion } from "framer-motion"; 5 | import Container from "./Container"; 6 | import Link from "next/link"; 7 | import Logo from "./Logo"; 8 | import { HiMenuAlt4 } from "react-icons/hi"; 9 | import { IoMdClose } from "react-icons/io"; 10 | import Button from "./Button"; 11 | import clsx from "clsx"; 12 | import Offices from "./Offices"; 13 | import SocialMedia from "./SocialMedia"; 14 | import Footer from "./Footer"; 15 | 16 | const Header = ({ 17 | panelId, 18 | invert = false, 19 | icon: Icon, 20 | expanded, 21 | onToggle, 22 | toggleRef, 23 | }) => { 24 | // Container 25 | return ( 26 | 27 |
    28 | {/* Logo */} 29 | 30 | Abdullah Agency 31 | 32 |
    33 | 36 | 57 |
    58 |
    59 |     60 | ); 61 | }; 62 | const NavigationRow = ({ children }) => { 63 | return ( 64 |
    65 | 66 |
    {children}
    67 |     68 |
    69 | ); 70 | }; 71 | 72 | const NavigationItem = ({ href, children }) => { 73 | return ( 74 | 78 | {children} 79 | 80 | 81 | ); 82 | }; 83 | 84 | const Navigation = () => { 85 | return ( 86 | 96 | ); 97 | }; 98 | 99 | const RootLayoutInner = ({ children }) => { 100 | const panelId = useId(); 101 | const [expanded, setExpanded] = useState(false); 102 | const openRef = useRef(); 103 | const closeRef = useRef(); 104 | const navRef = useRef(); 105 | const shouldReduceMotion = useReducedMotion(); 106 | useEffect(() => { 107 | function onClick(event) { 108 | if (event.target.closest("a")?.href === window.location.href) { 109 | setExpanded(false); 110 | } 111 | } 112 | window.addEventListener("click", onClick); 113 | 114 | return () => { 115 | window.removeEventListener("click", onClick); 116 | }; 117 | }, []); 118 | return ( 119 | 120 |
    121 |
    126 | {/* Header */} 127 |
    { 133 | setExpanded((expanded) => !expanded); 134 | window.setTimeout(() => 135 | closeRef.current?.focus({ preventScroll: true }) 136 | ); 137 | }} 138 | /> 139 |
    140 | 148 | 149 |
    150 |
    { 157 | setExpanded((expanded) => !expanded); 158 | window.setTimeout(() => 159 | openRef.current?.focus({ preventScroll: true }) 160 | ); 161 | }} 162 | /> 163 |
    164 | {/* Navigation */} 165 | 166 |
    167 | 168 |
    169 |
    170 |

    171 | Our offices 172 |

    173 | 177 |
    178 |
    179 |

    180 | Follow us 181 |

    182 | 183 |
    184 |
    185 |     186 |
    187 |     188 |     189 |
    190 | 195 | 199 |
    {children}
    200 | {/* Footer */} 201 |